Downloads, Dokumentation

home | p5.js

Setting

  1. Lädt das Framework p5.min.js runter und verknüpft es in euerm HTML-Head.
  2. Erstellt ein eigenes Javascript-File – z.B: mit dem Namen sketch.js und verknüpft es nach dem dem Framework.
<!-- index.html -->
<script src="p5/p5.min.js"></script>
<script src="sketch.js"></script>

… oder verwendet einfach meine Vorlage hier 😎:

p5-vorlage 2021.zip

Der Sketch

Der Name Sketch hat sich etabliert für Programme in Processing oder P5. Ein Sketch sieht im Wesentlichen so aus, wobei mousePressed() optional ist. Solche «Events» gibt es noch mehr.

// sketch.js

function setup() {
  createCanvas(500, 500);
	// mehr Stoff
}
function draw() {
	// Stoff für den endlosen Loop
}
function mousePressed() {
	// optionaler Stoff
}

Der HTML-Body kann leer sein. Das Canvas-Element wird von p5 erstellt und in die Mitte platziert.

Ein paar Basics für den Draw-Loop:

fill(150,150,150);   // RGB
noFill();
strokeWeight(4);     // Pixel
stroke(150,150,150); // RGB      
noStroke();

ellipse(_,_,_,_); // mit X, Y, B, H
line(_,_,_,_);    // mit Start X, Start Y, Ende X, Ende Y
rect(_,_,_,_);    // mit X, Y, B, H

Zufallswerte

Können überall eingesetzt werden, wo Zahlen gebraucht werden. Folgendes Muster füllt eine Form in jedem Loop-Durchlauf mit einem anderen RGB-Wert aus je 0 Rot und 0 Grün und einer zufälligen Zahl zwischen 100 und 200 für den Blauviolet-Kanal.

fill( 0, 0, **random(100,200)** );

Fertige Variablen nutzen

Bei p5 an Bord sind ein paar «Fertigvariablen». Fertig in dem Sinne, als deren Namen schon stehen und was für Werte sie enthalten. Hier die 4 wichtigsten für den Anfang: