Skip to content

Beweging

Beweging op je scherm is net als het coördinaten stelsel 2 dimensional. Dit betekent dat we voor elk bewegend object een snelheid hebben in de x en y richting. Meestal geven we dit aan door vx(velocity x) en vy(velocity y).

Voorbeeld
In dit voorbeeld wordt velocity gebruikt om een object te laten bewegen op basis van keyboard input.
Code 
let rectX = 0;
let rectY = 0;
let rectVx = 0;
let rectVy = 0;

function setup() {
    createCanvas(200, 200);
    noStroke();
}

function draw() {
    background(220);

    rectVx = 0;
    rectVy = 0;

    if(keyIsDown(LEFT_ARROW)) {
        rectVx = -1;
    }
    if(keyIsDown(RIGHT_ARROW)){
        rectVx = 1;
    }
    if(keyIsDown(UP_ARROW)){
        rectVy = -1;
    }
    if(keyIsDown(DOWN_ARROW)) {
        rectVy = 1;
    }

    rectX += rectVx;
    rectY += rectVy;
    rect(rectX, rectY, 20, 20);
}

constante snelheid

versnelling

Oefening

Creëer een sketch waarin vormen langzaam bewegen.

Instructies: 1. Maak een canvas met een bepaalde breedte en hoogte. 2. Kies een achtergrondkleur die past bij je project. 3. Laat meerdere vormen langzaam bewegen door de huidige positie te updaten met behulp van een snelheid. 4. Voeg aan een aantal vormen ook versnelling toe. Niet alleen een constante snelheid. 5. Wanneer een vorm buiten het beeld komt, laat deze dan weer verschijnen op een willekeurig plek op het scherm.

Bronnen

Meer leren

Bron Doel
Eenparig versnelde beweging Versnellingen begrijpen

Gerelateerde onderwerpen