programma structuur

//wordt eenmaal uitgevoerd bij start programma
function setup(){
  createCanvas(800,600);
}

//draait continu na setup()
function draw(){
  //programmacode
}

systeemvariabelen

windowWidth / windowHeight
//breedte / hoogte van het venster

width / height
//breedte / hoogte van het canvas

mouseX / mouseY
//huidige horizontale / verticale muispositie

console uitvoer

print("tekst" + variabele);
//geef informatie weer in de console

kleur

fill(120); //grijs: 0-255
fill(100,125,255); //r, g, b: 0-255
fill(255, 0, 0, 50); //r, g, b, alpha
fill('red'); //kleur aanduiding
fill('#ccc'); //3-cijferige hex-code
fill('#222222'); //6-cijferige hex-code
color(0, 0, 255); //p5 kleurobject

wiskunde

+ - / *

random(minimum,maximum);

map(waarde, invoer-min, invoer-max, uitvoer-min, uitvoer-max);
//converteer een waarde van invoer naar uitvoer

2d-vormen

line(x1, y1, x2, y2);

ellipse(x, y, breedte, hoogte);

rect(x, y, breedte, hoogte);

arc(x, y, breedte, hoogte, start, stop);

beginShape();
  vertex(x1, y1);
  vertex(x2, y2);
  vertex(x3, y3);
  //voeg meer vertex() toe
endShape(CLOSE);

text("mijn tekst", x, y, breedte, hoogte);

• grid-systeem

• line()

• ellipse()

• rect()

• arc()

• vertex()

attributen

background(kleur);
//stel de achtergrondkleur in

fill(kleur);
//stel de vulkleur in

noFill();
//geen vulkleur

stroke(kleur);
//stel de lijnkleur in

strokeWeight(dikte);
//stel de lijndikte in

noStroke();
//geen lijn

ellipseMode(MODE);
rectMode(MODE);
//gebruik CENTER of CORNER

textSize(pixels);

als/dan logica

if(conditie){
  //programmacode
}

=== gelijk aan
!== niet gelijk
>  groter dan
<  kleiner dan
>= groter dan of gelijk
<= kleiner dan of gelijk