29:null 2a:["$","title",null,{"children":"Genuary 2023 - Day 8 - SDF | Chris Ried | Observable"}] 2f:T46d,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); } }; })30:T20a3,// ═══════════════════════════════════════════════════════════════ // Random SDF pattern generator // // Re-run this cell to roll a new pattern. Each run builds a fresh // pipeline: domain transform → shape (or shape combo) → post-process. // // Click the canvas to regenerate without re-running the cell // (keeps the same color palette). // // Recipe is logged to the console so you can see what was rolled. // // Assumes: W, H, R, getColor, sf // ═══════════════════════════════════════════════════════════════ p5((s) => { let c1 = getColor(); let c2 = getColor(); let c3 = getColor(); let c4 = getColor(); // ── Random helpers ─────────────────────────────────────────── const pick = (arr) => arr[Math.floor(s.random(arr.length))]; const rand = (lo, hi) => s.random(lo, hi); const chance = (p) => s.random() < p; let recipe = {}; // ── Stage 1 · Domain transform ─────────────────────────────── // identity | tile | tile_aniso | polar_fold | warp // (every transform is preceded by a random rotation) const makeDomain = () => { const rot = rand(0, Math.PI * 2); const ca = Math.cos(rot), sa = Math.sin(rot); const rotate = ([x, y]) => [ca * x - sa * y, sa * x + ca * y]; const kind = pick(["identity", "tile", "tile_aniso", "polar_fold", "warp"]); recipe.domain = kind; if (kind === "identity") return rotate; if (kind === "tile") { const t = rand(0.2, 0.45); recipe.tile = t.toFixed(3); return (p) => { const [x, y] = rotate(p); return [sf.sdf_rep(x, t), sf.sdf_rep(y, t)]; }; } if (kind === "tile_aniso") { const tx = rand(0.2, 0.45); const ty = rand(0.2, 0.45); recipe.tile = `${tx.toFixed(3)}×${ty.toFixed(3)}`; return (p) => { const [x, y] = rotate(p); return [sf.sdf_rep(x, tx), sf.sdf_rep(y, ty)]; }; } if (kind === "polar_fold") { const folds = Math.floor(rand(3, 13)); const off = rand(0.15, 0.5); const an = Math.PI / folds; const TAU = 2 * an; recipe.folds = folds; recipe.radial_offset = off.toFixed(3); return (p) => { const [x, y] = rotate(p); let a = Math.atan2(y, x); const r = Math.sqrt(x * x + y * y); a = ((((a + an) % TAU) + TAU) % TAU) - an; return [r * Math.cos(a) - off, r * Math.sin(a)]; }; } if (kind === "warp") { const fx = rand(2, 7), fy = rand(2, 7); const ax = rand(0.05, 0.15), ay = rand(0.05, 0.15); recipe.warp = `freq ${fx.toFixed(1)},${fy.toFixed(1)} · amp ${ax.toFixed( 2 )},${ay.toFixed(2)}`; return (p) => { const [x, y] = rotate(p); return [x + ax * Math.sin(y * fy), y + ay * Math.sin(x * fx)]; }; } }; // ── Stage 2 · Base shape ───────────────────────────────────── const makeShape = () => { const kind = pick([ "circle", "hexagon", "octagon", "pentagon", "star5", "hexagram", "equilateral_triangle", "rhombus", "vesica", "moon", "isosceles_triangle", "rounded_x", "cross" ]); recipe.shapes = recipe.shapes || []; recipe.shapes.push(kind); const r = rand(0.08, 0.2); if (kind === "circle") return (p) => sf.sdf_circle(p, [0, 0], r); if (kind === "hexagon") return (p) => sf.sdf_hexagon(p, [0, 0], r); if (kind === "octagon") return (p) => sf.sdf_octagon(p, [0, 0], r); if (kind === "pentagon") return (p) => sf.sdf_pentagon(p, [0, 0], r); if (kind === "hexagram") return (p) => sf.sdf_hexagram(p, [0, 0], r); if (kind === "equilateral_triangle") return (p) => sf.sdf_equilateral_triangle(p, [0, 0], r); if (kind === "star5") { const rf = rand(0.3, 0.55); return (p) => sf.sdf_star5(p, [0, 0], r, rf); } if (kind === "rhombus") { const bx = rand(0.08, 0.18), by = rand(0.08, 0.18); return (p) => sf.sdf_rhombus(p, [0, 0], [bx, by]); } if (kind === "vesica") { const d = rand(0.04, r * 0.9); return (p) => sf.sdf_vesica(p, [0, 0], r, d); } if (kind === "moon") { const d = rand(0.05, 0.12); return (p) => sf.sdf_moon(p, [0, 0], d, r, r); } if (kind === "isosceles_triangle") { const qx = rand(0.08, 0.15), qy = rand(0.15, 0.28); return (p) => sf.sdf_isosceles_triangle(p, [0, 0], [qx, qy]); } if (kind === "rounded_x") { const w = rand(0.1, 0.22), rr = rand(0.02, 0.05); return (p) => sf.sdf_rounded_x(p, [0, 0], w, rr); } if (kind === "cross") { const bw = rand(0.1, 0.2), bh = rand(0.03, 0.08); return (p) => sf.sdf_cross(p, [0, 0], [bw, bh]); } }; // ── Stage 3 · Composition (single shape, or two combined) ──── const makeComposition = () => { const a = makeShape(); if (chance(0.55)) { recipe.composition = "single"; return a; } const b = makeShape(); const ox = rand(-0.15, 0.15); const oy = rand(-0.15, 0.15); const mode = pick(["union", "intersect", "subtract"]); recipe.composition = mode; return (p) => { const da = a(p); const db = b([p[0] - ox, p[1] - oy]); if (mode === "union") return Math.min(da, db); if (mode === "intersect") return Math.max(da, db); return Math.max(-da, db); // subtract a from b }; }; // ── Stage 4 · Post-process ─────────────────────────────────── // solid → the raw signed distance // ring → abs(d) - t (single outline) // echo_fine → abs(rep(d, period)) - t (close-packed echo bands) // echo_coarse → same, wider spacing & thicker bands // Weighted toward echoes since they fill the field richly. const makePost = () => { const kind = pick([ "solid", "ring", "ring", "echo_fine", "echo_fine", "echo_coarse" ]); recipe.post = kind; if (kind === "solid") return (d) => d; if (kind === "ring") { const t = rand(0.015, 0.04); return (d) => Math.abs(d) - t; } if (kind === "echo_fine") { const p = rand(0.05, 0.1), t = rand(0.012, 0.022); return (d) => Math.abs(sf.sdf_rep(d, p)) - t; } if (kind === "echo_coarse") { const p = rand(0.1, 0.18), t = rand(0.025, 0.045); return (d) => Math.abs(sf.sdf_rep(d, p)) - t; } }; // ── Build the pipeline ─────────────────────────────────────── let sdf; const regenerate = () => { recipe = { shapes: [] }; const domain = makeDomain(); const composed = makeComposition(); const post = makePost(); sdf = (p) => post(composed(domain(p))); console.log("SDF recipe:", recipe); }; regenerate(); // ── p5 setup / draw ────────────────────────────────────────── s.setup = function () { s.createCanvas(W, H); s.background(255); }; 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); }; s.draw = function () { for (let k = 0; k < 10000; k++) { let p = [R(2) - 1, R(2) - 1]; let d = sdf(p); let col; if (d < -0.015) col = c4; else if (d < 0) col = c2; else if (d > 0.015) col = c3; else col = c1; draw_circle(p, 2, col); } }; // Click canvas → regenerate composition (keeps current palette) s.mousePressed = function () { if (s.mouseX < 0 || s.mouseX > W || s.mouseY < 0 || s.mouseY > H) return; regenerate(); s.background(255); }; })31:T595f,// ───────────────────────────────────────────────────────────── // 2D Signed Distance Functions — port of Inigo Quilez's article // https://iquilezles.org/articles/distfunctions2d/ // // Style follows your existing helpers: // p (point) = [x, y] // c (center) = [cx, cy] (translation applied first) // then per-shape parameters // // Requires your existing top-level helpers: // sign, dot, ndot, length, clamp // ───────────────────────────────────────────────────────────── sf = { const PI = Math.PI; const sqrt = Math.sqrt; const abs = Math.abs; const min = Math.min; const max = Math.max; const cos = Math.cos; const sin = Math.sin; const acos = Math.acos; const atan2 = Math.atan2; const pow = Math.pow; const floor = Math.floor; // dot2(v) = dot(v, v) — squared length, used a lot const dot2 = ([x, y]) => x * x + y * y; const sdf_func = { // ───── Domain repetition (yours, unchanged) ───── sdf_rep: (x, r) => { x /= r; x -= floor(x) + 0.5; x *= r; return x; }, // ───── Circle ───── sdf_circle: ([x, y], [cx, cy], r) => { return length([x - cx, y - cy]) - r; }, // ───── Box (proper Euclidean SDF) ───── sdf_box: ([x, y], [cx, cy], [w, h]) => { const dx = abs(x - cx) - w; const dy = abs(y - cy) - h; return length([max(dx, 0), max(dy, 0)]) + min(max(dx, dy), 0); }, // ───── Rounded Box ───── // r = [r_tr, r_br, r_tl, r_bl] (top-right, bottom-right, top-left, bottom-left) sdf_rounded_box: ([x, y], [cx, cy], [w, h], [r_tr, r_br, r_tl, r_bl]) => { const px = x - cx, py = y - cy; const rx = px > 0 ? r_tr : r_tl; const ry = px > 0 ? r_br : r_bl; const r = py > 0 ? rx : ry; const qx = abs(px) - w + r; const qy = abs(py) - h + r; return min(max(qx, qy), 0) + length([max(qx, 0), max(qy, 0)]) - r; }, // ───── Oriented Box (segment with thickness) ───── // a, b = endpoints (in world space; cx/cy is added on top) sdf_oriented_box: ([x, y], [cx, cy], [ax, ay], [bx, by], th) => { const px = x - cx, py = y - cy; const l = length([bx - ax, by - ay]); const dx = (bx - ax) / l; const dy = (by - ay) / l; const mx = (ax + bx) * 0.5; const my = (ay + by) * 0.5; let qx = px - mx, qy = py - my; // mat2(dx, -dy, dy, dx) * q (column-major) [qx, qy] = [dx * qx + dy * qy, -dy * qx + dx * qy]; qx = abs(qx) - l * 0.5; qy = abs(qy) - th * 0.5; return length([max(qx, 0), max(qy, 0)]) + min(max(qx, qy), 0); }, // ───── Segment ───── sdf_segment: ([x, y], [ax, ay], [bx, by]) => { const pax = x - ax, pay = y - ay; const bax = bx - ax, bay = by - ay; const h = clamp((pax * bax + pay * bay) / (bax * bax + bay * bay), 0, 1); return length([pax - bax * h, pay - bay * h]); }, // ───── Rhombus (corrected: b is half-extents [bx, by]) ───── sdf_rhombus: ([x, y], [cx, cy], [bx, by]) => { const px = abs(x - cx); const py = abs(y - cy); const h = clamp( ndot([bx - 2 * px, by - 2 * py], [bx, by]) / dot([bx, by], [bx, by]), -1, 1 ); const d = length([px - 0.5 * bx * (1 - h), py - 0.5 * by * (1 + h)]); return d * sign(px * by + py * bx - bx * by); }, // ───── Isosceles Trapezoid ───── // r1 = bottom half-width, r2 = top half-width, he = half-height sdf_trapezoid: ([x, y], [cx, cy], r1, r2, he) => { const px = abs(x - cx); const py = y - cy; const k1x = r2, k1y = he; const k2x = r2 - r1, k2y = 2 * he; const cax = px - min(px, py < 0 ? r1 : r2); const cay = abs(py) - he; const t = clamp( ((k1x - px) * k2x + (k1y - py) * k2y) / (k2x * k2x + k2y * k2y), 0, 1 ); const cbx = px - k1x + k2x * t; const cby = py - k1y + k2y * t; const s = cbx < 0 && cay < 0 ? -1 : 1; return s * sqrt(min(cax * cax + cay * cay, cbx * cbx + cby * cby)); }, // ───── Parallelogram ───── // wi = half-width, he = half-height, sk = skew sdf_parallelogram: ([x, y], [cx, cy], wi, he, sk) => { let px = x - cx, py = y - cy; const ex = sk, ey = he; if (py < 0) { px = -px; py = -py; } let wx = px - ex, wy = py - ey; wx -= clamp(wx, -wi, wi); let dX = wx * wx + wy * wy; let dY = -wy; const s = px * ey - py * ex; if (s < 0) { px = -px; py = -py; } let vx = px - wi, vy = py; const c = clamp((vx * ex + vy * ey) / (ex * ex + ey * ey), -1, 1); vx -= ex * c; vy -= ey * c; dX = min(dX, vx * vx + vy * vy); dY = min(dY, wi * he - abs(s)); return sqrt(dX) * sign(-dY); }, // ───── Equilateral Triangle ───── sdf_equilateral_triangle: ([x, y], [cx, cy], r) => { const k = sqrt(3); let px = abs(x - cx) - r; let py = y - cy + r / k; if (px + k * py > 0) { const nx = (px - k * py) / 2; const ny = (-k * px - py) / 2; px = nx; py = ny; } px -= clamp(px, -2 * r, 0); return -length([px, py]) * sign(py); }, // ───── Isosceles Triangle ───── // q = [base_half_width, height] (height positive points up) sdf_isosceles_triangle: ([x, y], [cx, cy], [qx, qy]) => { const px = abs(x - cx); const py = y - cy; const t1 = clamp((px * qx + py * qy) / (qx * qx + qy * qy), 0, 1); const ax = px - qx * t1, ay = py - qy * t1; const t2 = clamp(px / qx, 0, 1); const bx = px - qx * t2, by = py - qy; const k = sign(qy); const d = min(ax * ax + ay * ay, bx * bx + by * by); const s = max(k * (px * qy - py * qx), k * (py - qy)); return sqrt(d) * sign(s); }, // ───── Triangle (3 arbitrary points) ───── sdf_triangle: ([x, y], p0, p1, p2) => { const e0 = [p1[0] - p0[0], p1[1] - p0[1]]; const e1 = [p2[0] - p1[0], p2[1] - p1[1]]; const e2 = [p0[0] - p2[0], p0[1] - p2[1]]; const v0 = [x - p0[0], y - p0[1]]; const v1 = [x - p1[0], y - p1[1]]; const v2 = [x - p2[0], y - p2[1]]; const pq = (v, e) => { const t = clamp(dot(v, e) / dot(e, e), 0, 1); return [v[0] - e[0] * t, v[1] - e[1] * t]; }; const pq0 = pq(v0, e0); const pq1 = pq(v1, e1); const pq2 = pq(v2, e2); const s = sign(e0[0] * e2[1] - e0[1] * e2[0]); const dX = min(min(dot2(pq0), dot2(pq1)), dot2(pq2)); const dY = min( min( s * (v0[0] * e0[1] - v0[1] * e0[0]), s * (v1[0] * e1[1] - v1[1] * e1[0]) ), s * (v2[0] * e2[1] - v2[1] * e2[0]) ); return -sqrt(dX) * sign(dY); }, // ───── Uneven Capsule ───── // r1, r2 = end radii; h = vertical distance between centers sdf_uneven_capsule: ([x, y], [cx, cy], r1, r2, h) => { const px = abs(x - cx); const py = y - cy; const b = (r1 - r2) / h; const a = sqrt(1 - b * b); const k = px * -b + py * a; if (k < 0) return length([px, py]) - r1; if (k > a * h) return length([px, py - h]) - r2; return px * a + py * b - r1; }, // ───── Regular Pentagon ───── sdf_pentagon: ([x, y], [cx, cy], r) => { const k0 = 0.809016994, k1 = 0.587785252, k2 = 0.726542528; let px = abs(x - cx); let py = y - cy; let d = dot([-k0, k1], [px, py]); if (d < 0) { px -= 2 * d * -k0; py -= 2 * d * k1; } d = dot([k0, k1], [px, py]); if (d < 0) { px -= 2 * d * k0; py -= 2 * d * k1; } px -= clamp(px, -r * k2, r * k2); py -= r; return length([px, py]) * sign(py); }, // ───── Regular Hexagon ───── sdf_hexagon: ([x, y], [cx, cy], r) => { const k0 = -0.866025404, k1 = 0.5, k2 = 0.577350269; let px = abs(x - cx); let py = abs(y - cy); const d = dot([k0, k1], [px, py]); if (d < 0) { px -= 2 * d * k0; py -= 2 * d * k1; } px -= clamp(px, -k2 * r, k2 * r); py -= r; return length([px, py]) * sign(py); }, // ───── Regular Octagon ───── sdf_octagon: ([x, y], [cx, cy], r) => { const k0 = -0.9238795325, k1 = 0.3826834323, k2 = 0.4142135623; let px = abs(x - cx); let py = abs(y - cy); let d = dot([k0, k1], [px, py]); if (d < 0) { px -= 2 * d * k0; py -= 2 * d * k1; } d = dot([-k0, k1], [px, py]); if (d < 0) { px -= 2 * d * -k0; py -= 2 * d * k1; } px -= clamp(px, -k2 * r, k2 * r); py -= r; return length([px, py]) * sign(py); }, // ───── Hexagram (Star of David) ───── sdf_hexagram: ([x, y], [cx, cy], r) => { const k0 = -0.5, k1 = 0.8660254038, k2 = 0.5773502692, k3 = 1.7320508076; let px = abs(x - cx); let py = abs(y - cy); let d = dot([k0, k1], [px, py]); if (d < 0) { px -= 2 * d * k0; py -= 2 * d * k1; } d = dot([k1, k0], [px, py]); if (d < 0) { px -= 2 * d * k1; py -= 2 * d * k0; } px -= clamp(px, r * k2, r * k3); py -= r; return length([px, py]) * sign(py); }, // ───── Star 5 ───── // r = outer radius, rf = inner-to-outer ratio (0..1) sdf_star5: ([x, y], [cx, cy], r, rf) => { const k1x = 0.809016994375, k1y = -0.587785252292; const k2x = -k1x, k2y = k1y; let px = abs(x - cx); let py = y - cy; let d = max(dot([k1x, k1y], [px, py]), 0); px -= 2 * d * k1x; py -= 2 * d * k1y; d = max(dot([k2x, k2y], [px, py]), 0); px -= 2 * d * k2x; py -= 2 * d * k2y; px = abs(px); py -= r; const bax = rf * -k1y - 0; const bay = rf * k1x - 1; const h = clamp((px * bax + py * bay) / (bax * bax + bay * bay), 0, r); return length([px - bax * h, py - bay * h]) * sign(py * bax - px * bay); }, // ───── Regular Star (n points, m = sharpness between 2..n) ───── sdf_star: ([x, y], [cx, cy], r, n, m) => { let px = x - cx, py = y - cy; const an = PI / n; const en = PI / m; const acsx = cos(an), acsy = sin(an); const ecsx = cos(en), ecsy = sin(en); // mod(atan(p.x, p.y), 2*an) - an — note IQ uses atan(x, y), not atan(y, x) const angle = atan2(px, py); const twoAn = 2 * an; const bn = (((angle % twoAn) + twoAn) % twoAn) - an; const L = length([px, py]); px = L * cos(bn); py = L * abs(sin(bn)); px -= r * acsx; py -= r * acsy; const c = clamp(-(px * ecsx + py * ecsy), 0, (r * acsy) / ecsy); px += ecsx * c; py += ecsy * c; return length([px, py]) * sign(px); }, // ───── Pie ───── // sc = [sin(aperture/2), cos(aperture/2)] sdf_pie: ([x, y], [cx, cy], [sc0, sc1], r) => { const px = abs(x - cx); const py = y - cy; const l = length([px, py]) - r; const t = clamp(px * sc0 + py * sc1, 0, r); const m = length([px - sc0 * t, py - sc1 * t]); return max(l, m * sign(sc1 * px - sc0 * py)); }, // ───── Cut Disk ───── // r = radius, h = signed distance from center to cut line (-r..r) sdf_cut_disk: ([x, y], [cx, cy], r, h) => { const w = sqrt(r * r - h * h); const px = abs(x - cx); const py = y - cy; const s = max( (h - r) * px * px + w * w * (h + r - 2 * py), h * px - w * py ); if (s < 0) return length([px, py]) - r; if (px < w) return h - py; return length([px - w, py - h]); }, // ───── Arc ───── // sc = [sin(aperture/2), cos(aperture/2)], ra = arc radius, rb = thickness sdf_arc: ([x, y], [cx, cy], [sc0, sc1], ra, rb) => { const px = abs(x - cx); const py = y - cy; return ( (sc1 * px > sc0 * py ? length([px - sc0 * ra, py - sc1 * ra]) : abs(length([px, py]) - ra)) - rb ); }, // ───── Ring ───── // n = [cos(angle/2), sin(angle/2)] — opening direction sdf_ring: ([x, y], [cx, cy], [nx, ny], r, th) => { let px = abs(x - cx); let py = y - cy; // mat2(nx, ny, -ny, nx) * p [px, py] = [nx * px - ny * py, ny * px + nx * py]; const outer = abs(length([px, py]) - r) - th * 0.5; const inner = length([px, max(0, abs(r - py) - th * 0.5)]) * sign(px); return max(outer, inner); }, // ───── Horseshoe ───── // c = [cos(a), sin(a)] — half-angle of the opening // w = [length, thickness] sdf_horseshoe: ([x, y], [cx, cy], [c0, c1], r, [w0, w1]) => { let px = abs(x - cx); const py = y - cy; const l = length([px, py]); // mat2(-c0, c1, c1, c0) * p let qx = -c0 * px + c1 * py; let qy = c1 * px + c0 * py; const nx = qy > 0 || qx > 0 ? qx : l * sign(-c0); const ny = qx > 0 ? qy : l; const fx = nx - w0; const fy = abs(ny - r) - w1; return length([max(fx, 0), max(fy, 0)]) + min(0, max(fx, fy)); }, // ───── Vesica ───── sdf_vesica: ([x, y], [cx, cy], r, d) => { const px = abs(x - cx); const py = abs(y - cy); const b = sqrt(r * r - d * d); return (py - b) * d > px * b ? length([px, py - b]) * sign(d) : length([px + d, py]) - r; }, // ───── Oriented Vesica ───── sdf_oriented_vesica: ([x, y], [ax, ay], [bx, by], w) => { const r = 0.5 * length([bx - ax, by - ay]); const d = (0.5 * (r * r - w * w)) / w; const vx = (bx - ax) / r, vy = (by - ay) / r; const cmx = (ax + bx) * 0.5, cmy = (ay + by) * 0.5; const dx = x - cmx, dy = y - cmy; // mat2(vy, vx, -vx, vy) * (p - c), then 0.5 * abs(...) const qx = 0.5 * abs(vy * dx + vx * dy); const qy = 0.5 * abs(-vx * dx + vy * dy); const useFirst = r * qx < d * (qy - r); const hx = useFirst ? 0 : -d; const hy = useFirst ? r : 0; const hz = useFirst ? 0 : d + w; return length([qx - hx, qy - hy]) - hz; }, // ───── Moon ───── // d = distance between disk centers, ra = main radius, rb = subtracted radius sdf_moon: ([x, y], [cx, cy], d, ra, rb) => { const px = x - cx; const py = abs(y - cy); const a = (ra * ra - rb * rb + d * d) / (2 * d); const b = sqrt(max(ra * ra - a * a, 0)); if (d * (px * b - py * a) > d * d * max(b - py, 0)) { return length([px - a, py - b]); } return max(length([px, py]) - ra, -(length([px - d, py]) - rb)); }, // ───── Rounded Cross ───── sdf_rounded_cross: ([x, y], [cx, cy], h) => { const k = 0.5 * (h + 1 / h); const px = abs(x - cx); const py = abs(y - cy); if (px < 1 && py < px * (k - h) + h) { return k - length([px - 1, py - k]); } return sqrt( min((px - 0) ** 2 + (py - h) ** 2, (px - 1) ** 2 + (py - 0) ** 2) ); }, // ───── Egg ───── sdf_egg: ([x, y], [cx, cy], ra, rb) => { const k = sqrt(3); const px = abs(x - cx); const py = y - cy; const r = ra - rb; if (py < 0) return length([px, py]) - r - rb; if (k * (px + r) < py) return length([px, py - k * r]) - rb; return length([px + r, py]) - 2 * r - rb; }, // ───── Heart ───── // Heart sits in unit-ish coords; use cx/cy to place + scale by transforming p first. sdf_heart: ([x, y], [cx, cy]) => { const px = abs(x - cx); const py = y - cy; if (py + px > 1) { return length([px - 0.25, py - 0.75]) - sqrt(2) / 4; } const m = max(px + py, 0) * 0.5; return ( sqrt( min((px - 0) ** 2 + (py - 1) ** 2, (px - m) ** 2 + (py - m) ** 2) ) * sign(px - py) ); }, // ───── Cross ───── // b = [arm_length, arm_thickness]; r adds rounding (set 0 for sharp) sdf_cross: ([x, y], [cx, cy], [bw, bh], r = 0) => { let px = abs(x - cx); let py = abs(y - cy); if (py > px) { const t = px; px = py; py = t; } const qx = px - bw; const qy = py - bh; const k = max(qy, qx); const wx = k > 0 ? qx : bh - px; const wy = k > 0 ? qy : -k; return sign(k) * length([max(wx, 0), max(wy, 0)]) + r; }, // ───── Rounded X ───── sdf_rounded_x: ([x, y], [cx, cy], w, r) => { const px = abs(x - cx); const py = abs(y - cy); const m = min(px + py, w) * 0.5; return length([px - m, py - m]) - r; }, // ───── Polygon (arbitrary, possibly concave) ───── sdf_polygon: ([x, y], verts) => { const N = verts.length; let d = (x - verts[0][0]) ** 2 + (y - verts[0][1]) ** 2; let s = 1; for (let i = 0, j = N - 1; i < N; j = i, i++) { const ex = verts[j][0] - verts[i][0]; const ey = verts[j][1] - verts[i][1]; const wx = x - verts[i][0]; const wy = y - verts[i][1]; const t = clamp((wx * ex + wy * ey) / (ex * ex + ey * ey), 0, 1); const bx = wx - ex * t; const by = wy - ey * t; d = min(d, bx * bx + by * by); const c1 = y >= verts[i][1]; const c2 = y < verts[j][1]; const c3 = ex * wy > ey * wx; if ((c1 && c2 && c3) || (!c1 && !c2 && !c3)) s *= -1; } return s * sqrt(d); }, // ───── Ellipse (IQ's closed-form cubic-root solution) ───── sdf_ellipse: ([x, y], [cx, cy], [a, b]) => { let px = abs(x - cx); let py = abs(y - cy); let ax = a, ay = b; if (px > py) { let t = px; px = py; py = t; t = ax; ax = ay; ay = t; } const l = ay * ay - ax * ax; const m = (ax * px) / l; const m2 = m * m; const n = (ay * py) / l; const n2 = n * n; const C = (m2 + n2 - 1) / 3; const C3 = C * C * C; const Q = C3 + m2 * n2 * 2; const D = C3 + m2 * n2; const g = m + m * n2; let co; if (D < 0) { const h = acos(Q / C3) / 3; const ss = cos(h); const tt = sin(h) * sqrt(3); const rx = sqrt(-C * (ss + tt + 2) + m2); const ry = sqrt(-C * (ss - tt + 2) + m2); co = (ry + sign(l) * rx + abs(g) / (rx * ry) - m) / 2; } else { const h = 2 * m * n * sqrt(D); const ss = sign(Q + h) * pow(abs(Q + h), 1 / 3); const uu = sign(Q - h) * pow(abs(Q - h), 1 / 3); const rx = -ss - uu - C * 4 + 2 * m2; const ry = (ss - uu) * sqrt(3); const rm = sqrt(rx * rx + ry * ry); co = (ry / sqrt(rm - rx) + (2 * g) / rm - m) / 2; } const ex_ = ax * co; const ey_ = ay * sqrt(1 - co * co); return length([ex_ - px, ey_ - py]) * sign(py - ey_); }, // ───── Parabola y = k * x^2 ───── sdf_parabola: ([x, y], [cx, cy], k) => { const px = abs(x - cx); const py = y - cy; const ik = 1 / k; const p = (ik * (py - 0.5 * ik)) / 3; const q = 0.25 * ik * ik * px; const h = q * q - p * p * p; const r = sqrt(abs(h)); const xx = h > 0 ? pow(q + r, 1 / 3) - pow(abs(q - r), 1 / 3) * sign(r - q) : 2 * cos(atan2(r, q) / 3) * sqrt(p); return length([px - xx, py - k * xx * xx]) * sign(px - xx); }, // ───── Parabola Segment ───── // wi = x-extent, he = y-extent sdf_parabola_segment: ([x, y], [cx, cy], wi, he) => { const px = abs(x - cx); const py = y - cy; const ik = (wi * wi) / he; const p = (ik * (he - py - 0.5 * ik)) / 3; const q = px * ik * ik * 0.25; const h = q * q - p * p * p; const r = sqrt(abs(h)); let xx = h > 0 ? pow(q + r, 1 / 3) - pow(abs(q - r), 1 / 3) * sign(r - q) : 2 * cos(atan2(r, q) / 3) * sqrt(p); xx = min(xx, wi); return ( length([px - xx, py - (he - (xx * xx) / ik)]) * sign(ik * (py - he) + px * px) ); }, // ───── Quadratic Bézier ───── sdf_bezier: ([x, y], A, B, C) => { const ax = B[0] - A[0], ay = B[1] - A[1]; const bx = A[0] - 2 * B[0] + C[0], by = A[1] - 2 * B[1] + C[1]; const cx = ax * 2, cy = ay * 2; const dx = A[0] - x, dy = A[1] - y; const bb = bx * bx + by * by; const kk = 1 / bb; const kX = kk * (ax * bx + ay * by); const kY = (kk * (2 * (ax * ax + ay * ay) + (dx * bx + dy * by))) / 3; const kZ = kk * (dx * ax + dy * ay); let res = 0; const p = kY - kX * kX; const p3 = p * p * p; const q = kX * (2 * kX * kX - 3 * kY) + kZ; let h = q * q + 4 * p3; if (h >= 0) { h = sqrt(h); const x1 = (h - q) / 2; const x2 = (-h - q) / 2; const u1 = sign(x1) * pow(abs(x1), 1 / 3); const u2 = sign(x2) * pow(abs(x2), 1 / 3); const t = clamp(u1 + u2 - kX, 0, 1); const vx = dx + (cx + bx * t) * t; const vy = dy + (cy + by * t) * t; res = vx * vx + vy * vy; } else { const z = sqrt(-p); const v = acos(q / (p * z * 2)) / 3; const m = cos(v); const n = sin(v) * 1.732050808; const t1 = clamp((m + m) * z - kX, 0, 1); const t2 = clamp((-n - m) * z - kX, 0, 1); const v1x = dx + (cx + bx * t1) * t1, v1y = dy + (cy + by * t1) * t1; const v2x = dx + (cx + bx * t2) * t2, v2y = dy + (cy + by * t2) * t2; res = min(v1x * v1x + v1y * v1y, v2x * v2x + v2y * v2y); } return sqrt(res); } }; return sdf_func; }32:[] 2d:{"id":"6e49c3206d4b9a60","slug":null,"title":"Genuary 2023 - Day 8 - SDF","thumbnail":"b3d23c07fb94abbd1da77a1d9ca5bdfaae5b7f241ae588f1cff27b1ac6b74a3e","access_level":"public","create_time":"$D2023-01-02T20:29:01.222Z","update_time":"$D2026-08-21T19:41:16.783Z","view_time":null,"first_public_time":"$D2023-01-09T04:50:39.088Z","fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"b021585f8dd574ac","login":"cdr6934","name":"Chris Ried","avatar_url":"https://avatars-next.observableusercontent.com/79ffdb5b29f55f658282d26aa24a67562ae37cdf1cefc1287a1fb37076740f6a","tier":"starter_2024"},"version":720,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2b08471af969fd79","login":"cdr6934","name":"Chris Ried","avatar_url":"https://avatars-next.observableusercontent.com/79ffdb5b29f55f658282d26aa24a67562ae37cdf1cefc1287a1fb37076740f6a","tier":null}],"members":[{"type":"individual","id":"2b08471af969fd79","login":"cdr6934","name":"Chris Ried","avatar_url":"https://avatars-next.observableusercontent.com/79ffdb5b29f55f658282d26aa24a67562ae37cdf1cefc1287a1fb37076740f6a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"5d0af939059dd028","slug":"genuary-2023","title":"Genuary 2023","owner":{"id":"b021585f8dd574ac","login":"cdr6934","name":"Chris Ried"}},"type":"notebook","body":{"title":"Genuary 2023 - Day 8 - SDF","cells":[{"id":0,"value":"# Genuary 2023 - Day 8 - SDF","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"The following was inspired by Piter Pasma and [Iquilezles](https://iquilezles.org/articles/distfunctions2d/). \n\nAny additional information around [Genuary](https://genuary.art/prompts#jan8) can be found in the link. \n\nBy the way... if you didn't know I have a [newsletter](https://generative.substack.com) dedicated to creative coding.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"## Appendix\nJust a number of helper functions to be used ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":409,"value":"**SDF** - following is the library of functions that help make the above occur ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":374,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"sf.sdf_rhombus([4, 5], [5, 4])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"**Vector Math Functions** - following functions provide vector math functionalities to make above vectors easier to deal with ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":626,"value":"v_mult = (v, n) => v.map((x) => x * n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"v_add = (v, n) => v.map((x) => x + n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"v_sub = (v, n) => v.map((x) => x - n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"v_vmult = (v1, v2) => v1.map((v, i) => v * v2[i])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"[5, 3].map((x) => x - 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"## SDF Helpers Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":545,"value":"sign = (x) => (x > 0 ? 1.0 : x == 0 ? 0 : -1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"dot = ([x, y], [cx, cy]) => {\n return x * cx + y * cy;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"ndot = ([x, y], [cx, cy]) => {\n return x * cx - y * cy;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"length = ([x, y]) => {\n return Math.sqrt(x ** 2 + y ** 2);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"clamp = (num, min, max) => {\n return Math.min(Math.max(num, min), max);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"# Cheatsheet / Scratchpad","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":508,"value":"### Using the map function on an array ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":554,"value":"{\n let a = [2, 4];\n return a[0];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"[5, 3].map((x) => x - 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":394,"value":"L = (x, y) => (x * x + y * y) ** 0.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"R = (a = 1) => Math.random() * a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"W = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"H = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"getColor = () => {\n let a = [\n \"#6cb59d\",\n \"#7bc6b3\",\n \"#a9d5c8\",\n \"#d5e1ce\",\n \"#77bcb4\",\n \"#7cb1d0\",\n \"#507b96\",\n \"#8ec4db\",\n \"#8fb8c2\",\n \"#565c65\",\n \"#e7c558\",\n \"#e48d4d\",\n \"#c6a896\",\n \"#e2cdc0\",\n \"#e1ccbf\",\n \"#f5e8da\",\n \"#f9f9f5\",\n \"#b1b7b9\",\n \"#ccdac6\",\n \"#68514b\",\n \"#dd5c4e\",\n \"#e67047\",\n \"#d07060\",\n \"#db7169\",\n \"#689b9b\",\n \"#f19f9d\",\n \"#365a5e\",\n \"#f6cfc4\",\n \"#516d67\",\n \"#3d485d\"\n ];\n return a[getRandomInt(a.length)];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"getRandomInt = (max) => {\n return Math.floor(Math.random() * max);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"import { p5 } from \"@tmcw/p5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"