p5.js
Een spiekbrief
voor beginners!
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