Creu sbectrwm o sgwariau lliw mewn Prosesu (rhan 1)

Cyflwyniad

Yn y gweithgaredd codio hwn, byddwn yn creu cannoedd o betryalau a fydd yn dangos sbectrwm o liw. Yn rhan 1 (y rhan yma) byddwn yn creu'r cod sylfaenol. Byddwn yn defnyddio'r llyfrgell Prosesu, a'r model lliw arlliw disgleirdeb (Hue Saturation Brightness - HSB). Mae'r gweithgaredd hwn 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 Codio,
2. Y gweithgaredd i wneud braslun sydyn cyn i chi godio, a
3. Arlliw Disgleirdeb Dirlawnder yn gyntaf.

Cam 1. Gynllunio'r olygfa

Mae'r gweledigaeth yw creu sblash o betryalau lliw, gan ddechrau gyda choch ar yr ochr chwith, ac yn diweddu mewn porffor ar y dde.

Y cam cyntaf yw cynllunio'r olygfa. Bydd hyn yn rhoi syniad da i chi o'r hyn rydych chi'n mynd i'w greu.

1. Argraffwch y Daflen Meddwl Gritigol, a chael beiro ddu a rhai pennau neu bensiliau lliw.
2. Meddyliwch am y dasg, a dechreuwch ddychmygu sut y byddwch chi'n cwblhau'r paneli.

Nawr cwblhewch y paneli. Cofiwch gwblhau'r paneli yn y drefn a roddir 1 i 5.

Tip Defnyddiol

Argraffwch sawl Daflen Meddwl Gritigol i gael rhai sbâr.

1. Ym mhanel (1) crynhowch eich tasg yn eich geiriau eich hun
2. Brasluniwch eich syniadau, a chofiwch ychwanegu labeli.
3. Ysgrifennwch brif gydrannau'r dasg. E.e., bydd angen rhai petryalau, y model lliw HSB, a pheth gwerth ar hap i blotio'r petryalau.
4. Ysgrifennwch y prif gamau. Sut i ddechrau, symud ymlaen o un cam i'r llall, ac yna dod i ben.
5. Yn olaf, meddyliwch beth sydd angen i chi ei wneud nawr. Er enghraifft, edrychwch ar y model HSB.

Dyma fy enghraifft i.

Cam 2. Gosod y ffenestr, y model lliw a'r newidynnau

Gosod y ffenestr arlunio. Agorwch Prosesu, a gosod y maint i 800 wrth 540 a'r cefndir i wyn, fel a ganlyn:

size(800,540);
background(255,255,255);

Nawr mae angen i ni ddewis y model lliw i'w ddefnyddio. Yn y gweithgaredd yma mae'n llawer haws defnyddio'r Arlliw Dirlawnder a Disgleirdeb (model HSB).

Mewn Prosesu, rydym yn newid y model lliw gyda'r colorMode. Mae'r dull yma yn ein galluogi i ddiffinio Coch Gwyrdd Glas (RGB) neu Arlliw Dirlawnder Disgleirdeb lliw (HSB). Gallwn hefyd ddewis y gwerthoedd ar gyfer pob ystod o liw. Mae dwy brif ffordd o ddefnyddio'r dull yma, y cyntaf yw diffinio dau baramedr yn unig:

ColorMode(mode, max);

• mode sy'n penderfynu a ydych yn defnyddio RGB (coch gwyrdd glas) neu HSB (arlliw, dirlawnder, disgleirdeb).
• max sy'n gosod yr ystod o'r holl elfennau lliw.

Yr ail yw dewis llawer mwy o baramedrau, er mwyn gallu newid yn unigol (dyweder) yr ystodau ar gyfer Coch, Gwyrdd a Glas, neu ddirlawnder arlliw a disgleirdeb, ar wahân.

ColorMode(mode, max1, max2, max3, maxA);

• mode, fel o'r blaen yn penderfynu os ydych yn defnyddio RGB neu HSB.
• max1 gyda modd RGB yn esbonio'r ystod ar gyfer y gwerthoedd Coch. Pan fydd y modd yn HSB, mae max1 yn disgrifio ystod y gwerthoedd arlliw (yn aml mae hyn yn 360, ond gall gwerthoedd eraill fod yn addas).
• max2 sy'n gosod yr amrediad ar gyfer naill ai Coch neu Ddirlawnder yn dibynnu ar y modd.
• max3 sy'n gosod yr amrediad ar gyfer Glas neu Ddisgleirdeb yn dibynnu ar y modd.
• maxA sy'n darparu'r ystod ar gyfer didreiddedd y lliw; gelwir hyn yn werth alffa'r lliw. Yn aml, mae'r paramedr alpha yn rhif sy'n cael ei osod rhwng 0.0 (hollol dryloyw) i 1.0 (hollol anhryloyw).

Yn ein hachos ni, mae angen i ni osod y mode i HSB, a gosod gwerthoedd ar gyfer max1, max2, max3 a maxA.

