2b:null 2c:["$","title",null,{"children":"Forma e Fórmula | Guilherme Ranoya | Observable"}] 31:T9a9,{ reload; const data = await FileAttachment("formas-intro@1.json").json(); const rnd = mulberry32((sessionSeed + reload) >>> 0); // estável no resize; re-sorteia só ao clicar "Sortear outras formas" const todas = data.forms.slice(); for (let i = todas.length - 1; i > 0; i--) { const j = Math.floor(rnd.next() * (i + 1)); [todas[i], todas[j]] = [todas[j], todas[i]]; } const forms = todas.slice(0, 12); const MAXW = 954; // teto de RESOLUÇÃO do canvas (px); não afeta a largura de exibição const W = Math.min(width, MAXW); const cols = 4; const rows = Math.ceil(forms.length / cols); const cell = W / cols; const pad = cell * 0.10; const H = cell * rows; const dpr = Math.min(window.devicePixelRatio || 1, 2); const canvas = document.createElement("canvas"); canvas.width = Math.round(W * dpr); canvas.height = Math.round(H * dpr); canvas.style.display = "block"; canvas.style.width = "100%"; // exibe na largura da coluna de texto (via

) canvas.style.height = "auto"; // mantém a proporção const ctx = canvas.getContext("2d"); ctx.scale(dpr, dpr); ctx.lineJoin = "round"; ctx.lineCap = "round"; ctx.strokeStyle = "#1a1a1a"; ctx.lineWidth = 0.7; forms.forEach((f, i) => { const col = i % cols; const row = Math.floor(i / cols); const forma = gerarForma(f.config); 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 bw = (maxx - minx) || 1, bh = (maxy - miny) || 1; const s = Math.min((cell - 2 * pad) / bw, (cell - 2 * pad) / bh); const cx = (minx + maxx) / 2, cy = (miny + maxy) / 2; const ox = col * cell + cell / 2, oy = row * cell + cell / 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) * s; const py = oy - (y - cy) * s; if (!started) { ctx.moveTo(px, py); started = true; } else ctx.lineTo(px, py); } ctx.stroke(); }); return html`

${canvas}`; }32:T7ca,idioma === "Português" ? md` Passo horas diante de formas que não desenhei. O computador gera, aos milhares, curvas que se fecham, se abrem, se enrolam em espiral, às vezes se cruzam, nascidas ali, do próprio programa — e eu escolho, entre todas, as poucas que parecem ter saído de uma planta. Foi para isso que criei Forma e Fórmula. Venho do desenho — é por ele que entendo o mundo. O desenho me levou ao código, em 2012, quando eu queria desenhar paisagens que mudassem com o tempo. E foi a botânica que me prendeu ali: as plantas são, até hoje, assunto do meu trabalho, e o que mais me atrai nelas é a morfologia — o modo como forma e estrutura se organizam, esse lado ao mesmo tempo formal e matemático do mundo vegetal. Gerar o orgânico a partir do código, no entanto, é o mais difícil. Só muito depois consegui escrever regras que produzissem flores e folhas — e, mesmo assim, queria mais: mais complexidade, mais variedade de formas. ` : md` I spend hours looking at forms I never drew. The computer turns them out by the thousands — curves that close and open, coil into spirals, sometimes cross over themselves, all of them born right there, from the program itself. Out of all of them, I keep only the few that look as if they had come from a plant. That is why I made Forma e Fórmula — Form and Formula. I come from drawing; it is how I make sense of the world, and it is what led me to code. In 2012 I wanted to draw landscapes that changed over time, and programming gave me the language for it. What kept me there was botany — plants are still a subject of my work, and what draws me to them most is their morphology: the way form and structure fall into place, that side of the plant world that is at once formal and mathematical. Coaxing the organic out of code, though, is the hard part. It took me a long time to write rules that could produce flowers and leaves — and even then I wanted more: more complexity, a wider range of forms. `33:Ta41,idioma === "Português" ? md` Em 2020, me deparei com a Superfórmula, uma equação de Johan Gielis, conhecida por descrever formas abstratas e naturais. Mas só passei a usá-la na minha prática artística algum tempo depois, na obra *Underwater*. A princípio, recorri às já catalogadas em artigos científicos e outras publicações; aos poucos, porém, comecei a me perguntar quais escapavam àquela lista — as que ninguém havia visto ainda, escondidas no meio de tudo o que a equação podia gerar. Em 2023, ao iniciar o *Plant Script* — um herbário de flores gerativas —, montei uma interface de geração e curadoria para encontrar e catalogar essas formas. Nesse processo, encontrei *A Magic Formula of Nature*, de Primo Brandi e Anna Salvadori — um artigo que reconstrói, passo a passo, a Superfórmula de Gielis e suas extensões. A partir dessa versão ampliada da fórmula, e com a colaboração do artista-programador Rodrigo Junqueira e do bioinformata José Vicente Gomes Filho, desenvolvi essa interface, que usei até o fim de 2025. Comecei então a explorar o próprio funcionamento da fórmula — não apenas o que ela já me permitia variar —, abrindo formas que antes estavam fora do seu alcance. Assim construí a ferramenta que chamei de Forma e Fórmula e que apresento aqui. ` : md` I had come across the Superformula back in 2020 — Johan Gielis's equation, known for describing shapes both abstract and natural — but it wasn't until *Underwater*, some time later, that it entered my work. At first I leaned on the forms already cataloged in scientific papers and elsewhere; bit by bit, though, I began to wonder about the ones that slipped through that list — the forms no one had seen yet, buried in everything the equation could produce. In 2023, starting *Plant Script* — a herbarium of generative flowers — I built an interface that could both generate forms and let me curate them, a way to find and catalog what I was after. Along the way I came upon *A Magic Formula of Nature*, by Primo Brandi and Anna Salvadori, a paper that rebuilds Gielis's Superformula and its extensions step by step. Working from that expanded version of the formula, and with creative coder Rodrigo Junqueira and bioinformatician José Vicente Gomes Filho, I developed the interface I would use until the end of 2025. It was then that I began to explore how the formula itself worked — not just what it already let me vary, but the way it worked underneath — reaching forms that had been out of its range. And so I built the tool I call Forma e Fórmula, the one I present here. `34:T532,idioma === "Português" ? md`
### O processo --- Forma e Fórmula é o meu instrumento de trabalho. Com ele gero, aos milhares, o que chamo de Superformas — sorteando funções e ajustes ao acaso — e depois escolho à mão as que me interessam para levar às minhas paisagens. Para que essa seleção funcionasse, eu precisava de duas coisas: um modo de organizar e guardar as formas escolhidas, e poder reproduzir cada uma a partir dos parâmetros que a originaram. A primeira eu resolvi com uma interface de curadoria, onde visualizo, comparo, agrupo e classifico tudo o que gero. A segunda, com uma ficha — o registro desses parâmetros, que permite refazer qualquer forma exatamente. ` : md`
### The process --- Forma e Fórmula is my working instrument. With it I generate supershapes by the thousands — functions and settings drawn at random — and then choose by hand the few that interest me for my landscapes. For that selection to work, I needed two things: a way to organize and keep the forms I'd chosen, and to be able to rebuild each one from the parameters that produced it. The first I solved with a curatorial interface, where I view, compare, group, and classify everything I generate. The second, with a config file that captures those parameters, so any form can be remade exactly. `35:T65c,{ const imgs = await Promise.all([ FileAttachment("interface1.png").image(), FileAttachment("interface2.png").image(), FileAttachment("interface3.png").image(), FileAttachment("interface4.png").image() ]); imgs.forEach(img => Object.assign(img.style, { width: "100%", height: "auto", display: "block" })); const grade = document.createElement("div"); Object.assign(grade.style, { display: "flex", flexWrap: "wrap", gap: "12px", maxWidth: "100%", boxSizing: "border-box" }); imgs.forEach(img => { const link = document.createElement("a"); link.href = img.src; // URL do anexo → abre em tamanho real, nova aba link.target = "_blank"; link.rel = "noopener"; link.title = idioma === "Português" ? "Abrir em tamanho real" : "Open full size"; Object.assign(link.style, { display: "block", cursor: "zoom-in" }); link.appendChild(img); const cel = document.createElement("div"); Object.assign(cel.style, { flex: "1 1 calc(50% - 6px)", // 2 colunas minWidth: "min(220px, 100%)", // colapsa p/ 1 no celular boxSizing: "border-box" }); cel.appendChild(link); grade.appendChild(cel); }); const legenda = idioma === "Português" ? html`

