Creative Technologist, Data Scientist, Generative Artist (generatecoll)
p5((s) => {
let system;
let x = 0;
let y = 0;
let n = 20;
let kn = 20;
let j = 1;
let x_shift = 0;
let shift = 100;
// Oscillator
let ocs = 20;
let osc_speed = form.osc;
let rot_speed = 0;
// Color
let clr = 0;
let bg = clrbg;
let c1 = s.color(clr1);
let c2 = s.color(clr2);
let c3 = s.color(clr3);
let c4 = s.color(clr4);
s.setup = function () {
s.createCanvas(1000, 500);
s.noStroke();
};
s.draw = function () {
s.background(bg);
for (let k = 0; k < kn; k++) {
for (let i = 0; i < n; i++) {
if (k % 2 == 0) {
x_shift = shift;
} else {
x_shift = -shift;
}
s.push();
x = (x_shift + s.width * i) / n;
y =
20 +
s.height * (k / kn) +
ocs * Math.sin(((1 + i + j) / n) * Math.PI);
s.translate(x, y);
if (k % 2 == 0) {
clr = s.lerpColor(c1, c2, i / n);
s.fill(clr);
s.rotate(j * 0.5);
} else {
clr = s.lerpColor(c3, c4, i / n);
s.fill(clr);
s.rotate(j * -0.5);
}
s.rect(0, 0, form.size, form.size);
s.pop();
}
}
// c4 = sketch.lerpColor(c2, c3, j * 0.2);
//clr = c4;
j += form.osc;
};
})
clr1 = getColor()
clr2 = getColor()
clr3 = getColor()
clr4 = getColor()
clrbg = getColor()
import { p5 } from "@tmcw/p5"
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.
