Categories
Dechreuwr Lliwiau Java Mae prosesu Prosiect Enfys

Creu enfys mewn cod "Prosesu"

Yn y gweithgaredd hwn, byddwch yn creu enfys mewn cod gan ddefnyddio llyfr-braslunio ac iaith "Prosesu".

Yn y gweithgaredd hwn, byddwn yn creu enfys mewn cod gan ddefnyddio Prosesu. Mae prosesu yn "llyfr brasluniau meddalwedd hyblyg ac iaith ar gyfer dysgu sut i wneud cod o fewn cyd-destun y celfyddydau gweledol", gweler processing.org.

I wneud y gweithgaredd hwn

Processing sketch editor window.
  1. Dylai fod Prosesu eisoes wedi'i sefydlu, a bod yn gyfarwydd â pheth codio sylfaenol mewn llyfr braslunio Prosesu, a bod ffenestr y llyfr braslunio ar agor ac yn rhedeg. Rhoddir cyfarwyddiadau ar gyfer y gweithgaredd hwn yn y gweithgaredd: gosod yr amgylchedd codio.
  2. Dylech fod wedi paratoi braslun cyflym eisoes o'r olygfa a gynlluniwyd, gan ddefnyddio'r daflen meddwl gritigol, a'i chael wrth law.

Cam 1. Adolygiad cyflym o'n cynllun

Yn y gweithgaredd blaenorol, byddech wedi gwneud y cynllun gan ddefnyddio'r daflen meddwl gritigol (CTS). Bydd hyn yn rhoi pum cam i chi a fydd yn eich helpu i godio yn well. Dim ond i'ch atgoffa, dyma nhw:

  1. Y datganiad cryno o'r broblem. Yn ein hachos ni, hwn yw "codio enfys syml mewn Prosesu".
  2. Braslun o'r olygfa. Yn ein golygfa oedd gennym enfys, glaswellt sy'n gorchuddio rhan isaf yr enfys, a choeden syml gyda boncyff brown a dail gwyrdd.
  3. Rhestr o brif elfennau'r system. Yn ein hachos ni, gennym gyntefigion a priodoleddau. Y gyntefigion yw'r enfys, y glaswellt a'r goeden. A'r prif briodoleddau yw lliwiau'r enfys, ynghyd â'r boncyff, lliw'r ddeilen a lliw'r glaswellt.
  4. Y prif brosesau a'r algorithm dan sylw. Gan fod hwn yn olygfa syml, mae gennym dri cham: yn gyntaf llunio'r enfys, yna llunio'r glaswellt sy'n ymddangos o flaen yr enfys, ac yn olaf llunio'r goeden, sy'n cael ei roi ar ben y glaswellt.
  5. Rhestr derfynol o unrhyw bryderon neu faterion. Yn ein hachos ni, mae'r rhain yn cynnwys codio lliw RGB. Os ydych wedi anghofio lliwiau RGB, neu'n dymuno atgoffa eich hun, yna gallwch gymryd golwg ar y gweithgaredd Codio RGB eto.
Sketch of a rainbow, done in the Critical Thinking Sheet.
Daflen Meddwl Gritigol - ar gyfer yr olygfa enfys
Rainbow scene, mocked up in paper.

Hefyd, gadewch inni gofio'r enghraifft ymarferol a wnaethom. Yn yr enghraifft wnaethom dorri cylchoedd papur, a'u lliwio gyda lliwiau'r enfys. Fe'u gosodwyd ar ben ei gilydd. Nawr, byddwn yn defnyddio'r un syniad, ond nawr byddwn yn defnyddio cod. Byddwn yn gosod cylch ar ben cylch arall, i greu lliwiau'r enfys, gan osod cylch gwyn terfynol i gael y siâp arc. Rydym yn rhoi'r glaswellt ar ben i guddio hanner yr enfys. Yn olaf rydym yn gosod y goeden ar ben y glaswellt, i edrych fel bod y goeden yn y blaendir.

Cam 2. Gosod y cefndir a'r newidynnau

Y cam cyntaf i ysgrifennu'r cod, yw gosod maint y ffenestr a lliw i'r cefndir. Mae hyn fel dewis maint y papur, a lliw'r papur. Gadewch i ni osod ffenestr lydanu; bydd 600 wrth 400 yn addas i ni.

size(600,400);
background(255,255,255);