Imagens da interface de curadoria Forma e Fórmula v. 1

` : html`

The curatorial interface of Forma e Fórmula v. 1

`; return html`

${grade}${legenda}`; }36:T61c,{ const formaInterativa = gerarForma(fichaEditada); const lado = Math.min(360, width); // quadrado da forma (menor) // fundo branco de largura cheia (borda preta 1px); conteúdo centrado dentro — SEM moldura interna const moldura = (inner) => html`

${inner}

`; if (isDegenerate(formaInterativa)) { return moldura(html`

${idioma === "Português" ? "Forma degenerada — ajuste parâmetros" : "Degenerate form — adjust parameters"}

`); } const xs = formaInterativa.x, ys = formaInterativa.y; let rmax = 0; for (let i = 0; i < xs.length; i++) { const ax = Math.abs(xs[i]), ay = Math.abs(ys[i]); if (ax > rmax) rmax = ax; if (ay > rmax) rmax = ay; } if (!(rmax > 0) || !isFinite(rmax)) rmax = 1; const lim = rmax * 1.05; const fig = Plot.plot({ width: lado, height: lado, margin: 0, aspectRatio: 1, axis: null, x: { domain: [-lim, lim] }, y: { domain: [-lim, lim] }, style: "max-width:100%; height:auto; display:block;", marks: [ Plot.line( Array.from(xs, (xi, i) => ({ x: xi, y: ys[i] })), { x: "x", y: "y", strokeWidth: 0.8 } ) ] }); return moldura(fig); }37:T681,| ${idioma === "Português" ? "campo" : "field"} | ${idioma === "Português" ? "valor" : "value"} | |--------|-------------------------------------------------| | g1 | power_cos (p=2.567) | | g2 | jacobi_cn (k=0.393) | | sym1 | quadratic_sym | | sym2 | softplus_sym (k=13.294) | | combine| maxmin_blend (alpha=0.247) | | link | power_law | | m1 | scalar (value=29.000) | | m2 | scalar (value=10.000) | | n1 | 8.9774 | | n2 | 2.0459 | | n3 | 0.5417 | | d1 | fixed (value=4.662) | | d2 | fixed (value=2.152) | | alpha | scalar (value=0.644) | | beta | sin_mod (base=2.671, amp=0.760, k=5.000) | | phi1 | scalar (value=1.241) | | phi2 | sin_mod (amp=0.198, k=1.000) | | cv | fixed (value=1.000) | | f1 | identity | | f2 | identity | | voltas | 9.8990 | | points | 98990 |

${idioma === "Português" ? "Ficha da Superforma 1" : "Supershape 1 config file"}

38:Td02,{ const lado = Math.min(360, width); const dpr = Math.min(window.devicePixelRatio || 1, 2); const canvas = document.createElement("canvas"); canvas.width = Math.round(lado * dpr); canvas.height = Math.round(lado * dpr); canvas.style.display = "block"; canvas.style.width = lado + "px"; canvas.style.maxWidth = "100%"; canvas.style.height = "auto"; const ctx = canvas.getContext("2d"); ctx.scale(dpr, dpr); const X = forma2.x, Y = forma2.y, N = X.length; // enquadramento (calculado uma vez) 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 padForma = lado * 0.08; const bw = (maxx - minx) || 1, bh = (maxy - miny) || 1; const s = Math.min((lado - 2 * padForma) / bw, (lado - 2 * padForma) / bh); const cx = (minx + maxx) / 2, cy = (miny + maxy) / 2; const ox = lado / 2, oy = lado / 2; const px = (k) => ox + (X[k] - cx) * s; const py = (k) => oy - (Y[k] - cy) * s; // --- parâmetros da animação (ajustáveis) --- const drawDur = 60000, eraseDur = 60000, pauseDur = 500; // ms (aumente p/ mais lento) const diam = 10; // diâmetro do círculo (px) const cycle = drawDur + pauseDur + eraseDur + pauseDur; const render = (head) => { ctx.clearRect(0, 0, lado, lado); // linha 0..head (a forma, em preto) ctx.strokeStyle = "#1a1a1a"; ctx.lineWidth = 0.8; ctx.lineJoin = "round"; ctx.lineCap = "round"; ctx.beginPath(); let st = false; for (let k = 0; k <= head; k++) { const x = X[k], y = Y[k]; if (!Number.isFinite(x) || !Number.isFinite(y)) { st = false; continue; } const a = px(k), b = py(k); if (!st) { ctx.moveTo(a, b); st = true; } else ctx.lineTo(a, b); } ctx.stroke(); // círculo magenta na ponta — recua até o último ponto finito, para nunca sumir let h = head; while (h > 0 && !(Number.isFinite(X[h]) && Number.isFinite(Y[h]))) h--; if (Number.isFinite(X[h]) && Number.isFinite(Y[h])) { ctx.fillStyle = "#ff006a"; ctx.beginPath(); ctx.arc(px(h), py(h), diam / 2, 0, 2 * Math.PI); ctx.fill(); } }; let startTime = null, raf; const frame = (now) => { if (startTime === null) startTime = now; const t = (now - startTime) % cycle; let head; if (t < drawDur) head = Math.floor((t / drawDur) * (N - 1)); else if (t < drawDur + pauseDur) head = N - 1; else if (t < drawDur + pauseDur + eraseDur) head = Math.floor((1 - (t - drawDur - pauseDur) / eraseDur) * (N - 1)); else head = 0; render(head); raf = requestAnimationFrame(frame); }; raf = requestAnimationFrame(frame); invalidation.then(() => cancelAnimationFrame(raf)); return html`

