Introdução

Neste tutorial, você aprenderá como criar uma animação geométrica dinâmica e colorida usando p5.js. Esta animação simboliza a ideia de que “o mundo está cheio de pessoas fabulosas e incríveis fazendo coisas maravilhosas”. As formas se moverão aleatoriamente pela tela, mudando de cor e criando um efeito visualmente cativante.

Etapa 1: Configurando seu ambiente

1. Baixar p5.js:

   • Acesse o site p5.js e baixe a versão mais recente do p5.js.
   • Como alternativa, você pode usar o editor p5.js online editor.p5js.org, que permite escrever e executar seu código diretamente em seu navegador.

2. Criar um novo projeto:

   • Se você estiver usando o editor online, crie um novo esboço clicando em "Novo" no canto superior esquerdo.
   • Se você estiver codificando localmente, crie um novo arquivo HTML e vincule a biblioteca p5.js.

Etapa 2: Escrevendo a estrutura básica

Vamos começar configurando a estrutura básica do nosso esboço p5.js. Isso inclui definir as funções setup() e draw().

function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();  // Disable stroke for the shapes
}

function draw() {
  background(30, 30, 60, 25);  // Dark background with transparency
}

Explicação:

createCanvas(windowWidth, windowHeight);: Isso define o tamanho da tela para corresponder à janela do seu navegador.
noStroke();: Remove a borda das formas que iremos criar.
background(30, 30, 60, 25);: Isso define a cor de fundo para um azul escuro com alguma transparência, criando um efeito de rastro para as formas.

Etapa 3: Adicionar formas geométricas dinâmicas

Agora, vamos adicionar o código para criar formas aleatórias com cores, posições e tamanhos variados.

function draw() {
  background(30, 30, 60, 25); // Dark background with transparency

  for (let i = 0; i 



Explicação:

• Variáveis ​​aleatórias:

  • x e y determinam a posição de cada forma na tela.
  • size controla o tamanho de cada forma.
  • colorR, colorG, colorB geram valores aleatórios para os componentes vermelho, verde e azul da cor de preenchimento.
  • fill(colorR, colorG, colorB, 150);: Define a cor de preenchimento com uma leve transparência.

• Tipos de forma:

  • ellipse(x, y, size, size);: Desenha um círculo ou elipse.
  • rect(x, y, size, size);: Desenha um quadrado ou retângulo.
  • triângulo(x, y, tamanho x, y, tamanho x / 2, y - tamanho);: Desenha um triângulo.

Etapa 4: Tornando a animação responsiva

Para garantir que a tela seja redimensionada com a janela, adicione a seguinte função:

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

Etapa 5: executando seu esboço

• Se você estiver usando o editor online p5.js, basta pressionar o botão "Play" para ver sua animação.
• Se você estiver codificando localmente, abra seu arquivo HTML em um navegador da web para visualizar a animação.