Gallwn osod max1 i 360 (oherwydd ei fod yn draddodiadol amrywio'r arlliw o 0 i 360, o'r olwyn liw), ond – i'n pwrpas ni – efallai y bydd gwerthoedd mwy cyfleus i'w osod i! Efallai y byddwn cystal â chyfateb hyd y ffenestr i faint o liwiau. Drwy ei osod fel hyn, nid oes angen i ni gyfrifo pa mor bell ar draws yr ydym, oherwydd mae'r pellter yr un fath â'r lliw y byddem yn ei ddyrannu! Rydym yn gosod y gwerthoedd eraill (max2, max3, maxA) i gyd i 100, fel eu bod yn amrywio rhwng 0 a 100.

colorMode(HSB,800,100,100,100);

Dim ond i nodi, pan fyddwch chi'n dewis y modd lliw, bydd yn aros gyda'r fanyleb honno nes i chi ei newid yn ôl. I'w newid yn ôl i RGB, bydd rhaid ei osod yn ôl i'r ystodau 255 arferol, colorMode(RGB, 255, 255, 255).

Cam 3. Creu llawer o betryalau, defnyddio tra ddolen

Mae'n hawdd plotio un petryal. Er enghraifft, i blotio petryal o (0, 50) gyda lled ac uchder o 10, rydym yn ysgrifennu RECT (0, 50, 10, 10). Ond rydym eisiau llawer ar draws y dudalen. Gallwn ddefnyddio tra ddolen i gyflawni hyn. Mae'r tra ddolen yn parhau i wneud y dasg, tra bod y prawf yn wir.

Gadewch i ni ddechrau llunio petryalau coch ar draws y dudalen.

Top Tip.

lled a uchder (mewn prosesu) yn dal lled ac uchder y dudalen!

Cychwyn. Rydym angen newidyn i ddal y safle x presennol, ac i roi rhywbeth rydym yn ei ddefnyddio yn ein prawf cyflwr. Gadewch i ni ei alw'n myX, a'i osod i 0 (ochr chwith y dudalen).

Cyflwr. Mae angen i ni brofi os ydym wedi cyrraedd y pwynt mwyaf dde ar y dudalen. Gallwn brofi os yw'r gwerth x yn llai na'r lled. Felly rydym yn ysgrifennu (myX<width).

Gwneud y dasg. Mae angen i ni wneud tri pheth: gosod y lliw, llunio'r petryal, a chynyddu'r cownter myX felly rydym yn paratoi ar gyfer y prawf tra ddolen.

• Gan ein bod yn defnyddio HSB gyda'r amrediad arlliwi ei osod i 800, gyda lled y dudalen yr un maint, gallwn ddefnyddio'r myX ar gyfer safle a lliw. Rydym yn ysgrifennu:fill(myX,100,100);
• Nesaf, gallwn lunio'r petryal, rect(myX,50,10,10); Am rŵan, cawn osod y petryal yn y = 50, a gyda main o 10 × 10.
• Yn olaf, mae angen symud y lleoliad ymlaen (fel y gallwn ei phrofi y tro nesaf y caiff y ddolen ei chyflwyno). myX=myX+15; Rydym yn defnyddio 15 yma am ei fod ychydig yn fwy na lled y petryal.

// Rainbow of squares across page
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,50,10,10);
  myX = myX + 15;
}

Tip Defnyddiol

Mae hwn yn egwyddor codio dda: (a) dechreuwch gyda chod syml, (b) cael i weithio, ac (c) ychwanegu ato.

Step 4. Create random rectangles

Nawr ein bod wedi cwblhau'r cod sylfaenol, mae angen i ni nawr newid y gwerth y y petryalau. Byddwn yn gwneud hyn mewn tri cham.

Yn gyntaf, mae angen i ni newid llinell 9 (uchod) i newid sut caiff y petryalau eu plotio. Rydym yn gwneud gwerth y ar gyfer y petryal yn werth ar hap rhwng 0 ac uchder.

Yn ail, dylem wneud y petryalau ychydig yn fwy, gadewch i ni eu cael yn 20 × 20.

rect(myX,random(height),20,20);

Yn drydydd, rydym yn newid y cynnydd (llinell 10). Mae angen i ni gael llawer mwy o sgwariau. Yn hytrach nag ychwanegu 15, gadewch i ni ychwanegu rhywbeth llawer llai. Gadewch i ni roi cynnig ar 1, neu hyd yn oed 0.5. Gallwn hefyd fyrhau'r gorchymyn myX = myX + 0.5; i'r fersiwn byr o myX += 0.5;

myX += 1;

Mae hyn bellach yn rhoi set o betryalau i ni ar draws y dudalen, sydd wedi eu lleoli ar hap (yn y y), ac mae'r petryalau yn dangos y sbectrwm lliw.

//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 y rhan olaf yw cadw'r fersiwn yma. Yn rhan 2 byddwn yn ymestyn y gweithgaredd. Ewch i File>Save, a chadwch y sgetsh. Enwch ef (rhywbeth fel) sketch_rainbowRects.

Eich tro chi

Nawr gallwch roi cynnig ar wahanol werthoedd a gwahanol leoliadau.

• Newidiwch werth cynyddiad myX. Er enghraifft, ei newid i 0.2, neu 1.
• Ceisiwch wneud iddo lunio o fewn ystod ganol (rhwng, dyweder, 100 a 450).

• Ceisiwch newid yr amrediad lliw fel ei fod yn ymledu o goch i wyrdd dros y dudalen.