${canvas}

${idioma === "Português" ? "Superforma 1" : "Supershape 1"}

`; }39:T912,{ const codigo = await FileAttachment("forma-formula-motor (1).js").text(); const elCodigo = document.createElement("div"); elCodigo.textContent = codigo; Object.assign(elCodigo.style, { display: "block", margin: "0", whiteSpace: "pre-wrap", overflowWrap: "anywhere", fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace", lineHeight: "1.55", color: "#1a1a1a" }); elCodigo.style.setProperty("font-size", "0.5625rem", "important"); const box = document.createElement("div"); box.appendChild(elCodigo); Object.assign(box.style, { background: "#ffffff", border: "1px solid #000000", boxSizing: "border-box", padding: "16px", maxWidth: "100%" }); // fechado = janela com scroll vertical; aberto = altura total const ALTURA_FECHADO = "18rem"; // altura da janela quando fechado — ajustável let aberto = false; const aplicarEstado = () => { box.style.maxHeight = aberto ? "none" : ALTURA_FECHADO; box.style.overflowY = aberto ? "visible" : "auto"; }; aplicarEstado(); // botões na receita padrão (botaoContador = Inputs.button + fundo branco) const rotuloVer = () => idioma === "Português" ? (aberto ? "Ver menos" : "Ver código completo") : (aberto ? "Show less" : "Show full code"); const btnVer = botaoContador(rotuloVer()); const btnVerEl = btnVer.tagName === "BUTTON" ? btnVer : btnVer.querySelector("button"); btnVer.addEventListener("input", () => { aberto = !aberto; aplicarEstado(); if (btnVerEl) btnVerEl.textContent = rotuloVer(); }); const btnDl = botaoContador(idioma === "Português" ? "Baixar código" : "Download code"); btnDl.addEventListener("input", () => { const blob = new Blob([codigo], { type: "text/javascript" }); const a = document.createElement("a"); a.href = URL.createObjectURL(blob); a.download = "forma-formula-motor.js"; document.body.appendChild(a); a.click(); a.remove(); setTimeout(() => URL.revokeObjectURL(a.href), 1000); // revoga depois do download iniciar }); const barra = document.createElement("div"); Object.assign(barra.style, { display: "flex", gap: "0.6rem", marginTop: "0.6rem", flexWrap: "wrap", alignItems: "center" }); barra.append(btnVer, btnDl); return html`

${box}${barra}`; }3a:Ta80,{ const cfg = { ...florMaple, voltas: variacao.voltas, m2: { type: "scalar", value: variacao.m2 }, n2: variacao.n2, n3: variacao.n3, d1: { type: "fixed", value: variacao.d1 }, d2: { type: "fixed", value: variacao.d2 }, phi1: { type: "scalar", value: variacao.phi1 }, phi2: { type: "sin_mod", amp: variacao.phi2, k: 4 } }; const forma = gerarForma(cfg); let X = forma.x, Y = forma.y; // rotação rígida da forma (graus → rad), em torno da origem const rot = (variacao.rotacao || 0) * Math.PI / 180; if (rot !== 0) { const cosr = Math.cos(rot), sinr = Math.sin(rot); const Xr = new Float64Array(X.length), Yr = new Float64Array(X.length); for (let k = 0; k < X.length; k++) { const x = X[k], y = Y[k]; Xr[k] = x * cosr - y * sinr; Yr[k] = x * sinr + y * cosr; } X = Xr; Y = Yr; } const lado = Math.min(360, width); // tamanho do padrão (era 640) const dpr = Math.min(window.devicePixelRatio || 1, 2); const canvas = document.createElement("canvas"); canvas.width = Math.round(lado * dpr); canvas.height = Math.round(lado * dpr); canvas.style.display = "block"; canvas.style.width = lado + "px"; // tamanho de exibição (backing store é lado*dpr) canvas.style.maxWidth = "100%"; // nunca passa da coluna canvas.style.height = "auto"; // mantém o quadrado const ctx = canvas.getContext("2d"); ctx.scale(dpr, dpr); 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 pad = lado * 0.08; const bw = (maxx - minx) || 1, bh = (maxy - miny) || 1; const s = Math.min((lado - 2 * pad) / bw, (lado - 2 * pad) / bh); const cx = (minx + maxx) / 2, cy = (miny + maxy) / 2; const ox = lado / 2, oy = lado / 2; ctx.strokeStyle = "#1a1a1a"; ctx.lineWidth = 0.8; ctx.lineJoin = "round"; 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) * s; const py = oy - (y - cy) * s; if (!started) { ctx.moveTo(px, py); started = true; } else ctx.lineTo(px, py); } ctx.stroke(); return html`

${canvas}

