​

// STAP 6: maak een "object" voor de bal

let balx = 200;

let baly = 200;

let radius = 25; 

​

let xsnelheid = 0;

let ysnelheid = 0;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

}

​

function draw() {

  // STAP 0-9: geef je sketch een kleurtje

  background("pink");

  fill("salmon")

  stroke("maroon")

//   background("aquamarine");

//   fill("lightyellow")

//   stroke("magenta")

  // circle(200, 200, 50) // STAP 1: teken een cirkel op een vaste positie (x=200, y=200) met een vaste radius (50) (https://p5js.org/reference/#/p5/circle)

  // circle(mouseX, mouseY, 50) // STAP 2: teken een cirkel op de muis (https://p5js.org/reference/#/p5/mouseX)

  // circle(400-mouseX, 400-mouseY, 50) // STAP 3: teken een cirkel "tegenover" de muis

  // // STAP 4: teken meerdere cirkels (https://p5js.org/reference/#/p5/for)

  // for(let i=0;i<5;i++){

  //   circle(i*50, i*50, i*5);

  // }

  // // STAP 5: teken meerdere cirkels tussen de muis en (0,0)

  // for(let i=0;i<5;i++){

  //   circle(mouseX/i, mouseY/i, i*10);

  // }

  // // STAP 6: vallende bal

  // baly = baly + 5;

  // circle(200, baly, 50);

  // // STAP 8: geef de ballen snelheid en zwaartekracht

  // ysnelheid = ysnelheid + 1;

  // circle(balx, baly, radius);

  // STAP 9: laat hem stuiteren

  xsnelheid = xsnelheid * 0.99; // stap 8

  if(balx + xsnelheid < width - radius/2 && balx + xsnelheid > radius/2){

    xsnelheid = xsnelheid*0.99;

  }

  else{

    xsnelheid = xsnelheid * -0.99;

  }

  if(baly + ysnelheid < height - radius/2){

    ysnelheid = ysnelheid*0.99 + 1;

  }

  else{

    ysnelheid = ysnelheid * -0.99;

  }

  balx = balx + xsnelheid;

  baly = baly + ysnelheid;

  circle(balx, baly, radius); //stap 6-9

  // line(320,60,380,60); //basket

  // STAP 10: jouw eigen idee

  // een paar suggesties voor wat je zou kunnen doen:

  // - verander de getallen in de code en kijk wat er gebeurt. zou je de zwaartekracht sterker of zwakker kunnen maken?

  // - gebruik een plaatje voor de ballen in plaats van een cirkel (https://p5js.org/reference/#/p5/image)

  // - maak er een spel van: kun je punten scoren als de ballen een bepaald doel raken?

}

​

function mouseClicked(){

  // bal.y = mouseY; //STAP 6

  // STAP 7

  balx = mouseX;

  baly = mouseY;

  radius = random()*50;

  // STAP 8

  balx = mouseX;

  baly = mouseY;

  radius = random()*50;

  xsnelheid = mouseX-pmouseX;

  ysnelheid = mouseY-pmouseY;

  // print(bal); // STAP 6: met print kun je zien wat er aan de hand is

}