Yhteenveto

p5.js-ohjelmassa luodaan ensin xy-koordinaatisto komennolla createCanvas(leveys,korkeus); , joka määrää ikkunan koon. Ikkunan koko määritellään aina setup-lohkossa, koska setup-lohko suoritetaan vain kerran silloin kun ohjelma käynnistetään.

Toinen peruskomento on background(lukuarvo); , joka tyhjentää taustan ja määrää ikkunan taustavärin. Jos lukuarvo on 0, niin ikkunan taustaväri on musta. Jos lukuarvo on 255, niin ikkunan taustaväri on valkoinen. Yleensä background(lukuarvo); komento laitetaan heti draw-lohkon alkuun, koska draw-lohko on ikuisessa silmukassa ja monessa ohjelmassa haluamme päivittää ikkunan uusilla arvoilla, jolloin ikkuna pitää tyhjentää vanhoista arvoista. Esimerkiksi perusohjelman runko, joka luo 400 x 350 ikkunan ja jonka taustaväri on valkoinen, on seuraava.

xy-koordinaatisto	P5.js-ohjelma
	function setup () { createCanvas(400,350); } function draw () { background(255); }

Käydään aluksi läpi p5.js-ohjelmoinnin perus grafiikka-komennot, sekä koordinaatiston luominen ja värikomennot.

Yhteenveto tunnilla käytävistä komennoista

Komento	Merkitys
function setup () { }	Funktio, joka suoritetaan vain kerran. Laita tähän ohjelman suorituksen aikana olevat pysyvät asetukset. Esimerkiksi laita tähän komento, joka määrittää ikkunan koon. Huomio: Processing-ohjelmassa käytetään function sanan tilalla void sanaa.
function draw () { }	Funktio, joka on ikuisessa silmukassa. Tätä voitaisiin nimittää pääohjelmaksi. Kirjoita tänne kaarisulkujen { } sisään kaikki ohjelman tarvitsemat komennot. Huomio: Processing-ohjelmassa käytetään function sanan tilalla void sanaa.
createCanvas(w,h);	Komento, joka määrää tulostusikkunan koon (w,h) pikseleinä, missä w = leveys ja h = korkeus. Huomio: Processsing-ohjelmoinnissa käytetään komentoa: size(w,h);
background(R,G,B);	Tyhjentää taustan ja värittää sen RGB-värillä, missä R = punaisen värin määrä, G = vihreän värin määrä, B = sinisen värin määrä. Pienin arvo on 0 ja suurin arvo on 255.
strokeWeight(koko);	Komennolla voidaan asettaa viivan paksuus tai pisteen koko pikseleinä.
stroke(R,G,B,A);	Komennolla voidaan asettaa viivan tai pisteen väri, missä R = punaisen värin määrä, G = vihreän värin määrä, B = sinisen värin määrä, A = alpha-arvo eli värin läpinäkyvyys arvo. Pienin arvo on 0 ja suurin arvo on 255.
fill(R,G,B,A);	Komennolla voidaan asettaa tekstin väri tai täyttökuvion väri, missä R = punaisen värin määrä, G = vihreän värin määrä, B = sinisen värin määrä, A = alpha-arvo eli värin läpinäkyvyys arvo. Pienin arvo on 0 ja suurin arvo on 255.
point(x,y);	Piirretään piste paikkaan (x,y)
noStroke();	Komento poistaa reunaviivan käytöstä.
noFill();	Komento poistaa täyttövärin käytöstä.
textSize(koko);	Asetetaan tekstin koko pikseleinä
text(”Tekstiä”, x, y);	Tulostetaan lainausmerkkien sisällä oleva teksti paikkaan (x,y). Tekstin aloituspiste on tekstin vasemmassa alareunassa.
line(x1,y1,x2,y2);	Piirtää viivan pisteiden (x1,y1) ja (x2,y2) välille.
triangle(x1,y1,x2,y2,x3,y3);	Piirtää kolmion pisteiden (x1,y1), (x2,y2) ja (x3,y3) välille.
quad(x1,y1,x2,y2,x3,y3,x4,y4);	Piirtää nelikulmion pisteiden (x1,y1), (x2,y2) ja (x3,y3) välille.

Kuinka p5.js-ohjelmointikielessä muodostettaisiin Scratch:iä vastaava xy-koordinaatisto. Se onnistuisi seuraavasti.

Scratch	P5.js-ohjelma
	function setup () {   createCanvas(480,360); // Ikkunan koko 480 x 360 } function draw () { background(255);  // Taustaväri valkoinen translate(width/2, height/2); // Origo ikkunan keskelle scale(1,-1);  // y-peilataan eli y-kasvaa ylöspäin }