Creative Technologist, Data Scientist, Generative Artist (generatecoll)
p5((s) => {
let c1 = getColor();
let c2 = getColor();
let c3 = getColor();
let c4 = getColor();
s.setup = function () {
s.createCanvas(W, H);
};
const draw_circle = ([x, y], r, c) => {
s.noStroke();
s.fill(c);
s.circle((x + 1) * W * 0.5, (y + 1) * W * 0.5, r * 0.5);
};
let k = (a, b) => (a > 0 && b > 0 ? L(a, b) : a > b ? a : b);
let spread = s.random(0.8);
const sdf = ([x, y]) => {
let bal =
Math.abs(sf.sdf_rep(sf.sdf_circle([x, y], [-spread, 0], 0.2), 0.2)) -
0.05;
let bbl =
Math.abs(sf.sdf_rep(sf.sdf_circle([x, y], [spread, 0], 0.2), 0.2)) - 0.05;
let bbc =
Math.abs(sf.sdf_rep(sf.sdf_circle([x, y], [0, -spread], 0.2), 0.2)) -
0.05;
let bbd =
Math.abs(sf.sdf_rep(sf.sdf_circle([x, y], [0, spread], 0.2), 0.2)) - 0.05;
return Math.min(Math.max(bal, bbl), Math.max(bbc, bbd));
};
s.draw = function () {
for (let k = 0; k < 10000; k++) {
let p = [R(2) - 1, R(2) - 1];
let d = sdf(p);
let col = c1;
if (d < -0.01) col = c4;
if (d > 0.01) col = c3;
draw_circle(p, 2, col);
}
};
})
p5((s) => {
let c1 = getColor();
let c2 = getColor();
let c3 = getColor();
let c4 = getColor();
s.setup = function () {
s.createCanvas(W, H);
};
const draw_circle = ([x, y], r, c) => {
s.noStroke();
s.fill(c);
s.circle((x + 1) * W * 0.5, (y + 1) * W * 0.5, r * 0.5);
};
let k = (a, b) => (a > 0 && b > 0 ? L(a, b) : a > b ? a : b);
let spread = s.random(0.8);
const sdf = ([x, y]) => {
let bal =
Math.abs(sf.sdf_rep(sf.sdf_rhombus([x, y], [-0.1, 0]), 0.2)) - 0.05;
let bbl =
Math.abs(sf.sdf_rep(sf.sdf_circle([x, y], [-0.1, 0], 0.2), 0.2)) - 0.05;
let bbc =
Math.abs(sf.sdf_rep(sf.sdf_circle([x, y], [-0.1, 0], 0.2), 0.2)) - 0.05;
return Math.max(bbl, Math.min(bbc, bal));
};
s.draw = function () {
for (let k = 0; k < 10000; k++) {
let p = [R(2) - 1, R(2) - 1];
let d = sdf(p);
let col = c1;
if (d < -0.01) col = c4;
if (d > 0.01) col = c3;
draw_circle(p, 2, col);
}
};
})
sf = {
const sdf_func = {
sdf_rep: (x, r) => {
x /= r;
x -= Math.floor(x) + 0.5;
x *= r;
return x;
},
sdf_box: ([x, y], [cx, cy], [w, h]) => {
x -= cx;
y -= cy;
return Math.max(Math.abs(x) - w, Math.abs(y) - h);
},
sdf_circle: ([x, y], [cx, cy], r) => {
x -= cx;
y -= cy;
return L(x, y) - r;
},
sdf_rhombus([x, y], [cx, cy], r) {
let p, b, h, d, ss;
p = [x - cx, y - cy].map((x) => Math.abs(x));
b = [cx, cy];
// Clamp function
h = clamp(
ndot(v_vmult(v_sub([cx, cy], 2.0), p), b) / dot([cx, cy], [cx, cy]),
-1,
1
);
d = length(v_vmult(v_vmult(v_sub(p, 0.5), b), [1.0 - h, 1.0 + h]));
return d * sign(p[0] * b[1] + p[1] * b[0] - b[0] * b[1]) - r;
}
};
return sdf_func;
}
sf.sdf_rhombus([4, 5], [5, 4])
v_mult = (v, n) => v.map((x) => x * n)
v_add = (v, n) => v.map((x) => x + n)
v_sub = (v, n) => v.map((x) => x - n)
v_vmult = (v1, v2) => v1.map((v, i) => v * v2[i])
[5, 3].map((x) => x - 2)
sign = (x) => (x > 0 ? 1.0 : x == 0 ? 0 : -1)
dot = ([x, y], [cx, cy]) => {
return x * cx + y * cy;
}
ndot = ([x, y], [cx, cy]) => {
return x * cx - y * cy;
}
length = ([x, y]) => {
return Math.sqrt(x ** 2 + y ** 2);
}
clamp = (num, min, max) => {
return Math.min(Math.max(num, min), max);
}
{
let a = [2, 4];
return a[0];
}
[5, 3].map((x) => x - 2)
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.
