{
const mover = {
location: cm.vec(),
velocity: cm.vec(),
acceleration: cm.vec(),
mass: 1
};
function update(app) {
app.append(cm.clear, { fill: cm.rgb(255) });
app
.datum(mover)
.process(cm.each, toMouse)
.process(cm.each, move)
.process(cm.each, checkEdges)
.append(cm.rect, {
x: (d) => d.location.x,
y: (d) => d.location.y,
width: 30,
height: 10,
fill: cm.rgb(175),
stroke: cm.rgb(0),
rotate: (d) => d.velocity.angle()
});
}
function dispose(app) {
invalidation.then(() => app.dispose());
}
return cm
.app({ width: 600, height: 200 })
.on("update", update)
.call(dispose)
.call(frame)
.start()
.node();
}
function move(d) {
d.velocity.add(d.acceleration);
d.location.add(d.velocity);
d.acceleration.mult(0);
}
function toMouse(d, i, data, flow) {
const app = flow.app();
const mouse = cm.vec(app.prop("mouseX"), app.prop("mouseY"));
const force = mouse.sub(d.location).mag(0.5);
applyForce(d, force);
}
function checkEdges(d, i, data, flow) {
const app = flow.app();
d.location.clampX(app.prop("width")).clampY(app.prop("height"));
d.velocity.clamp(4);
}
function applyForce(d, f) {
const a = cm.vecDiv(f, d.mass);
d.acceleration.add(a);
}
function frame(app) {
app.node().style.border = "solid #000 1px";
}
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.
