Programmstruktur

//wird einmal bei Programmstart ausgeführt
function setup(){
  createCanvas(800,600);
}

//läuft fortwährend
function draw(){
  //Ausgabeschleife
}

Systemvariablen

windowWidth / windowHeight
//Breite / Höhe des fensters

width / height
//Breite / Höhe des canvas

mouseX / mouseY
//aktuelle horizontale / vertikale Mausposition

Konsolenausgabe

print();
//Daten in der Konsole ausgeben

Farbe

fill(120); //grau: 0-255
fill(100,125,255); //r, g, b: 0-255
fill(255, 0, 0, 50); //r, g, b, alpha
fill('red'); //Farbbezeichnung
fill('#ccc'); //3-stelliger Farbcode in Hexadecimal
fill('#222222'); //6-stelliger Farbcode in Hexadecimal
color(0, 0, 255); //p5 Farbobjekt

Mathe

+ - / *

random(minimum,maximum);

map(wert, in1, in2, out1, out2);
//transformiert einen Wert von der Eingabeskala in die Ausgabeskala

2D-Formen

line(x1, y1, x2, y2);

ellipse(x, y, breite, höhe);

rect(x, y, breite, höhe); //Rechteck

//Bogen
arc(x, y, breite, höhe, start, stop);

beginShape();
  vertex(x1, y1);
  vertex(x2, y2);
  vertex(x3, y3);
endShape(CLOSE);

text("Begriff", x, y, breite, höhe);

• Rastersystem

• line()

• ellipse()

• rect()

• arc()

• vertex()

Attribute

background(Farbe);
//Hintergrundfarbe setzen

fill(Farbe);
//Füllfarbe setzen

noFill();
//keine Füllfarbe

stroke(farbe);
//Strichfarbe setzen

strokeWeight(stärke);
//Strichstärke einstellen

noStroke();
//kein Strich zeichnen

ellipseMode(Modus);
rectMode(Modus);
//CENTER oder CORNER

textSize(pixels);

wenn/dann Logik

if(Bedingung){
  //Programmcode
}

=== //gleich wie
!== //ungleich
>  //grösser als
<  //kleiner als
>= //grösser oder gleich wie
<= //kleiner oder gleich wie