0x04
bnb({
w: 540,
h: 540,
numFrames: 180,
fps: 30,
// chromaticAberration: 0.5,
// shutterAngle: 0.2,
setup: (s, g) => {
g.shapes = [];
const center = s.createVector(s.width / 2, s.height / 2);
for (let i = 19; i > 0; i--) {
g.shapes.push(new Hexagon(s, center, 30 + i * 12));
}
},
draw: (s, t, g) => {
s.background("black");
g.shapes.forEach((hex, idx) => {
// split t in six equal chunks; if i == cur => animate; if i < cur => 1, if i > cur => 0;
// split t in six chunks and extrapolate [t0, t1] * 6; t0 = 0t/6; t1 = t/6; t2 = 2t/6; t3 = 3t/6...
// [t1,t2] = [t/6, 2t/6] ... [0, 1] => (x - t/6) * 6
// (x - x0) * 6
const curr = Math.floor(t * 18);
const tt = (t - curr / 18) * 18;
for (let i = 0; i < hex.vertices.length; i++) {
const v1 = hex.vertices[i];
const v2 = hex.vertices[(i + 1) % hex.vertices.length];
let animate = 0;
if (curr == i) {
animate = animationFn(tt);
} else if (curr > 11 && curr % 6 == i) {
animate = 1 - animationFn(tt);
} else if ((curr < 6 && curr < i) || (curr > 11 && curr % 6 > i)) {
animate = 0;
// } else if (
// (curr < 6 && curr > i) ||
// (curr > 11 && curr % 6 < i) ||
// (curr > 5 && curr < 11)
// ) {
} else {
animate = 1;
}
const lineColor = colorFn((t * 2 + idx / 10) % 1);
s.stroke(lineColor);
s.strokeWeight(animate ? 12 : 0);
if (curr < 6) {
s.line(
v1.x,
v1.y,
lerp(v1.x, v2.x, animate),
lerp(v1.y, v2.y, animate)
);
} else {
s.line(
lerp(v2.x, v1.x, animate),
lerp(v2.y, v1.y, animate),
v2.x,
v2.y
);
}
}
});
}
})
colorFn = (x) => d3.interpolateRainbow(x % 1)
animationFn = (x) => x || easing.easeSin(x)
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.
