p5((sketch) => {
let system;
const height = 300;
sketch.colorMode(sketch.HSL);
const darkColor = sketch.color(240, 50.79, 20.49);
const lightColor = sketch.color(359, 80.0, 90.0);
sketch.setup = function () {
sketch.createCanvas(width, 300);
sketch.noFill();
sketch.strokeWeight(3);
};
const generatePoint = (index, time) => {
const x =
lathe.inflectionThroughPoint(
lathe.fold(index / (150 + time / 200), 2),
0.5,
0.5,
lathe.circularArc,
1
) *
width *
1.5 -
width * 0.25;
const y = lathe.sineFold(index / 75, 2) * height;
sketch.vertex(x, y);
};
sketch.draw = function () {
sketch.background(darkColor);
const length = 5400;
for (let i = 0; i < length; i++) {
const t = lathe.sineFold((sketch.frameCount + i) / 80, 2);
sketch.stroke(sketch.lerpColor(darkColor, lightColor, t));
sketch.beginShape();
for (let i2 = 0; i2 < 6; i2++) {
generatePoint(i + i2 / 5, sketch.frameCount);
}
sketch.endShape();
}
};
})
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.
