Creative Technologist, Data Scientist, Generative Artist (generatecoll)
viewof form = Inputs.form({
width: Inputs.range([0, 1000], { label: "Width", step: 1, value: 1000 }),
height: Inputs.range([4, 1000], { label: "Height", step: 1, value: 1000 }),
})
p5((s) => {
// Color
let clr = 0;
let bg = getColor();
let r = 200;
let cx, cy, cr, cn, nfx, nf, dt;
s.setup = function () {
s.createCanvas(W, H);
s.background(bg);
s.noStroke();
drawBackground();
drawFunkyCircle(W * 0.5, H * 0.5, 300, 300, s.floor(1 + s.random(20)));
};
s.draw = function () {
s.loadPixels();
for (let i = 0; i < 10; i++) {
cn = s.floor(s.random(10));
cx = s.random(W);
cy = s.random(H);
nf = 0.002;
nfx = s.noise(cx * nf, cy * nf);
cr = (100 * cy) / H;
dt = s.dist(W * 0.5, W * 0.5, cx, cy);
if ((dt > 200) & (nfx > 0.4) & (nfx < 0.6)) {
s.push();
s.translate(cx, cy);
s.rotate(nfx * s.TWO_PI);
drawFunkyCircle(0, 0, cr, cr, cn);
s.pop();
}
}
};
const drawBackground = () => {
let c1 = s.color(getColor());
for (let i = 0; i < 100000; i++) {
s.fill(c1, 50);
s.ellipse(s.random(W), s.random(H), 3, 3);
}
};
const readColor = (x, y) => {
let d = s.pixelDensity();
let index = (y * W + x) * d * 4;
return s.color(
s.pixels[index],
s.pixels[index + 1],
s.pixels[index + 2],
s.pixels[index + 3]
);
};
const checkArea = (x, y, w, jmp) => {
let res = true;
let cc;
for (let i = -w; i < w; i += jmp) {
for (let j = -w; j < w; j += jmp) {
cc = readColor(x + i, y + j);
if (cc == bg) {
res = false;
i = w;
j = w;
}
}
}
return res;
};
const drawFunkyCircle = (x, y, w, h, n) => {
let c1 = s.color(getColor());
let c2 = s.color(getColor());
let clr;
let w_diff = w / n;
for (let i = n; i > 0; i--) {
clr = i % 2 == 0 ? s.color(255) : 0;
s.fill(clr);
s.arc(x, y, w_diff * i, w_diff * i, s.TWO_PI * 0.25, s.TWO_PI * 0.75);
}
s.push();
s.translate(x, y);
s.rotate(s.PI);
for (let i = n; i > 0; i--) {
clr = i % 2 == 0 ? c1 : c2;
s.fill(clr);
s.arc(0, 0, w_diff * i, w_diff * i, s.TWO_PI * 0.25, s.TWO_PI * 0.75);
}
s.pop();
};
})
W = form.width
H = form.height
import { p5 } from "@tmcw/p5"
import { try_it } from "@observablehq/notes"
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.
