0x06
bnb({
w: 540,
h: 540,
numFrames: 360,
loops: 1,
fps: 60,
setup: (s, g) => {
g.shapes = [];
const center = s.createVector(s.width / 2, s.height / 2);
for (let i = 20; i > 0; i--) {
g.shapes.push(
new Hexagon(
s,
center,
s.width / 18 + i * Math.max(Math.round(s.width / 90), 1)
)
);
}
},
draw: (s, t, g) => {
s.background("black");
g.shapes.forEach((hex, idx) => {
const offset = idx * 10;
for (let i = 0; i < hex.vertices.length; i++) {
const tt = t < 0.5 ? (t * 2) % 1 : ((1 - t) * 2) % 1;
const v1 = hex.vertices[i];
const v2 = hex.vertices[(i + 1) % hex.vertices.length];
const animate = animationFn((tt * 20) / idx);
const lineColor = colorFn(animate + idx / 10);
s.stroke(lineColor);
s.strokeWeight(1.66);
s.line(
lerp(v1.x, v2.x, animate),
lerp(v1.y, v2.y, animate),
lerp(v2.x, v1.x, animate),
lerp(v2.y, v1.y, animate)
);
}
});
}
})
colorFn = (x) => d3.interpolateRainbow((x / 3) % 1)
animationFn = (x) => ease(linearstepUpDown(x % 1, 0.1, 0.35, 0.65, 0.9), 2) * 2
plot(animationFn, { zoom: [-0.05, 3] })
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.
