Categories
Lliwiau Java Mae prosesu Prosiect Enfys

Creu sbectrwm o sgwariau lliw mewn Prosesu (rhan 2)

Dysgwch sut i ddefnyddio'r model HSB, a phlotio cannoedd o sgwariau lliw gydag effeithiau gwahanol.

Dyma ran 2, ac rydym yn parhau â'r gweithgaredd codio o rhan 1, a nawr yn amrywio maint y petryalau a'u tryloywder.

Spectrum of coloured squares, with different sizes and transparency.
Sbectrwm o sgwariau lliw, gyda meintiau a thryloywder gwahanol.

Yn y gweithgaredd codio hwn, rydym yn ymestyn y cod o rhan 1 a chreu cannoedd o betryalau a fydd yn dangos sbectrwm o liw, gyda phob petryal yn dangos amrywiaeth o effeithiau, fel newidiadau lliw neu dryloywder. Rydym yn defnyddio'r llyfrgell Prosesu, a model arlliw dirlawnder disgleirdeb (HSB). Mae'r gweithgaredd yma yn dilyn o weithgareddau blaenorol ac rwy'n awgrymu (os nad ydych eisoes wedi) eich bod yn dilyn y tri gweithgaredd canlynol yn gyntaf: 

  1. Gosod yr amgylchedd rhaglennu
  2. Y gweithgaredd i wneud braslun sydyn cyn i chi godio, a 
  3. Arlliw Disgleirdeb Dirlawnder yn gyntaf.
  4. Creu sbectrwm o sgwariau lliw mewn Prosesu (rhan 1)

Cam 1. Ailadrodd, a chael yr hanfodion yn gweithio

Llwythwch Prosesu ac agor y gweithgaredd petryalau a arbedwyd (rhan 1). Gwnewch yn siŵr eich bod wedi cyrraedd mor bell â hyn.

Yn rhan 1, wnaethom blotio petryalau tra bod y newidyn myX yn llai na'r lled. Wnaethom gynyddu'r newidyn myX bob tro yr aethon o amgylch y ddolen, a newid y lliw yn dibynnu ar y gwerth myX. Gwnaethom ddiffinio'r safle y yn ôl swm ar hap (rhwng 0 ac uchder). Mae hyn yn rhoi sgwariau coch ar y chwith a'r rhai porffor ar y dde.

//Rectangles coloured by the spectrum
size(800,540);
background(255,255,255);
colorMode(HSB,800,100,100,100);
float myX=0;

while(myX<width){
  fill(myX,100,100);
  rect(myX,random(height),20,20);
  myX += 0.5;
}
Spectrum of coloured rectangles, with random Y

Nawr, rydym yn ymestyn y Cod mewn sawl ffordd.

Step 2. Center and adapt the size of the rectangles

Rydym yn gyntaf yn canoli'r petryalau. Ar hyn o bryd, caiff y petryalau eu plotio mewn safleoedd a ddiffinnir gan y gornel chwith uchaf. Defnyddiwn rectMode( mode ) i osod sut yr ydym yn diffinio lleoliad y petryalau wedi'u plotio. Gall y modd fod naill ai'n CORNER, CORNERS, CENTER, neu RADIUS. Gweler y wefan brosesu am ddisgrifiad hir o bob lleoliad ar gyfer rectMode. Y rhagosodiad rectMode yw CORNER, byddwn yn defnyddio CENTER i roi'r safle x,y yng nghanol y petryal.

rectMode(CENTER);

Gadewch i ni ailedrych ar y newidynnau x ac y. Yn gynharach, wnaethom ddefnyddio myX, a gosodwch y gwerth y pan roeddwn ei hangen. Gadewch i ni yn awr ddiffinio myY fel newidyn:

float myY = 0;

a gosod hwn i werth ar hap bob tro y byddwn yn mynd o amgylch y ddolen.

myY = random(height);

Nawr, gadewch i ni newid maint y petryalau bob tro y byddwn yn mynd rownd y tra ddolen. I gyflawni'r dasg hon, gadewch i ni feddwl am yr hyn rydym ei eisiau:

  1. Rydym angen defnyddio gwerth ar hap i newid maint y sgwariau.
  2. Rydym eisiau cael sgwariau. Felly bydd angen i ni ddiffinio newidyn i ddal y gwerth fel bod lled ac uchder y petryal yr un fath.
  3. Nid ydym eisiau sgwariau bach iawn, felly rydym angen maint uchafswm.

Gadewch i ni nawr osod ychydig mwy o newidynnau. Rydym angen newidyn ar gyfer gwerth isafswm lled y petryal (gadewch i ni osod hyn yn gychwynnol i 1), newidyn arall i osod y maint uchafswm (gadewch i ni osod hwn i 80), ac un terfynol i ddal y maint presennol (yn gyntaf 0).

float myRectSizeMin = 1;
float myRectSizeMax = 80;
float myRectSize    = 0;

Bob tro y byddwn yn mynd o amgylch y tra ddolen, mae angen i ni ddiweddaru'r myRectSize, gyda gwerth ar hap rhwng y gwerth isafswm ac uchafswm. Gallwn gyflawni hyn fel a ganlyn:

myRectSize = random(myRectSizeMin, myRectSizeMax);

Sylwch (gyda'r set bresennol o newidynnau) bod hwn nawr yn rhoi rhif ar hap i ni rhwng 1 hyd at (ac nid yw'n cynnwys) 80. I grynhoi hyd yma, mae gennym y cod canlynol:

