function wall(x, y, width, height) {
return Matter.Bodies.rectangle(x, y, width, height, {
isStatic: true,
render: {
fillStyle: '#868e96'
}
});
}
Abstracting Wall Creation
Slide 24
Slide 24 text
Matter.World.add(engine.world, [
wall(280, 0, 560, 20), // top
wall(280, 800, 560, 20), // bottom
wall(0, 400, 20, 800), // left
wall(560, 400, 20, 800), // right
]);
Adding Boundary Walls
Slide 25
Slide 25 text
for (let x = 0; x <= 560; x += 80) {
let divider = wall(x, 610, 20, 360);
Matter.World.add(engine.world, divider);
}
Adding Divider Walls
Slide 26
Slide 26 text
function peg(x, y) {
return Matter.Bodies.circle(x, y, 14, {
isStatic: true,
render: {
fillStyle: '#82c91e'
}
});
}
Peg Creation
Slide 27
Slide 27 text
let isStaggerRow = false;
for (let y = 200; y <= 400; y += 40) {
let startX = isStaggerRow ? 80 : 40;
for (let x = startX; x <= 520; x+= 80) {
Matter.World.add(engine.world, peg(x, y));
}
isStaggerRow = !isStaggerRow;
}
Field Of Pegs
function dropBead() {
Matter.World.add(engine.world, bead());
}
let dropBeadInterval = setInterval(dropBead, 2000);
Dropping Beads
Slide 30
Slide 30 text
DEMO TIME!
GALTON BOARD (ROUND 1)
Slide 31
Slide 31 text
Matter.Common.random(min, max);
function rand(min, max) {
return Math.random() * (max - min) + min;
}
Randomness
- vs -
Slide 32
Slide 32 text
function dropBead() {
let droppedBead = bead();
Matter.Body.setVelocity(droppedBead, {
x: rand(-0.05, 0.05),
y: 0
});
Matter.Body.setAngularVelocity(droppedBead, rand(-0.05, 0.05));
Matter.World.add(engine.world, droppedBead);
}
Making Things Less Perfect
Slide 33
Slide 33 text
function dropBead() {
let droppedBead = bead();
Matter.Body.setVelocity(droppedBead, {
x: rand(-0.05, 0.05),
y: 0
});
Matter.Body.setAngularVelocity(droppedBead, rand(-0.05, 0.05));
Matter.World.add(engine.world, droppedBead);
}
Making Things Less Perfect
Slide 34
Slide 34 text
function peg(x, y) {
return Matter.Bodies.circle(x, y, 14, {
restitution: 0.5,
// other properties here...
});
}
function bead() {
return Matter.Bodies.circle(280, 40, 11, {
restitution: 0.5,
// other properties here...
});
}
Adding Some Bounce
Slide 35
Slide 35 text
function peg(x, y) {
return Matter.Bodies.circle(x, y, 14, {
label: 'peg',
// other properties here...
});
}
Peg Labels