Litir og einföld form

Uppbygging p5.js skriftu

Kóðinn í p5.js skriftu mun alltaf innihalda eftirfarandi atriði:

function setup() {}

Hér er verið að skilgreina hvað á að gerast þegar forritið er keyrt af stað. Þú getur hugsað um setup() fallið eins og græna fánann í scratch skriftunum okkar.

createCanvas(w,h);

Hér er sagt til um hvað skjárinn okkar verður stór. Ef þessa skipun vantar er enginn skjár til þess að teikna neitt á.

Þegar þessi kóði er keyrður, gerist sem sagt ekki mikið. Nema forritið býr til skjá sem er 150px á breidd og 220px á hæð. En þá erum við tilbúin að teikna á skjáinn. En hvað á að teikna?

Form og ferlar (Shapes)

Á reference síðu p5 má sjá hvaða skipanir eru í boði. "2D shapes" skipanirnar teikna mismunandi einföld form:

Til þess að gera ferla sem eru flóknari, þ.e. ekki bara hluti af hring með föstum radíus er hægt að nota kúrvu-föllin, eins og t.d. Bezier fallið.

Litir

Liti frá hvítum yfir í svart (greyscale) má velja með því að gefa eina tölu á bilinu frá 0 (svart) upp í 255 (hvítt). Ef þrjár tölur eru gefnar segja þær til um hversu mikið rautt, blátt og grænt er í litnum, þær upplýsingar kallast RGB gildi litar. Ef fjórða talan er gefin segir hún til um hversu gegnsær liturinn er. Eftirfarandi skipanir tengjast litum :

Hnitakerfið

Hnitakerfið í p5.js (og reyndar í flestöllum forritunartungumálum) snýr ekki alveg eins og við erum vön úr stærðfræðinni. Í scratch var hnitakerfið eins og í stærðfræði, punkturinn (0,0) var á miðjum skjánum og x hnitið hækkaði til hægri en y hnitið hækkaði eftir því sem ofar var komið.

Nú notum við hnitakerfi þar sem (0,0) punkturinn er uppi í vinstra horni skjásins. x hnitið hækkar ennþá til hægri, en y hnitið hækkar niður á við. Allir punktar með neikvæð hnit eru þess vegna fyrir utan skjáinn.

Lestu forritsbútinn hér að neðan áður en þú keyrir hann og reyndu að sjá fyrir þér hvar svarti, hvíti og rauði hringurinn munu birtast.

Færðu hringina til þangað til þér þykir þú skilja hvernig hnitakerfið virkar.

Athugasemdir

Til þess að gera kóðann okkar læsilegan og setja inn útskýringar notum við athugasemdir, eins og ver gert í forritinu hér að ofan. Allt sem kemur á eftir // í línu er ekki tekið sem forritunarskipun, heldur sem athugasemd frá forritaranum.

Kennsluvefir í p5

Hér eru góðar leiðbeiningar um hvernig má teikna form og nota liti: Drawing shapes, John Kuiphoff

Hér eru leiðbeiningar um fyrstu skref í p5 og dæmi um notkun á ellipse, rect og fleiri skipunum: First steps, creative coding, Allison Parrish

Á reference síðunni fyrir p5 má sjá lista yfir hvaða skipanir eru í boði og dæmi um notkun: p5 reference á p5.org.