Projeto mar de Recife

Fecha o módulo D: partículas com deriva senoidal e paleta costeira fictícia.

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

• onda usa sin?
• Wrap horizontal?
• Quantas gotas ~?

Mar em loop

A superfície “respira” com o tempo.

Erro comum: força constante demais — o mar fica rígido.

Deriva

Implemente partículas e onda no início.

const onda = createVector(0.02 * sin(frameCount * 0.02 + g.pos.y), 0);
g.vel.add(onda);

Pare e experimente. Compare com a referência.

Portfólio

Guarde este sketch para a etapa 35.

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, sketch.js, styles.css. Abra o resultado pronto, localize o trecho que produz projeto mar de recife 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. Por que + g.pos.y no sin?
2. fill com alpha?
3. Texto do título onde?

Respostas comentadas

Só abra depois de tentar.

Atividade 1. Fases diferentes por altura.

Atividade 2. Sobreposição suave.

Atividade 3. Topo do canvas.

Exemplo deste capítulo: pacote de exemplos/23-mar-recife/.

O arquivo completo

Referência do exemplo 23-mar-recife, 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>Mar de Recife — 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>Mar de Recife</h1>
  </header>
  <main id="conteudo">
<p class="dica">Projeto D: mar com deriva e cor costeira.</p>
<div class="stage" id="canvas-host"></div>
<p class="dica">Se o desenho não aparecer ao abrir o arquivo direto, sirva <code>curso/</code> em 127.0.0.1.</p>
  </main>
  <footer>
    <p>Conteúdo fictício para estudo local. Não publique dados reais.</p>
  </footer>
  <script src="../../lib/p5.min.js"></script>
  <script src="sketch.js"></script>
</body>
</html>

sketch.js

const gotas = [];
function setup() {
  createCanvas(520, 300).parent("canvas-host");
  for (let i = 0; i < 80; i++) {
    gotas.push({
      pos: createVector(random(width), random(height)),
      vel: createVector(random(-0.4, 0.4), random(-0.2, 0.2)),
      r: random(3, 10)
    });
  }
}
function draw() {
  background(12, 40, 60);
  noStroke();
  for (const g of gotas) {
    const onda = createVector(0.02 * sin(frameCount * 0.02 + g.pos.y), 0);
    g.vel.add(onda);
    g.pos.add(g.vel);
    if (g.pos.x < 0) g.pos.x = width;
    if (g.pos.x > width) g.pos.x = 0;
    fill(110, 198, 201, 160);
    circle(g.pos.x, g.pos.y, g.r);
  }
  fill(240, 160, 75);
  textAlign(CENTER);
  text("Mar de Recife · Laboratorio da Luz", width / 2, 28);
}