Add balls to the plinko and remove if off screen

2021-06-09 15:26:50 -05:00
parent 4c1c9c1376
commit 1121485e0b
6 changed files with 10522 additions and 0 deletions
--- a/4/4.2.7/index.html
+++ b/4/4.2.7/index.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>graphicsProgramming - Coursera</title>
+    <script src="libraries/p5.min.js" type="text/javascript"></script>
+    <script src="libraries/p5.sound.min.js" type="text/javascript"></script>
+
+    <script language="javascript" type="text/javascript" src="libraries/matter.js"></script>
+    <script src="sketch.js" type="text/javascript"></script>
+
+    <style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
+  </head>
+  <body>
+  </body>
+</html>
--- a/4/4.2.7/libraries/.DS_Store
+++ b/4/4.2.7/libraries/.DS_Store
--- a/4/4.2.7/libraries/matter.js
+++ b/4/4.2.7/libraries/matter.js
--- a/4/4.2.7/libraries/p5.min.js
+++ b/4/4.2.7/libraries/p5.min.js
--- a/4/4.2.7/libraries/p5.sound.min.js
+++ b/4/4.2.7/libraries/p5.sound.min.js
--- a/4/4.2.7/sketch.js
+++ b/4/4.2.7/sketch.js
@ -0,0 +1,114 @@
+// Example is based on examples from:
+// http://brm.io/matter-js/
+// https://github.com/shiffman/p5-matter
+// https://github.com/b-g/p5-matter-examples
+
+// module aliases
+let Engine = Matter.Engine;
+let Render = Matter.Render;
+let World = Matter.World;
+let Bodies = Matter.Bodies;
+
+let engine;
+let balls = [];
+let ground;
+let plinkos = [];
+
+function setup() {
+  createCanvas(900, 600);
+
+  engine = Engine.create(); // create an engine
+
+  setupGround();
+  setupPins();
+  generateNewBall();
+}
+///////////////////////////////////////////////////////////
+function draw() {
+  background(0);
+  Engine.update(engine);
+
+  drawPins();
+  drawBalls();
+  drawGround();
+  console.log("# Balls: ", balls.length);
+}
+///////////////////////////////////////////////////////////
+function keyPressed(){
+  generateNewBall();
+}
+///////////////////////////////////////////////////////////
+function setupGround(){
+  let groundWidth = 10;
+  ground = Bodies.rectangle(width/2, height - groundWidth * 2, width, groundWidth, {isStatic: true});
+  World.add(engine.world, [ground]);
+}
+///////////////////////////////////////////////////////////
+function drawGround(){
+  fill(125);
+  drawVertices(ground.vertices);
+}
+///////////////////////////////////////////////////////////
+function setupPins(){
+  //plinko wall
+  let options = {isStatic: true, restitution: 1};
+  let cols = 15;
+  let rows = 9;
+  let spacing = width / cols;
+  for (let j = 0; j < rows; j++) {
+    for (let i = 0; i < cols; i++) {
+      let x = i * spacing;
+      if (j % 2 == 0) {
+        x += spacing / 2;
+      }
+      let y = spacing + j * spacing;
+
+      let p = Bodies.circle(x, y, 10, options);
+      World.add(engine.world, [p]);
+      plinkos.push(p);
+    }
+  }
+}
+///////////////////////////////////////////////////////////
+function drawPins(){
+  fill(255,200,0);
+  for (let i=0; i<plinkos.length; i++){
+    drawVertices(plinkos[i].vertices);
+  }
+}
+///////////////////////////////////////////////////////////
+function generateNewBall(){
+  let newBall = Bodies.circle(random(5, width - 5), 0, 10, {restitution: 1});
+  World.add(engine.world, [newBall]);
+  balls.push(newBall);
+}
+///////////////////////////////////////////////////////////
+function drawBalls(){
+  fill('red');
+  for (let i = 0; i < balls.length; i++) {
+    drawVertices(balls[i].vertices);
+    if(isOffScreen(balls[i]))
+    {
+      World.remove(engine.world, balls[i]);
+      balls.splice(i, 1);
+      i--;
+    }
+  }
+}
+
+///////////////////////////////////////////////////////////
+// **** HELPER FUNCTIONS ****
+// DO NOT WRITE BELOW THIS LINE
+///////////////////////////////////////////////////////////
+function drawVertices(vertices) {
+  beginShape();
+  for (let i = 0; i < vertices.length; i++) {
+    vertex(vertices[i].x, vertices[i].y);
+  }
+  endShape(CLOSE);
+}
+
+function isOffScreen(body) {
+  let pos = body.position;
+  return pos.y > height || pos.x < 0 || pos.x > width;
+}