// Tears down any old sketch on #pt, sets bgcolor to "#123", returns your runner
run = quickStart(canvas, { bgcolor: "#135" })
run((time, ftime, space, form) => {
// 1) grab any existing world from the space
let world = space._world;
// 2) if this is the first frame, create & seed it
if (!world) {
world = new pts.World(space.innerBound, 1, 0);
const ptsArr = pts.Create.distributeRandom(space.innerBound, 50);
ptsArr.forEach((p, i) => {
const part = new pts.Particle(p)
.size(i === 0 ? 30 : 3 + (Math.random() * space.size.x) / 30)
.hit(pts.Num.randomRange(-50, 50), pts.Num.randomRange(-25, 25));
world.add(part);
});
world.particle(0).lock = true;
space._world = world; // persist for future frames
}
// 3) draw & update on every frame
world.drawParticles((p, i) => {
const color =
i === 0 ? "#fff" : ["#ff2d5d", "#42dc8e", "#2e43eb", "#ffe359"][i % 4];
form.fillOnly(color).point(p, p.radius, "circle");
});
world.update(ftime);
// 4) move the locked “cue ball” to the pointer
world.particle(0).position = space.pointer.clone();
})
import { pts, quickStart } from "@icezeeo/ptsjs"
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.
