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 hexcode
fill('#222222'); //6-stelliger hex
color(0, 0, 255); //p5 farbobjekt

math

+ - / *

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()

attributes

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);

if/then Logik

if(bedingung){
  //programmcode
}

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