Exploring 2D Physics in JavaScript

EXPLORING 2D PHYSICS IN JAVASCRIPT WILL BOYD @lonekorean

BODIES WORLD ENGINE RUNNER RENDER △

BODIES WORLD ENGINE RUNNER RENDER △ The physical objects that
are being simulated

The collection of bodies in a shared space BODIES WORLD
ENGINE RUNNER RENDER △

BODIES WORLD ENGINE RUNNER RENDER △ Updates the simulation of
the world

BODIES WORLD ENGINE RUNNER RENDER △ Continuously updates the engine

BODIES WORLD ENGINE RUNNER RENDER △ Visualizes the output of
the engine as a <canvas> element

<!DOCTYPE html> <html> <head> <title>Minimal Setup</title> <script src="matter.min.js" defer></script> <script
src="my.js" defer></script> </head> <body></body> </html> Minimal HTML

// engine let engine = Matter.Engine.create(); // render let render
= Matter.Render.create({ element: document.body, engine: engine }); Matter.Render.run(render); // runner let runner = Matter.Runner.create(); Matter.Runner.run(runner, engine); Basic Setup

// params: x, y, radius let ball = Matter.Bodies.circle(400, 100,
50); Matter.World.add(engine.world, ball); Simple Body

y x (0, 0)

( , ) y x radius Matter.Bodies.circle(x, y, radius);

Matter.Bodies.rectangle(x, y, width, height); ( , ) y x width
height

DEMO TIME! MINIMAL SETUP

Matemateca (IME/USP)/Rodrigo Tetsuo Argenton CC-BY-SA 4.0 LET’S MAKE A GALTON
BOARD!

BOUNDARY WALLS

BOUNDARY WALLS DIVIDER WALLS

BOUNDARY WALLS DIVIDER WALLS PEGS

BOUNDARY WALLS DIVIDER WALLS PEGS BEADS

let render = Matter.Render.create({ element: document.body, engine: engine, options: {
width: 560, height: 800, background: ‘#f8f9fa', wireframes: false } }); Setting Render Options

// params: x, y, width, height, options let bottom =
Matter.Bodies.rectangle(280, 800, 560, 20, { isStatic: true, render: { fillStyle: '#868e96' } }); Matter.World.add(engine.world, bottom); Adding Bottom Wall

function wall(x, y, width, height) { return Matter.Bodies.rectangle(x, y, width,
height, { isStatic: true, render: { fillStyle: '#868e96' } }); } Abstracting Wall Creation

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

for (let x = 0; x <= 560; x +=
80) { let divider = wall(x, 610, 20, 360); Matter.World.add(engine.world, divider); } Adding Divider Walls

function peg(x, y) { return Matter.Bodies.circle(x, y, 14, { isStatic:
true, render: { fillStyle: '#82c91e' } }); } Peg Creation

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 bead() { return Matter.Bodies.circle(280, 40, 11, { render: {
fillStyle: '#e64980' } }); } Bead Creation

function dropBead() { Matter.World.add(engine.world, bead()); } let dropBeadInterval = setInterval(dropBead,
2000); Dropping Beads

DEMO TIME! GALTON BOARD (ROUND 1)

Matter.Common.random(min, max); function rand(min, max) { return Math.random() * (max
- min) + min; } Randomness - vs -

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

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

function peg(x, y) { return Matter.Bodies.circle(x, y, 14, { label:
'peg', // other properties here... }); } Peg Labels

Matter.Events.on(engine, ‘collisionStart', lightPeg); function lightPeg(event) { event.pairs .filter((pair) => pair.bodyA.label
=== 'peg') .forEach((pair) => { pair.bodyA.render.fillStyle = '#4c6ef5'; }); } Lighting Up Pegs

DEMO TIME! GALTON BOARD (ROUND 2)

LET’S TALK ABOUT DEBUGGING WITH MATTER TOOLS!

DEMO TIME! MATTER TOOLS

<!DOCTYPE html> <html> <head> <title>Matter Tools</title> <script src="matter.min.js" defer></script> <script
src="matter-tools.gui.min.js" defer></script> <script src="matter-tools.demo.min.js" defer></script> <script src="my.js" defer></script> </head> <body></body> </html> Matter Tools HTML

MatterTools.Demo.create({ appendTo: document.body, tools: { gui: true }, examples: [
{ id: 'galton-board', init: initGaltonBoard, } ] }); Matter Tools Setup

let mouseConstraint = Matter.MouseConstraint.create(engine, { mouse: Matter.Mouse.create(render.canvas) }); Matter.World.add(engine.world, mouseConstraint);
Mouse Control

DEMO TIME! LIGHTNING ROUND

DEMO TIME! PINBALL

ATTRACTORS + COLLISION FILTERS

ATTRACTORS + COLLISION FILTERS CONSTRAINTS

ATTRACTORS + COLLISION FILTERS CONSTRAINTS COMPOSITES

DEMO TIME! PAGE INTERACTIONS

THANKS! WILL BOYD @lonekorean ★ brm.io/matter-js/ ★ lonekorean.github.io/javascript-physics/

Exploring 2D Physics in JavaScript

Exploring 2D Physics in JavaScript

More Decks by Will Boyd

Other Decks in Technology

Featured

Transcript