Text for Domino Demo: be sure to load matter.js into your files first!
const Engine = Matter.Engine;
const World = Matter.World;
const Bodies = Matter.Bodies;
var engine;
var ground;
var boxes=[];
// Student: questions to answer and fun parameters to change:
// where do you change the color of the dominos?
// what parameter do you change to get more dominos to fall?
// what parameter do you change to make the dominos fall closer together?
// what do you change to make dominos thicker or thinner? How does that affect it?
// what parameter do you change to make the ground tilt more up or more down?
// How far can you tilt the ground and leave at least one domino standing up?
// Reference Superfun p5.js projects for beginners, Nazia Fakhruddin, adapted
// changed domino color for more fun!
// Increased initial load of dominos from example, does a better fill
// Updated Matter.Runner.run to replace Engine.run in line 30
// Needed to upload matter.js to the sketch files, check github for latest
// Needed to add <script src="matter.js"></script> to index.html file
// More info about matter.js and p5.js in https://www.youtube.com/watch?v=urR596FsU68
function setup() {
createCanvas(800, 600);
engine = Engine.create();
for (let i = 0; i <15; i++) {
boxes.push(Bodies.rectangle(100 + (i*40), 200, 20, 80));
World.add(engine.world, boxes[i]);
}
ground = Bodies.rectangle(300, 310, 410, 30, {isStatic: true});
Matter.Body.rotate(ground,0.24);
World.add(engine.world, [ground]);
Matter.Runner.run(engine);
}
function draw() {
background(220);
//draw the dominos
for(let j = 0; j <boxes.length; j++) {
let currentbox = boxes[j];
var vertices = currentbox.vertices;
fill(62,140,140);
beginShape();
for (var i = 0; i< vertices.length; i++) {
vertex(vertices[i].x, vertices[i].y);
}
endShape();
// draw the ground
var vertices = ground.vertices;
beginShape();
fill(127);
for (var i = 0; i < vertices.length; i++) {
vertex(vertices[i].x, vertices[i].y);
endShape();
}
}
}
const World = Matter.World;
const Bodies = Matter.Bodies;
var engine;
var ground;
var boxes=[];
// Student: questions to answer and fun parameters to change:
// where do you change the color of the dominos?
// what parameter do you change to get more dominos to fall?
// what parameter do you change to make the dominos fall closer together?
// what do you change to make dominos thicker or thinner? How does that affect it?
// what parameter do you change to make the ground tilt more up or more down?
// How far can you tilt the ground and leave at least one domino standing up?
// Reference Superfun p5.js projects for beginners, Nazia Fakhruddin, adapted
// changed domino color for more fun!
// Increased initial load of dominos from example, does a better fill
// Updated Matter.Runner.run to replace Engine.run in line 30
// Needed to upload matter.js to the sketch files, check github for latest
// Needed to add <script src="matter.js"></script> to index.html file
// More info about matter.js and p5.js in https://www.youtube.com/watch?v=urR596FsU68
function setup() {
createCanvas(800, 600);
engine = Engine.create();
for (let i = 0; i <15; i++) {
boxes.push(Bodies.rectangle(100 + (i*40), 200, 20, 80));
World.add(engine.world, boxes[i]);
}
ground = Bodies.rectangle(300, 310, 410, 30, {isStatic: true});
Matter.Body.rotate(ground,0.24);
World.add(engine.world, [ground]);
Matter.Runner.run(engine);
}
function draw() {
background(220);
//draw the dominos
for(let j = 0; j <boxes.length; j++) {
let currentbox = boxes[j];
var vertices = currentbox.vertices;
fill(62,140,140);
beginShape();
for (var i = 0; i< vertices.length; i++) {
vertex(vertices[i].x, vertices[i].y);
}
endShape();
// draw the ground
var vertices = ground.vertices;
beginShape();
fill(127);
for (var i = 0; i < vertices.length; i++) {
vertex(vertices[i].x, vertices[i].y);
endShape();
}
}
}