Guia de bastidores

Uma organela como painel de controle

Como o Mitocôndria foi construído — as decisões criativas, o modelo por trás dos números, as técnicas de renderização e o que qualquer pessoa pode reaproveitar.

01A ideia

Quase toda peça de educação em saúde escolhe entre duas formas: o dashboard (números frios em caixas) ou o scrollytelling (texto que rola com ilustrações). Ambas já cansaram. A aposta aqui foi inverter a relação: e se o dado não estivesse em um gráfico, mas dentro de um objeto vivo que reage?

A mitocôndria é o objeto perfeito para isso. É a "usina de energia" da célula — uma metáfora que todo paciente entende — e o elo direto entre hábitos do dia a dia e energia sentida no corpo. Transformar a organela em um painel de controle, onde os determinantes de saúde são sliders que alteram a produção de energia visível, cria uma estrutura que ainda não existia: o dado como fenômeno, não como rótulo.

O teste de qualidade. Se um médico ou nutricionista rolasse a página sem parar, a peça teria falhado. Por isso a âncora "idade do paciente" e os "cenários de consulta": eles transformam a demonstração em uma ferramenta de beira de leito, não em um brinquedo.

02Por que Canvas 2D, e não um shader

A tentação era um raymarching volumétrico em WebGL. Mas três coisas pesaram a favor do Canvas 2D:

Legibilidade didática. Um corte transversal estilizado — como o de um livro-texto, mas vivo — comunica anatomia (membranas, cristas, matriz) melhor do que uma nuvem volumétrica.
Controle artístico total. Cada crista, cada partícula de ATP e cada faísca de estresse oxidativo é posicionada por código, o que permite acoplar rótulos de anatomia e pontos de emissão exatos.
Robustez. Roda em qualquer navegador sem depender de GPU, e o primeiro quadro já nasce pronto — bom para acessibilidade e para capturas.

A profundidade "3D" é uma ilusão construída com ordenação por profundidade (cristas centrais desenhadas por cima, mais brilhantes), gradientes de volume nas membranas, luz de borda (fresnel) e uma respiração sutil da organela.

03O modelo de bioenergética

Os seis controles alimentam uma função pura que devolve cinco saídas. É deliberadamente simples e direcional — captura o sentido do que a ciência descreve, sem fingir precisão.

// ilustrativo — não é um modelo clínico
biogênese = f(exercício↑, jejum↑, sono) · declínio_idade
ROS       = f(açúcar↑, estresse↑, pouco_sono↑, idade↑) − exercício
eficiência= f(exercício, jejum, sono) − açúcar − estresse
ATP       = (biogênese + eficiência − ROS) · fator_idade

A partir do ATP nascem os comportamentos visuais: intensidade do brilho da matriz, frequência da pulsação, densidade e velocidade das partículas de ATP, temperatura de cor (âmbar quente = vigor; frio e apagado = esforço) e a quantidade de faíscas vermelhas de ROS.

A leitura clínica automática

O toque que torna a peça útil: o motor testa, para o paciente atual, qual alavanca isolada renderia o maior ganho de ATP (uma derivada numérica simples) e escreve uma frase pronta — "os maiores ganhos viriam de melhorar o sono e cortar o açúcar". É a ponte entre a imagem bonita e a conversa real no consultório.

04Anatomia da renderização

Membrana dupla

Duas elipses lumpy concêntricas com gradiente de volume e traço de borda teal — a externa lisa, a interna dobrada nas cristas.

Cristas

Lamelas arredondadas que partem das paredes e cruzam a matriz, interleaved topo/base. Mais cristas quando a biogênese sobe.

Cadeia transportadora

Pontos que pulsam ao longo das cristas — as "bombas de próton" e ATP-sintases, de onde nascem as partículas de ATP.

Fluxo de ATP

Partículas douradas com rastro que sobem das cristas e escapam pelos polos da organela para o citoplasma.

Gradiente de prótons

Pequenos traços que correm pela membrana interna, com velocidade proporcional à atividade — o H⁺ sendo bombeado.

Estresse oxidativo

Faíscas vermelhas erráticas e de vida curta, densas quando ROS está alto — o "dano" que o paciente enxerga.

Todo o brilho usa composição aditiva (globalCompositeOperation='lighter'), que soma luz sobre luz e dá o aspecto de energia real emanando da organela.

05Acessibilidade e captura

Controles são <input type="range"> nativos — operáveis por teclado, com foco visível.
prefers-reduced-motion desliga a animação e renderiza um quadro estático representativo; há também um botão de pausar.
Um parâmetro ?nosync=1 carrega um estado saudável e vibrante e garante que o primeiro quadro já esteja desenhado — essencial para capturas em navegador headless, que ficam em branco se a cena depender de rolagem programática.
Layout testado a 390px e 414px: elementos absolutos centralizados com left:50%; transform:translateX(-50%), overflow-x:hidden no corpo, linhas de controle sem quebra.

06O que você pode reaproveitar

O padrão "objeto vivo como painel de controle" serve para qualquer sistema com entradas e saídas: um rim, um fígado, um portfólio, um ecossistema.
A técnica de profundidade falsa em 2D (ordenação + gradientes + aditivo) rende visual de alto nível sem o custo de WebGL.
A leitura automática por derivada — "qual alavanca rende mais" — é um jeito barato e honesto de transformar um simulador em conselho acionável.

HTML/CSS/JSsem buildCanvas 2D proceduralpt-BRMIT

Código aberto em github.com/pmf-labs/mitocondria.

07Aviso de dados

Tudo aqui é ilustrativo e fictício. A produção de ATP, o potencial de membrana (mV), a densidade de cristas, o estresse oxidativo e as relações entre hábitos e função mitocondrial foram simplificados e estilizados para fins de comunicação e demonstração de design. Nenhum número corresponde a uma medição real. Esta peça não é um dispositivo médico, não fornece diagnóstico e não substitui avaliação profissional. O objetivo é didático: ajudar a explicar, de forma memorável, por que os hábitos importam para a energia das células.