bnb({
w: 540,
h: 540,
numFrames: 180,
loops: 3,
fps: 30,
chromaticAberration: 0.1,
record: false,
setup: (s, g) => {
g.shapes = [];
for (let i = 0; i < 306; i++) {
g.shapes.push(new Hexagon(s, i));
}
},
draw: (s, t, g) => {
s.background("white");
g.shapes.forEach((c) => c.display(s, t, g));
}
})
class Hexagon {
constructor(s, i) {
this.radius = 43.3 / 2;
this.i = i;
this.cols = Math.ceil(s.width / (this.radius * 2)) + 5;
this.colorInterpolator = d3.interpolateRgb(
"gray",
palette[this.i % palette.length]
);
}
display(s, t, g) {
const angle = s.TAU / 6;
const { radius } = this;
const { x, y } = getCenter(
Math.floor(this.i / this.cols) - 2,
(this.i % this.cols) - 1,
radius
);
s.push();
s.stroke("gray");
for (let a = 0; a < 6; a++) {
const angle = (s.TAU * a) / 6;
const lineLength = radius;
// if we animate the line length we get a fade in effect
// ease(linearstepUpDown(t, this.stagger, 0.4, 0.6 + this.stagger, 1), 2) * radius;
// make lines flicker when everything's fully coloured
if (
a * 3 === Math.round(Math.random() * 18) &&
lineLength >= radius &&
t < 0.6 &&
t > 0.4
) {
continue;
}
const animate = ease(linearstepUpDown(t, 0.1, 0.3, 0.7, 0.9), 2);
s.strokeWeight(animate + 1);
const animateColor = ease(linearstepUpDown(t, 0.3, 0.4, 0.6, 0.7), 2);
s.stroke(this.colorInterpolator(animateColor));
const sx = x + s.cos(angle * animate) * lineLength;
const sy = y + s.sin(angle * animate) * lineLength;
s.line(x, y, sx, sy);
}
s.pop();
}
}
savedPalette = ["#81e9e6", "#48d6d2", "#122c91", "#fefcbf", "#2a6fdb"]
palette = {
if (randomColors) {
return shuffle(getRandomPalette());
} else {
return savedPalette;
}
}
getCenter = (row, col, radius) => ({
x: (col + 2 / 3) * 1.5 * radius,
y: (col % 2 ? row + 1 : row + 0.5) * Math.sqrt(3) * radius
})
plot((x) => ease(linearstepUpDown(x, 0.3, 0.5, 0.5, 0.7), 2), {
zoom: [-0.5, 1.5]
})
import { plot } from "@makio135/p5plot"
import { bnb } from "@makio135/bnb"
import { getRandomPalette, displayPalettes } from "@makio135/give-me-colors"
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.
