2b:null 2c:["$","title",null,{"children":"Playground: Vascularidade 1 | Monica Rizzolli | Observable"}] 31:T8a0,{ const COLS = 3; const MAXW = 954; const W = Math.min(width, MAXW); const LINS = Math.ceil(formasTodas.length / COLS); const LV = COLS * desenho.lado, AV = LINS * desenho.lado; const dpr = Math.min(window.devicePixelRatio || 1, 2); const fator = W * dpr / LV; const canvas = document.createElement("canvas"); canvas.width = Math.round(LV * fator); canvas.height = Math.round(AV * fator); canvas.style.display = "block"; canvas.style.width = "100%"; canvas.style.height = "auto"; const ctx = canvas.getContext("2d"); ctx.scale(fator, fator); ctx.fillStyle = paleta.gelo; ctx.fillRect(0, 0, LV, AV); ctx.lineJoin = "round"; ctx.lineCap = "round"; ctx.strokeStyle = paleta.azulEscuro; ctx.lineWidth = desenho.contorno; formasTodas.forEach((f, i) => { const forma = gerarFormaDeConfig(f); const X = forma.x, Y = forma.y; let minx = Infinity, maxx = -Infinity, miny = Infinity, maxy = -Infinity; for (let k = 0; k < X.length; k++) { const x = X[k], y = Y[k]; if (!Number.isFinite(x) || !Number.isFinite(y)) continue; if (x < minx) minx = x; if (x > maxx) maxx = x; if (y < miny) miny = y; if (y > maxy) maxy = y; } const e = fatorEncaixe(minx, maxx, miny, maxy); const cx = (minx + maxx) / 2, cy = (miny + maxy) / 2; const ox = (i % COLS) * desenho.lado + desenho.lado / 2; const oy = Math.floor(i / COLS) * desenho.lado + desenho.lado / 2; ctx.beginPath(); let started = false; for (let k = 0; k < X.length; k++) { const x = X[k], y = Y[k]; if (!Number.isFinite(x) || !Number.isFinite(y)) { started = false; continue; } const px = ox + (x - cx) * e; const py = oy - (y - cy) * e; if (!started) { ctx.moveTo(px, py); started = true; } else ctx.lineTo(px, py); } ctx.stroke(); }); const legenda = idioma === "Português" ? html`

Figura 1 — As superformas

` : html`

Figure 1 — The supershapes

`; return html`

${canvas}${legenda}`; }32:T497,idioma === "Português" ? md` Selecionei algumas superformas do meu catálogo para o experimento. Antes de começar a amostragem preciso de uma estratégia para fechá-las: chamo essa estratégia de envelope, que percorre a curva e guarda só o contorno externo — o método está [aqui](https://observablehq.com/@dac4b2f6fec5f174/forma-formula-funcoes#envelope). Neste experimento, porém, quero tratar cada volta da superforma como uma camada independente, sobreposta às demais, para chegar à ideia de planos sobrepostos. A primeira etapa é garantir que cada camada seja uma volta completa, estendendo a curva até que ela feche voltas inteiras. ` : md` Something has to close the supershapes I picked from my catalogue before any sampling can happen. That something is the [envelope](https://observablehq.com/@dac4b2f6fec5f174/forma-formula-funcoes#envelope): it walks the curve and keeps only what ends up on the outside. Here, though, I want each turn of a supershape to stand on its own, one layer laid over the next, until the shape reads as a stack of planes. That starts with making every layer a full turn — carrying the curve on until it closes whole ones. `33:Taf4,{ const COLS = 3; const MAXW = 954; const W = Math.min(width, MAXW); const LINS = Math.ceil(formasTodas.length / COLS); const LV = COLS * desenho.lado, AV = LINS * desenho.lado; const dpr = Math.min(window.devicePixelRatio || 1, 2); const fator = W * dpr / LV; const canvas = document.createElement("canvas"); canvas.width = Math.round(LV * fator); canvas.height = Math.round(AV * fator); canvas.style.display = "block"; canvas.style.width = "100%"; canvas.style.height = "auto"; const ctx = canvas.getContext("2d"); ctx.scale(fator, fator); ctx.fillStyle = paleta.gelo; ctx.fillRect(0, 0, LV, AV); ctx.lineJoin = "round"; ctx.lineCap = "round"; formasTodas.forEach((f, i) => { const ts = f.theta_start ?? 0; const teOriginal = f.theta_end; const estendida = fichaVoltasInteiras(f); const forma = gerarFormaDeConfig(estendida); const X = forma.x, Y = forma.y, n = forma.points; const corte = Math.round(((teOriginal - ts) / (estendida.theta_end - ts)) * (n - 1)); let minx = Infinity, maxx = -Infinity, miny = Infinity, maxy = -Infinity; for (let k = 0; k < n; k++) { const x = X[k], y = Y[k]; if (!Number.isFinite(x) || !Number.isFinite(y)) continue; if (x < minx) minx = x; if (x > maxx) maxx = x; if (y < miny) miny = y; if (y > maxy) maxy = y; } const e = fatorEncaixe(minx, maxx, miny, maxy); const cx = (minx + maxx) / 2, cy = (miny + maxy) / 2; const ox = (i % COLS) * desenho.lado + desenho.lado / 2; const oy = Math.floor(i / COLS) * desenho.lado + desenho.lado / 2; const traco = (de, ate, cor, largura) => { if (ate <= de) return; ctx.strokeStyle = cor; ctx.lineWidth = largura; ctx.beginPath(); let started = false; for (let k = de; k <= ate; k++) { const x = X[k], y = Y[k]; if (!Number.isFinite(x) || !Number.isFinite(y)) { started = false; continue; } const px = ox + (x - cx) * e; const py = oy - (y - cy) * e; if (!started) { ctx.moveTo(px, py); started = true; } else ctx.lineTo(px, py); } ctx.stroke(); }; traco(0, corte, paleta.azulEscuro, desenho.contorno); traco(corte, n - 1, paleta.rosa, desenho.contornoDestaque); }); const legenda = idioma === "Português" ? html`

Figura 2 — O θ de cada superforma estendido até completar voltas inteiras. Em rosa, o trecho acrescentado.

` : html`

Figure 2 — θ carried on until each supershape completes whole turns. Pink is what the extension adds.

`; return html`

${canvas}${legenda}`; }34:Tb73,{ const COLS = 3; const MAXW = 954; const W = Math.min(width, MAXW); const cs = camadas.get(formaCamadas); const quadros = cs.length === 1 ? [cs] : [...cs.map((E) => [E]), cs]; const nQuadros = (n) => (n === 1 ? 1 : n + 1); let LINS = 1; for (const c of camadas.values()) LINS = Math.max(LINS, Math.ceil(nQuadros(c.length) / COLS)); const LV = COLS * desenho.lado, AV = LINS * desenho.lado; const dpr = Math.min(window.devicePixelRatio || 1, 2); const fator = W * dpr / LV; const canvas = document.createElement("canvas"); canvas.width = Math.round(LV * fator); canvas.height = Math.round(AV * fator); canvas.style.display = "block"; canvas.style.width = "100%"; canvas.style.height = "auto"; const ctx = canvas.getContext("2d"); ctx.scale(fator, fator); ctx.fillStyle = paleta.gelo; ctx.fillRect(0, 0, LV, AV); ctx.lineJoin = "round"; ctx.lineCap = "round"; let minx = Infinity, maxx = -Infinity, miny = Infinity, maxy = -Infinity; for (const E of cs) { for (let i = 0; i < E.x.length; i++) { if (E.x[i] < minx) minx = E.x[i]; if (E.x[i] > maxx) maxx = E.x[i]; if (E.y[i] < miny) miny = E.y[i]; if (E.y[i] > maxy) maxy = E.y[i]; } } const cx = (minx + maxx) / 2, cy = (miny + maxy) / 2; quadros.forEach((grupo, k) => { const unico = quadros.length === 1; const ox = unico ? LV / 2 : (k % COLS) * desenho.lado + desenho.lado / 2; const oy = unico ? AV / 2 : Math.floor(k / COLS) * desenho.lado + desenho.lado / 2; const pxf = (x) => ox + (x - cx); const pyf = (y) => oy - (y - cy); for (const E of grupo) { const n = E.x.length; ctx.beginPath(); for (let i = 0; i < n; i++) { if (i === 0) ctx.moveTo(pxf(E.x[i]), pyf(E.y[i])); else ctx.lineTo(pxf(E.x[i]), pyf(E.y[i])); } ctx.closePath(); ctx.globalAlpha = desenho.camadaAlpha; ctx.fillStyle = paleta.rosa; ctx.fill(); ctx.globalAlpha = 1; ctx.strokeStyle = paleta.azulEscuro; ctx.lineWidth = desenho.contorno; ctx.beginPath(); let novo = true; for (let i = 0; i < n; i++) { const j = (i + 1) % n; if (novo) { ctx.moveTo(pxf(E.x[i]), pyf(E.y[i])); novo = false; } if (E.naCorda[i] && E.naCorda[j]) { novo = true; continue; } ctx.lineTo(pxf(E.x[j]), pyf(E.y[j])); } ctx.stroke(); } }); const legenda = idioma === "Português" ? html`

Figura 3 — Cada volta da superforma isolada como uma camada, e no fim de cada sequência as camadas sobrepostas.

` : html`

Figure 3 — Every turn of a supershape pulled out as its own layer, with the whole stack closing each sequence.

`; return html`

${canvas}${legenda}`; }35:T53a,idioma === "Português" ? md` Com as camadas separadas, posso montar o substrato de pontos. As formas são planas, mas eu quero que tenham aparência de profundidade. Então cada camada ganha uma profundidade própria. O centro é o ponto mais fundo, e é ele que aparece marcado com um anel na Figura 4. Dali para fora a profundidade vai diminuindo, até zerar na borda. Essa borda é um círculo, com raio igual à distância do centro até o ponto mais afastado daquela camada. Os pontos são distribuídos segundo duas coisas: a profundidade em que caem e o espaçamento entre eles, as duas parametrizáveis. Na corola os pontos se adensam perto do centro, na parte funda. Na tigela é o contrário — eles se juntam na borda, onde a forma é rasa. ` : md` With the layers pulled apart, a substrate of points comes next. None of this is three-dimensional, but I want it to look as though it were, so each layer gets a depth of its own. It runs deepest at its centre — the ring in Figure 4 — and falls away to nothing at the rim, a circle drawn through whichever point of that layer sits furthest out. Where any point lands depends on two dials: the depth it falls in, and how much room it is meant to have. Corolla packs them in near the centre, where it is deepest. Bowl pushes them out to the rim, where the shape is shallow. `36:Tfad,{ const COLS = 3; const MAXW = 954; const W = Math.min(width, MAXW); const cs = camadas.get(formaCamadas); const indices = cs.map((_, i) => [i]); const quadros = cs.length === 1 ? indices : [...indices, cs.map((_, i) => i)]; const nQuadros = (n) => (n === 1 ? 1 : n + 1); let LINS = 1; for (const c of camadas.values()) LINS = Math.max(LINS, Math.ceil(nQuadros(c.length) / COLS)); const LV = COLS * desenho.lado, AV = LINS * desenho.lado; const dpr = Math.min(window.devicePixelRatio || 1, 2); const fator = W * dpr / LV; const canvas = document.createElement("canvas"); canvas.width = Math.round(LV * fator); canvas.height = Math.round(AV * fator); canvas.style.display = "block"; canvas.style.width = "100%"; canvas.style.height = "auto"; const ctx = canvas.getContext("2d"); ctx.scale(fator, fator); ctx.fillStyle = paleta.gelo; ctx.fillRect(0, 0, LV, AV); ctx.lineJoin = "round"; ctx.lineCap = "round"; let minx = Infinity, maxx = -Infinity, miny = Infinity, maxy = -Infinity; for (const E of cs) { for (let i = 0; i < E.x.length; i++) { if (E.x[i] < minx) minx = E.x[i]; if (E.x[i] > maxx) maxx = E.x[i]; if (E.y[i] < miny) miny = E.y[i]; if (E.y[i] > maxy) maxy = E.y[i]; } } const cx = (minx + maxx) / 2, cy = (miny + maxy) / 2; quadros.forEach((grupo, k) => { const unico = quadros.length === 1; const ox = unico ? LV / 2 : (k % COLS) * desenho.lado + desenho.lado / 2; const oy = unico ? AV / 2 : Math.floor(k / COLS) * desenho.lado + desenho.lado / 2; const pxf = (x) => ox + (x - cx); const pyf = (y) => oy - (y - cy); for (const i of grupo) { const E = cs[i], n = E.x.length; ctx.beginPath(); for (let j = 0; j < n; j++) { if (j === 0) ctx.moveTo(pxf(E.x[j]), pyf(E.y[j])); else ctx.lineTo(pxf(E.x[j]), pyf(E.y[j])); } ctx.closePath(); ctx.fillStyle = paleta.gelo; ctx.fill(); ctx.strokeStyle = paleta.azulEscuro; ctx.lineWidth = desenho.contorno; ctx.beginPath(); let novo = true; for (let j = 0; j < n; j++) { const jn = (j + 1) % n; if (novo) { ctx.moveTo(pxf(E.x[j]), pyf(E.y[j])); novo = false; } if (E.naCorda[j] && E.naCorda[jn]) { novo = true; continue; } ctx.lineTo(pxf(E.x[jn]), pyf(E.y[jn])); } ctx.stroke(); let raio = 0; for (let j = 0; j < n; j++) { const r = Math.hypot(E.x[j], E.y[j]); if (r > raio) raio = r; } ctx.save(); ctx.strokeStyle = paleta.petroleo; ctx.lineWidth = desenho.contorno * 3; ctx.setLineDash([desenho.contorno * 7, desenho.contorno * 6]); ctx.beginPath(); ctx.ellipse(pxf(0), pyf(0), raio, raio, 0, 0, 2 * Math.PI); ctx.stroke(); ctx.restore(); const P = substratos[i]; ctx.fillStyle = paleta.rosa; ctx.beginPath(); for (let j = 0; j < P.x.length; j++) { const a = pxf(P.x[j]), b = pyf(P.y[j]); ctx.moveTo(a + desenho.atrator, b); ctx.ellipse(a, b, desenho.atrator, desenho.atrator, 0, 0, 2 * Math.PI); } ctx.fill(); } ctx.strokeStyle = paleta.azulEscuro; ctx.lineWidth = desenho.poloTraco; ctx.beginPath(); ctx.ellipse(pxf(0), pyf(0), desenho.poloRaio, desenho.poloRaio, 0, 0, 2 * Math.PI); ctx.stroke(); }); const legenda = idioma === "Português" ? html`

Figura 4 — O substrato de cada camada: pontos a distância constante medida na profundidade, mais juntos onde a parede é íngreme. O anel marca o centro.

` : html`

Figure 4 — The substrate of each layer: points held a constant distance apart as measured through the depth, closing up where the wall is steep. The ring marks the centre.

`; return html`

${canvas}${legenda}`; }37:T1085,{ const MAXW = 954; const W = Math.min(width, MAXW); const cs = camadas.get(formaCamadas); const ms = medidasCamadas.get(formaCamadas); const LV = desenho.lado; const dpr = Math.min(window.devicePixelRatio || 1, 2); const fator = W * dpr / LV; const canvas = document.createElement("canvas"); canvas.width = Math.round(LV * fator); canvas.height = Math.round(LV * fator); canvas.style.display = "block"; canvas.style.width = "100%"; canvas.style.height = "auto"; const ctx = canvas.getContext("2d"); ctx.scale(fator, fator); ctx.lineJoin = "round"; ctx.lineCap = "round"; let minx = Infinity, maxx = -Infinity, miny = Infinity, maxy = -Infinity; for (const E of cs) { for (let i = 0; i < E.x.length; i++) { if (E.x[i] < minx) minx = E.x[i]; if (E.x[i] > maxx) maxx = E.x[i]; if (E.y[i] < miny) miny = E.y[i]; if (E.y[i] > maxy) maxy = E.y[i]; } } const cx = (minx + maxx) / 2, cy = (miny + maxy) / 2; const pxf = (x) => LV / 2 + (x - cx); const pyf = (y) => LV / 2 - (y - cy); const estaticas = cs.map((E, i) => { const M = ms[i], n = E.x.length; const margem = desenho.atrator * 2 + desenho.contorno; const x0 = Math.max(0, Math.floor(pxf(M.minx) - margem)); const y0 = Math.max(0, Math.floor(pyf(M.maxy) - margem)); const x1 = Math.min(LV, Math.ceil(pxf(M.maxx) + margem)); const y1 = Math.min(LV, Math.ceil(pyf(M.miny) + margem)); const lw = Math.max(1, x1 - x0), lh = Math.max(1, y1 - y0); const tela = document.createElement("canvas"); tela.width = Math.max(1, Math.round(lw * fator)); tela.height = Math.max(1, Math.round(lh * fator)); const g = tela.getContext("2d"); g.scale(fator, fator); g.translate(-x0, -y0); g.lineJoin = "round"; g.lineCap = "round"; g.beginPath(); for (let j = 0; j < n; j++) { if (j === 0) g.moveTo(pxf(E.x[j]), pyf(E.y[j])); else g.lineTo(pxf(E.x[j]), pyf(E.y[j])); } g.closePath(); g.fillStyle = paleta.gelo; g.fill(); g.strokeStyle = paleta.azulEscuro; g.lineWidth = desenho.contorno; g.beginPath(); let novo = true; for (let j = 0; j < n; j++) { const jn = (j + 1) % n; if (novo) { g.moveTo(pxf(E.x[j]), pyf(E.y[j])); novo = false; } if (E.naCorda[j] && E.naCorda[jn]) { novo = true; continue; } g.lineTo(pxf(E.x[jn]), pyf(E.y[jn])); } g.stroke(); if (atratores === "sim") { const P = substratos[i]; g.fillStyle = paleta.rosa; g.beginPath(); for (let j = 0; j < P.x.length; j++) { const a = pxf(P.x[j]), b = pyf(P.y[j]); g.moveTo(a + desenho.atrator, b); g.ellipse(a, b, desenho.atrator, desenho.atrator, 0, 0, 2 * Math.PI); } g.fill(); } return { tela, x0, y0, lw, lh }; }); const compor = (limiares, t) => { ctx.fillStyle = paleta.gelo; ctx.fillRect(0, 0, LV, LV); for (let i = 0; i < cs.length; i++) { const est = estaticas[i]; ctx.drawImage(est.tela, est.x0, est.y0, est.lw, est.lh); if (!colonizadores) continue; desenharVeias(ctx, colonizadores[i], pxf, pyf, paleta.vinho, limiares ? limiares[i] : undefined, t); } }; const legenda = idioma === "Português" ? html`

Figura 5 — A venação crescendo em cada camada, do centro para fora, sobre os pontos do substrato.

` : html`

Figure 5 — Veins growing out from the centre of each layer, across the substrate points.

`; const figura = html`

${canvas}${legenda}`; compor(null, 1); yield figura; if (!colonizadores) return; const qpi = Math.max(1, Math.round(velocidade.quadros)); let algum = true, voltas = 0; while (algum && voltas < 5000) { voltas++; const limiares = colonizadores.map((A) => A.nx.length); for (const A of colonizadores) if (A.ativo()) A.avancar(); algum = colonizadores.some((A) => A.ativo()); for (let f = 1; f <= qpi; f++) { compor(limiares, f / qpi); yield figura; } } compor(null, 1); yield figura; }38:T11ba,{ const COLS = 2; const MAXW = 954; const W = Math.min(width, MAXW); const cs = camadas.get(formaCamadas); const LV = COLS * desenho.lado, AV = desenho.lado; const dpr = Math.min(window.devicePixelRatio || 1, 2); const fator = W * dpr / LV; const canvas = document.createElement("canvas"); canvas.width = Math.round(LV * fator); canvas.height = Math.round(AV * fator); canvas.style.display = "block"; canvas.style.width = "100%"; canvas.style.height = "auto"; const ctx = canvas.getContext("2d"); ctx.scale(fator, fator); ctx.lineJoin = "round"; ctx.lineCap = "round"; let minx = Infinity, maxx = -Infinity, miny = Infinity, maxy = -Infinity; for (const E of cs) { for (let i = 0; i < E.x.length; i++) { if (E.x[i] < minx) minx = E.x[i]; if (E.x[i] > maxx) maxx = E.x[i]; if (E.y[i] < miny) miny = E.y[i]; if (E.y[i] > maxy) maxy = E.y[i]; } } const cx = (minx + maxx) / 2, cy = (miny + maxy) / 2; const px0 = (x) => desenho.lado / 2 + (x - cx); const py0 = (y) => desenho.lado / 2 - (y - cy); const estaticas = cs.map((E) => { const n = E.x.length; const margem = desenho.contorno * 2; const x0 = Math.max(0, Math.floor(px0(minx) - margem)); const y0 = Math.max(0, Math.floor(py0(maxy) - margem)); const x1 = Math.min(desenho.lado, Math.ceil(px0(maxx) + margem)); const y1 = Math.min(desenho.lado, Math.ceil(py0(miny) + margem)); const lw = Math.max(1, x1 - x0), lh = Math.max(1, y1 - y0); const tela = document.createElement("canvas"); tela.width = Math.max(1, Math.round(lw * fator)); tela.height = Math.max(1, Math.round(lh * fator)); const g = tela.getContext("2d"); g.scale(fator, fator); g.translate(-x0, -y0); g.lineJoin = "round"; g.lineCap = "round"; g.beginPath(); for (let j = 0; j < n; j++) { if (j === 0) g.moveTo(px0(E.x[j]), py0(E.y[j])); else g.lineTo(px0(E.x[j]), py0(E.y[j])); } g.closePath(); g.fillStyle = paleta.gelo; g.fill(); g.strokeStyle = paleta.azulEscuro; g.lineWidth = desenho.contorno; g.beginPath(); let novo = true; for (let j = 0; j < n; j++) { const jn = (j + 1) % n; if (novo) { g.moveTo(px0(E.x[j]), py0(E.y[j])); novo = false; } if (E.naCorda[j] && E.naCorda[jn]) { novo = true; continue; } g.lineTo(px0(E.x[jn]), py0(E.y[jn])); } g.stroke(); return { tela, x0, y0, lw, lh }; }); const compor = (limiares, t) => { ctx.fillStyle = paleta.gelo; ctx.fillRect(0, 0, LV, AV); for (let k = 0; k < COLS; k++) { const dx = k * desenho.lado; const fx = (x) => px0(x) + dx; for (let i = 0; i < cs.length; i++) { const est = estaticas[i]; ctx.drawImage(est.tela, est.x0 + dx, est.y0, est.lw, est.lh); if (!colonizadores6) continue; const A = colonizadores6[i][k]; if (k === 0) desenharVeias(ctx, A, fx, py0, paleta.vinho); else desenharVeias(ctx, A, fx, py0, paleta.vinho, limiares ? limiares[i] : undefined, t); } } }; const pt = idioma === "Português"; const rotulos = html`

${pt ? "alcance 100%" : "reach 100%"}

${pt ? `alcance ${raioVeia.raio}%` : `reach ${raioVeia.raio}%`}

`; const legenda = pt ? html`

Figura 6 — O mesmo crescimento com dois alcances. Em 100% os dois quadros são a mesma imagem; abaixo disso o raio começa a mudar o desenho.

` : html`

Figure 6 — One growth at two reaches. At 100% the two panels are the same image; below that the radius starts to tell.

`; const figura = html`

${canvas}${rotulos}${legenda}`; compor(null, 1); yield figura; if (!colonizadores6) return; const qpi = Math.max(1, Math.round(velocidade.quadros)); let algum = true, voltas = 0; while (algum && voltas < 5000) { voltas++; const limiares = colonizadores6.map((par) => par[1].nx.length); for (const par of colonizadores6) if (par[1].ativo()) par[1].avancar(); algum = colonizadores6.some((par) => par[1].ativo()); for (let f = 1; f <= qpi; f++) { compor(limiares, f / qpi); yield figura; } } compor(null, 1); yield figura; }39:Ta6b,{ const MAXW = 954; const W = Math.min(width, MAXW); const cs = camadas.get(formaCamadas); const cores = coresCamadas; const LV = desenho.lado; const dpr = Math.min(window.devicePixelRatio || 1, 2); const fator = W * dpr / LV; const canvas = document.createElement("canvas"); canvas.width = Math.round(LV * fator); canvas.height = Math.round(LV * fator); canvas.style.display = "block"; canvas.style.width = "100%"; canvas.style.height = "auto"; const ctx = canvas.getContext("2d"); ctx.scale(fator, fator); ctx.lineJoin = "round"; ctx.lineCap = "round"; ctx.fillStyle = paleta.gelo; ctx.fillRect(0, 0, LV, LV); let minx = Infinity, maxx = -Infinity, miny = Infinity, maxy = -Infinity; for (const E of cs) { for (let i = 0; i < E.x.length; i++) { if (E.x[i] < minx) minx = E.x[i]; if (E.x[i] > maxx) maxx = E.x[i]; if (E.y[i] < miny) miny = E.y[i]; if (E.y[i] > maxy) maxy = E.y[i]; } } const cx = (minx + maxx) / 2, cy = (miny + maxy) / 2; const pxf = (x) => LV / 2 + (x - cx); const pyf = (y) => LV / 2 - (y - cy); for (let i = 0; i < cs.length; i++) { const E = cs[i], n = E.x.length, C = cores[i]; if (!C) continue; ctx.globalAlpha = C.alfaPreenchimento; ctx.beginPath(); for (let j = 0; j < n; j++) { if (j === 0) ctx.moveTo(pxf(E.x[j]), pyf(E.y[j])); else ctx.lineTo(pxf(E.x[j]), pyf(E.y[j])); } ctx.closePath(); ctx.fillStyle = C.preenchimento; ctx.fill(); if (colonizadores7 && C.alfaVeia > 0) { ctx.globalAlpha = C.alfaVeia; desenharVeias(ctx, colonizadores7[i], pxf, pyf, C.veia); } if (C.espessura > 0 && C.alfaContorno > 0) { ctx.globalAlpha = C.alfaContorno; ctx.strokeStyle = C.contorno; ctx.lineWidth = C.espessura; ctx.beginPath(); let novo = true; for (let j = 0; j < n; j++) { const jn = (j + 1) % n; if (novo) { ctx.moveTo(pxf(E.x[j]), pyf(E.y[j])); novo = false; } if (E.naCorda[j] && E.naCorda[jn]) { novo = true; continue; } ctx.lineTo(pxf(E.x[jn]), pyf(E.y[jn])); } ctx.stroke(); } ctx.globalAlpha = 1; } const legenda = idioma === "Português" ? html`

Figura 7 — A mesma venação, camada por camada, com cor, opacidade e espessura à sua escolha.

` : html`

Figure 7 — The same venation, layer by layer, with colour, opacity and width up to you.

`; return html`

${canvas}${legenda}`; }3a:T548,md`## ${idioma === "Português" ? "Referências" : "References"} Bridson, R. (2007). Fast Poisson disk sampling in arbitrary dimensions. In *ACM SIGGRAPH 2007 sketches* (Article 22). Association for Computing Machinery. Murray, C. D. (1926). The physiological principle of minimum work: I. The vascular system and the cost of blood volume. *Proceedings of the National Academy of Sciences, 12*(3), 207–214. Murray, C. D. (1927). A relationship between circumference and weight in trees and its bearing on branching angles. *Journal of General Physiology, 10*(5), 725–729. Ringham, L., Owens, A., Cieslak, M., Harder, L. D., & Prusinkiewicz, P. (2021). Modeling flower pigmentation patterns. *ACM Transactions on Graphics, 40*(6), Article 233. Runions, A. (2008). *Modeling biological patterns using the space colonization algorithm* [${idioma === "Português" ? "Dissertação de mestrado" : "Master's thesis"}, University of Calgary]. Runions, A., Fuhrer, M., Lane, B., Federl, P., Rolland-Lagan, A.-G., & Prusinkiewicz, P. (2005). Modeling and visualization of leaf venation patterns. *ACM Transactions on Graphics, 24*(3), 702–711. Webb, J. (2025). *2d-space-colonization-experiments* [${idioma === "Português" ? "Programa de computador" : "Computer software"}]. GitHub. https://github.com/jasonwebb/2d-space-colonization-experiments `3b:[{"id":"915e682a991ed3edd9a191e6cac4a8bf448d9a56a907595e1c169a2eb79655fefec14291a4b27e4c575ec753af1ff3b3bfbe721196334793933f79d1bb234911","href":"https://static.observableusercontent.com/files/915e682a991ed3edd9a191e6cac4a8bf448d9a56a907595e1c169a2eb79655fefec14291a4b27e4c575ec753af1ff3b3bfbe721196334793933f79d1bb234911","name":"titulo-2-gelo-sem-contorno.png","type":"image/png","lastModified":1787651287295.992,"size":2205474}] 2f:{"id":"ce092b1bc1b39283","slug":"playground-vascularidade1","title":"Playground: Vascularidade 1","thumbnail":"1d2d2f0c20300f4ace4168a5044558ce7aa85092f965a4a9aed9b3ab1926531b","access_level":"public","create_time":"$D2026-08-16T15:48:08.257Z","update_time":"$D2026-08-25T10:27:26.504Z","view_time":null,"first_public_time":"$D2026-08-25T11:18:02.875Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"610220f4b5b6da00","login":"dac4b2f6fec5f174","name":"Monica Rizzolli","avatar_url":"https://avatars-next.observableusercontent.com/f7425fadfc7e4736163ab9771b8f151f053cd24f3358fd181f726c2fe403bffc","tier":"starter_2024"},"version":326,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dac4b2f6fec5f174","login":"rizzolli","name":"Monica Rizzolli","avatar_url":"https://avatars-next.observableusercontent.com/f7425fadfc7e4736163ab9771b8f151f053cd24f3358fd181f726c2fe403bffc","tier":null}],"members":[{"type":"team","id":"610220f4b5b6da00","login":"dac4b2f6fec5f174","name":"Monica Rizzolli","avatar_url":"https://avatars-next.observableusercontent.com/f7425fadfc7e4736163ab9771b8f151f053cd24f3358fd181f726c2fe403bffc","tier":"starter_2024","role":"editor"},{"type":"individual","id":"dac4b2f6fec5f174","login":"rizzolli","name":"Monica Rizzolli","avatar_url":"https://avatars-next.observableusercontent.com/f7425fadfc7e4736163ab9771b8f151f053cd24f3358fd181f726c2fe403bffc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"eb871d5a4cef1696","slug":"playground-vascularidade","title":"Playground: Vascularidade","owner":{"id":"610220f4b5b6da00","login":"dac4b2f6fec5f174","name":"Monica Rizzolli"}},"type":"notebook","body":{"title":"Playground: Vascularidade 1","cells":[{"id":307,"value":"{\n const logo = await FileAttachment(\"titulo-2-gelo-sem-contorno.png\").image({ alt: \"Playground: Vascularidade 1\" });\n logo.style.display = \"block\";\n logo.style.width = \"100%\";\n logo.style.height = \"auto\";\n return html`

Playground: Vascularidade 1

\n ${logo}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"html`

${viewof idioma}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"idioma === \"Português\" ? md`## Estratégias de pigmentação vascular` : md`## Vascular pigmentation strategies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":192,"value":"idioma === \"Português\" ? md`## Parte 1: venação aberta` : md`## Part 1: open venation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"idioma === \"Português\" ? md`\nNeste experimento exploro estratégias de pigmentação em superformas. A primeira é a vascularidade. O percurso tem três etapas: preparar a curva, distribuir sobre ela um substrato de pontos e fazer as veias crescerem a partir dele.\n` : md`\nThis experiment explores pigmentation strategies on supershapes, and vascularity is the first of them. It takes three stages: the curve is prepared, a substrate of points is spread over it, and the veins grow from that substrate.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"idioma === \"Português\" ? md`\nEstender o θ não acrescenta só um pedaço no fim da curva. Algumas superformas têm parâmetros que variam do começo ao fim do intervalo; mudando o intervalo, essa variação se redistribui e a curva inteira é recalculada. O intervalo de θ faz parte da definição da forma — mexer nele produz outra forma. Ainda assim, é essa a solução que adoto neste experimento.\n` : md`\nStretching θ does more than tack a piece onto the end. In some supershapes a parameter is set to travel from one value to another across the whole run; give it a longer run and that travel spreads out, and the whole curve comes back different. The θ interval is part of what defines the shape, so changing it makes a different shape. I go with it anyway.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"idioma === \"Português\" ? md`\nAgora, com a curva completando voltas inteiras, separo uma volta da outra e aplico o envelope em cada uma. Cada volta vira uma forma fechada — a silhueta daquela camada.\n` : md`\nWith the curve now closing whole turns, I can pull the turns apart and run the envelope over each one. Each comes back as a closed shape: the silhouette of that layer.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":66,"value":"{\n const pt = idioma === \"Português\";\n const tit = (t) => html`${t}`;\n return html`

\n ${tit(pt ? \"Forma\" : \"Shape\")}${seletorForma()}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":78,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"{\n const pt = idioma === \"Português\";\n return html`

\n ${pt ? \"Forma\" : \"Shape\"}\n ${seletorForma()}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"{\n const pt = idioma === \"Português\";\n const tit = (t) => html`${t}`;\n viewof perfilSel.aplicarIdioma(idioma);\n viewof paramSubstrato.aplicarIdioma(idioma);\n return html`

\n ${tit(pt ? \"Perfil\" : \"Profile\")}${viewof perfilSel}\n

\n ${viewof paramSubstrato}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":173,"value":"idioma === \"Português\" ? md`\nCom o substrato pronto, as veias começam a crescer a partir do centro. O crescimento depende do substrato e dos parâmetros de passo e distância de morte. O algoritmo que determina o crescimento aqui é uma versão simples do *space colonization*. A espessura vem depois, inspirada na lei de Murray — mais grossa no centro, afinando a cada ramificação até as pontas.\n` : md`\nWith the substrate in place, the veins start growing out from the centre. How they grow depends on the substrate and on two settings: step and kill distance. The algorithm behind it is a simple version of space colonization. Thickness comes afterwards, after Murray's law — heaviest at the centre, thinning at every branching until the tips.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":119,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":142,"value":"{\n const pt = idioma === \"Português\";\n const tit = (t) => html`${t}`;\n return html`

\n ${viewof simular}\n ${pt ? `simulações: ${simular}` : `runs: ${simular}`}\n \n ${pt ? \"Atratores\" : \"Attractors\"}\n ${viewof atratores}\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":123,"value":"{\n const pt = idioma === \"Português\";\n viewof paramVeias.aplicarIdioma(idioma);\n return html`

\n ${pt ? \"Veias\" : \"Veins\"}\n ${viewof paramVeias}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":127,"value":"{\n const pt = idioma === \"Português\";\n viewof velocidade.aplicarIdioma(idioma);\n return html`

${viewof velocidade}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":258,"value":"idioma === \"Português\" ? md`\nO *space colonization* tem um terceiro parâmetro que eu ainda não tinha usado: o raio de influência, o quanto cada ponto do substrato enxerga em volta, medido no raio da camada — o círculo tracejado da Figura 4. À esquerda, a venação da Figura 5, com alcance para a camada inteira; à direita, a mesma venação com o alcance do slider. Todo o resto é igual nas duas — mesmo substrato, mesmos parâmetros, mesma semente.\n` : md`\nSpace colonization has a third parameter I had not used yet: the influence radius, how far each substrate point can see around itself, measured against the layer radius — the dashed circle in Figure 4. On the left, the venation from Figure 5, reaching across the whole layer; on the right, the same venation at the reach set by the slider. Everything else is the same in both — same substrate, same settings, same seed.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":238,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":255,"value":"{\n const pt = idioma === \"Português\";\n return html`

\n ${pt ? \"Forma\" : \"Shape\"}\n ${seletorForma()}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":263,"value":"{\n const pt = idioma === \"Português\";\n const alvo = viewof simular;\n const el = Inputs.button(pt ? \"▶ simular\" : \"▶ simulate\");\n for (const b of el.querySelectorAll(\"button\")) {\n Object.assign(b.style, {\n background: paleta.rosa, color: \"#ffffff\", border: \"none\", borderRadius: \"3px\",\n padding: \"0.35rem 0.9rem\", font: \"inherit\", fontSize: \"0.85rem\", cursor: \"pointer\"\n });\n b.addEventListener(\"click\", () => alvo.querySelector(\"button\").click());\n }\n return html`

\n ${el}\n ${pt ? `simulações: ${simular}` : `runs: ${simular}`}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":246,"value":"{\n viewof raioVeia.aplicarIdioma(idioma);\n return html`

${viewof raioVeia}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":292,"value":"idioma === \"Português\" ? md`\nDepois de simular a venação, vamos ajustar a cor do contorno, do preenchimento e das veias — camada por camada.\n` : md`\nWith the venation grown, the colours come next: outline, fill and veins, one layer at a time.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":283,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":281,"value":"{\n viewof coresCamadas.aplicarIdioma(idioma);\n return html`

${viewof coresCamadas}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":301,"value":"idioma === \"Português\" ? md`\nEste caderno faz parte da série Playground, na qual reúno testes de desenvolvimento e ideias que me interessam e quero implementar. Este é o primeiro de uma série sobre vascularidade em superformas. Todas as funções deste caderno estão disponíveis em [Playground Vascularidade Funções](https://observablehq.com/@dac4b2f6fec5f174/vascularidade-funcoes). Além disso, deixo abaixo algumas referências que me inspiraram no processo.\n` : md`\nThis notebook belongs to Playground, a series where I collect development tests and the ideas I want to try out. It opens a run of notebooks on vascularity in supershapes. All the functions it uses are published in [Playground Vascularidade Funções](https://observablehq.com/@dac4b2f6fec5f174/vascularidade-funcoes), and a few of the references that inspired me along the way are listed below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":230,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"import {seletorForma, viewof idioma, formaCamadas, viewof perfilSel, viewof paramSubstrato, viewof paramVeias, viewof raioVeia, viewof coresCamadas, viewof velocidade, viewof atratores, viewof simular, paleta, desenho, fatorEncaixe, gerarFormaDeConfig, fichaVoltasInteiras, camadas, formasTodas, medidasCamadas, substratos, desenharVeias, colonizadores, colonizadores6, colonizadores7} from \"@dac4b2f6fec5f174/vascularidade-funcoes\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 30:"$2f:body"