Skip to content
ICT Fusion Knowledgebase

Programming 101

Voordat we jou echt loslaten op het project ga je de eerste sprint aan de slag met het leren van de basisbeginselen van het programmeren. Op deze manier leer je beter wat HTML en CSS zijn en ga je aan de slag met het interactief maken van je HTML door het gebruik van Javascript.

Om het leerproces zo leuk mogelijk te maken zullen we gebruik maken van een library genaamd p5.js, waarmee je eenvoudig visueel aantrekkelijke projecten kunt maken.

Belangrijkste leerdoelen van deze sprint

Leeruitkomst Software

Je kent de basisprincipes van het programmeren:

  • Je kent de belangrijkste primitieve-datatypes:
    • Numerieke datatypes (int, float, double)
    • Tekst-datatypes (string, char)
    • Booleaanse datatypes (boolean)
  • Je kent de belangrijkste operatoren:
    • Aritmetische operatoren (+, -, *, /, %)
    • Vergelijkingsoperatoren (==, !=, >, <, >=, <=)
    • Logische operatoren (&&, ||, !)
  • Je kent de belangrijkste controlestructuren:
    • If-statements
    • Loops (for, while)
    • Functions
  • Je kan data opslaan in variabelen.
    • Je kan data manipuleren met operatoren.
    • Je kan conditionele logica toepassen met if-statements.
    • Je kan loops toepassen.
    • Je kan functions toepassen.
    • Je kan data manipuleren met loops.
    • Je kan data manipuleren met functions.
  • Je kan werken met Git:
    • Je kan een project clonen.
    • Je kan commits maken en deze voorzien van een duidelijke commit-message.
    • Je kan wijzigingen pushen van de HvA Gitlab server.
    • Je kan wijzigingen pullen van de HvA Gitlab server.

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.