diff --git a/CM2030 Graphics Programming/Topic 4/4.5.1/green/frame-1.png b/CM2030 Graphics Programming/Topic 4/4.5.1/green/frame-1.png new file mode 100644 index 0000000..3364bed Binary files /dev/null and b/CM2030 Graphics Programming/Topic 4/4.5.1/green/frame-1.png differ diff --git a/CM2030 Graphics Programming/Topic 4/4.5.1/green/frame-2.png b/CM2030 Graphics Programming/Topic 4/4.5.1/green/frame-2.png new file mode 100644 index 0000000..a697b82 Binary files /dev/null and b/CM2030 Graphics Programming/Topic 4/4.5.1/green/frame-2.png differ diff --git a/CM2030 Graphics Programming/Topic 4/4.5.1/green/frame-3.png b/CM2030 Graphics Programming/Topic 4/4.5.1/green/frame-3.png new file mode 100644 index 0000000..ce44ba7 Binary files /dev/null and b/CM2030 Graphics Programming/Topic 4/4.5.1/green/frame-3.png differ diff --git a/CM2030 Graphics Programming/Topic 4/4.5.1/green/frame-4.png b/CM2030 Graphics Programming/Topic 4/4.5.1/green/frame-4.png new file mode 100644 index 0000000..d6f1736 Binary files /dev/null and b/CM2030 Graphics Programming/Topic 4/4.5.1/green/frame-4.png differ diff --git a/CM2030 Graphics Programming/Topic 4/4.5.1/physics.js b/CM2030 Graphics Programming/Topic 4/4.5.1/physics.js index 3d79042..d396a29 100644 --- a/CM2030 Graphics Programming/Topic 4/4.5.1/physics.js +++ b/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); diff --git a/CM2030 Graphics Programming/Topic 4/4.5.1/pink/frame-1.png b/CM2030 Graphics Programming/Topic 4/4.5.1/pink/frame-1.png new file mode 100644 index 0000000..3e35a4a Binary files /dev/null and b/CM2030 Graphics Programming/Topic 4/4.5.1/pink/frame-1.png differ diff --git a/CM2030 Graphics Programming/Topic 4/4.5.1/pink/frame-2.png b/CM2030 Graphics Programming/Topic 4/4.5.1/pink/frame-2.png new file mode 100644 index 0000000..e323b1f Binary files /dev/null and b/CM2030 Graphics Programming/Topic 4/4.5.1/pink/frame-2.png differ diff --git a/CM2030 Graphics Programming/Topic 4/4.5.1/pink/frame-3.png b/CM2030 Graphics Programming/Topic 4/4.5.1/pink/frame-3.png new file mode 100644 index 0000000..506e5d4 Binary files /dev/null and b/CM2030 Graphics Programming/Topic 4/4.5.1/pink/frame-3.png differ diff --git a/CM2030 Graphics Programming/Topic 4/4.5.1/pink/frame-4.png b/CM2030 Graphics Programming/Topic 4/4.5.1/pink/frame-4.png new file mode 100644 index 0000000..5d2b930 Binary files /dev/null and b/CM2030 Graphics Programming/Topic 4/4.5.1/pink/frame-4.png differ diff --git a/CM2030 Graphics Programming/Topic 4/4.5.1/red/frame-1.png b/CM2030 Graphics Programming/Topic 4/4.5.1/red/frame-1.png new file mode 100644 index 0000000..d09327a Binary files /dev/null and b/CM2030 Graphics Programming/Topic 4/4.5.1/red/frame-1.png differ diff --git a/CM2030 Graphics Programming/Topic 4/4.5.1/red/frame-2.png b/CM2030 Graphics Programming/Topic 4/4.5.1/red/frame-2.png new file mode 100644 index 0000000..d09327a Binary files /dev/null and b/CM2030 Graphics Programming/Topic 4/4.5.1/red/frame-2.png differ diff --git a/CM2030 Graphics Programming/Topic 4/4.5.1/red/frame-3.png b/CM2030 Graphics Programming/Topic 4/4.5.1/red/frame-3.png new file mode 100644 index 0000000..bd1f8c2 Binary files /dev/null and b/CM2030 Graphics Programming/Topic 4/4.5.1/red/frame-3.png differ diff --git a/CM2030 Graphics Programming/Topic 4/4.5.1/red/frame-4.png b/CM2030 Graphics Programming/Topic 4/4.5.1/red/frame-4.png new file mode 100644 index 0000000..bd1f8c2 Binary files /dev/null and b/CM2030 Graphics Programming/Topic 4/4.5.1/red/frame-4.png differ diff --git a/CM2030 Graphics Programming/Topic 4/4.5.1/sketch.js b/CM2030 Graphics Programming/Topic 4/4.5.1/sketch.js index a1e22f6..8acbd0c 100644 --- a/CM2030 Graphics Programming/Topic 4/4.5.1/sketch.js +++ b/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; }