30:T764,md`# Predador e presa Imagine uma ilha de gatos 🐈 e ratos 🐁. Se ratos são numerosos, os gatos vão comer bem e se reproduzir rapidamente. Mas, à medida que os gatos se multiplicam, eles comem mais ratos. Eventualmente a população de ratos é dizimada e os gatos começam a morrer de fome. Com menos gatos, os ratos se recuperam e o ciclo se repete. As [equações de Lotka-Volterra] (https://en.wikipedia.org/wiki/Lotka–Volterra_equations) modelam uma interação dinâmica entre predadores e presas. O modelo é um par de equações (diferenciais ordinárias) onde 🐁 é o número de presas e 🐈 é o número de predadores ${tex.block`\begin{aligned} \frac{\mathrm{d}🐁}{\mathrm{d}t} &= \alpha 🐁-\beta 🐁🐈 \\[2ex] \frac{\mathrm{d}🐈}{\mathrm{d}t} &= \delta 🐁🐈-\gamma 🐈 \end{aligned}`} Neste modelo, a presa tem comida ilimitada e cresce exponencialmente (${tex`\alpha`}); no entanto, às vezes eles são comidos (${tex`\beta`}) por predadores. Os predadores têm apetite ilimitado, mas comem apenas presas, limitando seu crescimento (${tex`\delta`}); sua decadência é exponencial (${tex`\gamma`}). Os parâmetros ${tex`\alpha`}, ${tex`\beta`}, ${tex`\gamma`} e ${tex`\delta`} descrevem como as duas populações se comportam, enquanto ${tex`\tfrac{\mathrm{d}🐁}{\mathrm{d}t}`} e ${tex`\tfrac{\mathrm{d}🐈}{\mathrm{d}t}`} são as taxas em qual cada população está aumentando ou diminuindo. Avaliando iterativamente essas equações - começando com algumas populações iniciais, calculando as taxas, ajustando as populações de acordo, repetindo esse processo várias vezes - podemos calcular as populações ao longo do tempo, como mostra o gráfico abaixo. Arraste o gato 🐈 ou o mouse 🐁 para alterar as populações iniciais. (Você não pode ter mouses fracionários, portanto, interprete os números como milhares ou similares.)`31:T92a,{ let T, X, Y; const height = 420; const margin = {top: 20, right: 30, bottom: 30, left: 40}; const x = d3.scaleLinear().domain([0, 24]).range([margin.left, width - margin.right]); const y = d3.scaleLinear().domain([0, 3]).range([height - margin.bottom, margin.top]); const svg = d3.select(DOM.svg(width, height)); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)) .call(g => g.select(".tick:first-of-type text").text("t = 0")); svg.append("g") .attr("transform", `translate(${margin.left - 12},0)`) .call(d3.axisLeft(y).ticks(8)) .call(g => g.select(".domain").remove()); const pathX = svg.append("path") .attr("fill", "none") .attr("stroke", xColor) .attr("stroke-width", 1.55); const pathY = pathX.clone() .attr("stroke", yColor); const dotX = svg.append("circle") .style("cursor", "move") .style("pointer-events", "all") .attr("fill", "transparent") .attr("stroke", "transparent") .attr("stroke-width", 15) .attr("r", 9) .attr("cx", margin.left) .call(d3.drag().on("drag", () => { viewof xy.value = [Math.max(0, Math.min(3, +y.invert(d3.event.y).toFixed(3))), viewof xy.value[1]]; })); const dotY = dotX.clone() .call(d3.drag().on("drag", () => { viewof xy.value = [viewof xy.value[0], Math.max(0, Math.min(3, +y.invert(d3.event.y).toFixed(3)))]; })); const labelX = svg.append("text") .attr("text-anchor", "middle") .attr("x", margin.left) .attr("dy", "0.31em") .attr("fill", xColor) .style("font-size", "24px") .style("pointer-events", "none") .text("🐁"); const labelY = labelX.clone() .attr("fill", yColor) .text("🐈"); function update() { const [x0, y0] = viewof xy.value; [T, X, Y] = simulate({alpha, beta, gamma, delta, x0, y0}); pathX.attr("d", d3.line().x(x).y((_, i) => y(X[i]))(T)); pathY.attr("d", d3.line().x(x).y((_, i) => y(Y[i]))(T)); dotX.attr("cy", y(X[0])); dotY.attr("cy", y(Y[0])); labelX.attr("y", y(X[0])); labelY.attr("y", y(Y[0])); } update(); viewof xy.addEventListener("input", update); invalidation.then(() => viewof xy.removeEventListener("input", update)); return svg.node(); }32:Ta2b,{ let frame, i = 0, k = 24, T, X, Y; const size = Math.min(640, width); const margin = {top: 20, right: 30, bottom: 30, left: 40}; const x = d3.scaleLinear().domain([0, 3]).range([margin.left, size - margin.right]); const y = d3.scaleLinear().domain([0, 3]).range([size - margin.bottom, margin.top]); const lineStatic = d3.line() .curve(d3.curveLinearClosed) .x((_, i) => x(X[i])) .y((_, i) => y(Y[i])); const lineDynamic = d3.line() .x(j => x(X[(i + j) % X.length])) .y(j => y(Y[(i + j) % Y.length])); const svg = d3.select(DOM.svg(size, size)) .style("overflow", "visible"); svg.append("g") .attr("transform", `translate(0,${size - margin.bottom})`) .call(d3.axisBottom(x).ticks(5)) .call(g => g.select(".tick:last-of-type text").clone() .style("font-size", "24px") .attr("y", -6) .attr("dy", null) .text("🐁")); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".tick:last-of-type text").clone() .style("font-size", "24px") .attr("text-anchor", "start") .attr("x", 6) .text("🐈")); const pathStatic = svg.append("path") .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-opacity", 0.25) .attr("stroke-width", 1.5); const pathDynamic = svg.append("path") .datum(d3.range(20)) .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-width", 1.5); const dot = svg.append("circle") .style("cursor", "move") .style("pointer-events", "all") .attr("stroke", "transparent") .attr("stroke-width", 15) .attr("fill", "black") .attr("r", 4) .call(d3.drag().on("start drag", () => { viewof xy.value = [ Math.max(0, Math.min(3, +x.invert(d3.event.x).toFixed(3))), Math.max(0, Math.min(3, +y.invert(d3.event.y).toFixed(3))) ]; })); function reset() { const [x0, y0] = viewof xy.value; dot.attr("cx", x(x0)).attr("cy", y(y0)); [T, X, Y] = cycle(...simulate({alpha, beta, gamma, delta, x0, y0})); pathStatic.datum(T).attr("d", lineStatic); } async function tick() { await visibility(); frame = requestAnimationFrame(tick); ++i, pathDynamic.attr("d", lineDynamic); } reset(), tick(); viewof xy.addEventListener("input", reset); invalidation.then(() => viewof xy.removeEventListener("input", reset)); invalidation.then(() => cancelAnimationFrame(frame)); return svg.node(); }33:T58d,md`Esse ciclo sugere um resultado contra-intuitivo, mas plausível: se você reduzir instantaneamente o número de presas, os predadores diminuirão, permitindo que a presa se recupere e uma população de presas (temporariamente) *maior* do que a que você começou. De maneira mais geral, os ciclos de feedback em sistemas dinâmicos podem dificultar a previsão do que acontecerá quando você introduzir mudanças artificiais! Interagir com o gráfico de fase revela outra coisa: veja se você pode ajustar as populações iniciais para contrair o círculo até se tornar um único ponto. O que essa singularidade significa em termos de comportamento predador-presa? É o *ponto de equilíbrio*: nele, ambas as populações são imutáveis; tanto o predador quanto a presa estão morrendo na mesma proporção em que estão se reproduzindo. Podemos ver o ponto estacionário diretamente - sem interação necessária - plotando todo o campo vetorial (as taxas de mudança para *todas as condições possíveis*). É como um mapa de vento: se você definir as populações iniciais para um determinado ponto, as populações seguirão as linhas do campo e retornarão ao mesmo ponto. O ponto estacionário é o olho da tempestade.`34:T783,{ const div = html`

`; const size = Math.min(640, width); const margin = {top: 20, right: 30, bottom: 30, left: 40}; const x = d3.scaleLinear().domain([0, 3]).range([margin.left, size - margin.right]); const y = d3.scaleLinear().domain([0, 3]).range([size - margin.bottom, margin.top]); const z = d3.scaleSequential(d3.interpolateReds).domain([0, 20]); const context = DOM.context2d(size, size); const canvas = div.appendChild(context.canvas); const svg = d3.select(div.appendChild(DOM.svg(size, size))); svg.style("position", "relative"); canvas.style.position = "absolute"; context.lineWidth = 0.5; context.globalAlpha = 0.5; svg.append("g") .attr("transform", `translate(0,${size - margin.bottom})`) .call(d3.axisBottom(x).ticks(5)) .call(g => g.select(".tick:last-of-type text").clone() .style("font-size", "24px") .attr("y", -6) .attr("dy", null) .text("🐁")); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".tick:last-of-type text").clone() .style("font-size", "24px") .attr("text-anchor", "start") .attr("x", 6) .text("🐈")); yield visibility(div); for (let k = 0; k < 2e5; ++k) { let x0 = Math.random() * 5, x1, dx; let y0 = Math.random() * 5, y1, dy; context.beginPath(); context.moveTo(x(x0), y(y0)); for (let t = 0; t < 8; t += Math.max(0.01, Math.min(2, Math.sqrt(dx ** 2 + dy ** 2)))) { dx = alpha * x0 - beta * x0 * y0; dy = gamma * x0 * y0 - delta * y0; x1 = x0 + dx / 40, y1 = y0 + dy / 40; context.lineTo(x(x1), y(y1)); x0 = x1, y0 = y1; } context.strokeStyle = d3.rgb(z((dx / x0) ** 2 + (dy / y0) ** 2)).darker(Math.random() * 2); context.stroke(); if (k % 1024 === 0) yield div; } }35:T469,{ await visibility(); const [T, X, Y] = simulate({alpha, beta, gamma, delta, x0: xy[0], y0: xy[1]}); const height = 240; const margin = {top: 20, right: 30, bottom: 20, left: 40}; const x = d3.scaleLinear().domain([0, 24]).range([margin.left, width - margin.right]); const y = d3.scaleLinear().domain([-4, 4]).range([height - margin.bottom, margin.top]); const svg = d3.select(DOM.svg(width, height)); svg.append("g") .attr("transform", `translate(0,${y(0)})`) .call(d3.axisBottom(x)) .call(g => g.select(".tick:first-of-type text").text("t = 0")); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(5, "+f")); svg.append("path") .attr("fill", "none") .attr("stroke", xColor) .attr("stroke-width", 1.5) .attr("d", d3.line().x(x).y((t, i) => y(alpha * X[i] - beta * X[i] * Y[i]))(T)); svg.append("path") .attr("fill", "none") .attr("stroke", yColor) .attr("stroke-width", 1.5) .attr("d", d3.line().x(x).y((t, i) => y(delta * X[i] * Y[i] - gamma * Y[i]))(T)); return svg.node(); }36:T538,md`Na maior parte do ciclo, a taxa de mudança da presa 🐁 é positiva e cresce devagar. Até que em um certo ponto (mais ou menos em ${tex`t = 8`}, se você resetou), no entanto, a taxa de mudança do predador 🐈 atinge seu máximo e a da presa cai radicalmente. Para investigar mais a fundo, vamos plotar cada termo da equação separadamente. A taxa de nascimento da presa é ${tex`\alpha`}🐁 e a de morte é ${tex`\beta`}🐁🐈; a subtração das duas produz uma taxa de mudança positiva se a quantidade de presas aumenta e uma taxa negativa se a quantidade cai.`37:T620,md`Note que os termos que envolvem ambas as populações — a taxa de morte das presas ${tex`\beta`}🐁🐈 (penúltimo gráfico) e a taxa de nascimento dos predadores ${tex`\delta`}🐁🐈 (último gráfico) — sobem mais e mais rápido do que os termos que só envolvem uma população — a taxa de nascimento de presas ${tex`\alpha`}🐁 (penúltimo gráfico) e a taxa de mortes do predador ${tex`\gamma`}🐈 (último gráfico). Os termos 'duplos' são assintoticamente mais largos que os termos 'únicos': assumingo que os parâmetros ${tex`\alpha, \beta, \ldots`} são positivos, os termos 'duplos' serão sempre maiores que os termos 'únicos', desde que as populações sejam suficientemente grandes. Os termos 'duplos' são “rápidos”, enquanto os termos únicos são “devagar”. Em resumo: A taxa de nascimento da presa muda *devagar*.
A taxa de nascimento do predador muda *rapidamente*.
A taxa de morte da presa death muda *rapidamente*.
A taxa de morte do predador muda *devagar*. E essa é a razão pela qual a população de predadores segue a população de presas.`38:T759,function changeChart(positiveColor, options, f1, f2) { const [T, X, Y] = simulate(options); const height = 240; const margin = {top: 20, right: 30, bottom: 30, left: 40}; const x = d3.scaleLinear().domain([0, 24]).range([margin.left, width - margin.right]); const y = d3.scaleLinear().domain([0, 4]).range([height - margin.bottom, margin.top]); const svg = d3.select(DOM.svg(width, height)); const positive = DOM.uid("positive"); const negative = DOM.uid("negative"); const defs = svg.append("defs"); defs.append("clipPath").attr("id", positive.id).append("path") .attr("d", d3.area().x(x).y0(0).y1((t, i) => y(f2(X[i], Y[i])))(T)); defs.append("clipPath").attr("id", negative.id).append("path") .attr("d", d3.area().x(x).y0(0).y1((t, i) => y(f1(X[i], Y[i])))(T)); svg.append("g") .attr("transform", `translate(0,${y(0)})`) .call(d3.axisBottom(x)) .call(g => g.select(".tick:first-of-type text").text("t = 0")); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(5, "+f")); svg.append("path") .attr("clip-path", positive) .attr("fill", positiveColor) .attr("fill-opacity", 0.7) .attr("d", d3.area().x(x).y0(y(0)).y1((t, i) => y(f1(X[i], Y[i])))(T)); svg.append("path") .attr("clip-path", negative) .attr("fill", negativeColor) .attr("fill-opacity", 0.7) .attr("d", d3.area().x(x).y0(y(0)).y1((t, i) => y(f2(X[i], Y[i])))(T)); svg.append("path") .attr("fill", "none") .attr("stroke", color1) .attr("stroke-width", 1.5) .attr("d", d3.line().x(x).y((t, i) => y(f1(X[i], Y[i])))(T)); svg.append("path") .attr("fill", "none") .attr("stroke", color2) .attr("stroke-width", 1.5) .attr("d", d3.line().x(x).y((t, i) => y(f2(X[i], Y[i])))(T)); return svg.node(); }39:[] 2e:{"title":"Predador e presa","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":700,"value":"md`Como esperado, as populações tanto do predador quanto da presa aumentam e diminuem repetidamente.\n\nPodemos ver esse ciclo explicitamente usado um [espaço de fase](https://en.wikipedia.org/wiki/Phase_space): em vez de codificar o tempo ${tex`t`} ao longo do eixo ${tex`x`}, codifique o número de presas ao longo de ${tex`x`} e o número de predadores 🐈 ao longo de ${tex`y`}. (Usaremos a animação para mostrar como a população muda com o tempo.) Arraste o ponto para alterar as populações iniciais.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":975,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1443,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1334,"value":"md`Este gráfico também representa a velocidade com a cor - o vermelho no topo indica condições em que as populações estão mudando rapidamente. Quanto mais longe você se move do ponto estacionário, mais selvagens (e menos realistas) são as oscilações. (Devemos ser céticos tirando conclusões de cenários extremos em modelos simples.)\n\nPodemos também derivar o ponto estável algebricamente, observando que as taxas de mudança ${tex`\\tfrac{\\mathrm{d}🐁}{\\mathrm{d}t}`} e ${tex`\\tfrac{\\mathrm{d}🐈}{\\mathrm{d}t}`} são ambas zero no ponto de equilíbrio:\n\n${tex.block`\\begin{aligned}\n0 &= \\alpha 🐁 - \\beta 🐁🐈 \\\\\n0 &= \\delta 🐁🐈 - \\gamma 🐈\n\\end{aligned}`}\n\nDaí,\n\n${tex.block`\\begin{aligned}\n\\alpha 🐁 &= \\beta 🐁🐈 \\\\\n\\gamma 🐈 &= \\delta 🐁🐈\n\\end{aligned}`}\n\nPortanto,\n\n${tex.block`\\begin{aligned}\n🐈 &= \\frac{\\alpha}{\\beta} \\\\[2ex]\n🐁 &= \\frac{\\gamma}{\\delta}\n\\end{aligned}`}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1332,"value":"md`Mas por que o ciclo no gráfico de fase é sempre anti-horário? Significado: por que a população de predadores “ecoa” a presa, de tal modo que os picos e vales dos predadores sempre aparecem *após* os da presa?\n\nPodemos visualizar essa interação tardia mais diretamente, plotando as taxas de mudança em vez das populações absolutas. (Se você ajustou as populações iniciais acima para encontrar o ponto estacionário, considere redefini-las de volta aos valores padrão para ver esses gráficos.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1618,"value":"{\n const button = html`