Clayton BorgesDESENVOLVEDOR
← ← Todos os Projetos

Rastreador de Ciclos de Medicação

2025
Interactive 3D Web App / Personal Health Tool

Rastreador farmacocinético para Venvanse (medicação para TDAH). Uma espiral helicoidal 3D paramétrica visualiza o ciclo de 15 horas em 5 fases, com dois modelos de concentração (linear e meia-vida exponencial), notificações do sistema nas transições de fase e recomendações de tarefas baseadas no nível de energia.

Mídia
Rastreador de Ciclos de Medicação 1
Visão Geral

O Medication Cycles Tracker é um visualizador farmacocinético 3D que torna o invisível visível: mapeia o ciclo de efeito de 15 horas do Venvanse (medicação estimulante para TDAH) em uma hélice 3D interativa, com a posição atual do usuário mostrada em tempo real como um marcador brilhante na espiral. As cinco fases (início, pico ciclo 1–3, declínio) são segmentos codificados por cor na hélice. Os usuários iniciam um ciclo ao tomar a medicação; o app calcula a porcentagem de concentração, sugere tipos de tarefas apropriados por fase e envia notificações do sistema nas transições.

Problema

Usuários de medicação para TDAH frequentemente têm dificuldade em alinhar tarefas cognitivas exigentes com o pico de eficácia da medicação — ou começam trabalho importante cedo demais (medicação ainda não ativa) ou tarde demais (já em declínio). Apps existentes de rastreamento de medicação mostram apenas timers e lembretes; nenhum visualiza a curva farmacocinética ou fornece orientação de tarefas por fase.

Objetivo

Construir um visualizador farmacocinético que: (1) represente o ciclo de 15 horas como uma hélice 3D navegável; (2) mostre a posição em tempo real do usuário na espiral; (3) calcule concentração usando dois modelos matemáticos; (4) envie notificações do sistema nas transições de fase; (5) rode como app JS puro sem dependências.

Meu Papel
  • ◈Desenvolvedor solo — visualização 3D, modelagem farmacocinética, UI, notificações
Stack
Three.js r158Vanilla JavaScriptWeb Audio APICanvas APINotification APIlocalStorage
Decisões Técnicas
  1. 01Hélice paramétrica em vez de anel de progresso 2D — uma espiral 3D permite ao usuário dar zoom na fase atual, zoom out para ver o arco de 15 horas e orbitar a visualização para contexto espacial. A metáfora da hélice mapeia naturalmente para o tempo. Um anel de progresso mostraria posição, mas não a forma farmacocinética de cada fase.
  2. 02Subclasse THREE.Curve personalizada para geometria helicoidal — estender THREE.Curve permite que o TubeGeometry amostre a curva em resolução arbitrária. O método getPoint(t) adiciona oscilação sutil de raio (r = raio × (0,9 + 0,1 × sin(t × 2π))) que faz a espiral parecer orgânica. A curva pode ser amostrada em qualquer t para a posição do marcador de progresso sem recomputar toda a geometria.
  3. 03Canvas sprites para texto dinâmico — todos os labels são renderizados em elementos Canvas HTML, convertidos para THREE.CanvasTexture e exibidos como THREE.Sprites. Atualizações de texto requerem apenas redesenho do canvas + texture.needsUpdate=true, não recriação de geometria.
  4. 04Modelos de concentração duais (linear vs. meia-vida exponencial) — o modelo linear é intuitivo para estimativa rápida. O modelo exponencial (sigmóide logístico para início, decaimento exponencial com meia-vida configurável para declínio) corresponde à realidade farmacológica do mecanismo de liberação estendida do Venvanse XR.
  5. 05Variável CSS para layout painel/canvas — o painel lateral retrátil usa uma única propriedade customizada CSS --panel-left para animar tanto a posição do painel quanto o deslocamento do canvas. Alternar o painel atualiza uma variável; ambos os elementos transitam juntos.
  6. 06Pulsação de batimento cardíaco usando sinusóide de duplo pico — a intensidade emissiva do segmento ativo segue: base + exp(-((r-0,12)/0,06)²) + 0,6×exp(-((r-0,34)/0,07)²), onde r = (tempo mod 1,8s) / 1,8. Os dois picos gaussianos criam um padrão de duplo batimento fisiologicamente preciso.
O Que Aprendi
  • →A metáfora 3D adiciona significado quando a geometria codifica os dados — a hélice não é decorativa. Sua estrutura espacial (segmentos mais longos = fases mais longas, posição do marcador = tempo decorrido) significa que os usuários podem ler o estado farmacocinético espacialmente sem ler números.
  • →Curvas paramétricas permitem posicionamento marcador-na-curva sem estruturas de dados extras — dado um valor t (decorrido/total), getPoint(t) da curva retorna a posição 3D exata para o marcador. Sem tabela de lookup ou interpolação necessária; a matemática é a estrutura de dados.
  • →JS puro sem dependências é um alvo de produção válido para ferramentas de propósito único — sem npm, sem bundler, sem framework. Isso tornou a iteração em geometria 3D e matemática farmacocinética extremamente rápida.
  • →Notificações do sistema requerem deduplicação cuidadosa — versões iniciais enviavam notificações duplicadas quando o usuário recarregava a página próximo a um limite de fase. Comparar g.at - now > 0 antes de agendar cada notificação eliminou duplicatas sem exigir estado persistente de notificação.
Status

Ativo — publicado no GitHub Pages