Add sprites and constraints

CM2030 Graphics Programming/Topic 4/4.5.1/physics.js

@@ -1,27 +1,28 @@
 ////////////////////////////////////////////////////////////////
-function setupGround(){
+function setupGround() {
   ground = Bodies.rectangle(500, 600, 1000, 40, {
-    isStatic: true, angle: 0
+    isStatic: true,
+    angle: 0,
   });
   World.add(engine.world, [ground]);
 }
 
 ////////////////////////////////////////////////////////////////
-function drawGround(){
+function drawGround() {
   push();
   fill(128);
   drawVertices(ground.vertices);
   pop();
 }
 ////////////////////////////////////////////////////////////////
-function setupPropeller(){
+function setupPropeller() {
   // your code here
-  propeller = Bodies.rectangle(150, 480, 200, 15, {isStatic: true, angle: 0});
+  propeller = Bodies.rectangle(150, 480, 200, 15, { isStatic: true, angle: 0 });
   World.add(engine.world, [propeller]);
 }
 ////////////////////////////////////////////////////////////////
 //updates and draws the propeller
-function drawPropeller(){
+function drawPropeller() {
   Body.setAngle(propeller, angle);
   Body.setAngularVelocity(propeller, angleSpeed);
   push();
@@ -33,51 +34,62 @@ function drawPropeller(){
   angle += angleSpeed;
 }
 ////////////////////////////////////////////////////////////////
-function setupBird(){
-  var bird = Bodies.circle(mouseX, mouseY, 20, {friction: 0,
-      restitution: 0.95 });
-  Matter.Body.setMass(bird, bird.mass*10);
+function setupBird() {
+  var bird = Bodies.circle(mouseX, mouseY, 20, {
+    friction: 0,
+    restitution: 0.95,
+  });
+  Matter.Body.setMass(bird, bird.mass * 10);
   World.add(engine.world, [bird]);
+
+  pinkFrame.push(Math.trunc(random(1, 5)) - 1);
   birds.push(bird);
 }
 ////////////////////////////////////////////////////////////////
-function drawBirds(){
-  push();
-  for (let i = 0; i < birds.length; i++)
-  {
-    drawVertices(birds[i].vertices);
-    if(isOffScreen(birds[i]))
-    {
+function drawBirds() {
+  fill("orange");
+  for (let i = 0; i < birds.length; i++) {
+    //drawVertices(birds[i].vertices);
+    //replaced with image
+    
+    push();
+    imageMode(CENTER);
+    translate(birds[i].position.x, birds[i].position.y);
+    rotate(birds[i].angle);
+    image(pinkSprite[pinkFrame[i]], 0, 0, 40, 40);
+    pop();
+    if (frameCount % 5 == 0)
+      pinkFrame[i] < 3 ? pinkFrame[i]++ : (pinkFrame[i] = 0);
+
+    if (isOffScreen(birds[i])) {
       World.remove(engine.world, birds[i]);
       birds.splice(i, 1);
+      pinkFrame.splice(i, 1);
       i--;
     }
   }
-  pop();
-  console.log("# Birds: ", birds.length);
-  console.log("# World Bodies: ", engine.world.bodies.length);
+  //console.log("# Birds: ", birds.length);
+  //console.log("# World Bodies: ", engine.world.bodies.length);
 }
 ////////////////////////////////////////////////////////////////
 //creates a tower of boxes
-function setupTower(){
-  boxes = Composites.stack(500, 100, 3, 6, 0, 0,
-    function(x,y){
-      let partA = Bodies.rectangle(x, y, 80, 80, {density: 0.001});
-      colors.push(Math.trunc(random(100, 255)));
-      return Body.create({parts: [partA]});
-    });
+function setupTower() {
+  boxes = Composites.stack(500, 100, 3, 6, 0, 0, function (x, y) {
+    let partA = Bodies.rectangle(x, y, 80, 80, { density: 0.001 });
+    colors.push(Math.trunc(random(100, 255)));
+    return Body.create({ parts: [partA] });
+  });
   Composite.add(engine.world, [boxes]);
 }
 ////////////////////////////////////////////////////////////////
 //draws tower of boxes
-function drawTower(){
+function drawTower() {
   push();
   for (let i = 0; i < boxes.bodies.length; i++) {
     fill(0, colors[i], 0);
     noStroke();
     drawVertices(boxes.bodies[i].vertices);
-    if(isOffScreen(boxes.bodies[i]))
-    {
+    if (isOffScreen(boxes.bodies[i])) {
       World.remove(engine.world, boxes.bodies[i]);
       boxes.bodies.splice(i, 1);
       colors.splice(i, 1);
@@ -87,23 +99,58 @@ function drawTower(){
   pop();
 }
 ////////////////////////////////////////////////////////////////
-function setupSlingshot(){
-//your code here
+function setupSlingshot() {
+  slingshotBird = Bodies.circle(200, 250, 20, {
+    friction: 0,
+    restitution: 0.95,
+  });
+
+  slingshotConstraint = Constraint.create({
+    bodyB: slingshotBird,
+    pointA: { x: 200, y: 200 },
+    pointB: { x: 0, y: 0 },
+    stiffness: 0.01,
+    damping: 0.0001,
+  });
+  Matter.Body.setMass(slingshotBird, slingshotBird.mass * 10);
+  World.add(engine.world, [slingshotBird, slingshotConstraint]);
+
+  redFrame.push(Math.trunc(random(1, 5)) - 1);
+  slingshotBirds.push(slingshotBird);
 }
 ////////////////////////////////////////////////////////////////
 //draws slingshot bird and its constraint
-function drawSlingshot(){
-  push();
-  // your code here
-  pop();
+function drawSlingshot() {
+  fill("red");
+  for (let i = 0; i < slingshotBirds.length; i++) {
+    //drawVertices(slingshotBirds[i].vertices); 
+    //replaced with image
+
+    push();
+    imageMode(CENTER);
+    translate(slingshotBirds[i].position.x, slingshotBirds[i].position.y);
+    rotate(slingshotBirds[i].angle);
+    image(redSprite[redFrame[i]], 0, 0, 40, 40);
+
+    if (frameCount % 5 == 0)
+      redFrame[i] < 3 ? redFrame[i]++ : (redFrame[i] = 0);
+
+    if (isOffScreen(slingshotBirds[i])) {
+      World.remove(engine.world, slingshotBirds[i]);
+      slingshotBirds.splice(i, 1);
+      i--;
+    }
+    pop();
+  }
+  drawConstraint(slingshotConstraint);
 }
 /////////////////////////////////////////////////////////////////
-function setupMouseInteraction(){
+function setupMouseInteraction() {
   var mouse = Mouse.create(canvas.elt);
   var mouseParams = {
     mouse: mouse,
-    constraint: { stiffness: 0.05 }
-  }
+    constraint: { stiffness: 0.05 },
+  };
   mouseConstraint = MouseConstraint.create(engine, mouseParams);
   mouseConstraint.mouse.pixelRatio = pixelDensity();
   World.add(engine.world, mouseConstraint);

CM2030 Graphics Programming/Topic 4/4.5.1/sketch.js

@@ -1,27 +1,55 @@
 // Example is based on examples from: http://brm.io/matter-js/, https://github.com/shiffman/p5-matter
 // add also Benedict Gross credit
 
-var Engine = Matter.Engine;
-var Render = Matter.Render;
-var World = Matter.World;
-var Bodies = Matter.Bodies;
-var Body = Matter.Body;
-var Constraint = Matter.Constraint;
-var Mouse = Matter.Mouse;
-var MouseConstraint = Matter.MouseConstraint;
+let Engine = Matter.Engine;
+let Render = Matter.Render;
+let World = Matter.World;
+let Bodies = Matter.Bodies;
+let Body = Matter.Body;
+let Constraint = Matter.Constraint;
+let Mouse = Matter.Mouse;
+let MouseConstraint = Matter.MouseConstraint;
 let Composites = Matter.Composites;
 let Composite = Matter.Composite;
 
-var engine;
-var propeller;
-var boxes = null;
-var birds = [];
-var colors = [];
-var ground;
-var slingshotBird, slingshotConstraint;
-var angle=0;
-var angleSpeed=0.01;
-var canvas;
+let engine;
+let propeller;
+let boxes = [];
+let birds = [];
+let colors = [];
+let ground;
+let slingshotBirds = [];
+let slingshotConstraint;
+let angle=0;
+let angleSpeed=0.01;
+let canvas;
+
+let pinkSprite = [];
+let pinkFrame = [];
+let greenSprite = [];
+let greenFrame = [];
+let redSprite = [];
+let redFrame = [];
+////////////////////////////////////////////////////////////
+function preload()
+{
+  // Bird art by bevouliin.com
+  // https://opengameart.org/content/fat-bird-sprite-sheets-for-gamedev
+  // https://opengameart.org/content/pink-flappy-bird-sprite-sheets
+  https://opengameart.org/content/bevouliin-free-red-flappy-bee-bird-game-character-sprite-sheets-for-game-developers
+  pinkSprite.push(loadImage('/pink/frame-1.png'));
+  pinkSprite.push(loadImage('/pink/frame-2.png'));
+  pinkSprite.push(loadImage('/pink/frame-3.png'));
+  pinkSprite.push(loadImage('/pink/frame-4.png'));
+  greenSprite.push(loadImage('/green/frame-1.png'));
+  greenSprite.push(loadImage('/green/frame-2.png'));
+  greenSprite.push(loadImage('/green/frame-3.png'));
+  greenSprite.push(loadImage('/green/frame-4.png'));
+  redSprite.push(loadImage('/red/frame-1.png'));
+  redSprite.push(loadImage('/red/frame-2.png'));
+  redSprite.push(loadImage('/red/frame-3.png'));
+  redSprite.push(loadImage('/red/frame-4.png'));
+}
 ////////////////////////////////////////////////////////////
 function setup() {
   canvas = createCanvas(1000, 600);
@@ -73,7 +101,7 @@ function keyTyped(){
 
   //if 'r' reset the slingshot
   if (key==='r'){
-    removeFromWorld(slingshotBird);
+    //removeFromWorld(slingshotBird);
     removeFromWorld(slingshotConstraint);
     setupSlingshot();
   }
@@ -94,19 +122,20 @@ function mouseReleased(){
 ////////////////////////////////////////////////////////////
 //tells you if a body is off-screen
 function isOffScreen(body){
-  var pos = body.position;
+  let pos = body.position;
   return (pos.y > height)
   // Modified so bodies don't disappear when they're not completely off the screen yet
 }
 ////////////////////////////////////////////////////////////
 //removes a body from the physics world
 function removeFromWorld(body) {
-  World.remove(engine.world, body);
+  if(body != null)
+    World.remove(engine.world, body);
 }
 ////////////////////////////////////////////////////////////
 function drawVertices(vertices) {
   beginShape();
-  for (var i = 0; i < vertices.length; i++) {
+  for (let i = 0; i < vertices.length; i++) {
     vertex(vertices[i].x, vertices[i].y);
   }
   endShape(CLOSE);
@@ -114,13 +143,13 @@ function drawVertices(vertices) {
 ////////////////////////////////////////////////////////////
 function drawConstraint(constraint) {
   push();
-  var offsetA = constraint.pointA;
-  var posA = {x:0, y:0};
+  let offsetA = constraint.pointA;
+  let posA = {x:0, y:0};
   if (constraint.bodyA) {
     posA = constraint.bodyA.position;
   }
-  var offsetB = constraint.pointB;
-  var posB = {x:0, y:0};
+  let offsetB = constraint.pointB;
+  let posB = {x:0, y:0};
   if (constraint.bodyB) {
     posB = constraint.bodyB.position;
   }