Creu sbectrwm o sgwariau lliw mewn Prosesu (rhan 2)

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

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;
}

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;
}

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;
}

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:

• 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.

• Cyfnewid y petryalau â chylchoedd. Mewn Prosesu gallwn greu cylchoedd drwy ddefnyddio'r dull ellipse().

• 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.