Data Viz / Photography / Generative Art
{
var element = html`<div></div>`;
// create engine
var engine = Engine.create(),
world = engine.world;
var height = 700;
// create renderer
var render = Render.create({
element: element,
engine: engine,
options: {
width: width,
height: height,
wireframes: false,
background: 'rgb(255,255,255)'
}
});
Engine.run(engine);
Render.run(render);
let ground = Bodies.rectangle(width / 2, height, width, 5, {
isStatic: true
});
let left = Bodies.rectangle(0, height / 2, 5, height, {
isStatic: true
});
let right = Bodies.rectangle(width, height / 2, 5, height, {
isStatic: true
});
World.add(engine.world, [ground, left, right]);
const Spawn = () => {
// 1. Create ball
let size = 38;
const ball = Matter.Bodies.circle(
Math.random() * width, // x
-10, // y
size, // size
{
render: {
sprite: {
texture: ABCs[Math.floor(Math.random() * ABCs.length)],
xScale: size / Max_Size,
yScale: size / Max_Size
}
}
}
);
// 2. Add ball to world
World.add(engine.world, [ball]);
// 3. Set time to remove ball from world
setTimeout(() => {
World.remove(engine.world, ball);
}, 10000);
};
// Spawn every 100 ms
setInterval(Spawn, 500 - Spawn_Rate);
return element;
}
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.
