Skip to content
ICT Fusion Knowledgebase

Programming 101 Project – p5.js (Beginner)

Opdracht

Maak een visueel aantrekkelijke interactieve animatie met JavaScript en p5.js.

Je levert een werkende demo + leesbare code op in GitLab.

Vereisten

Techniek

  • Je gebruikt p5.js (CDN of lokaal). Canvas ≄ 640×480.
  • Interactie via muis of toetsenbord (minimaal 2 verschillende acties, bv. bewegen + resetten).
  • Animatie loopt in draw() (geen noLoop()-projecten).

Programmeervaardigheden

  • Variabelen: ≄ 5 betekenisvolle variabelen (incl. minstens 1 const).
  • Loops: ≄ 1 for of while‑loop die iets tekent of update (geen lege loops).
  • Functions: ≄ 2 eigen functies met parameters (bv. spawnParticle(x, y)).
  • Arrays: ≄ 1 array met ≄ 20 items of dynamisch groeiend met push().
  • Conditionele logica: ≄ 3 if/else checks (bv. schermranden, collisions, states).

Structuur & kwaliteit

  • Bestanden: index.html, src/sketch.js (extra modules toegestaan), optioneel assets/.
  • Naamgeving in het Engels, geen magische getallen → gebruik constants.
  • Leesbaarheid: korte functies, commentaar beschrijft intentie, geen dode code.
  • Voldoet aan de HBO‑ICT Code Conventies (JS).

Versiebeheer & peer‑review

  • Repo in HvA GitLab, publiek of intern met toegang voor docent.
  • ≄ 6 commits verspreid over de sprint, met betekenisvolle messages.
  • Peer‑review door medestudent (vink de checklist onderaan af in je README).

Oplevering

  • README.md met: korte beschrijving, controls, hoe runnen, credits/bronvermelding.
  • (Aanbevolen) Live demo via GitLab Pages.

Peer‑review checklist (door Ă©Ă©n of meerdere medestudenten)

  • Start de demo: werkt het zonder console‑errors?
  • Interactie: doen beide acties wat ze moeten doen?
  • Variabelen/loops/functions/arrays/if’s aanwezig en functioneel?
  • Code leesbaar: namen duidelijk, geen duplicatie, geen dode code.
  • Performance: geen zware berekeningen in draw() zonder noodzaak.
  • README compleet; credits voor externe assets staan erbij.

Voorbeelden

Kies er Ă©Ă©n en breid eventueel uit. Alle voorbeelden passen in 1–2 JS‑bestanden. Je mag ook zelf een animatie bedenken.

  1. Avoider Je bestuurt een cirkel met pijltjestoetsen en ontwijkt vallende blokken. Score = overleefde tijd.
  2. Collect & Timer Munten (cirkels) spawnen willekeurig; pak er zoveel mogelijk in 30 seconden.
  3. One‑Button Runner Druk op spatie om te springen over simpele rechthoek‑hindernissen.
  4. Paddle, Ball and Bricks (Breakout) Houd de bal in het spel met Ă©Ă©n paddle. Bricks zijn te vernietigen met de bal.
  5. Particle Trail bij muis Bij muisbeweging verschijnen kleine deeltjes die wegdrijven en langzaam vervagen.
  6. Simpel Vuurwerk Klik = lanceer een vuurpijl vanuit de muis locatie die uit elkaar spat in 30–60 deeltjes met zwaartekracht.
  7. Regen & Plassen Dwarrelende regendruppels (array) en golvende cirkels als ze ‘de grond’ raken. Pijltjes passen de windsnelheid aan.
  8. Randen‑bounce 25–50 bollen bewegen en stuiteren tegen de canvasranden; pijltjes aanpassen snelheid.
  9. Basic Tile‑grid Teken een 10×10 raster van vierkantjes; muisklik togglet een tegel (aan/uit) en kleur.

Minimale projectstructuur

project/
├─ index.html
├─ src/
│  └─ sketch.js
└─ README.md

index.html (template)

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>p5.js – beginner project</title>
    <script src="https://cdn.jsdelivr.net/npm/p5@1/lib/p5.min.js"></script>
  </head>
  <body>
    <main></main>
    <script src="./src/sketch.js"></script>
  </body>
</html>

src/sketch.js (skelet)

function setup() {
  createCanvas(640, 480);  
}

function draw() {
  background(20);
}

Tips

  • Begin klein → werkend skelet → uitbreiden.
  • Gebruik constants voor snelheden/kleuren.
  • Profiteer van arrays voor meerdere objecten.
  • Test vaak; commit klein en vaak.
  • Vraag tijdig peer‑feedback.