Como usar o frameCount() no p5.js?
No p5.js, o framecount (ou frameCount em código) é uma variável interna que conta o número de quadros (frames) que foram renderizados desde o início da execução do programa. Ele é útil para controlar ou sincronizar eventos ao longo do tempo em uma animação ou simulação.
Características do frameCount
Incremento automático: O
frameCounté incrementado automaticamente pelo p5.js a cada quadro renderizado.Começa em 0: Quando o programa inicia, o
frameCountcomeça em 0 e aumenta em 1 a cada quadro.Taxa de quadros (frame rate): O valor do
frameCountdepende da taxa de quadros (frames por segundo, ou FPS) definida no programa. Por padrão, o p5.js tenta rodar a 60 FPS.
Explicando a animação
Aqui está a animação que usaremos como referência:
Passo 1: Configurando o ambiente
Antes de começarmos a programar, certifique-se de ter um ambiente de desenvolvimento configurado:
Um editor de código (VS Code)
- Um navegador (Google Chrome)
Arquivo de template
Passo 2: Declaração de variáveis
Aqui, estamos declarando as variáveis que serão usadas para armazenar os sprites e suas imagens.
var garden, rabbit, apple, orangeL, redL;
var gardenImg, rabbitImg, appleImg, orangeImg, redImg;
Passo 3: Função preload()
A função preload() é usada para carregar imagens e animações antes do jogo iniciar.
loadImage("garden.png"): Carrega a imagem do fundo do jogo.loadImage("rabbit.png"): Carrega a imagem do personagem principal.loadImage("apple.png"): Carrega a imagem da maçã.loadImage("orangeLeaf.png"): Carrega a imagem da folha laranja.loadImage("redImage.png"): Carrega a imagem do objeto vermelho.
function preload(){
gardenImg = loadImage("garden.png");
rabbitImg = loadImage("rabbit.png");
appleImg = loadImage("apple.png");
orangeImg = loadImage("orangeLeaf.png");
redImg = loadImage("redImage.png");
}
Passo 4: Função setup()
A função setup() é executada apenas uma vez e configura o ambiente do jogo.
createCanvas(400,400): Cria um canvas de 400×400 pixels.
function setup(){
createCanvas(400,400);
Agora criamos o sprite do fundo do jardim:
garden = createSprite(200,200);
garden.addImage(gardenImg);
createSprite(200,200): Cria o sprite do fundo posicionado no centro da tela.addImage(gardenImg): Adiciona a imagem do jardim ao sprite.
Agora criamos o sprite do coelho:
rabbit = createSprite(160,340,20,20);
rabbit.scale = 0.09;
rabbit.addImage(rabbitImg);
createSprite(160,340,20,20): Cria o sprite do personagem na posição desejada.rabbit.scale = 0.09: Ajusta o tamanho do personagem.addImage(rabbitImg): Adiciona a imagem do personagem ao sprite.
E criamos também os sprites das bordas:
leftBoundary = createSprite(0,0,50,800);
leftBoundary.visible = false;
rightBoundary = createSprite(410,0,50,800);
rightBoundary.visible = false;
createSprite(0,0,50,800): Cria um sprite para a borda esquerda.createSprite(410,0,50,800): Cria um sprite para a borda direita.visible = false: Torna os sprites invisíveis para que não sejam vistos na tela, mas ainda funcionem como barreiras.
Passo 5: Função draw()
A função draw() é chamada continuamente para atualizar a tela do jogo e manter a animação fluida.
background(0): Define o fundo da tela como preto.rabbit.x = World.mouseX: Faz com que o personagem siga a posição do mouse no eixo X.
function draw() {
background(0);
rabbit.x = World.mouseX;
Agora, usaremos frameCount para controlar a frequência com que os objetos aparecem na tela:
var select_sprites = Math.round(random(1,3));
switch (select_sprites){
case 1:
createApples();
break;
case 2:
createOrange();
break;
case 3:
createRed();
break;
default:
break
}
Math.round(random(1,3)): Escolhe aleatoriamente um tipo de fruta para cair.switch (select_sprites): Verifica o número gerado e executa a função correspondente.case 1: createApples();: Se o número for 1, cria uma maçã.case 2: createOrange();: Se o número for 2, cria uma folha laranja.case 3: createRed();: Se o número for 3, cria um objeto vermelho.
Adicionando colisão do corredor nas bordas:
rabbit.collide(leftBoundary);
rabbit.collide(rightBoundary);
rabbit.collide(leftBoundary): Impede que o personagem ultrapasse o limite esquerdo.rabbit.collide(rightBoundary): Impede que o personagem ultrapasse o limite direito.
Por fim, desenhamos todos os sprites na tela:
drawSprites();
}
drawSprites(): Exibe todos os sprites criados na tela do jogo, garantindo que a animação seja atualizada a cada quadro.
Passo 6: Criando a função para gerar as maças
A função createApples() é chamada continuamente para criar as maças na tela da animação.
frameCount % 80 == 0: Cria um novo sprite a cada 80 quadros.random(50, 350): Faz com que a fruta apareça em posições aleatórias no eixo X.createSprite(random(50, 350),40, 10, 10): Cria o sprite na posição definida.addImage(appleImg): Adiciona a imagem da maçã ao sprite.scale=0.07: Define o tamanho do sprite.velocityY = 3: Define a velocidade de queda.lifetime = 150: Evita consumo excessivo de memória ao remover sprites antigos.
function createApples() {
if (frameCount % 80 == 0) {
apple = createSprite(random(50, 350),40, 10, 10);
apple.addImage(appleImg);
apple.scale=0.07;
apple.velocityY = 3;
apple.lifetime = 150;
}
}
Passo 7: Criando a função para gerar as folhas laranjas
A função createOrange() é chamada continuamente para criar as maças na tela da animação.
frameCount % 100 == 0: Cria um novo sprite a cada 100 quadros.random(50, 350): Faz com que a fruta apareça em posições aleatórias no eixo X.createSprite(random(50, 350),40, 10, 10): Cria o sprite na posição definida.addImage(orangeImg): Adiciona a imagem da folha laranja ao sprite.scale=0.08: Define o tamanho do sprite.velocityY = 3: Define a velocidade de queda.lifetime = 150: Evita consumo excessivo de memória ao remover sprites antigos.
function createOrange() {
if (frameCount % 100 == 0) {
orangeL = createSprite(random(50, 350),40, 10, 10);
orangeL.addImage(orangeImg);
orangeL.scale=0.08;
orangeL.velocityY = 3;
orangeL.lifetime = 150;
}
}
Passo 8: Criando a função para gerar as folhas vermelhas
A função createRed() é chamada continuamente para criar as maças na tela da animação.
frameCount % 120 == 0: Cria um novo sprite a cada 120 quadros.random(50, 350): Faz com que a fruta apareça em posições aleatórias no eixo X.createSprite(random(50, 350),40, 10, 10): Cria o sprite na posição definida.addImage(redImg): Adiciona a imagem da folha vermelha ao sprite.scale=0.06: Define o tamanho do sprite.velocityY = 3: Define a velocidade de queda.lifetime = 150: Evita consumo excessivo de memória ao remover sprites antigos.
function createRed() {
if (frameCount % 120 == 0) {
redL = createSprite(random(50, 350),40, 10, 10);
redL.addImage(redImg);
redL.scale=0.06;
redL.velocityY = 3;
redL.lifetime = 150;
}
}