`; }3b:T115d,{ const params = [ ["voltas", 5.3442, 7.3442, 9.3442], ["m2", 1.815, 4.315, 4.815], ["n2", 0.7324, 0.8824, 1.0324], ["n3", 1.2762, 1.4262, 1.5762], ["d1", 3.246, 3.546, 3.846], ["d2", 4.603, 4.903, 5.203], ["phi1", 3.394, 3.694, 3.994], ["phi2", 0.374, 0.424, 0.474] ]; const rowsLab = idioma === "Português" ? ["mín", "base", "máx"] : ["min", "base", "max"]; const build = (key, v) => { const c = { ...florMaple }; if (key === "voltas") c.voltas = v; else if (key === "n2") c.n2 = v; else if (key === "n3") c.n3 = v; else if (key === "m2") c.m2 = { type: "scalar", value: v }; else if (key === "d1") c.d1 = { type: "fixed", value: v }; else if (key === "d2") c.d2 = { type: "fixed", value: v }; else if (key === "phi1") c.phi1 = { type: "scalar", value: v }; else if (key === "phi2") c.phi2 = { type: "sin_mod", amp: v, k: 4 }; return c; }; const cols = 8, rows = 3; const pad = 14; const leftPad = 30, topPad = 22, valueH = 14; const cellW = (width - 2 * pad - leftPad) / cols; const rowH = cellW + valueH; const W = width, H = 2 * pad + topPad + rows * rowH; const dpr = Math.min(window.devicePixelRatio || 1, 2); const canvas = document.createElement("canvas"); canvas.width = Math.round(W * dpr); canvas.height = Math.round(H * dpr); canvas.style.display = "block"; canvas.style.width = "100%"; canvas.style.height = "auto"; const ctx = canvas.getContext("2d"); ctx.scale(dpr, dpr); ctx.fillStyle = "#ffffff"; ctx.fillRect(0, 0, W, H); ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillStyle = "#333"; ctx.font = "11px ui-sans-serif, system-ui, sans-serif"; for (let ci = 0; ci < cols; ci++) { ctx.fillText(params[ci][0], pad + leftPad + ci * cellW + cellW / 2, pad + topPad / 2); } ctx.fillStyle = "#999"; for (let ri = 0; ri < rows; ri++) { ctx.fillText(rowsLab[ri], pad + leftPad / 2, pad + topPad + ri * rowH + cellW / 2); } const drawForm = (cfg, x0, y0, size) => { const f = gerarForma(cfg), X = f.x, Y = f.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 pad2 = size * 0.12; const bw = (maxx - minx) || 1, bh = (maxy - miny) || 1; const s = Math.min((size - 2 * pad2) / bw, (size - 2 * pad2) / bh); const cx = (minx + maxx) / 2, cy = (miny + maxy) / 2; const ox = x0 + size / 2, oy = y0 + size / 2; ctx.strokeStyle = "#1a1a1a"; ctx.lineWidth = 0.8; ctx.lineJoin = "round"; ctx.beginPath(); let st = false; for (let k = 0; k < X.length; k++) { const x = X[k], y = Y[k]; if (!Number.isFinite(x) || !Number.isFinite(y)) { st = false; continue; } const px = ox + (x - cx) * s, py = oy - (y - cy) * s; if (!st) { ctx.moveTo(px, py); st = true; } else ctx.lineTo(px, py); } ctx.stroke(); }; for (let ci = 0; ci < cols; ci++) { const [key, lo, base, hi] = params[ci]; const vals = [lo, base, hi]; for (let ri = 0; ri < rows; ri++) { const x0 = pad + leftPad + ci * cellW, y0 = pad + topPad + ri * rowH; drawForm(build(key, vals[ri]), x0, y0, cellW); ctx.fillStyle = "#666"; ctx.font = "9px ui-sans-serif, system-ui, sans-serif"; ctx.fillText(String(+vals[ri].toFixed(4)), x0 + cellW / 2, y0 + cellW + valueH / 2); } } const cap = idioma === "Português" ? "Alguns exemplos de como a Superforma muda com a variação desses parâmetros. Cada coluna é um parâmetro; as linhas mostram os valores mínimo, base e máximo de cada um. Aqui as formas aparecem só como contorno — a cor e o preenchimento vêm depois." : "A few examples of how the supershape changes as these parameters vary. Each column is one parameter; the rows show its minimum, base, and maximum values. Here the forms appear as outline only — color and fill come next."; return html`

${canvas}

${cap}

`; }3c:Ta4e,{ const cfg = { ...florMaple, voltas: variacao.voltas, m2: { type: "scalar", value: variacao.m2 }, n2: variacao.n2, n3: variacao.n3, d1: { type: "fixed", value: variacao.d1 }, d2: { type: "fixed", value: variacao.d2 }, phi1: { type: "scalar", value: variacao.phi1 }, phi2: { type: "sin_mod", amp: variacao.phi2, k: 4 } }; const forma = gerarForma(cfg); let X = forma.x, Y = forma.y; // rotação rígida da forma (graus → rad), em torno da origem const rot = (variacao.rotacao || 0) * Math.PI / 180; if (rot !== 0) { const cosr = Math.cos(rot), sinr = Math.sin(rot); const Xr = new Float64Array(X.length), Yr = new Float64Array(X.length); for (let k = 0; k < X.length; k++) { const x = X[k], y = Y[k]; Xr[k] = x * cosr - y * sinr; Yr[k] = x * sinr + y * cosr; } X = Xr; Y = Yr; } const lado = Math.min(360, width); const dpr = Math.min(window.devicePixelRatio || 1, 2); const canvas = document.createElement("canvas"); canvas.width = Math.round(lado * dpr); canvas.height = Math.round(lado * dpr); canvas.style.display = "block"; canvas.style.width = lado + "px"; canvas.style.maxWidth = "100%"; canvas.style.height = "auto"; const ctx = canvas.getContext("2d"); ctx.scale(dpr, dpr); 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 pad = lado * 0.08; const bw = (maxx - minx) || 1, bh = (maxy - miny) || 1; const s = Math.min((lado - 2 * pad) / bw, (lado - 2 * pad) / bh); const cx = (minx + maxx) / 2, cy = (miny + maxy) / 2; const ox = lado / 2, oy = lado / 2; ctx.beginPath(); let st = false; for (let k = 0; k < X.length; k++) { const x = X[k], y = Y[k]; if (!Number.isFinite(x) || !Number.isFinite(y)) { st = false; continue; } const px = ox + (x - cx) * s, py = oy - (y - cy) * s; if (!st) { ctx.moveTo(px, py); st = true; } else ctx.lineTo(px, py); } ctx.fillStyle = cor2.preenchimento; ctx.fill(); if (cor2.espessura > 0) { ctx.strokeStyle = cor2.traco; ctx.lineWidth = cor2.espessura; ctx.lineJoin = "round"; ctx.lineCap = "round"; ctx.stroke(); } return html`

