We maken een circel door middel van een object literal. Het is een soort turbo-kruising van een array en meerdere variabelen. Run de code.

var circ1

function setup() { 
  createCanvas(400, 400); 
  
  circ1 = {
    x:380,
    xSpd: 3
  }
}

function draw() { 
  background(220); 
  ellipse(circ1.x, 200, 20)
  
  circ1.x = circ1.x - circ1.xSpd //or circ1.x += circ1.xSpd
}

Om te stuiteren moet je 2 dingen doen:

  • check over de rand. Bijv, if x > 400
  • Dan, vermenigvuldig de speed met -1. Dan gaat ie de andere kant op.
// hergebruik de benodigde code van hierboven.

function draw() { 
// .. etc
  
  if (circ1.x > 400) {
    circ1.xSpd *= -1
  }
  circ1.x = circ1.x + circ1.xSpd 
}

Meer stuiters – De opdracht

Maak deze 3 ballen in 1 sketch. Maak wel aparte object literals voor elk.

  • zorg dat de bal ook aan de andere kant wordt begrensd
  • maak ook een bal die naar boven en beneden stuitert
  • maak ook een bal die diagonaal (tegelijk naar boven-en-beneden) en van-links-naar-rechts stuitert.

Die laatste opdracht is een mooie opmaat voor het komende mini-project: het bewegende DVD-logo