//Rectangles random sized, and coloured by the spectrum
size(800,540);
background(255,255,255);
colorMode(HSB,800,100,100,100);
rectMode(CENTER);
float myX=0;
float myY=0;
float mySizeAdapter=0;
float myRectSizeMin = 1;
float myRectSizeMax = 80;
float myRectSize    = 0;

while(myX<width){
  myRectSize = random(myRectSizeMin, myRectSizeMax);
  myY = random(height);
  fill(myX,100,100);
  rect(myX,myY,myRectSize,myRectSize);
  myX += 3;
}
Petryalau gyda meintiau ar hap, ac wedi'u lliwio gan y sbectrwm

Cam 3. Addasu didreiddedd

Rydym eisoes wedi gosod y modd lliw HSB i fod yn colorMode(HSB,800,100,100,100); cofiwch fod y gosodiad hwn yn rhoi i ni'r amrediad Arlliw rhwng 0 ac 800, gyda Dirlawnder, Disgleirdeb a Didreiddedd rhwng 0 a 100.

Rydym angen diffinio newidyn i ddal y didreiddedd, gadewch i ni ddiffinio'r canlynol:

float myOpacity = 0;

Beth am osod y didreiddedd rhwng 20 a 80. Dydyn ni ddim eisiau iddo fod yn rhy dryloyw, fel arall ni fyddwn yn gallu ei weld. Dydyn ni ddim eisiau iddo fod yn rhy anhryloyw oherwydd bydd yn cynnwys petryalau eraill. Bob tro o amgylch y ddolen rydym angen i ni alw'r canlynol:

myOpacity  = random(20,80);

A hefyd gosod y llenwad i newid y didreiddedd, fel a ganlyn:

fill(myX,100,100,myOpacity);

Mae hyn bellach yn rhoi cod i ni gyda set o newidynnau, a tra ddolen sydd yn dechrau gwneud llawer o orchmynion.

//random sized rectangles coloured by the spectrum, with random opacity (alpha value)
size(800,540);
background(255,255,255);
colorMode(HSB,800,100,100,100);
rectMode(CENTER);
float myX=0;
float myY=0;
float mySizeAdapter = 0;
float myRectSizeMin = 1;
float myRectSizeMax = 80;
float myRectSize    = 0;
float myOpacity     = 0;

while(myX<width){
  myRectSize = random(myRectSizeMin, myRectSizeMax);
  myOpacity  = random(20,80);
  myY        = random(height);
  fill(myX,100,100,myOpacity);
  rect(myX,myY,myRectSize,myRectSize);
  myX += 3;
}
Squares example sized and with change in opacity
Enghraifft maint sgwariau gwahanol gyda newid mewn didreiddedd

Cam 4. Eich tro chi

Bellach, mae gennym ddarlun wedi'i gwblhau. Pan fyddwn yn ei redeg, oherwydd bod gennym newidynnau ar hap, byddwn yn creu darlun gwahanol. Bydd eich un chi'n wahanol. Ond mae sawl agwedd y gallwch chi eu newid, neu eu haddasu. Ceisiwch y canlynol:

Tip Defnyddiol

I newid y Dirlawnder a hyd yn oed Disgleirdeb gallwch ddefnyddio'r ffwythiant 'random ()'. E.e., random(0,100)

  • Ceisiwch newid y gwerthoedd amrywiol. Er enghraifft, (1) arddangos llawer mwy o betryalau, (2) newid ystod y didreiddedd, (3) newid yr ystod o feintiau petryal (e.e., gwneud rhai yn fawr iawn!)
  • Ceisiwch newid y Disgleirdeb ac y Dirlawnder o'r lliwiau hefyd.
Rainbow rectangles, with hue, saturation, brightness and opacity randomised.
Petryalau enfys, gydag arlliw, dirlawnder, disgleirdeb a didreiddedd ar hap.

Top Tip.

elips() yn defnyddio'r un paramedrau â rect().

  • Cyfnewid y petryalau â chylchoedd. Mewn Prosesu gallwn greu cylchoedd drwy ddefnyddio'r dull ellipse().
Rainbow circles, sized and transparent.
Cylchoedd enfys, eu maint a tryloyw.
  • Ceisiwch blotio rhanbarth canolig gydag ymddangosiad gwahanol i'r rhai allanol. E.e. newid y 'stroke' a thryloywder y rhai mewnol o'i gymharu â'r rhai allanol.

Tip Defnyddiol

Byddwch angen diffinio'r rhanbarth mewnol drwy ddefnyddio datganiad if a llawer o'r ffwythiant 'AC'.

Rainbow rectangles, which are plotted differently inside a defined region.
Petryalau enfys, sy'n cael eu plotio'n wahanol y tu mewn i ranbarth diffiniedig.

By Jonathan

Mae Jonathan yn gyson yn dylunio pethau, yn addysgu pobl, ac yn dysgu drwy'r amser. Mae'n athro delweddu yn yr Ysgol Cyfrifiadureg a Pheirianneg Electronig, Prifysgol Bangor, y DU. Mae'n arwain y grwpiau Delweddu, Data, Modelu a Graffeg (VDMG), yn arwain prosiect enfys ac mae'n un o awduron y llyfr Springer "Five Design-sheets ", dull dylunio braslunio.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.