${canvas}

`; }3d:Tfac,{ // forma a partir da cfg (FLOR_MAPLE + variação), com rotação const cfg = { ...florMaple, voltas: variacao.voltas, m2: { type: "scalar", value: variacao.m2 }, n2: variacao.n2, n3: variacao.n3, d1: { type: "fixed", value: variacao.d1 }, d2: { type: "fixed", value: variacao.d2 }, phi1: { type: "scalar", value: variacao.phi1 }, phi2: { type: "sin_mod", amp: variacao.phi2, k: 4 } }; const forma = gerarForma(cfg); let X = forma.x, Y = forma.y; const rot = (variacao.rotacao || 0) * Math.PI / 180; if (rot !== 0) { const c = Math.cos(rot), sn = Math.sin(rot); const Xr = new Float64Array(X.length), Yr = new Float64Array(X.length); for (let k = 0; k < X.length; k++) { Xr[k] = X[k]*c - Y[k]*sn; Yr[k] = X[k]*sn + Y[k]*c; } X = Xr; Y = Yr; } const E = envelope(X, Y); const LADO = 360; const malha = Malha.concentrica(E, { variante: 1, lado: LADO }); // janela quadrada centrada no bbox do envelope → padding igual nos 4 lados let minx = Infinity, maxx = -Infinity, miny = Infinity, maxy = -Infinity; for (let i = 0; i < E.x.length; i++) { const x=E.x[i], y=E.y[i]; if (xmaxx) maxx=x; if (ymaxy) maxy=y; } const cx = (minx+maxx)/2, cy = (miny+maxy)/2; const half = 0.5 * Math.max(maxx-minx, maxy-miny) * 1.08; const PRETO="#000000", MAGENTA="#ff006a", CINZA="#9e9e9e", ROSA="#ffbbd7"; const fazerCanvas = (desenho) => { const dpr = Math.min(window.devicePixelRatio || 1, 2); const cv = document.createElement("canvas"); cv.width = Math.round(LADO*dpr); cv.height = Math.round(LADO*dpr); cv.style.display="block"; cv.style.width="100%"; cv.style.height="auto"; cv.style.maxWidth="100%"; const ctx = cv.getContext("2d"); ctx.scale(dpr, dpr); ctx.lineCap="round"; ctx.lineJoin="round"; const s = LADO/(2*half); const PX = x => LADO/2 + (x-cx)*s, PY = y => LADO/2 - (y-cy)*s; const linha = (XX, YY, cor, lw, alpha=1) => { ctx.strokeStyle=cor; ctx.lineWidth=lw; ctx.globalAlpha=alpha; ctx.beginPath(); let st=false; for (let i=0;i linha(X, Y, PRETO, 0.7)); const cEnvelope = fazerCanvas(({ linha }) => { linha(X, Y, CINZA, 0.6, 0.55); linha(E.x, E.y, MAGENTA, 1.6); }); const cMalha = fazerCanvas(({ ctx, linha, PX, PY }) => { linha(X, Y, CINZA, 0.5, 0.3); ctx.strokeStyle=CINZA; ctx.lineWidth=0.5; ctx.globalAlpha=0.55; for (const anel of malha.aneis) { ctx.beginPath(); for (let i=0;i html`

${rotulo}

${canvas}

`; return html`

${painel(cContorno, r1)}${painel(cEnvelope, r2)}${painel(cMalha, r3)}

`; }3e:Ta09,{ const { E, cx, cy, half } = silhuetaPigmentacao; // silhueta pronta (só recalcula se a forma muda) const LADO = Math.min(360, width); const variante = /2$/.test(varianteSel) ? 2 : 1; const { rows, cols, diametro, alpha, jitter } = pigmentoSliders; const malha = Malha.concentrica(E, { rows, cols, variante, lado: LADO }); const tipoForma = /quad|squ/.test(formaSel) ? "quadrado" : /tri/.test(formaSel) ? "triangulo" : "circulo"; const { modo, cor } = corPigmento; const { fundo, envelopeStroke, espessura } = coresCanvas; const dpr = Math.min(window.devicePixelRatio || 1, 2); const cv = document.createElement("canvas"); cv.width = Math.round(LADO*dpr); cv.height = Math.round(LADO*dpr); cv.style.display="block"; cv.style.width=LADO + "px"; cv.style.height="auto"; cv.style.maxWidth="100%"; const ctx = cv.getContext("2d"); ctx.scale(dpr, dpr); ctx.lineCap="round"; ctx.lineJoin="round"; const s = LADO/(2*half); const PX = x => LADO/2 + (x-cx)*s, PY = y => LADO/2 - (y-cy)*s; // envelope: preenchimento = fundo (interior) + contorno = envelopeStroke (1 stroke só) ctx.beginPath(); for (let i = 0; i < E.x.length; i++) { const a = PX(E.x[i]), b = PY(E.y[i]); if (i===0) ctx.moveTo(a,b); else ctx.lineTo(a,b); } ctx.fillStyle = fundo; ctx.fill(); if (espessura > 0) { ctx.strokeStyle = envelopeStroke; ctx.lineWidth = espessura; ctx.stroke(); } const adicionar = (px, py, d) => { const r = d/2; if (tipoForma === "quadrado") { ctx.rect(px - r, py - r, d, d); } else if (tipoForma === "triangulo") { const a0 = -Math.PI/2, a1 = a0 + 2*Math.PI/3, a2 = a0 + 4*Math.PI/3; ctx.moveTo(px + r*Math.cos(a0), py + r*Math.sin(a0)); ctx.lineTo(px + r*Math.cos(a1), py + r*Math.sin(a1)); ctx.lineTo(px + r*Math.cos(a2), py + r*Math.sin(a2)); } else { ctx.moveTo(px + r, py); ctx.arc(px, py, r, 0, 2*Math.PI); } }; ctx.globalAlpha = alpha; const nos = malha.nos; for (let i = 0; i < nos.length; i++) { const r = mulberry32((sessionSeed + i * 2654435761) >>> 0); const dx = (r.next()*2 - 1) * jitter, dy = (r.next()*2 - 1) * jitter; ctx.fillStyle = modo === "confete" ? `hsl(${(r.next()*360).toFixed(1)}, 85%, 55%)` : cor; ctx.beginPath(); adicionar(PX(nos[i].x + dx), PY(nos[i].y + dy), diametro); ctx.fill(); } ctx.globalAlpha = 1; return html`

