Published
Edited
May 26, 2021
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Engine = Matter.Engine
Insert cell
Render = Matter.Render
Insert cell
World = Matter.World
Insert cell
Bodies = Matter.Bodies
Insert cell
Insert cell
objects = {
replay;
let boxA = Bodies.rectangle(400, 200, 80, 80);
let boxB = Bodies.rectangle(450, 50, 80, 80);
let ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });

let objects = [boxA, boxB, ground];
return objects;
}
Insert cell
Insert cell
Insert cell
{
var element = html`<div></div>`;

// create engine
var engine = Engine.create(),
world = engine.world;

// create renderer
var render = Render.create({
element: element,
engine: engine,
options: {
width: 600,
height: 600,
wireframes: false
}
});

World.add(engine.world, objects);

Engine.run(engine);
Render.run(render);

return element;
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more