Wat is p5.js?

• p5.js = een JavaScript-bibliotheek om tekeningen, animaties en interacties te maken.
• Draait in de browser (geen installatie), ideaal om al doende te leren.
• Twee kernfuncties: setup() (één keer) en draw() (herhaalt steeds).

Eerste sketch: setup + draw

Typ dit in sketch.js:

function setup() {
  createCanvas(220, 220); // maak een canvas van 220×220 pixels
  noLoop();               // teken slechts één keer (nu geen animatie)
}

function draw() {
background(25);         // vul het canvas met donkergrijs
}

• createCanvas(b, h) maakt het tekenvlak.
• background() kleurt het hele canvas per frame.

Hoe werken coördinaten?

• Linksboven is (0, 0).
• x neemt toe naar rechts, y naar beneden.
• Eenheid = pixels.

We plaatsen elke raketvorm met exacte x/y-waarden en afmetingen.

Kleuren: fill en stroke

• fill(r, g, b) zet de vulkleur (0–255).
• stroke(r, g, b) zet de lijndkleur; noStroke() verwijdert de omlijning.
• background() zet de canvasachtergrond.

Tekenvolgorde is belangrijk

• Wat later getekend wordt, komt bovenop eerdere vormen.
• Laagvolgorde: romp → neus → raam → vinnen → vlam → rook.

Vormensamenvatting

• rect(x, y, w, h) — rechthoek vanaf linkerbovenhoek
• triangle(x1, y1, x2, y2, x3, y3) — drie punten
• circle(x, y, d) — middelpunt x, y en diameter

• rect(x, y, w, h)
• triangle(x1, y1, x2, y2, x3, y3)
• circle(x, y, d)

Raket stap 1: Romp

Voeg na background(25) toe:

noStroke();
fill(200);
rect(100, 80, 30, 70); // romp

• Rechthoek op x=100, y=80, breedte=30, hoogte=70.

Raket stap 2: Neus (driehoek)

Voeg toe:

fill(240, 60, 60);
triangle(100, 80, 130, 80, 115, 60); // neus

• Basis sluit aan op de bovenkant van de romp; tip in het midden erboven.

Raket stap 3: Raam (cirkel)

Voeg toe:

fill(80, 180, 255);
circle(115, 105, 14); // raam

• Ongeveer in het midden van de romp voor een vriendelijke look.

Raket stap 4: Vinnen (driehoeken)

Voeg toe:

fill(220, 50, 50);
triangle(90, 120, 100, 120, 100, 150);    // linker vin
triangle(140, 120, 130, 120, 130, 150);   // rechter vin

• Vinnen zitten laag aan de romp; gelijke hoogte voor symmetrie.

Raket stap 5: Vlam (driehoek)

Voeg toe:

fill(255, 180, 40);
triangle(105, 150, 125, 150, 115, 170); // vlam

• Net onder de romp; brede basis geeft energie.

Raket stap 6: Rook (cirkels)

Voeg toe:

fill(180);
circle(115, 180, 10);
circle(115, 192, 8); // rook

• Kleine pluimpjes suggereren beweging en diepte.

Je hebt een raket gebouwd! 🚀

Top gedaan—speel met getallen, kleuren en vormen om ’m helemaal van jou te maken.