p5((sketch) => {
let system;
const height = 480;
sketch.colorMode(sketch.HSL);
const darkColor = sketch.color(250, 60, 20);
const lightColor = sketch.color(359, 80, 90);
sketch.setup = function () {
sketch.createCanvas(width, height);
sketch.fill(lightColor);
sketch.strokeWeight(0.5);
};
sketch.draw = function () {
sketch.background(darkColor);
const length = 5400;
const tileWidth = 20;
const tileHeight = 17;
const mx = sketch.mouseX;
const my = sketch.mouseY;
const createTri = (cx, cy, flipped = false, t) => {
const blend = lathe.sineFold(
lathe.fold(
Math.atan2(mx - cx, my - cy) / Math.PI +
mx / width +
my / width +
(flipped ? -0.01 : 0.01),
9
) +
(sketch.dist(mx, my, cx, cy) / width) * 2,
1
);
const color = sketch.lerpColor(darkColor, lightColor, blend);
sketch.fill(color);
sketch.stroke(color);
if (flipped) {
sketch.triangle(
cx,
cy + tileHeight / 2,
cx - tileWidth / 2,
cy - tileHeight / 2,
cx + tileWidth / 2,
cy - tileHeight / 2
);
} else {
sketch.triangle(
cx,
cy - tileHeight / 2,
cx - tileWidth / 2,
cy + tileHeight / 2,
cx + tileWidth / 2,
cy + tileHeight / 2
);
}
};
for (let cx = 0; cx < width + tileWidth; cx = cx + tileWidth) {
for (let cy = 0; cy < height + tileHeight; cy = cy + tileHeight * 2) {
createTri(cx, cy);
createTri(cx, cy + tileHeight, true);
createTri(cx + tileWidth / 2, cy, true);
createTri(cx + tileWidth / 2, cy + tileHeight);
}
}
};
})
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.