${cv}

`; }3f:T520,{ const tit = (txt) => html`${txt}`; const linha = (...kids) => html`

${kids}

`; const pt = idioma === "Português"; const legenda = html`

${pt ? "Tipo 1 — linhas e colunas independentes" : "Type 1 — rows and columns independent"}

${pt ? "Tipo 2 — colunas proporcionais à fração do raio fr" : "Type 2 — columns proportional to the radius fraction fr"}

${pt ? "Onde: fr = fração do raio do anel (1 na borda → 1/anéis no centro)." : "Where fr = ring radius fraction (1 at the edge → 1/rings at the center)."}

`; return html`

${linha(tit(pt ? "Malha" : "Mesh"), viewof varianteSel)} ${legenda} ${viewof pigmentoSliders} ${linha(tit(pt ? "Pigmento" : "Pigment"), viewof formaSel)} ${linha(tit(pt ? "Cores do pigmento" : "Pigment color"), viewof corPigmento)} ${linha(tit(pt ? "Cores da Superforma" : "Supershape colors"), viewof coresCanvas)} `; }40:Ta27,{ const { E, filhas } = inflorescencia; const { cx, cy, half } = silhuetaPigmentacao; const LADO = Math.min(360, width); const { tamanho, variacaoTamanho } = inflorTamanho; const { alcance } = inflorAlcance; const gradiente = /grad/i.test(tipoTamanhoInflor); const radial = /radial/i.test(rotacaoInflor); const fundo = "#ff006a"; const envelopeStroke = "#ffffff"; const dpr = Math.min(window.devicePixelRatio || 1, 2); const cv = document.createElement("canvas"); cv.width = Math.round(LADO*dpr); cv.height = Math.round(LADO*dpr); cv.style.display="block"; cv.style.width=LADO+"px"; cv.style.height="auto"; cv.style.maxWidth="100%"; const ctx = cv.getContext("2d"); ctx.scale(dpr, dpr); ctx.lineCap="round"; ctx.lineJoin="round"; const s = LADO/(2*half); const PX = x => LADO/2 + (x-cx)*s, PY = y => LADO/2 - (y-cy)*s; // traça curva local (X,Y na origem) escalada, girada e transladada p/ (nx,ny) const tracar = (X, Y, nx, ny, scale, ang) => { const c = Math.cos(ang), sn = Math.sin(ang); ctx.beginPath(); let st = false; for (let k = 0; k < X.length; k++) { const lx = X[k], ly = Y[k]; if (!Number.isFinite(lx) || !Number.isFinite(ly)) { st = false; continue; } const rx = lx*scale, ry = ly*scale; const a = PX(nx + (rx*c - ry*sn)), b = PY(ny + (rx*sn + ry*c)); if (!st) { ctx.moveTo(a,b); st = true; } else ctx.lineTo(a,b); } }; // MÃE: só o preenchimento da silhueta (SEM contorno) ctx.beginPath(); for (let k = 0; k < E.x.length; k++) { const a = PX(E.x[k]), b = PY(E.y[k]); if (k===0) ctx.moveTo(a,b); else ctx.lineTo(a,b); } ctx.fillStyle = fundo; ctx.fill(); // FILHAS (lista vem do anel externo p/ o centro → centro desenhado por último = NA FRENTE) for (const d of filhas) { const fr = (alcance / 100) * d.frRel; // do centro até n% do raio const nx = d.noBase.x * fr, ny = d.noBase.y * fr; let sz = tamanho; if (gradiente) sz *= (0.4 + 0.6 * d.frRel); // afunila: centro menor sz *= (1 + d.jit * variacaoTamanho * 0.6); // jitter ± const scale = (sz * half) / d.R; const ang = radial ? Math.atan2(ny, nx) : d.aRand; tracar(d.x, d.y, nx, ny, scale, ang); ctx.fillStyle = fundo; ctx.fill(); ctx.strokeStyle = envelopeStroke; ctx.lineWidth = 0.8; ctx.stroke(); } return html`

${cv}