O'n Taflen Meddwl Gritigol, rydym yn gwybod beth fydd y priodoleddau: mae gennym liwiau gwahanol o'r enfys, lliw'r boncyff, glaswellt a lliwiau'r ddeilen. Byddwn yn eu diffinio drwy enwi newidynnau. Mewn cyfrifiadureg, mae newidyn yn ddarn o storfa. Mae'n dal gwerth y gellir ei adalw yn ddiweddarach yn y cod, a gellir ei ddiweddaru hefyd.

Tip Defnyddiol

Dewiswch enwau newidyn disgrifiadol. Mae 'trunkSize' yn well na defnyddio "t".

Mewn Prosesu, mae'r newidynnau yn cael eu teipio. Mae hyn yn golygu bod gwahanol gategorïau o newidyn. Er enghraifft, gall newidynnau o'r math cyfanrif dim ond dal rhifau cyfan fel 1, 2, 3, 4 ac ati, a ni allant ddal gwerthoedd ffracsiwn. Tra bod pwynt newidyn math anwadal yn gallu dal gwerth real, megis 0.5, 0.0021, neu -4.3333.

Mae Prosesu yn diffinio color math o ddata, i ddal lliwiau. Gallwn ddiffinio lliw, gadewch i ni ei alw'n wyrdd, drwy ysgrifennu'r cod canlynol: color green = color(0,255,0);

color colRed    = color(255,0,0);
color colOrange = color(255,127,0);
color colYellow = color(255,255,0);
color colGreen  = color(0,255,0);
color colBlue   = color(0,0,255);
color colIndigo = color(75,0,130);
color colViolet = color(148,0,211);
color colTrunk  = color(165,42,42);
color colGrass  = color(80,250,80);
color colLeaf   = color(80,150,80);
color colWhite  = color(255,255,255);

Cam 3. Llunio'r Enfys

Yn y Daflen Meddwl Gritigol, penderfynom fod tair rhan i'r gweithredu: llunio enfys, llunio glaswellt, llunio coeden. Beth am dynnu llun yr enfys yn gyntaf.

I greu'r enfys, gadewch i ni edrych eto ar yr enghraifft ymarferol, o'r gweithgaredd blaenorol. Gwelwn fod yr enfys wedi ei gwneud o sawl cylch wedi eu gosod un ar ben y llall, bob un ychydig yn llai o'r un blaenorol, ac yn diweddu gyda chylch gwyn.

Mae cylchoedd mewn Prosesu yn cael eu galw'n elips. Bydd elips gyda lled a thaldra cyfartal yn gylch. Mae elips yn cymryd pedwar gwerth; felly gosodwyd elips ar y safle (x,y) , gyda lled w ac uchder h, yn cael eu diffinio gan ellipse(x, y, w, h). Mae angen i ni osod ein cylch yn y traean cywir o'r sgrin, a thua hanner ffordd i fyny. Felly, gan ein bod eisoes yn gosod maint y sgrin yn 600 wrth 400, gwerth addas ar gyfer x fyddai 400, ac y byddai 200. Gadewch i ni ddiffinio dau newidyn x, ac y i gadw'r safleodd yma.

int x = 400;
int y = 200;

Mae lliw rhagosodedig elips yn wyn, felly mae angen i ni ei newid i'r lliw cywir. Gwnawn hyn drwy newid y fill o'r cyntefigion. Felly os ydyn ni'n ysgrifennu fill(colRed); i newid llenwad gwrthrych i goch.

Circle, red, created in Processing.
Elips coch, wedi'i leoli yn (400,200) gyda lled o 200 ac uchder o 200.

Maw llenwad yn gosod y gwerth lliw ar gyfer unrhyw siapiau sy'n defnyddio llenwad. Unwaith y gosodir lliw llenwad, bydd yn aros y lliw hwnnw nes ein bod yn ei newid. O ganlyniad, oherwydd bod angen dangos lliw gwahanol ar gyfer pob rhan o'r Enfys bydd angen i ni osod lliw llenwad, llunio elips, gosod lliw llenwad arall, cyn llunio elips arall, ac yn y blaen.

Hefyd, bydd angen i bob elips dilynol fod ychydig yn llai. Gadewch i ni ddiffinio'r cylch cyntaf i fod 200 o led, ac 200 o uchder. Yna gall cylchoedd dilynol fod 20 yn llai. Mae angen i ni hefyd ddiweddu drwy lunio cylchoedd gwyn, i gael yr effaith arc sydd ei angen arnom ar gyfer ein henfys.

Tip Defnyddiol

Mae'r term 'stroke' yn cael ei ddefnyddio gan lyfrgelloedd ac offer graffeg eraill, i newid amlinellau.

