0x00
bnb({
w: 540,
h: 540,
numFrames: 180,
loops: 3,
fps: 60,
chromaticAberration: 0.1,
record: false,
setup: (s, g) => {
g.shapes = [];
const center = s.createVector(s.width / 2, s.height / 2);
for (let i = 100; i > 0; i--) {
g.shapes.push(new Hexagon(s, center, 50 + i * 2));
}
},
draw: (s, t, g) => {
const backgroundColor = colorFn(animationFn(t));
s.background(backgroundColor);
g.shapes.forEach((hex, idx) => {
s.beginShape();
const offset = idx * 10;
const hexColor = colorFn(animationFn(idx / 1000 + t));
s.fill(hexColor);
s.strokeWeight(animationFn(t) / 2);
hex.vertices.forEach((v) => s.vertex(v.x, v.y));
s.endShape(s.CLOSE);
});
}
})
colorFn = d3.interpolateRainbow
animationFn = (x) =>
easing.easeBounceIn(linearstepUpDown(x, 0, 0.49, 0.51, 1), 2)
plot(animationFn, { zoom: [-0.1, 1.1] })
import { plot } from "@makio135/p5plot"
d3 = require("d3")
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.
