Gradiente e ruído próprio

Hash + value noise simples escritos neste volume. Mistura duas cores costeiras.

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

• hash pseudoaleatório?
• smoothstep via uu(3-2u)?
• mix mistura?

Campo orgânico

A textura caminha no tempo.

Erro comum: copiar figura/texto de material restrito — aqui tudo é original.

Ruído

Substitua o placeholder do início pelo noise.

float n = noise(uv * 6.0 + u_time * 0.3);
vec3 col = mix(vec3(0.08,0.2,0.28), vec3(0.9,0.45,0.2), n);

Pare e experimente. Compare o movimento.

Limite do módulo H

Dois volumes bastam para provar o conceito sem republicar obras alheias.

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 app.js, index.html, styles.css. Abra o resultado pronto, localize o trecho que produz gradiente e ruido proprio 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. noise usa quatro cantos?
2. Por que próprio?
3. Próximo passo natural?

Respostas comentadas

Só abra depois de tentar.

Atividade 1. Sim, interpola hashes.

Atividade 2. Licença/respeito a obras restritas.

Atividade 3. Portfolio e revisão.

Exemplo deste capítulo: pacote de exemplos/34-shader-ruido/.

O arquivo completo

Referência do exemplo 34-shader-ruido, 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>Ruído próprio — 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>Ruído próprio</h1>
  </header>
  <main id="conteudo">
<p class="dica">Ruído próprio — demo WebGL própria deste curso (não é cópia de livro).</p>
<div class="stage"><canvas id="gl" width="480" height="280" aria-label="Shader"></canvas></div>
  </main>
  <footer>
    <p>Conteúdo fictício para estudo local. Não publique dados reais.</p>
  </footer>
  <script src="app.js"></script>
</body>
</html>