Pular para o conteúdo
murad.guide

Programação Criativa

Capítulo 36

Revisão e checklist final

2 min de leitura 385 palavras 1 gravura

Confira se o percurso inteiro abre: SVG, p5, simulações, grades, raios, álgebra e shaders próprios.

Trabalhe sobre uma cópia da pasta inicio do exemplo correspondente. Leia, digite, mude uma coisa, preveja, recarregue e confira. A referência completa fica na raiz da pasta do exemplo, no pacote anexo.

O que você pratica

Revisão e checklist final

Checklist

Use a lista na página de exemplo como roteiro de conferência.

Erro comum: declarar pronto sem abrir os exemplos.

Reabrir três etapas

Escolha uma de A/B, uma de D/E e uma de F/H. Confirme o visual.

SVG ok · p5 ok · pathfinding ok · ray ok · shader próprio ok · 127.0.0.1 ok

Pare e experimente. Anote falhas de caminho.

Fechar

Você terminou o Laboratório da Luz. Próximos passos ficam para outros cursos (JS avançado, Python, etc.).

Não publique exercícios com dados reais. Conteúdo fictício de Recife.

Como o exemplo desta etapa funciona

A referência desta etapa reúne index.html, styles.css. Abra o resultado pronto, localize o trecho que produz revisao e checklist final e só então compare com inicio. Os dois diretórios são independentes: você pode errar, restaurar e repetir sem buscar arquivos de outro capítulo.

Leitura do resultado

Observe primeiro o que permanece parado e o que responde a uma ação. Depois altere um único número, cor, coordenada ou condição. Antes de recarregar, escreva o efeito esperado. Essa previsão separa uma mudança compreendida de uma tentativa ao acaso.

Diagnóstico guiado

Se a cena sumir, confira a primeira mensagem do Console e o caminho dos arquivos. Em SVG, revise viewBox, atributos e ordem das formas. Em p5.js, confirme a biblioteca local e se setup e draw foram escritos corretamente. Em Canvas ou WebGL, verifique o contexto e os limites numéricos antes de mudar outra coisa.

Critério de avanço

Avance quando conseguir descrever a cena, modificar um parâmetro com previsão e restaurar a referência sem copiar arquivos de uma etapa posterior.

Atividades

  1. Bind 0.0.0.0?
  2. Autoria nos capítulos deste pacote?
  3. Quantas capítulos no total?

Respostas comentadas

Só abra depois de tentar.

Atividade 1. Não — só 127.0.0.1.

Atividade 2. Não na entrega.

Atividade 3. 36.

Exemplo deste capítulo: pacote de exemplos/36-revisao/.

O arquivo completo

Referência do exemplo 36-revisao, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Revisão — Laboratório da Luz</title>
  <link rel="stylesheet" href="styles.css">

</head>
<body>
  <a class="skip" href="#conteudo">Ir ao conteúdo</a>
  <header>
    <p class="tag">Laboratório da Luz · Recife</p>
    <h1>Revisão</h1>
  </header>
  <main id="conteudo">
<p class="dica">Checklist final do Laboratório da Luz.</p>
<ul class="painel">
  <li>SVG abre e mostra formas sem servidor.</li>
  <li>p5 carrega de <code>curso/lib/p5.min.js</code>.</li>
  <li>Pathfinding e ray tracing respondem no canvas.</li>
  <li>Shaders WebGL próprios rodando.</li>
  <li>Nada publicado com dados reais; servidor só em 127.0.0.1.</li>
</ul>
<div class="stage" style="background:#1b6b6e;color:#fff;font-size:1.4rem;">Pronto para o zip de estudo</div>
  </main>
  <footer>
    <p>Conteúdo fictício para estudo local. Não publique dados reais.</p>
  </footer>

</body>
</html>