Programação visual em blocos para desenhar com o Tuca.

Uma ferramenta livre de introdução ao pensamento computacional, inspirada na linguagem LOGO de Seymour Papert.

---

O que é

O Tucaprog é um projeto do Humor com Ciência & Bate-papo: educação. A criança monta um programa encaixando blocos e o Tuca — um tucano — voa pela tela deixando rastro. É a ideia da tartaruguinha do LOGO, com programação visual para encurtar o caminho até o primeiro desenho.

A intenção é permitir que alunos da educação básica compreendam princípios de programação de forma lúdica, exercitando o pensamento matemático e o raciocínio lógico. É de graça, é livre, e roda no navegador — inclusive sem internet.

Como usar

Abra, arraste blocos, aperte Executar. Só isso.

Mover o palco	arraste com o dedo ou o mouse
Ampliar / afastar	role a roda, use dois dedos, ou os botões ＋ －
Enquadrar o desenho	botão ⤢ ou Ctrl+1
Executar / pausar	Ctrl+Enter
Um comando por vez	F10
Parar	Esc

Cada quadradinho da grade vale 1 unidade e o centro é o ponto (0, 0) — o mesmo plano cartesiano que se vê na aula de matemática.

Blocos

São seis, os mesmos de sempre. O conjunto é enxuto de propósito: com poucas peças a criança lê a lista inteira de uma vez e sabe tudo o que dá para fazer.

Categoria	Blocos
Desenho	Voar N unidades de distância · Deixar rastro na cor
Movimento	Mover o Tuca para X, Y · Virar no sentido horário · Virar no sentido anti-horário
Repetição	Repita N vezes
Números	número

Rodando localmente

npm install
npm run dev

Outros comandos:

npm run build      # gera dist/ pronto para publicar
npm run preview    # serve o dist/ para conferir antes de publicar
npm run typecheck  # só a checagem de tipos

Não precisa de servidor nem banco: o resultado é um site estático.

Como está montado

src/
├── blocks/      definição dos blocos, gerador de código, toolbox e tema
├── canvas/      câmera, cena, renderizador, gestos e exportação
├── runtime/     API do Tuca e o executor passo a passo
├── app/         layout, persistência, exemplos e avisos
└── main.ts      composição de tudo
legacy/          a versão original de 2018, preservada como estava

Três decisões que explicam o resto do código:

A cena é dado puro. Scene guarda apenas a lista de traços e o estado do Tuca, sem saber nada de renderização. É por isso que a exportação SVG sai como vetor de verdade — ela lê a mesma geometria que a tela desenha, não um rastreio do bitmap.

A câmera é separada do desenho. O palco tem uma câmera com zoom e deslocamento próprios (canvas/camera.ts), e a grade se adapta à escala: as divisões mudam de 1 em 1, 5 em 5, 20 em 20 conforme você aproxima ou afasta, sempre legíveis. Zoom, arraste e pinça compartilham a mesma matemática.

O programa roda como generator. O Blockly injeta um yield antes de cada instrução, e o código gerado é compilado numa generator function. Cada yield devolve o controle para destacar o bloco atual, animar o traço e respeitar velocidade, pausa e parada. Quem executa é o motor do próprio navegador, com semântica de JavaScript de verdade — e sem o risco de travar a aba, porque até um Repita de corpo vazio devolve o controle a cada volta.

O que mudou da versão 4 para a 5

A versão original (2018) usava Blockly de 2016, jQuery 1.11, Bootstrap 3, Paper.js e o JS-Interpreter, servidos a partir de pastas espelhadas de um site salvo. Ela continua inteira em legacy/.

Corrigido

• Exportar PNG e SVG voltou a funcionar. A versão antiga enviava a imagem por POST para download-data-uri.appspot.com, um serviço fora do ar há anos — e por HTTP, que navegadores bloqueiam em páginas HTTPS. Agora é tudo local.
• Dá para parar um programa. O botão existia comentado no HTML e a variável stop nunca era alterada: um Repita grande travava a aba sem saída.
• A grade não erra mais em tela HiDPI. O cálculo do centro usava canvas.width em pixels de dispositivo, então em telas retina e celulares a origem saía deslocada — justamente onde mais precisa acertar.
• O trabalho não se perde. Não havia persistência: atualizar a página apagava o programa inteiro.
• Nomes internos dos giros. No código antigo o bloco chamado girarantihorario era o que exibia "Virar no sentido horário" — e girava no sentido horário, corretamente. Quem usava nunca viu diferença; quem lia o código, sim. Os identificadores foram acertados sem mexer nos rótulos.

Novo

• Zoom, deslocamento e pinça no palco, com grade adaptativa e eixos rotulados
• Layout responsivo de verdade — não havia nem <meta viewport>
• Salvamento automático, arquivo de projeto e seis exemplos prontos
• Passo a passo com destaque do bloco em execução, e painel do código gerado
• Tema escuro opcional (o claro reproduz o visual original)
• Funciona offline e instala como aplicativo (PWA), substituindo os instaladores Electron que eram distribuídos à parte

Removido

jQuery, Bootstrap, Paper.js, JS-Interpreter e os geradores de Python, PHP, Lua e Dart que eram carregados sem uso. O pacote saiu de ~1,6 MB de JavaScript não comprimido para ~250 kB comprimidos.

Publicando

O Tucaprog é um site estático: não precisa de Node, banco nem nada rodando no servidor. A base é relativa, então o mesmo build funciona na raiz do domínio, numa subpasta ou aberto direto do disco.

Hospedagem comum (HostGator, cPanel, qualquer Apache)

npm run zip

Isso gera tucaprog.zip com o conteúdo do dist/ na raiz do pacote. No cPanel: Gerenciador de Arquivos → entrar em public_html (ou numa subpasta) → Upload → Extrair. Não tem passo de build no servidor.

Vai junto um .htaccess que liga compressão (o download cai de ~960 kB para ~250 kB), ajusta o cache e declara o tipo do manifesto. Ele é opcional — se o servidor recusar alguma diretiva e devolver erro 500, é só apagar o arquivo.

Ligue o HTTPS. O funcionamento offline depende de service worker, que os navegadores só permitem em conexão segura. Em http:// o Tucaprog abre e funciona normalmente, mas não guarda cópia local nem instala como aplicativo. Na HostGator o certificado é gratuito (AutoSSL, no cPanel).

GitHub Pages

Há um workflow que publica a cada push na branch principal — basta habilitar Pages em Settings → Pages → Source: GitHub Actions.

Créditos e licença

O Tucaprog é construído sobre o Google Blockly. A versão original também usava o Paper.js — obrigado aos dois projetos.

Se for usar ou distribuir, mencione os esforços do Humor com Ciência, do Bate-papo: educação e de todos que permitiram a construção do Tucaprog.

Licenciado sob a Apache License 2.0.