`; }41:[{"id":"a24f273d84cef1f4cb4a96ce1c02333a265d8ad34d2d480f1031949d292cbe091bebe3ff843bf3dabba9a7ea06c59def26b69d22ed41e80bdcf2cf04a15f9fd8","href":"https://static.observableusercontent.com/files/a24f273d84cef1f4cb4a96ce1c02333a265d8ad34d2d480f1031949d292cbe091bebe3ff843bf3dabba9a7ea06c59def26b69d22ed41e80bdcf2cf04a15f9fd8","name":"logo.svg","type":"image/svg+xml","lastModified":1785097803407.974,"size":3021},{"id":"a5a0e8182cafb8dd75097d225fb49976d67cd205418b9f52898d0978cf85e74591bc7e3b902688d5b3fbf0e398d5645ba7ccd47e8c826aee1c6259a3ab8f24de","href":"https://static.observableusercontent.com/files/a5a0e8182cafb8dd75097d225fb49976d67cd205418b9f52898d0978cf85e74591bc7e3b902688d5b3fbf0e398d5645ba7ccd47e8c826aee1c6259a3ab8f24de","name":"formas-intro@1.json","type":"application/json","lastModified":1785097803407.974,"size":1089701},{"id":"bdf7cf3a333443ec54ed527211d08c7aef3cd803a6db63ebcbeee5a81033ee79aa0656aa4e270426c7c0d81f2e623c75e445c8f3aa54856b66a93b0f5f132ad9","href":"https://static.observableusercontent.com/files/bdf7cf3a333443ec54ed527211d08c7aef3cd803a6db63ebcbeee5a81033ee79aa0656aa4e270426c7c0d81f2e623c75e445c8f3aa54856b66a93b0f5f132ad9","name":"interface1.png","type":"image/png","lastModified":1785097803407.974,"size":1088912},{"id":"b2a51a3ecc6876efcbe9dc8ff162daf9f068fa19ff86414ab6ebc343616dfb7b968e2e65e7d4d4c26c4e0b7275a55fdf15e9e445d9df08e6e2e15da6d36bb67a","href":"https://static.observableusercontent.com/files/b2a51a3ecc6876efcbe9dc8ff162daf9f068fa19ff86414ab6ebc343616dfb7b968e2e65e7d4d4c26c4e0b7275a55fdf15e9e445d9df08e6e2e15da6d36bb67a","name":"interface2.png","type":"image/png","lastModified":1785097803407.974,"size":921062},{"id":"7ecd078d1e68accad4318921dd54f7932593ce5aba899a797017ef374ed6218a227dd0bae6980b3473ac1b5609710539d169155ada664903ce0c74beb89da996","href":"https://static.observableusercontent.com/files/7ecd078d1e68accad4318921dd54f7932593ce5aba899a797017ef374ed6218a227dd0bae6980b3473ac1b5609710539d169155ada664903ce0c74beb89da996","name":"interface3.png","type":"image/png","lastModified":1785097803407.974,"size":937793},{"id":"1f2a9c216c303d3e2de39cacfdced70af64727a62775c2651108b562074ed18ca7da6b992cb37b1a61ee504459ed55d5a9057655ebfc566d2517807bb75ed320","href":"https://static.observableusercontent.com/files/1f2a9c216c303d3e2de39cacfdced70af64727a62775c2651108b562074ed18ca7da6b992cb37b1a61ee504459ed55d5a9057655ebfc566d2517807bb75ed320","name":"interface4.png","type":"image/png","lastModified":1785097803407.974,"size":631751},{"id":"8972b286e987c0cbd215158f4ea0d67be21b73e56de128488973d47939a3d9f5d2f8ad460fe8c02fa27eb77a3a3e3baffe978bfc6183777eb5c807a2cb534d02","href":"https://static.observableusercontent.com/files/8972b286e987c0cbd215158f4ea0d67be21b73e56de128488973d47939a3d9f5d2f8ad460fe8c02fa27eb77a3a3e3baffe978bfc6183777eb5c807a2cb534d02","name":"forma-formula-motor (1).js","type":"application/javascript","lastModified":1785097803407.974,"size":25787}] 2f:{"id":"7277408137894413","slug":"monica-formaeformula","title":"Forma e Fórmula","thumbnail":"f139c94920d0866123cfa0cf11d50ad1fad6e5460821947cc53c5b734d983833","access_level":"public","create_time":"$D2026-07-26T20:30:03.407Z","update_time":"$D2026-07-26T20:52:02.382Z","view_time":null,"first_public_time":"$D2026-07-26T20:30:03.407Z","fork":{"id":"cd8f56f0ee33875c","slug":"forma-formula","title":"Forma e Fórmula","owner":{"id":"610220f4b5b6da00","login":"dac4b2f6fec5f174","name":"Monica Rizzolli"}},"stars":4,"starred":false,"owner":{"type":"team","id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":"starter_2024"},"version":1027,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"92bd7310c7ec23d5","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":null}],"members":[{"type":"team","id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":"starter_2024","role":"editor"},{"type":"individual","id":"92bd7310c7ec23d5","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"0706531c4443950b","slug":"livro-arte-gerativa","title":"Livro - Arte Gerativa","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"type":"notebook","body":{"title":"Forma e Fórmula","cells":[{"id":207,"value":"{\n const logo = await FileAttachment(\"logo.svg\").image({ alt: \"Forma e Fórmula\" });\n logo.style.display = \"block\";\n logo.style.width = \"100%\";\n logo.style.height = \"auto\";\n return html`

Forma e Fórmula

\n ${logo}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1017,"value":"### *Monica Rizzolli*\n
\n\n------\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":201,"value":"html`

${viewof idioma}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":606,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":632,"value":"html`

${viewof reload}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":211,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":215,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":896,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":891,"value":"idioma === \"Português\" ? md`\nAs formas que separo vão se juntando num catálogo — cada uma com sua ficha, todas nascidas do mesmo programa.\n` : md`\nThe forms I set aside gather into a catalog — each with its config file, all born from the same program.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":332,"value":"idioma === \"Português\" ? md`\n
\n\n### Gerar uma forma\n---\n\nExperimente. A cada toque em \"+ Nova Forma\", uma Superforma nasce sorteada na hora; e tudo nela pode ser ajustado ali mesmo, até virar o que você procura — ou algo que você nem procurava.\n` : md`\n
\n\n### Generate a form\n---\n\nTry it. With each tap on \"+ Nova Forma,\" a supershape is generated on the spot; and everything about it can be adjusted right there, until it becomes what you're looking for — or something you weren't even looking for.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":157,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":175,"value":"html`

${viewof cliquesNovaForma}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":153,"value":"html`${viewof fichaEditada}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":461,"value":"idioma === \"Português\" ? md`\n
\n\n### A ficha\n---\n\nCada Superforma carrega uma ficha: o registro completo do que a fez nascer — os nomes de todos os parâmetros sorteados e os valores específicos daquela forma. É a ficha que me deixa reencontrar uma forma exatamente como ela era, e é por isso que o catálogo é possível. Sem ela, cada forma se perderia no instante seguinte.\n` : md`\n
\n\n### The config file\n---\n\nEvery supershape carries a config file: everything that brought it into being — the names of all the parameters drawn and the specific values for that form. It's the config file that lets me find a form again exactly as it was, and that's what makes the catalog possible. Without it, each form would be lost the moment after.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":104,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":582,"value":"idioma === \"Português\" ? md`\n
\n\n### O código\n---\n\nO código que gera as formas está aqui, aberto, para quem quiser entender como funciona, adaptar ou levar para o próprio trabalho. No lugar das operações fixas da fórmula, ele aceita outras funções, reunidas numa biblioteca aberta — sigo acrescentando funções, e cada uma amplia o repertório de formas que posso gerar.\n` : md`\n
\n\n### The code\n---\n\nThe code that generates the forms is here, open, for anyone who wants to understand how it works, adapt it, or take it into their own work. In place of the formula's fixed operations, it accepts other functions, gathered in an open library — I keep adding to it, and each new function widens the range of forms I can generate.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":868,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":641,"value":"idioma === \"Português\"\n ? md`\n
\n\n### Depois de escolher\n---\n\nDepois de escolher uma forma, eu a incorporo a um *sketch* e a transformo numa planta — ou em parte de uma paisagem. A Superforma ganha cor e preenchimento. Mas, antes disso, defino alguns dos seus parâmetros, que podem variar ligeiramente do padrão: a forma muda sem perder a identidade, como uma flor que se transforma e continua reconhecível.\n\nO exemplo abaixo vem de uma Superforma que usei no desenvolvimento da imagem da capa da revista *Variável 2*.\n`\n : md`\n
\n\n### After choosing\n---\n\nOnce I've chosen a form, I bring it into a sketch and turn it into a plant — or part of a landscape. The supershape takes on color and fill. But first I set a few of its parameters, which can drift slightly from the default: the form shifts without losing its identity, like a flower that changes yet stays recognizable.\n\nThe example below comes from a supershape I used while developing the cover image for the magazine *Variável 2*.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":649,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":657,"value":"idioma === \"Português\" ? md`\nO primeiro passo foi definir quais parâmetros eu iria variar e estabelecer o intervalo de cada variação. Experimente abaixo.\n` : md`\nThe first step was to decide which parameters to vary, and to set the range of each. Try them below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":646,"value":"{\n const el = viewof variacao;\n el.style.width = \"100%\";\n el.style.maxWidth = \"100%\";\n return html`

