Mouse e teclado no p5

keyPressed reage a teclas. O círculo segue o mouse; C e T trocam a cor.

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

• keyPressed quando?
• color(r,g,b) cria?
• Diferença mouseX e pmouseX?

Teclas C e T

Teste as teclas na referência.

Erro comum: página sem foco — clique no canvas antes.

Implementar teclas

No início, faça C laranja e T teal.

function keyPressed() {
  if (key === "c" || key === "C") cor = color(196, 92, 38);
}

Pare e experimente. Preveja a cor.

Acessibilidade

Descreva o atalho na página se for exercício público; aqui é local.

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 mouse e teclado no p5 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. key guarda o quê?
2. setup define cor inicial?
3. draw precisa chamar keyPressed?

Respostas comentadas

Só abra depois de tentar.

Atividade 1. A tecla atual (string).

Atividade 2. Sim.

Atividade 3. Não — o p5 chama.

Exemplo deste capítulo: pacote de exemplos/15-p5-interacao/.

O arquivo completo

Referência do exemplo 15-p5-interacao, 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>Mouse e teclado — 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>Mouse e teclado</h1>
  </header>
  <main id="conteudo">
<p class="dica">Teclas C e T mudam a cor do pincel.</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

let cor;
function setup() {
  createCanvas(480, 280).parent("canvas-host");
  cor = color(27, 107, 110);
}
function draw() {
  background(244, 240, 232);
  fill(cor);
  circle(mouseX, mouseY, 64);
}
function keyPressed() {
  if (key === "c" || key === "C") cor = color(196, 92, 38);
  if (key === "t" || key === "T") cor = color(27, 107, 110);
}