xxxxxxxxxx109
// let baly = 200; // STAP 5.1// let bal = {x:200, y:200, radius:25}; // STAP 6: maak een "object" voor de ballet ballen = []; // STAP 7-8: maak een "array" om meerdere bal "objecten" in te bewarenfunction setup() { createCanvas(400, 400);}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 5.1: vallende bal // baly = baly + 5; // circle(200, baly, 50); // // STAP 6: teken een vallende bal // bal.y = bal.y + 5; // circle(bal.x, bal.y, bal.radius); // // STAP 7: teken meerdere vallende ballen // for(let i=0;i<ballen.length;i++){ // let bal = ballen[i]; // bal.y = bal.y + 5; // circle(bal.x, bal.y, bal.radius); // } // // STAP 8: geef de ballen snelheid en zwaartekracht // for(let i=0;i<ballen.length;i++){ // let bal = ballen[i]; // bal.xsnelheid = bal.xsnelheid * 0.95; // bal.ysnelheid = bal.ysnelheid + 1; // bal.x = bal.x + bal.xsnelheid; // bal.y = bal.y + bal.ysnelheid; // circle(bal.x,bal.y,bal.radius); // } // STAP 9: laat ze stuiteren for(let i=0;i<ballen.length;i++){ let bal = ballen[i]; bal.xsnelheid = bal.xsnelheid * 0.99; bal.x = bal.x + bal.xsnelheid; if(bal.y + bal.ysnelheid < height - bal.radius/2){ bal.ysnelheid = bal.ysnelheid + 1; } else{ bal.ysnelheid = bal.ysnelheid * -1; } bal.y = bal.y + bal.ysnelheid; circle(bal.x,bal.y,bal.radius); } // 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 // ballen.push({ // x: mouseX, // y: mouseY, // radius: random()*50 // }); // STAP 8 ballen.push({ x: mouseX, y: 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 print(ballen); //STAP 7: zie stap 6}