Yn rhagosodedig, mae gan bob un o'r elipsau linell ddu o'u hamgylch, gelwir hyn yn 'stroke'. Gallwch weld yn y llun uchod bod llinell ddu o amgylch pob cylch. Mewn Prosesu, gallwn newid lled y 'stroke' wrth newid gwerth strokeWeight , a'i liw werth newid y gwerth o 'stroke'Er enghraifft, bydd strokeWeight(10)yn diffinio siâp gyda llinell drwchus iawn o'i amgylch, a byddai 'stroke' (255) yn gwneud amlinell wen, tra bydd stroke(0,255,0)yn gwneud amlinell werdd. Mae'n debyg nad ydyn ni eisiau i'r 'stroke' ymddangos yn ein henfys ni, felly fe fyddwn ni'n tynnu'r amlinell drwy deipio: noStroke();

Yn olaf, mae angen inni orffen drwy lunio cylch gwyn, er mwyn cael yr effaith arc sydd ei hangen ar gyfer ein henfys.

noStroke();
fill(colRed);    
ellipse(x,y,200,200);
fill(colOrange); 
ellipse(x,y,180,180);
fill(colYellow);
ellipse(x,y, 160,160);
fill(colGreen);
ellipse(x,y,140,140);
fill(colBlue);
ellipse(x,y,120,120);
fill(colIndigo);
ellipse(x,y,100,100);
fill(colViolet); 
ellipse(x,y,80,80);
fill(colWhite);
ellipse(x,y,60,60);

Cam 4. Llunio'r glaswellt

Nawr rydym am lunio'r glaswellt. Bydd hyn yn ymddangos yn y blaendir, felly mae angen i ni ei dynnu ar ôl yr enfys. Gallwn dynnu'r glaswellt drwy osod petryal mawr ar ben popeth.

Rectangle in Processing, at (10,12) with a width of 30 and height 40.
Petryal, ar (10, 12) gyda lled o 30, ac uchder o 40

Mewn Prosesu, mae petryalau'n cael eu creu gyda'r ffwythiant rect. Mae'r ffwythiant rect safonol yn cymryd i mewn pedwar paramedr, cyfesurynnau x a y , a'i lled ag uchder. Felly, byddai rect(10,12,30,40) yn creu petryal bach, wedi'i leoli mewn cyfesurynnau (10, 12), gyda lled o 30 ac uchder 40.

Rydym angen petryal mawr sy'n gorchuddio hanner ein ffenest, ac sy'n gorchuddio hanner yr enfys. Gallwn gyflawni hyn drwy gychwyn y petryal yn 0,200 a mynd i'r lled ac uchder mwyaf y ffenestr, sef 600,400. Unwaith eto, mae angen i ni osod llenwad y petryal yn gyntaf i roi lliw'r glaswellt iddo.

Rainbow with grass.
Enfys gyda glaswellt
fill(colGrass);
rect(0,200,600,400);

Cam 5. Tynnwch lun o'r goeden

Yn olaf, rydym angen coeden. Gallwn dynnu'r goeden gydag un petryal brown, a dau gylch gwyrdd. Oherwydd y lluniwyd y rhain yn olaf, byddant yn ymddangos ar ben y glaswellt.

fill(colTrunk);
rect(100,170,20,150);
fill(colLeaf);
ellipse(110,180,100,100);
ellipse(110,140,80,80);
Rainbow scene with tree and grass, achieved in Processing.
Golygfa o'r enfys, gyda glaswellt ac un goeden.

Cam 6. Gweithgareddau ychwanegol

Efallai y byddwch yn hoffi addasu eich llun. Dyma rai awgrymiadau yr hoffech roi cynnig arnynt.

Rainbow scene with five trees.
Golygfa enfys gyda phump o goed.
  • Newidiwch liwiau'r enfys. Efallai gwneud yr enfys o liwiau llwyd.
  • Newid maint yr enfys, i'w wneud yn fawr iawn.
  • Ychwanegwch nifer o goed. Efallai ychwanegwch linell ddu o amgylch pob boncyff coeden.

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.

2 replies on “Create a rainbow in code”

Hello, that sounds like a really cool idea. You could have a try. I’d suggest doing a grey large circle (to make the crust), then a smaller red circle (for the tomato), followed by some smaller (dark red) random circles (for the pepperoni), and some smaller random rectangles (for the cheese). Fun. Thanks.

Leave a Reply to Jonathan Cancel 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.

cyCymraeg
en_GBEnglish (UK) cyCymraeg