Data Viz / Photography / Generative Art
{
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: width,
height: 600,
wireframes: false,
background: 'rgb(255,255,255)'
}
});
Engine.run(engine);
Render.run(render);
const Spawn = () => {
// 1. Create ball
let size = Math.random(0.5, 1) * Max_Size;
const ball = Matter.Bodies.circle(
Math.random() * width, // x
-10, // y
size, // size
{
render: {
sprite: {
texture: img,
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);
}, 2000);
};
// 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.
