{
replay;
const width = 600,
height = 200,
PS = [];
function update(app) {
app.append(cm.clear, { fill: cm.rgb(255) });
const groups = app.data(PS).append(cm.group, {
x: (d) => d.origin.x,
y: (d) => d.origin.y
});
groups
.data((d) => d.particles)
.call(updateParticles)
.call(drawParticles);
}
function mouseDown(app) {
PS.push({
origin: cm.vec(app.prop("mouseX"), app.prop("mouseY")),
particles: []
});
}
function dispose(app) {
invalidation.then(() => app.dispose());
}
return cm
.app({ width, height })
.on("update", update)
.on("mouseDown", mouseDown)
.call(dispose)
.start()
.node();
}
function drawParticles(flow) {
flow
.append(cm.circle, {
x: (d) => d.location.x,
y: (d) => d.location.y,
r: 5,
fill: cm.rgb(0),
stroke: cm.rgb(0),
fillOpacity: (d) => d.lifespan,
strokeOpacity: (d) => d.lifespan
})
.transform(cm.mapAttrs, {
fillOpacity: { domain: [0, 255], range: [0, 0.6] },
strokeOpacity: { domain: [0, 255], range: [0, 1] }
});
}
function updateParticles(flow) {
flow
.process(cm.push, () => ({
location: cm.vec(0, 0),
velocity: cm.vec(cm.random(-1, 1), cm.random(-2, 0)),
acceleration: cm.vec(0, 0.05),
lifespan: 255
}))
.process(
cm.eachRight,
(d, i, array) => d.lifespan < 0 && array.splice(i, 1)
)
.process(cm.each, (d) => (d.lifespan -= 2))
.process(cm.each, (d) => {
d.velocity.add(d.acceleration);
d.location.add(d.velocity);
});
}
cm = require("@charming-art/charming@0.0.6")
import { quote } from "@pearmini/charming-shared"
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.