${el}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":667,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":677,"value":"idioma === \"Português\" ? md`\nCom a forma definida, começo a dar cor a ela. Aqui testo preenchimentos, cores de traço e diferentes espessuras de linha. Experimente abaixo.\n` : md`\nWith the form set, I start giving it color. Here I try fills, stroke colors, and different line weights. Try it below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":671,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":674,"value":"html`

${viewof cor2}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":687,"value":"idioma === \"Português\" ? md`\nAgora testo alguns tipos de preenchimento da forma que simulam, esteticamente, a pigmentação.\n` : md`\nNow I try a few kinds of fill that aesthetically simulate pigmentation across the form.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":901,"value":"idioma === \"Português\"\n ? md`A camada de pigmentação pode ser criada de muitas maneiras. Neste exemplo vou usar a seguinte estratégia: primeiro isolo a silhueta externa da forma — o contorno mais de fora, como se eu traçasse só a borda e deixasse de lado as voltas internas. Dentro dessa silhueta, gero uma malha de anéis concêntricos — cópias da borda que vão encolhendo até o centro — e posso variar quantas linhas e colunas essa malha tem.`\n : md`The pigmentation layer can be built in many ways. In this example I use the following strategy: first I isolate the shape's outer silhouette — its outermost contour, as if I traced only the edge and set the inner loops aside. Inside that silhouette I generate a mesh of concentric rings — copies of the edge shrinking toward the center — and I can vary how many rows and columns the mesh has.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":906,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":913,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":916,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":948,"value":"idioma === \"Português\"\n ? md`Escolhi dois tipos de malha — duas maneiras de distribuir as linhas e as colunas sobre a forma —, mas muitas outras seriam possíveis. E a malha é só o ponto de partida: sobre ela, cada marca de pigmento pode ganhar outra forma, outro tamanho, outra opacidade, outra cor, e se deslocar um pouco do seu lugar. Experimente, mexa em tudo, até chegar a um arranjo que lhe agrade.`\n : md`I chose two kinds of mesh — two ways of laying rows and columns over the form — though many others would be possible. And the mesh is only a starting point: on it, each mark of pigment can take on another shape, another size, another opacity, another color, and drift a little from where it sits. Try it, change everything, until you arrive at an arrangement you like.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":951,"value":"idioma === \"Português\"\n ? md`Mas uma malha pode servir a muito mais do que pigmentar. E se, em vez de tingir a flor, eu fizesse brotar dela uma inflorescência — uma flor feita de flores?`\n : md`But a mesh can do far more than pigment. What if, instead of tinting the flower, I let an inflorescence grow out of it — a flower made of flowers?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":936,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1000,"value":"{\n const pt = idioma === \"Português\";\n const tit = (t) => html`${t}`;\n const linha = (...k) => html`

${k}

`;\n return html`

\n ${tit(pt ? \"Filhas\" : \"Flowers\")}\n ${viewof inflorForma}\n ${viewof inflorAlcance}\n ${linha(tit(pt ? \"Tamanho\" : \"Size\"), viewof tipoTamanhoInflor)}\n ${viewof inflorTamanho}\n ${linha(tit(pt ? \"Rotação\" : \"Rotation\"), viewof rotacaoInflor)}\n ${viewof shuffleInflor}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1013,"value":"idioma === \"Português\" ? md`\nSe você chegou até aqui, já conhece uma parte do meu processo: gerar, olhar, escolher, ajustar. Cada forma escolhida é um ponto de partida para as plantas e as paisagens que sigo desenhando.\n` : md`\nIf you've come this far, you already know part of my process: generate, look, choose, adjust. Each chosen form is a starting point for the plants and landscapes I keep drawing.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1025,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":829,"value":"import {\n EPS, BASE_POINTS, N_CLIP_MIN, N_CLIP_MAX, computePoints, linspace,\n expandedSupershape, ellipj, besselJValue, basis,\n resolveM, resolveD, resolveScale, resolvePhase, resolveCv, resolveF,\n LIBRARY, resolveFunc, gerarForma, mulberry32, rngFactory, samplerPools,\n G_REGISTRY, samplerUtils, generateConfig, isDegenerate, Painel, botaoContador,\n florMaple, ficha2, forma2, sessionSeed, viewof idioma, viewof reload,viewof cliquesNovaForma, fichaSorteada,\n viewof fichaEditada, viewof variacao, viewof cor2, envelope, Malha,\n viewof pigmentoSliders, viewof varianteSel, viewof formaSel, viewof corPigmento, viewof coresCanvas,\n silhuetaPigmentacao, viewof inflorForma, viewof inflorAlcance, viewof inflorTamanho, \n viewof tipoTamanhoInflor, viewof rotacaoInflor, viewof shuffleInflor, inflorescencia \n} from \"@dac4b2f6fec5f174/forma-formula-funcoes\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W41","stdlib":"1","titling":"auto"}} 30:"$2f:body"