2e:null 2f:["$","title",null,{"children":"Variável: Folhas | Monica Rizzolli | Observable"}] 34:T74f,{ const RECORTE = "8.64 2.71 493.01 107.07"; const [preto, branco] = await Promise.all([ FileAttachment("Logo preto.svg").text(), FileAttachment("Logo branco.svg").text() ]); const montar = (markup, cor) => { const doc = new DOMParser().parseFromString(markup, "image/svg+xml"); const svg = doc.documentElement; const regras = {}; for (const st of [...svg.querySelectorAll("style")]) { for (const m of st.textContent.matchAll(/\.([A-Za-z][\w-]*)\s*\{([^}]*)\}/g)) regras[m[1]] = m[2]; st.remove(); } for (const el of [...svg.querySelectorAll("[class]")]) { const decl = regras[el.getAttribute("class")] || ""; if (/display\s*:\s*none/.test(decl)) { el.remove(); continue; } const fill = /fill\s*:\s*([^;]+)/.exec(decl); if (fill) { const v = fill[1].trim(); el.setAttribute("fill", /^#fff(f{3})?$/i.test(v) ? "currentColor" : v); } el.removeAttribute("class"); } svg.setAttribute("viewBox", RECORTE); svg.setAttribute("preserveAspectRatio", "xMidYMid meet"); svg.setAttribute("fill", "currentColor"); svg.removeAttribute("width"); svg.removeAttribute("height"); const el = document.importNode(svg, true); el.style.display = "block"; el.style.width = "100%"; el.style.height = "auto"; el.style.color = cor; return el; }; const fig = html`

Variável: Folhas

`; fig.appendChild(montar(preto, "#08240A")); const capa = document.createElement("div"); capa.style.cssText = "position:absolute; left:0; top:0; width:100%;"; capa.appendChild(montar(branco, "#8EBD95")); fig.appendChild(capa); return fig; }35:T614,{ const W = 1600, H = Math.round(W * 3614 / 5552); const MARGEM = 0.08; const CENTROS = [0.28, 0.72]; const R_REF = 400 * 1.6 * 1.15 * 1.3; const k = (H * (1 - 2 * MARGEM)) / R_REF; const cv = document.createElement("canvas"); cv.width = W; cv.height = H; cv.style.display = "block"; cv.style.width = "100%"; cv.style.height = "auto"; const ctx = cv.getContext("2d"); ctx.fillStyle = "#E1F5ED"; ctx.fillRect(0, 0, W, H); const dnaEsq = { tamanho: geometria.tamanho, nLobos: geometria.nLobos, vies: geometria.vies, escalaRuidoBorda: geometria.escalaRuidoBorda, curvatura: geometria.curvatura * (geometria.tamanho / 225), p5Seed: geometria.semente }; const desenhar = (dna, fx, cor) => { const pts = contornoFolha(dna); let x0 = Infinity, x1 = -Infinity, y0 = Infinity, y1 = -Infinity; for (const p of pts) { if (p.x < x0) x0 = p.x; if (p.x > x1) x1 = p.x; if (p.y < y0) y0 = p.y; if (p.y > y1) y1 = p.y; } const cx = W * fx - k * (x0 + x1) / 2; const cy = H / 2 - k * (y0 + y1) / 2; ctx.beginPath(); pts.forEach((p, i) => i ? ctx.lineTo(cx + k * p.x, cy + k * p.y) : ctx.moveTo(cx + k * p.x, cy + k * p.y)); ctx.closePath(); ctx.fillStyle = cor; ctx.fill(); ctx.strokeStyle = "#08240A"; ctx.lineWidth = 4 * (dna.tamanho / 225) * k; ctx.stroke(); }; desenhar(dnaEsq, CENTROS[0], "#A6559C"); desenhar(dnaSorteado, CENTROS[1], "#8EBD95"); return html`

${cv}`; }36:T533,{ const pt = idioma === "Português"; viewof geometria.aplicarIdioma(idioma); const linhas = [ [pt ? "tamanho" : "size", dnaSorteado.tamanho], [pt ? "lóbulos" : "lobes", dnaSorteado.nLobos], [pt ? "viés" : "asymmetry", dnaSorteado.vies.toFixed(2)], [pt ? "curvatura" : "tilt", dnaSorteado.curvatura.toFixed(1)], [pt ? "ondulações da borda" : "edge ripples", dnaSorteado.escalaRuidoBorda.toFixed(1)], [pt ? "semente" : "seed", dnaSorteado.p5Seed] ]; const rotulo = (t) => html`

${t}

`; const tabela = html` ${linhas.map(([r, v]) => html``)}

${r}

${v}

`; const botao = html`

${viewof sortear}

`; return html`

${rotulo(pt ? "Folha da esquerda" : "Left leaf")}${viewof geometria}

${rotulo(pt ? "Folha da direita — sorteada" : "Right leaf — shuffled")}${tabela}${botao}

`; }37:Tdba,{ const W = 1600, H = Math.round(W * 3614 / 5552); const ALTURA_FOLHA = 0.84; const ANCORA = 0.68; const CENTROS = [0.28, 0.72]; const R_PED_TOPO = 9, R_PED_BASE = 20; const JITTER_X = 0.07, CURVA = 0.05, SAIDA = 0.12; const R_REF = 400 * 1.6 * 1.15 * 1.3; const k = (H * ALTURA_FOLHA) / R_REF; const cv = document.createElement("canvas"); cv.width = W; cv.height = H; cv.style.display = "block"; cv.style.width = "100%"; cv.style.height = "auto"; const ctx = cv.getContext("2d"); ctx.fillStyle = "#E1F5ED"; ctx.fillRect(0, 0, W, H); const escEsq = geometria.tamanho / 225; const dnaEsq = { tamanho: geometria.tamanho, nLobos: geometria.nLobos, vies: geometria.vies, escalaRuidoBorda: geometria.escalaRuidoBorda, curvatura: geometria.curvatura * escEsq, tremorNervura: nervuras.tremorNervura, espessuraNervura: nervuras.espessuraNervura * escEsq, p5Seed: geometria.semente, angulosNervuras: angulosNervuras(geometria.nLobos, geometria.semente) }; const pedunculo = (cx, cy, semente) => { let r = (semente + 7919) >>> 0; const rnd = () => (r = (1664525 * r + 1013904223) % 4294967296) / 4294967296; const dx = (rnd() * 2 - 1) * JITTER_X * W; const cur = (rnd() * 2 - 1) * CURVA * W; const emS = rnd() < 0.5; const x0 = cx, y0 = cy; const x3 = cx + dx, y3 = H * (1 + SAIDA); const x1 = x0 + cur, y1 = y0 + (y3 - y0) / 3; const x2 = x3 + (emS ? -cur : cur), y2 = y0 + 2 * (y3 - y0) / 3; const N = 48, esq = [], dir = []; for (let i = 0; i <= N; i++) { const t = i / N, u = 1 - t; const x = u*u*u*x0 + 3*u*u*t*x1 + 3*u*t*t*x2 + t*t*t*x3; const y = u*u*u*y0 + 3*u*u*t*y1 + 3*u*t*t*y2 + t*t*t*y3; const tx = 3*u*u*(x1-x0) + 6*u*t*(x2-x1) + 3*t*t*(x3-x2); const ty = 3*u*u*(y1-y0) + 6*u*t*(y2-y1) + 3*t*t*(y3-y2); const L = Math.hypot(tx, ty) || 1; const nx = -ty / L, ny = tx / L; const raio = (R_PED_TOPO + (R_PED_BASE - R_PED_TOPO) * t) * k; esq.push([x + nx * raio, y + ny * raio]); dir.push([x - nx * raio, y - ny * raio]); } ctx.beginPath(); esq.forEach((p, i) => i ? ctx.lineTo(p[0], p[1]) : ctx.moveTo(p[0], p[1])); for (let i = dir.length - 1; i >= 0; i--) ctx.lineTo(dir[i][0], dir[i][1]); ctx.closePath(); ctx.fillStyle = "#08240A"; ctx.fill(); }; const desenhar = (dna, fx, cor) => { const pts = contornoFolha(dna); let x0 = Infinity, x1 = -Infinity; for (const p of pts) { if (p.x < x0) x0 = p.x; if (p.x > x1) x1 = p.x; } const cx = W * fx - k * (x0 + x1) / 2; const cy = H * ANCORA; pedunculo(cx, cy, dna.p5Seed); ctx.beginPath(); pts.forEach((p, i) => i ? ctx.lineTo(cx + k * p.x, cy + k * p.y) : ctx.moveTo(cx + k * p.x, cy + k * p.y)); ctx.closePath(); ctx.fillStyle = cor; ctx.fill(); ctx.strokeStyle = "#08240A"; ctx.lineWidth = 4 * (dna.tamanho / 225) * k; ctx.stroke(); ctx.save(); ctx.clip(); ctx.strokeStyle = "#E1F5ED"; ctx.lineCap = "round"; for (const [x0s, y0s, x1s, y1s, esp] of nervurasFolha(dna)) { ctx.lineWidth = Math.max(0.5, esp * k); ctx.beginPath(); ctx.moveTo(cx + k * x0s, cy + k * y0s); ctx.lineTo(cx + k * x1s, cy + k * y1s); ctx.stroke(); } ctx.restore(); }; desenhar(dnaEsq, CENTROS[0], "#A6559C"); desenhar(dnaSorteado, CENTROS[1], "#8EBD95"); return html`

${cv}`; }38:T443,{ const pt = idioma === "Português"; viewof nervuras.aplicarIdioma(idioma); viewof nervuras.aplicarEscala({ espessuraNervura: geometria.tamanho / 225 }); const linhas = [ [pt ? "tremor" : "waver", dnaSorteado.tremorNervura.toFixed(2)], [pt ? "espessura" : "thickness", dnaSorteado.espessuraNervura.toFixed(1)] ]; const rotulo = (t) => html`

${t}

`; const tabela = html` ${linhas.map(([r, v]) => html``)}

${r}

${v}

`; return html`

${rotulo(pt ? "Folha da esquerda" : "Left leaf")}${viewof nervuras}

${rotulo(pt ? "Folha da direita — sorteada" : "Right leaf — shuffled")}${tabela}

`; }39:Ta45,{ const RD_SIZE = 250; const ITERACOES = 350; const PASSOS_POR_QUADRO = 2; const RAIO_SEMENTE = 1; const RAIO_AURA = 12; const LADO = 1000; const PASSO = 10; const FUNDO = "#8EBD95"; const PALETA = ["#E1F5ED", "#A6559C", "#08240A", "#608A6A", "#D99ACA"]; const LIMIARES = [0.008, 0.30]; const p = viewof rd.value; let r = (20260812 + simular * 1000003) >>> 0; const rnd = () => (r = (1664525 * r + 1013904223) % 4294967296) / 4294967296; const disponiveis = PALETA.slice(); const CORES = []; for (let i = 0; i < 3; i++) { CORES.push(disponiveis.splice(Math.floor(rnd() * disponiveis.length), 1)[0]); } const SEMENTE_PONTOS = Math.floor(rnd() * 4294967296); const semeado = semearPontosRD(RD_SIZE, p.pontos, p.f, RAIO_SEMENTE, RAIO_AURA, SEMENTE_PONTOS); const N = RD_SIZE * RD_SIZE; let A = new Float32Array(N).fill(1); let B = Float32Array.from(semeado.B); let A2 = new Float32Array(N); let B2 = new Float32Array(N); const cv = document.createElement("canvas"); cv.width = LADO; cv.height = LADO; cv.style.display = "block"; cv.style.width = "100%"; cv.style.height = "auto"; const ctx = cv.getContext("2d"); const mapa = (v, a, b, c, d) => (v - a) / (b - a) * (d - c) + c; const pintar = (grid) => { ctx.fillStyle = FUNDO; ctx.fillRect(0, 0, LADO, LADO); const caminhos = [new Path2D(), new Path2D(), new Path2D()]; for (let y = PASSO / 2; y < LADO; y += PASSO) { const gy = Math.min(RD_SIZE - 1, Math.floor(y / LADO * RD_SIZE)); for (let x = PASSO / 2; x < LADO; x += PASSO) { const gx = Math.min(RD_SIZE - 1, Math.floor(x / LADO * RD_SIZE)); const nivel = grid[gx + gy * RD_SIZE]; if (nivel <= 0) continue; const faixa = nivel < LIMIARES[0] ? 0 : (nivel < LIMIARES[1] ? 1 : 2); const tam = mapa(nivel, 0, 0.5, PASSO * 0.7, PASSO * 0.85); caminhos[faixa].moveTo(x + tam / 2, y); caminhos[faixa].arc(x, y, tam / 2, 0, Math.PI * 2); } } for (let i = 0; i < 3; i++) { ctx.fillStyle = CORES[i]; ctx.fill(caminhos[i]); } }; pintar(B); let feito = 0, id; const quadro = () => { for (let s = 0; s < PASSOS_POR_QUADRO && feito < ITERACOES; s++) { passoRD(A, B, A2, B2, semeado.feedMap, RD_SIZE, p.dB, p.k); let t = A; A = A2; A2 = t; t = B; B = B2; B2 = t; feito++; } pintar(B); if (feito < ITERACOES) id = requestAnimationFrame(quadro); }; id = requestAnimationFrame(quadro); invalidation.then(() => cancelAnimationFrame(id)); return html`

${cv}`; }3a:T120e,{ const W = 1600, H = Math.round(W * 3614 / 5552); const MARGEM = 0.01; const ITERACOES = 350; const PASSOS_POR_QUADRO = 2; const FUNDO = "#E1F5ED"; const FG = ["#A6559C", "#08240A", "#8EBD95", "#608A6A", "#D99ACA"]; const LIMIARES = [0.008, 0.30]; simularFolha; const p = viewof rdFolha.value; let r = (20260812 + sortear * 1000003) >>> 0; const rnd = () => (r = (1664525 * r + 1013904223) % 4294967296) / 4294967296; const disponiveis = FG.slice(); const coresRD = []; for (let i = 0; i < 4; i++) { coresRD.push(disponiveis.splice(Math.floor(rnd() * disponiveis.length), 1)[0]); } const corFolha = coresRD[0]; const cores3 = coresRD.slice(1); const dna = { ...dnaSorteado, feed: p.f }; const esc = dna.tamanho / 225; const rdSize = Math.floor(250 * Math.min(esc, 1.2)); const raioMapeamento = dna.tamanho * 2.2; const passo = Math.floor(10 * esc); const mapa = (v, a, b, c, d) => (v - a) / (b - a) * (d - c) + c; const semeado = semearNervurasRD(dna, rdSize, raioMapeamento, p.ritmo); const N = rdSize * rdSize; let A = new Float32Array(N).fill(1); let B = Float32Array.from(semeado.B); let A2 = new Float32Array(N); let B2 = new Float32Array(N); const pts = contornoFolha(dna); let x0 = Infinity, x1 = -Infinity, y0 = Infinity, y1 = -Infinity; for (const q of pts) { if (q.x < x0) x0 = q.x; if (q.x > x1) x1 = q.x; if (q.y < y0) y0 = q.y; if (q.y > y1) y1 = q.y; } const k = Math.min( (W * (1 - 2 * MARGEM)) / (x1 - x0), (H * (1 - 2 * MARGEM)) / (y1 - y0) ); const cx = W / 2 - k * (x0 + x1) / 2; const cy = H / 2 - k * (y0 + y1) / 2; const cv = document.createElement("canvas"); cv.width = W; cv.height = H; cv.style.display = "block"; cv.style.width = "100%"; cv.style.height = "auto"; const ctx = cv.getContext("2d"); const caminhoFolha = new Path2D(); pts.forEach((q, i) => i ? caminhoFolha.lineTo(cx + k * q.x, cy + k * q.y) : caminhoFolha.moveTo(cx + k * q.x, cy + k * q.y)); caminhoFolha.closePath(); const raioContorno = []; { const noise = criarNoise(dna.p5Seed); for (let i = 0; i <= 628; i++) raioContorno.push(raioBase(i * 0.01, dna, noise)); } const rBorda = (ang) => raioContorno[Math.min(628, Math.round(ang / 0.01))]; const pintar = (grid) => { ctx.fillStyle = FUNDO; ctx.fillRect(0, 0, W, H); ctx.fillStyle = corFolha; ctx.fill(caminhoFolha); ctx.save(); ctx.clip(caminhoFolha); const caminhos = [new Path2D(), new Path2D(), new Path2D()]; for (let wy = -raioMapeamento; wy < raioMapeamento; wy += passo) { const my = Math.min(rdSize - 1, Math.max(0, Math.floor(mapa(wy, -raioMapeamento, raioMapeamento, 0, rdSize - 1)))); for (let wx = -raioMapeamento; wx < raioMapeamento; wx += passo) { let ang = Math.atan2(wy, wx); if (ang < 0) ang += Math.PI * 2; if (Math.sqrt(wx * wx + wy * wy) >= rBorda(ang)) continue; const incl = mapa(wy, 0, -dna.tamanho, 0, dna.curvatura); const mx = Math.min(rdSize - 1, Math.max(0, Math.floor(mapa(wx + incl, -raioMapeamento, raioMapeamento, 0, rdSize - 1)))); const nivel = grid[mx + my * rdSize]; if (nivel <= 0) continue; const faixa = nivel < LIMIARES[0] ? 0 : (nivel < LIMIARES[1] ? 1 : 2); const tam = mapa(nivel, 0, 0.5, passo * 0.7, passo * 0.85) * k; const px = cx + k * (wx + incl), py = cy + k * wy; caminhos[faixa].moveTo(px + tam / 2, py); caminhos[faixa].arc(px, py, tam / 2, 0, Math.PI * 2); } } for (let i = 0; i < 3; i++) { ctx.fillStyle = cores3[i]; ctx.fill(caminhos[i]); } ctx.strokeStyle = FUNDO; ctx.lineCap = "round"; for (const [ax, ay, bx, by, espessura] of nervurasFolha(dna)) { ctx.lineWidth = Math.max(0.5, espessura * k); ctx.beginPath(); ctx.moveTo(cx + k * ax, cy + k * ay); ctx.lineTo(cx + k * bx, cy + k * by); ctx.stroke(); } ctx.restore(); ctx.strokeStyle = FUNDO; ctx.lineWidth = 4 * esc * k; ctx.stroke(caminhoFolha); }; pintar(B); let feito = 0, id; const quadro = () => { for (let n = 0; n < PASSOS_POR_QUADRO && feito < ITERACOES; n++) { passoRD(A, B, A2, B2, semeado.feedMap, rdSize, p.dB, p.k); let t = A; A = A2; A2 = t; t = B; B = B2; B2 = t; feito++; } pintar(B); if (feito < ITERACOES) id = requestAnimationFrame(quadro); }; id = requestAnimationFrame(quadro); invalidation.then(() => cancelAnimationFrame(id)); return html`

${cv}`; }3b:T5b9,idioma === "Português" ? md` Para dar limites à reação-difusão, separei quatro conjuntos de valores e batizei cada um com o nome de um fenômeno que muda a pigmentação das folhas: necrose, variegação, mosaico e clorose. São eles que pigmentam as folhas da capa. As folhas que não recebem nenhum ficam limpas — sem pigmentação, saudáveis. Abaixo, as quatro configurações aparecem na mesma folha, com a mesma semeadura. Só os números da reação mudam de um quadro para o outro. Cada quadro traz o que sorteou: alimentação, consumo, difusão e o ritmo da semeadura — de quantos em quantos passos da nervura nasce um ponto. O ritmo é sorteado junto com a folha e é igual nos quatro; sortear outra folha troca também esse número. ` : md` To keep reaction-diffusion within bounds, I settled on four sets of values and named each after something that changes the pigmentation of leaves: necrosis, variegation, mosaic and chlorosis. These four are what pigment the leaves on the cover. Leaves that get none of them stay clean — unpigmented, healthy. Below, the four settings run on the same leaf, with the same seeding. Only the reaction numbers change from one panel to the next. Each panel lists what it drew: feed, kill, diffusion and the seeding rhythm — how many steps along a vein separate one seed from the next. The rhythm is drawn along with the leaf and is the same in all four; shuffling another leaf changes that number too. `3c:T18c8,{ const pt = idioma === "Português"; const LARGURA = 900; const MARGEM = 0.01; const ITERACOES = 350; const PASSOS_POR_QUADRO = 4; const RITMO = dnaSorteado.ritmoSemeadura; const FUNDO = "#E1F5ED"; const FG = ["#A6559C", "#08240A", "#8EBD95", "#608A6A", "#D99ACA"]; const LIMIARES = [0.008, 0.30]; const NOMES = { Necrose: ["Necrose", "Necrosis"], Variegacao: ["Variegação", "Variegation"], Mosaico: ["Mosaico", "Mosaic"], Clorose: ["Clorose", "Chlorosis"] }; const padroes = sortearPadroesRD((20260812 + simularPadroes * 1000003) >>> 0); let r = (77003 + sortear * 1000003) >>> 0; const rnd = () => (r = (1664525 * r + 1013904223) % 4294967296) / 4294967296; const disponiveis = FG.slice(); const coresRD = []; for (let i = 0; i < 4; i++) { coresRD.push(disponiveis.splice(Math.floor(rnd() * disponiveis.length), 1)[0]); } const corFolha = coresRD[0]; const cores3 = coresRD.slice(1); const dnaBase = dnaSorteado; const esc = dnaBase.tamanho / 225; const rdSize = Math.floor(250 * Math.min(esc, 1.2)); const raioMapeamento = dnaBase.tamanho * 2.2; const passo = Math.floor(10 * esc); const mapa = (v, a, b, c, d) => (v - a) / (b - a) * (d - c) + c; const ptsFolha = contornoFolha(dnaBase); let x0 = Infinity, x1 = -Infinity, y0 = Infinity, y1 = -Infinity; for (const q of ptsFolha) { if (q.x < x0) x0 = q.x; if (q.x > x1) x1 = q.x; if (q.y < y0) y0 = q.y; if (q.y > y1) y1 = q.y; } const larguraMundo = x1 - x0, alturaMundo = y1 - y0; const W = LARGURA; const H = Math.round(LARGURA * alturaMundo / larguraMundo); const k = (W * (1 - 2 * MARGEM)) / larguraMundo; const cx = W / 2 - k * (x0 + x1) / 2; const cy = H / 2 - k * (y0 + y1) / 2; const caminhoFolha = new Path2D(); ptsFolha.forEach((q, i) => i ? caminhoFolha.lineTo(cx + k * q.x, cy + k * q.y) : caminhoFolha.moveTo(cx + k * q.x, cy + k * q.y)); caminhoFolha.closePath(); const raioContorno = []; { const noise = criarNoise(dnaBase.p5Seed); for (let i = 0; i <= 628; i++) raioContorno.push(raioBase(i * 0.01, dnaBase, noise)); } const rBorda = (ang) => raioContorno[Math.min(628, Math.round(ang / 0.01))]; const segmentosNervura = nervurasFolha(dnaBase); const N = rdSize * rdSize; const blocos = padroes.map((padrao) => { const semeado = semearNervurasRD({ ...dnaBase, feed: padrao.f }, rdSize, raioMapeamento, RITMO); const cv = document.createElement("canvas"); cv.width = W; cv.height = H; cv.style.display = "block"; cv.style.width = "100%"; cv.style.height = "auto"; const ctx = cv.getContext("2d"); const estado = { padrao, cv, ctx, feedMap: semeado.feedMap, A: new Float32Array(N).fill(1), B: Float32Array.from(semeado.B), A2: new Float32Array(N), B2: new Float32Array(N) }; estado.pintar = () => { ctx.fillStyle = FUNDO; ctx.fillRect(0, 0, W, H); ctx.fillStyle = corFolha; ctx.fill(caminhoFolha); ctx.save(); ctx.clip(caminhoFolha); const caminhos = [new Path2D(), new Path2D(), new Path2D()]; for (let wy = -raioMapeamento; wy < raioMapeamento; wy += passo) { const my = Math.min(rdSize - 1, Math.max(0, Math.floor(mapa(wy, -raioMapeamento, raioMapeamento, 0, rdSize - 1)))); for (let wx = -raioMapeamento; wx < raioMapeamento; wx += passo) { let ang = Math.atan2(wy, wx); if (ang < 0) ang += Math.PI * 2; if (Math.sqrt(wx * wx + wy * wy) >= rBorda(ang)) continue; const incl = mapa(wy, 0, -dnaBase.tamanho, 0, dnaBase.curvatura); const mx = Math.min(rdSize - 1, Math.max(0, Math.floor(mapa(wx + incl, -raioMapeamento, raioMapeamento, 0, rdSize - 1)))); const nivel = estado.B[mx + my * rdSize]; if (nivel <= 0) continue; const faixa = nivel < LIMIARES[0] ? 0 : (nivel < LIMIARES[1] ? 1 : 2); const tam = mapa(nivel, 0, 0.5, passo * 0.7, passo * 0.85) * k; const px = cx + k * (wx + incl), py = cy + k * wy; caminhos[faixa].moveTo(px + tam / 2, py); caminhos[faixa].arc(px, py, tam / 2, 0, Math.PI * 2); } } for (let i = 0; i < 3; i++) { ctx.fillStyle = cores3[i]; ctx.fill(caminhos[i]); } ctx.strokeStyle = FUNDO; ctx.lineCap = "round"; for (const [ax, ay, bx, by, espessura] of segmentosNervura) { ctx.lineWidth = Math.max(0.5, espessura * k); ctx.beginPath(); ctx.moveTo(cx + k * ax, cy + k * ay); ctx.lineTo(cx + k * bx, cy + k * by); ctx.stroke(); } ctx.restore(); ctx.strokeStyle = FUNDO; ctx.lineWidth = 4 * esc * k; ctx.stroke(caminhoFolha); }; estado.pintar(); return estado; }); let atual = 0, feito = 0, id; const quadro = () => { const e = blocos[atual]; for (let n = 0; n < PASSOS_POR_QUADRO && feito < ITERACOES; n++) { passoRD(e.A, e.B, e.A2, e.B2, e.feedMap, rdSize, e.padrao.dB, e.padrao.k); let t = e.A; e.A = e.A2; e.A2 = t; t = e.B; e.B = e.B2; e.B2 = t; feito++; } e.pintar(); if (feito >= ITERACOES) { atual++; feito = 0; } if (atual < blocos.length) id = requestAnimationFrame(quadro); }; id = requestAnimationFrame(quadro); invalidation.then(() => cancelAnimationFrame(id)); const linha = (rotulo, valor) => html` ${rotulo} ${valor} `; const celulas = blocos.map((e) => html`

${NOMES[e.padrao.nome][pt ? 0 : 1]}

${e.cv} ${linha(pt ? "alimentação" : "feed", e.padrao.f.toFixed(4))} ${linha(pt ? "consumo" : "kill", e.padrao.k.toFixed(4))} ${linha(pt ? "difusão de B" : "B diffusion", e.padrao.dB.toFixed(2))} ${linha(pt ? "ritmo" : "rhythm", Math.ceil(dnaSorteado.ritmoSemeadura))}

`); return html`

${celulas} `; }3d:T1533,{ const W = 1600, H = Math.round(W * 3614 / 5552); const MARGEM = 0.01; const ITERACOES = 350; const PASSOS_POR_QUADRO = 2; const FUNDO = "#E1F5ED"; const FG = ["#A6559C", "#08240A", "#8EBD95", "#608A6A", "#D99ACA"]; const LIMIARES = [0.008, 0.30]; const padrao = sortearPadroesRD((20260812 + simularBorda * 1000003) >>> 0)[0]; let r = (91711 + sortear * 1000003) >>> 0; const rnd = () => (r = (1664525 * r + 1013904223) % 4294967296) / 4294967296; const disponiveis = FG.slice(); const coresRD = []; for (let i = 0; i < 4; i++) { coresRD.push(disponiveis.splice(Math.floor(rnd() * disponiveis.length), 1)[0]); } const corFolha = coresRD[0]; const cores3 = coresRD.slice(1); const esc = dnaSorteado.tamanho / 225; const dna = { ...dnaSorteado, feed: padrao.f, padrao: padrao.nome }; const rdSize = Math.floor(250 * Math.min(esc, 1.2)); const raioMapeamento = dna.tamanho * 2.2; const passo = Math.floor(10 * esc); const mapa = (v, a, b, c, d) => (v - a) / (b - a) * (d - c) + c; const semeado = semearNervurasRD(dna, rdSize, raioMapeamento, dna.ritmoSemeadura); const N = rdSize * rdSize; let A = new Float32Array(N).fill(1); let B = Float32Array.from(semeado.B); let A2 = new Float32Array(N); let B2 = new Float32Array(N); const ptsBase = contornoFolha(dna); let x0 = Infinity, x1 = -Infinity, y0 = Infinity, y1 = -Infinity; for (const q of ptsBase) { if (q.x < x0) x0 = q.x; if (q.x > x1) x1 = q.x; if (q.y < y0) y0 = q.y; if (q.y > y1) y1 = q.y; } const k = Math.min( (W * (1 - 2 * MARGEM)) / (x1 - x0), (H * (1 - 2 * MARGEM)) / (y1 - y0) ); const cx = W / 2 - k * (x0 + x1) / 2; const cy = H / 2 - k * (y0 + y1) / 2; const caminhoBase = new Path2D(); ptsBase.forEach((q, i) => i ? caminhoBase.lineTo(cx + k * q.x, cy + k * q.y) : caminhoBase.moveTo(cx + k * q.x, cy + k * q.y)); caminhoBase.closePath(); const segmentosNervura = nervurasFolha(dna); const cv = document.createElement("canvas"); cv.width = W; cv.height = H; cv.style.display = "block"; cv.style.width = "100%"; cv.style.height = "auto"; const ctx = cv.getContext("2d"); const pintar = (grid) => { const vb = viewof borda.value; const dnaD = { ...dna, resistencia: vb.resistencia * esc, rugosidade: vb.rugosidade * esc, frequenciaOndulacao: vb.frequencia, sensibilidadeDeformacao: vb.sensibilidade }; const { pontos, raios } = contornoNecrose(dnaD, grid, rdSize, raioMapeamento); const caminhoFolha = new Path2D(); pontos.forEach((q, i) => i ? caminhoFolha.lineTo(cx + k * q.x, cy + k * q.y) : caminhoFolha.moveTo(cx + k * q.x, cy + k * q.y)); caminhoFolha.closePath(); ctx.fillStyle = FUNDO; ctx.fillRect(0, 0, W, H); ctx.save(); ctx.setLineDash([4 * esc * k, 4 * esc * k]); ctx.strokeStyle = corFolha; ctx.lineWidth = 1.5 * esc * k; ctx.stroke(caminhoBase); ctx.restore(); ctx.fillStyle = corFolha; ctx.fill(caminhoFolha); ctx.save(); ctx.clip(caminhoFolha); const caminhos = [new Path2D(), new Path2D(), new Path2D()]; for (let wy = -raioMapeamento; wy < raioMapeamento; wy += passo) { const my = Math.min(rdSize - 1, Math.max(0, Math.floor(mapa(wy, -raioMapeamento, raioMapeamento, 0, rdSize - 1)))); for (let wx = -raioMapeamento; wx < raioMapeamento; wx += passo) { let ang = Math.atan2(wy, wx); if (ang < 0) ang += Math.PI * 2; if (Math.sqrt(wx * wx + wy * wy) >= raios[Math.min(628, Math.round(ang / 0.01))]) continue; const incl = mapa(wy, 0, -dna.tamanho, 0, dna.curvatura); const mx = Math.min(rdSize - 1, Math.max(0, Math.floor(mapa(wx + incl, -raioMapeamento, raioMapeamento, 0, rdSize - 1)))); const nivel = grid[mx + my * rdSize]; if (nivel <= 0) continue; const faixa = nivel < LIMIARES[0] ? 0 : (nivel < LIMIARES[1] ? 1 : 2); const tam = mapa(nivel, 0, 0.5, passo * 0.7, passo * 0.85) * k; const px = cx + k * (wx + incl), py = cy + k * wy; caminhos[faixa].moveTo(px + tam / 2, py); caminhos[faixa].arc(px, py, tam / 2, 0, Math.PI * 2); } } for (let i = 0; i < 3; i++) { ctx.fillStyle = cores3[i]; ctx.fill(caminhos[i]); } ctx.strokeStyle = FUNDO; ctx.lineCap = "round"; for (const [ax, ay, bx, by, espessura] of segmentosNervura) { ctx.lineWidth = Math.max(0.5, espessura * k); ctx.beginPath(); ctx.moveTo(cx + k * ax, cy + k * ay); ctx.lineTo(cx + k * bx, cy + k * by); ctx.stroke(); } ctx.restore(); ctx.strokeStyle = FUNDO; ctx.lineWidth = 4 * esc * k; ctx.stroke(caminhoFolha); }; pintar(B); let feito = 0, id; const quadro = () => { for (let n = 0; n < PASSOS_POR_QUADRO && feito < ITERACOES; n++) { passoRD(A, B, A2, B2, semeado.feedMap, rdSize, padrao.dB, padrao.k); let t = A; A = A2; A2 = t; t = B; B = B2; B2 = t; feito++; } pintar(B); if (feito < ITERACOES) id = requestAnimationFrame(quadro); }; id = requestAnimationFrame(quadro); const aoMexer = () => pintar(B); viewof borda.addEventListener("input", aoMexer); invalidation.then(() => { cancelAnimationFrame(id); viewof borda.removeEventListener("input", aoMexer); }); return html`

${cv}`; }3e:T180c,{ const W = 1600, H = Math.round(W * 3614 / 5552); const MIN_FOLHAS = 4, MAX_FOLHAS = 8; const FRACAO = 0.62; const P_LIMPA = 0.10; const ITERACOES = 350; const SAIDA = 1.08; const FUNDO = "#E1F5ED"; const CAULE = "#08240A"; const FG = ["#A6559C", "#08240A", "#8EBD95", "#608A6A", "#D99ACA"]; const LIMIARES = [0.008, 0.30]; const R_REF = 400 * 1.6 * 1.15 * 1.3; let r = (20260813 + novaComposicao * 1000003) >>> 0; const rnd = () => (r = (1664525 * r + 1013904223) % 4294967296) / 4294967296; const num = (a, b) => a + rnd() * (b - a); const mapa = (v, a, b, c, d) => (v - a) / (b - a) * (d - c) + c; const sortearCores = () => { const restantes = FG.slice(); const escolhidas = []; for (let i = 0; i < 4; i++) { escolhidas.push(restantes.splice(Math.floor(rnd() * restantes.length), 1)[0]); } return escolhidas; }; const corUnica = rnd() < 0.5; const coresComposicao = sortearCores(); const tipoStroke = Math.floor(num(0, 4)); const MISTO = [FUNDO, null, CAULE]; const nFolhas = Math.floor(num(MIN_FOLHAS, MAX_FOLHAS + 1)); const folhas = []; for (let i = 0; i < nFolhas; i++) { const tamanho = Math.floor(num(300, 401)); const esc = tamanho / 225; const p5Seed = Math.floor(num(0, 9999999)); const nLobos = Math.floor(num(7, 9)); const escolhido = sortearPadroesRD(Math.floor(num(0, 4294967295)))[Math.floor(num(0, 4))]; const cores = corUnica ? coresComposicao : sortearCores(); const traco = tipoStroke === 0 ? FUNDO : tipoStroke === 1 ? null : tipoStroke === 2 ? CAULE : MISTO[Math.floor(num(0, 3))]; folhas.push({ pigmentada: num(0, 1) >= P_LIMPA, fx: (i + 0.5) / nFolhas + num(-0.05, 0.05), fy: 0.52 + num(-0.30, 0.30), corFolha: cores[0], cores3: cores.slice(1), traco, dna: { p5Seed, tamanho, nLobos, vies: num(-0.3, 0.3), curvatura: num(-40, 40) * esc, escalaRuidoBorda: num(0.5, 2.5), tremorNervura: num(0.1, 0.4), espessuraNervura: 4.0 * esc, angulosNervuras: angulosNervuras(nLobos, p5Seed), ritmoSemeadura: num(2, 4), resistencia: num(15, 80) * esc, rugosidade: num(4, 12) * esc, frequenciaOndulacao: num(80, 200), sensibilidadeDeformacao: num(0.05, 0.25), padrao: escolhido.nome, feed: escolhido.f, k: escolhido.k, dB: escolhido.dB } }); } folhas.sort((a, b) => a.fy - b.fy); const cv = document.createElement("canvas"); cv.width = W; cv.height = H; cv.style.display = "block"; cv.style.width = "100%"; cv.style.height = "auto"; const ctx = cv.getContext("2d"); ctx.fillStyle = FUNDO; ctx.fillRect(0, 0, W, H); for (const folha of folhas) { const dna = folha.dna; const esc = dna.tamanho / 225; const k = (H * FRACAO) / R_REF; const rdSize = Math.floor(250 * Math.min(esc, 1.2)); const raioMapeamento = dna.tamanho * 2.2; const passo = Math.floor(10 * esc); const N = rdSize * rdSize; let gridB = new Float32Array(N); if (folha.pigmentada) { const semeado = semearNervurasRD(dna, rdSize, raioMapeamento, dna.ritmoSemeadura); let A = new Float32Array(N).fill(1); let B = Float32Array.from(semeado.B); let A2 = new Float32Array(N); let B2 = new Float32Array(N); for (let it = 0; it < ITERACOES; it++) { passoRD(A, B, A2, B2, semeado.feedMap, rdSize, dna.dB, dna.k); let t = A; A = A2; A2 = t; t = B; B = B2; B2 = t; } gridB = B; } const { pontos, raios } = contornoNecrose(dna, gridB, rdSize, raioMapeamento); let x0 = Infinity, x1 = -Infinity; for (const q of pontos) { if (q.x < x0) x0 = q.x; if (q.x > x1) x1 = q.x; } const cx = W * folha.fx - k * (x0 + x1) / 2; const cy = H * folha.fy; ctx.fillStyle = CAULE; ctx.fill(caminhoPedunculo(cx, cy, k, H * SAIDA - cy, dna.p5Seed)); const caminhoFolha = new Path2D(); pontos.forEach((q, i) => i ? caminhoFolha.lineTo(cx + k * q.x, cy + k * q.y) : caminhoFolha.moveTo(cx + k * q.x, cy + k * q.y)); caminhoFolha.closePath(); ctx.fillStyle = folha.corFolha; ctx.fill(caminhoFolha); if (folha.traco) { ctx.strokeStyle = folha.traco; ctx.lineWidth = 4 * esc * k; ctx.stroke(caminhoFolha); } ctx.save(); ctx.clip(caminhoFolha); if (folha.pigmentada) { const caminhos = [new Path2D(), new Path2D(), new Path2D()]; for (let wy = -raioMapeamento; wy < raioMapeamento; wy += passo) { const my = Math.min(rdSize - 1, Math.max(0, Math.floor(mapa(wy, -raioMapeamento, raioMapeamento, 0, rdSize - 1)))); for (let wx = -raioMapeamento; wx < raioMapeamento; wx += passo) { let ang = Math.atan2(wy, wx); if (ang < 0) ang += Math.PI * 2; if (Math.sqrt(wx * wx + wy * wy) >= raios[Math.min(628, Math.round(ang / 0.01))]) continue; const incl = mapa(wy, 0, -dna.tamanho, 0, dna.curvatura); const mx = Math.min(rdSize - 1, Math.max(0, Math.floor(mapa(wx + incl, -raioMapeamento, raioMapeamento, 0, rdSize - 1)))); const nivel = gridB[mx + my * rdSize]; if (nivel <= 0) continue; const faixa = nivel < LIMIARES[0] ? 0 : (nivel < LIMIARES[1] ? 1 : 2); const tam = mapa(nivel, 0, 0.5, passo * 0.7, passo * 0.85) * k; const px = cx + k * (wx + incl), py = cy + k * wy; caminhos[faixa].moveTo(px + tam / 2, py); caminhos[faixa].arc(px, py, tam / 2, 0, Math.PI * 2); } } for (let i = 0; i < 3; i++) { ctx.fillStyle = folha.cores3[i]; ctx.fill(caminhos[i]); } } ctx.strokeStyle = FUNDO; ctx.lineCap = "round"; for (const [ax, ay, bx, by, espessura] of nervurasFolha(dna)) { ctx.lineWidth = Math.max(0.5, espessura * k); ctx.beginPath(); ctx.moveTo(cx + k * ax, cy + k * ay); ctx.lineTo(cx + k * bx, cy + k * by); ctx.stroke(); } ctx.restore(); } return html`

${cv}`; }3f:[{"id":"95782443eacbad04aa1b3a0ecb3ea953b5dc63c8afd0e6bf11e3b9028d5259b2873cb52d0b5cc8ba4705d801eea2bb698665cbeb44d48870c40978fb4a5866f9","href":"https://static.observableusercontent.com/files/95782443eacbad04aa1b3a0ecb3ea953b5dc63c8afd0e6bf11e3b9028d5259b2873cb52d0b5cc8ba4705d801eea2bb698665cbeb44d48870c40978fb4a5866f9","name":"0x5923439bfb39b045fa727f40313539ef311c91cd53d27d3f4d3260b7bcf93187low@1.png","type":"image/png","lastModified":1786443039470.073,"size":5663393},{"id":"d3ef21905a78184b1c075f3370459418dc558b0672d29cb01fa95c580d543afce085c47001d8de95f213442cb68d342420f0a5c6b0be5cffe19a7cd9bd7bfeb6","href":"https://static.observableusercontent.com/files/d3ef21905a78184b1c075f3370459418dc558b0672d29cb01fa95c580d543afce085c47001d8de95f213442cb68d342420f0a5c6b0be5cffe19a7cd9bd7bfeb6","name":"Logo branco.svg","type":"image/svg+xml","lastModified":1786468487427.895,"size":121103},{"id":"4d2babffc1554c2d2f2e98d9a55714abfef9728b1642be68db00fb5e315a789e4a3df7a5b2bd74a1f68eb0a9f4ef0d309085a01c551a0c51f3e1865e19b13285","href":"https://static.observableusercontent.com/files/4d2babffc1554c2d2f2e98d9a55714abfef9728b1642be68db00fb5e315a789e4a3df7a5b2bd74a1f68eb0a9f4ef0d309085a01c551a0c51f3e1865e19b13285","name":"Logo preto.svg","type":"image/svg+xml","lastModified":1786468487556.708,"size":121103}] 32:{"id":"5df6e132f903847e","slug":"variavel-folhas","title":"Variável: Folhas","thumbnail":"8eae8480df8885c97acc5c7e836c34d7ead45fc8127048f0434bb1197516030e","access_level":"public","create_time":"$D2026-08-11T09:23:46.697Z","update_time":"$D2026-08-15T13:54:50.464Z","view_time":null,"first_public_time":"$D2026-08-12T12:30:20.130Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"610220f4b5b6da00","login":"dac4b2f6fec5f174","name":"Monica Rizzolli","avatar_url":"https://avatars-next.observableusercontent.com/f7425fadfc7e4736163ab9771b8f151f053cd24f3358fd181f726c2fe403bffc","tier":"starter_2024"},"version":268,"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":"individual","id":"dac4b2f6fec5f174","login":"rizzolli","name":"Monica Rizzolli","avatar_url":"https://avatars-next.observableusercontent.com/f7425fadfc7e4736163ab9771b8f151f053cd24f3358fd181f726c2fe403bffc","tier":null,"role":"editor"},{"type":"team","id":"610220f4b5b6da00","login":"dac4b2f6fec5f174","name":"Monica Rizzolli","avatar_url":"https://avatars-next.observableusercontent.com/f7425fadfc7e4736163ab9771b8f151f053cd24f3358fd181f726c2fe403bffc","tier":"starter_2024","role":"viewer"}],"comments":[{"id":"82a39322906760b4","reply_to_id":null,"content":"Que notebook incrível!","create_time":"$D2026-08-25T08:31:23.078Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"58f4527ace0580f9","login":"kewitz","name":"Leonardo Kewitz","avatar_url":"https://avatars-next.observableusercontent.com/2aef377a8659ae1f2c5e918afe50bf95dfa0ddae59ae8db3b62a2de659f81d8a","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Variável: Folhas","cells":[{"id":21,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"html`

${viewof idioma}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"{\n const img = await FileAttachment(\"0x5923439bfb39b045fa727f40313539ef311c91cd53d27d3f4d3260b7bcf93187low@1.png\").image({ alt: \"\" });\n img.style.display = \"block\";\n img.style.width = \"100%\";\n img.style.height = \"auto\";\n return html`

${img}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"idioma === \"Português\" ? md`## Folhas` : md`## Leaves`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"idioma === \"Português\" ? md`\nNesta série de posts, vou olhar separadamente cada um dos elementos que compõem as imagens das capas da revista *Variável 2* — neste, a construção das folhas.\n` : md`\nThis series takes the covers of *Variável 2* magazine apart, one element per post. This one is about how the leaves are built.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"idioma === \"Português\" ? md`\nA folha começa como um contorno, e cinco ajustes decidem o desenho dele: o tamanho, os lóbulos, o viés que engorda um lado, a curvatura que a entorta e as ondulações da borda. Abaixo, dá para mexer em cada um.\n` : md`\nA leaf begins as an outline, and five settings shape it: size, lobes, an asymmetry that fattens one side, a tilt that leans it, and the ripples along the edge. Try each one below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"idioma === \"Português\" ? md`\nOs cinco ajustes não decidem tudo. Onde cada ondulação da borda cai, quanto ela afunda e quantas aparecem na volta é a semente que diz — o número que escolhe de qual ruído a borda é tirada. Com os mesmos cinco valores e outra semente, sai uma folha do mesmo tamanho, com os mesmos lóbulos, e mesmo assim diferente. É o que separa uma folha da outra na mesma planta.\n` : md`\nThose five settings don't decide everything. Where each ripple along the edge falls, how deep it runs, how many appear around the leaf — that comes from the seed, the number that picks which noise the edge is drawn from. Keep the five values, change the seed, and you get a leaf of the same size, with the same lobes, that is still another leaf. It's what tells one leaf from the next on the same plant.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"idioma === \"Português\" ? md`\nSobre o contorno vêm as nervuras — uma central e as laterais abrindo em leque, todas saindo do mesmo ponto e parando antes de encontrar a borda — e o pedúnculo, que desce da base. Aqui há dois ajustes novos: o tremor, que faz as nervuras serpentearem, e a espessura do traço.\n` : md`\nThe veins come next — one down the middle and the rest fanning out from the same point, each stopping short of the edge — along with the stalk running down from the base. Two new settings here: waver, which makes the veins meander, and the thickness of the line.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"idioma === \"Português\" ? md`\nAlgumas folhas recebem uma pigmentação que vem de uma simulação de reação-difusão. Antes de aplicá-la na folha, defini a grade, a forma e a cor da reação — é o que está abaixo: a simulação sozinha, sem folha nenhuma.\n` : md`\nSome leaves get their pigmentation from a reaction-diffusion simulation. Before applying it to a leaf, I settled the grid, the shape and the colors of the reaction — which is what's below: the simulation on its own, with no leaf at all.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"{\n viewof rd.aplicarIdioma(idioma);\n return html`

\n ${viewof rd}\n

${viewof simular}

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"idioma === \"Português\" ? md`\nNa folha, os pontos não caem ao acaso: eles nascem ao longo das nervuras. A cada poucos passos da nervura planto um ponto, e em volta dele a alimentação fica mais forte — é isso que faz a mancha brotar dali, e não do meio da folha. O ritmo abaixo decide de quantos em quantos passos isso acontece: no primeiro quadro aparecem só os pontos, depois a mancha crescendo a partir deles.\n` : md`\nOn the leaf the seeds don't fall at random: they follow the veins. Every few steps along a vein I plant one, and the feed runs higher around it — which is why the blotch sprouts from there, and not from the middle of the leaf. The rhythm below sets how many steps apart the seeds are: the first frame shows the seeds alone, then the blotch growing out of them.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"{\n viewof rdFolha.aplicarIdioma(idioma);\n const sortear = botaoSortearFolha();\n const simular = viewof simularFolha;\n for (const el of [sortear, simular]) {\n el.style.display = \"inline-flex\";\n el.style.width = \"auto\";\n el.style.maxWidth = \"none\";\n el.style.flex = \"0 0 auto\";\n el.style.margin = \"0\";\n }\n return html`

\n ${viewof rdFolha}\n

\n ${sortear}${simular}\n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"{\n const sortear = botaoSortearFolha();\n const simular = viewof simularPadroes;\n for (const el of [sortear, simular]) {\n el.style.display = \"inline-flex\";\n el.style.width = \"auto\";\n el.style.maxWidth = \"none\";\n el.style.flex = \"0 0 auto\";\n el.style.margin = \"0\";\n }\n return html`

\n ${sortear}${simular}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"{\n const pt = idioma === \"Português\";\n const LINHAS = [\n [\"Necrose\", \"Necrosis\", \"f 0.054–0.057, k 0.063–0.064, dB 0.25–0.45\", \"f 0.054–0.057, k 0.063–0.064, dB 0.25–0.45\"],\n [\"Variegação\", \"Variegation\", \"f 0.033–0.035, k 0.061–0.063, dB 0.15–0.25\", \"f 0.033–0.035, k 0.061–0.063, dB 0.15–0.25\"],\n [\"Mosaico\", \"Mosaic\", \"f 0.02–0.04, k 0.055 fixo, dB 0.3\", \"f 0.02–0.04, k 0.055 fixed, dB 0.3\"],\n [\"Clorose\", \"Chlorosis\", \"f 0.046 fixo, k 0.063 fixo, dB 0.5 fixo\", \"f 0.046 fixed, k 0.063 fixed, dB 0.5 fixed\"]\n ];\n return html`

\n ${LINHAS.map((l) => html`

${pt ? l[0] : l[1]} — ${pt ? l[2] : l[3]}

`)}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"idioma === \"Português\" ? md`\nDas quatro, só a necrose mexe na forma da folha. Onde a mancha fica forte o bastante, a borda recua e serrilha ali mesmo. O tracejado mostra onde a folha estava antes.\n\nQuatro ajustes decidem esse recuo. A resistência é o quanto a borda encolhe. A rugosidade e a frequência são o tamanho e a miudeza da serrilha. A sensibilidade é o nível de mancha a partir do qual a deformação começa.\n` : md`\nOf the four, necrosis is the only one that changes the leaf's outline. Where the blotch runs strong, the edge pulls back and turns ragged. The dashed line marks how far the leaf reached before.\n\nFour settings shape that retreat. Resistance sets how far the edge pulls in. Roughness and frequency set how deep the teeth are and how tightly they repeat. Sensitivity sets how much blotch it takes before the edge gives at all.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"{\n viewof borda.aplicarIdioma(idioma);\n viewof borda.aplicarEscala({ resistencia: dnaSorteado.tamanho / 225, rugosidade: dnaSorteado.tamanho / 225 });\n const sortear = botaoSortearFolha();\n const simular = viewof simularBorda;\n for (const el of [sortear, simular]) {\n el.style.display = \"inline-flex\";\n el.style.width = \"auto\";\n el.style.maxWidth = \"none\";\n el.style.flex = \"0 0 auto\";\n el.style.margin = \"0\";\n }\n return html`

\n ${viewof borda}\n

\n ${sortear}${simular}\n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"idioma === \"Português\" ? md`\nJuntando as partes: contorno, nervuras, pecíolo e pigmentação. Cada folha abaixo sorteia o próprio DNA — tamanho, lóbulos, semente, configuração da reação — e algumas não recebem pigmentação nenhuma. É assim que elas chegam à capa, sobrepostas umas às outras.\n` : md`\nThe parts together: outline, veins, stalk and pigmentation. Every leaf below draws its own DNA — size, lobes, seed, reaction settings — and some get no pigmentation at all. This is how they reach the cover, overlapping one another.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"html`

${viewof novaComposicao}`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"idioma === \"Português\" ? md`\nTodas as funções que desenham estas folhas — contorno, nervuras, pecíolo, reação-difusão e o sorteio do DNA — estão no notebook [folha-funcoes](https://observablehq.com/@dac4b2f6fec5f174/folha-funcoes), na mesma ordem em que aparecem aqui.\n` : md`\nAll the functions behind these leaves — outline, veins, stalk, reaction-diffusion and the DNA draw — are in the [folha-funcoes](https://observablehq.com/@dac4b2f6fec5f174/folha-funcoes) notebook, in the order they appear here.\n\n`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"import {viewof idioma, viewof geometria, viewof nervuras, viewof rd, viewof rdFolha, viewof borda, viewof simular, viewof simularFolha, viewof simularPadroes, viewof simularBorda, viewof novaComposicao, viewof sortear, botaoSortearFolha, contornoFolha, contornoNecrose, caminhoPedunculo, nervurasFolha, angulosNervuras, criarNoise, raioBase, dnaSorteado, passoRD, semearPontosRD, semearNervurasRD, sortearPadroesRD} from \"@dac4b2f6fec5f174/folha-funcoes\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3f","stdlib":"1","titling":"auto"}} 33:"$32:body"