{
replay;
const width = 640,
height = 640,
x = cm.randomNoise(0, width),
y = cm.randomNoise(0, height),
size = cm.randomNoise(0, 100),
rotate = cm.randomNoise(0, cm.TWO_PI),
hue = cm.randomNoise(0, 360);
function setup(app) {
app.append(cm.clear, { fill: "orange" });
}
function update(app) {
const t = app.prop("frameCount") / 100;
app
.append(cm.group, {
rotate: rotate(t),
x: x(t),
y: y(t)
})
.append(cm.rect, {
x: 0,
y: 0,
width: size(t),
height: size(t),
fill: cm.hsl(hue(t), 100, 50),
stroke: "black",
fillOpacity: 0.5
});
}
function dispose(app) {
invalidation.then(() => app.dispose());
}
return cm
.app({ width, height })
.on("beforeAll", setup)
.on("update", update)
.call(dispose)
.start()
.node();
}
cm = require("@charming-art/charming@0.0.7")
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.
