Add propeller with speed and angular speed
This commit is contained in:
16
CM2030 Graphics Programming/Topic 4/4.4.1/index.html
Normal file
16
CM2030 Graphics Programming/Topic 4/4.4.1/index.html
Normal file
@ -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>
|
||||
BIN
CM2030 Graphics Programming/Topic 4/4.4.1/libraries/.DS_Store
vendored
Normal file
BIN
CM2030 Graphics Programming/Topic 4/4.4.1/libraries/.DS_Store
vendored
Normal file
Binary file not shown.
10361
CM2030 Graphics Programming/Topic 4/4.4.1/libraries/matter.js
Normal file
10361
CM2030 Graphics Programming/Topic 4/4.4.1/libraries/matter.js
Normal file
File diff suppressed because it is too large
Load Diff
3
CM2030 Graphics Programming/Topic 4/4.4.1/libraries/p5.min.js
vendored
Normal file
3
CM2030 Graphics Programming/Topic 4/4.4.1/libraries/p5.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
28
CM2030 Graphics Programming/Topic 4/4.4.1/libraries/p5.sound.min.js
vendored
Normal file
28
CM2030 Graphics Programming/Topic 4/4.4.1/libraries/p5.sound.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
121
CM2030 Graphics Programming/Topic 4/4.4.1/sketch.js
Normal file
121
CM2030 Graphics Programming/Topic 4/4.4.1/sketch.js
Normal file
@ -0,0 +1,121 @@
|
||||
let Engine = Matter.Engine,
|
||||
Render = Matter.Render,
|
||||
World = Matter.World,
|
||||
Bodies = Matter.Bodies,
|
||||
Body = Matter.Body;
|
||||
let engine;
|
||||
let box1;
|
||||
let box2;
|
||||
let ground1;
|
||||
let ground2;
|
||||
let ground3;
|
||||
let circle, polygon;
|
||||
let boxes = [];
|
||||
let circles = [];
|
||||
let colorBoxes = [];
|
||||
let colorCircles = [];
|
||||
let angle = 0;
|
||||
let angleSpeed = 0.1;
|
||||
let propeller;
|
||||
|
||||
function setup() {
|
||||
createCanvas(900, 600);
|
||||
// create engine
|
||||
engine = Engine.create();
|
||||
box1 = Bodies.rectangle(200, 200, 80, 80, {
|
||||
restitution: 0.8,
|
||||
friction: 0.5,
|
||||
});
|
||||
|
||||
propeller = Bodies.rectangle(width/2, height/2, 300, 15, {isStatic: true});
|
||||
|
||||
ground1 = Bodies.rectangle(200, 450, 200, 10, {
|
||||
isStatic: true
|
||||
});
|
||||
|
||||
ground2 = Bodies.rectangle(500, 500, 200, 10, {
|
||||
isStatic: true
|
||||
});
|
||||
ground3 = Bodies.rectangle(850, 450, 200, 10, {
|
||||
isStatic: true
|
||||
});
|
||||
// add bodies to world
|
||||
World.add(engine.world, [box1, ground1, ground2, ground3, propeller]);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
background(0);
|
||||
Engine.update(engine);
|
||||
|
||||
fill(50, 150, 50);
|
||||
drawVertices(ground1.vertices);
|
||||
drawVertices(ground2.vertices);
|
||||
drawVertices(ground3.vertices);
|
||||
drawVertices(propeller.vertices);
|
||||
Body.setAngle(propeller, angle += angleSpeed);
|
||||
Body.setAngularVelocity(propeller, angleSpeed);
|
||||
|
||||
generateRect(width / 2, 0);
|
||||
generateEllipse(width/2, -50);
|
||||
|
||||
for (let i = 0; i < boxes.length; i++) {
|
||||
fill(colorBoxes[i]);
|
||||
drawVertices(boxes[i].vertices);
|
||||
if (isOffScreen(boxes[i])) {
|
||||
World.remove(engine.world, boxes[i]);
|
||||
boxes.splice(i, 1);
|
||||
colorBoxes.splice(i, 1);
|
||||
i--;
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < circles.length; i++) {
|
||||
fill(colorCircles[i]);
|
||||
drawVertices(circles[i].vertices);
|
||||
if (isOffScreen(circles[i])) {
|
||||
World.remove(engine.world, circles[i]);
|
||||
circles.splice(i, 1);
|
||||
colorCircles.splice(i, 1);
|
||||
i--;
|
||||
}
|
||||
}
|
||||
|
||||
console.log("Boxes: " + boxes.length);
|
||||
console.log("Circles: " + circles.length);
|
||||
console.log("Engine bodies: " + engine.world.bodies.length);
|
||||
}
|
||||
|
||||
function isOffScreen(body) {
|
||||
let pos = body.position;
|
||||
return pos.y > height || pos.x < 0 || pos.x > width;
|
||||
}
|
||||
|
||||
function generateRect(x, y) {
|
||||
let b = Bodies.rectangle(x, y, random(10, 30), random(10, 30), {
|
||||
restitution: 1.2,
|
||||
friction: 0.5,
|
||||
});
|
||||
Matter.Body.setMass(b, 1);
|
||||
boxes.push(b);
|
||||
World.add(engine.world, [b]);
|
||||
colorBoxes.push("rgba(" + Math.trunc(random(100, 250)).toString() + "," + Math.trunc(random(100, 250)).toString() + "," + Math.trunc(random(100, 250)).toString() + ", 0.5)");
|
||||
}
|
||||
|
||||
function generateEllipse(x, y) {
|
||||
let b = Bodies.circle(x, y, random(10, 30), {
|
||||
restitution: 1.2,
|
||||
friction: 0.5,
|
||||
});
|
||||
Matter.Body.setMass(b, 1);
|
||||
circles.push(b);
|
||||
World.add(engine.world, [b]);
|
||||
colorCircles.push("rgba(" + Math.trunc(random(100, 250)).toString() + "," + Math.trunc(random(100, 250)).toString() + "," + Math.trunc(random(100, 250)).toString() + ", 0.5)");
|
||||
}
|
||||
|
||||
function drawVertices(vertices) {
|
||||
beginShape();
|
||||
for (let i = 0; i < vertices.length; i++) {
|
||||
vertex(vertices[i].x, vertices[i].y);
|
||||
}
|
||||
endShape();
|
||||
}
|
||||
Reference in New Issue
Block a user