p5((sketch) => {
let system;
const height = 480;
let mouseX = sketch.mouseX;
let mouseY = sketch.mouseY;
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.noStroke();
};
sketch.draw = function () {
sketch.background(darkColor);
// smooth mouse adjustments
mouseX = sketch.lerp(mouseX, sketch.mouseX, 0.2);
mouseY = sketch.lerp(mouseY, sketch.mouseY, 0.2);
const foldAmt = 31;
const biasAmt = lathe.fold(mouseY / height, 3);
const quantizeBiased = (input) => {
input = lathe.fold(input, foldAmt);
input = lathe.uniToBi(input);
input = lathe.mirrorAcrossOrigin(input, lathe.circularArc, biasAmt);
input = lathe.quantize(input, mouseX / width / 2);
input = lathe.mirrorAcrossOrigin(input, lathe.circularArc, 1 - biasAmt);
input = lathe.biToUni(input);
return input;
};
sketch.beginShape();
for (let i = 0; i < width; i++) {
let y = i / width;
sketch.fill(
sketch.lerpColor(darkColor, lightColor, lathe.fold(i / width, foldAmt))
);
sketch.circle(i, quantizeBiased(y) * height, 3);
}
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.
