Imagens e Sons

Aprendendo como colocarmos imagens e sons para o nosso sketch ficar ainda mais interessante.

Introdução

Imagens podem ser colocadas por 2 motivos. Uma imagem de fundo, estática, onde desenhamos coisas por cima, ou uma imagem menor, que se move pela tela.

Ele aceita vários formatos de imagens, inclusive Gif animada, PNG com transparências, etc.

A primeira coisa é descobrir que clicando na setinha pro lado, podemos verificar a estrutura dos arquivos que compõem meu projeto. Se entendemos HTML o suficiente, percebemos que na verdade estávamos editando o arquivo javascript ligado a um arquivo HTML.

Vamos olhar esse html. Quando escrevemos algo, mesmo que fora de um <p>, ele já aparece na página. Se colocarmos antes do <script> que chama o sketch.js, ele aparece antes… se colocarmos depois, aparece depois.

Nossa primeira imagem

Sabemos que para colocar imagens em um arquivo HTML, utilizamos a tag <img>, mas aqui vamos precisar primeiro colocar a imagem pra dentro da minha estrutura de arquivos, clicando no +.

Neste momento precisamos ter entrado no editor do p5.js. Assim, teremos a opção de Upload File disponível para uso.

Depois de logado, podemos realizar o upload da imagem.

A imagem que vamos usar nesta seção é a de uma nave espacial (aproveite para salvá-la a partir daqui!).

Clicando no Upload File e selecionando nossa, nave, agora ela faz parte do nosso projeto.

Pré carregamento

O p5.js tem alguns blocos que utilizamos para determinadas partes da execução do sketch. É o caso do draw, do setup, dos blocos de eventos mouseWheel, mousePressed, etc.

Outro bloco importante do p5.js é o de pré carregamento. Este é executado ANTES do setup. É onde colocamos as coisas que o p5.js precisa carregar antes de começar a executar o sketch, afinal, não queremos que a página fique lenta de repente no meio de uma animação.

function preload() {

}

É tudo em minúsculas mesmo!

Aqui vamos utilizar o comando loadImage, passando o nome (com a extensão) do arquivo que você quer usar. Cuidado que o nome é case sensitive, ele fará a diferenciação entre maiúsculas e minúsculas!

Ao mesmo tempo em que carregamos a imagem, precisamos atribui-la a uma variável, que vai ser uma forma de eu me referir a essa imagem posteriormente.

Declare:

let nave;

No topo, pra ficar visível em toda parte. Então, no preload, faça:

nave = loadImage("nave.png");

Ótimo! Agora só falta exibirmos essa variável no nosso sketch.

No draw, usamos o comando image, que recebe vários parâmetros. O primeiro deles é a variável que contém a imagem, seguido do x e y de onde você quer que ela apareça.

Vamos colocar lá no cantinho superior, só pra saber que deu certo.

function draw() {
	background(220);
	image(nave, 0, 0);
}

Vamos ver nossa imagem! 🎉

Mas nada apareceu. Esse é um dos piores bugs que pode acontecer na vida de um programador… pois não dá erro, simplesmente “finge de morto”, parece que tudo que você fez foi ignorado, e um programador sem experiência pode facilmente passar algumas horas num problema desses:

Vamos mudar nosso canvas para 1400, 1400. O que acontece?

Ahá! Aqui está a nave! 🚀

O problema é que a imagem é enorme, e a estávamos vendo só o canto transparente dela. Temos duas formas de arrumar isso, abrir o arquivo em um editor de imagens, redimensioná-lo, salvar e importar aqui novamente; ou passar mais dois parâmetros para o comando image, referentes à largura e a altura da imagem:

Aqui está nossa nave!

Animando nossa nave

Vamos fazer com que nossa nave se mova pelo canvas.

Primeira coisa que precisamos fazer? Transformar x e y em variáveis.

Vamos fixar o y e então fazer a nave andar horizontalmente? Para isso, precisamos fazer com que o x seja incrementado de tempos em tempos. Isso é fácil de fazermos, usando o draw.

Excelente!

Mas quando a nave chega no fim do canvas, ela não aparece mais... E essa nave não ficaria legal "batendo nas bordas". Como fazemos para que ela, quando sair do canvas pela direita, apareça de novo pela esquerda?

Vamos primeiro pensar nos valores que x assume durante a execução do sketch. Ele começa em zero e vai aumentando (de um em um). Isso faz com que em algum momento ele simplesmente saia do nosso "campo de visão", do nosso canvas.

Uma vez que nosso x assumir o valor de 400 (ou a largura do canvas), precisamos fazer algo, certo?

Desse jeito, podemos escrever uma condição para isso!

function draw() {
  background(220);
  image(nave, x, y, 100, 100);
  
  if (x >= 400) {
    x = 0;
  }
  
  x++;
}

Opa, funcionou! Mas ainda está esquisito... Podemos melhorar esse efeito, fazendo a nave "aparecer" pela esquerda. Para isso, podemos fazer ela se posicionar inicialmente fora do canvas, mas do lado esquerdo.

Dessa maneira, ao aumentarmos o valor de x gradativamente, ele vai "aparecer" no canvas. E isso pode estar desde o início assim!

let nave, x, y;

function preload() {
  nave = loadImage('nave.png');
}

function setup() {
  createCanvas(400, 400);
  y = 30;
  x = -100;
}

function draw() {
  background(220);
  image(nave, x, y, 100, 100);
  
  if (x >= 400) {
    x = -100;
  }
  
  x++;
}

Podemos até jogar esse valor de início em uma variável!

Melhorando o Sketch

Vamos melhorar nosso cenário? Aumentar a paisagem, mexendo no tamanho do canvas, fazer um céu preto, e colocar uma lua cheia (pq por enquanto a gente só sabe fazer lua cheia mesmo).

let nave, x, y;

function preload() {
  nave = loadImage('nave.png');
}

function setup() {
  createCanvas(600, 400);
  y = 50;
  x = -100;
}

function draw() {
  background(0);
  circle(400, 100, 100);
  image(nave, x, y, 100, 100);
  
  if (x >= width) {
    x = -100;
  }
  
  x++;
}

Agora sim está mais legal hein?

Trabalhando com som

Hora da música! Mas a biblioteca do processing foi feita só pra desenhar, a parte toda de música fica em outra biblioteca. Quando analisamos o HTML, porém, percebemos que ele já faz referência pra essa outra biblioteca.

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/addons/p5.sound.min.js"></script>

Da mesma forma, primeiro vamos carregar a música para a estrutura de arquivos. Vamos usar este som aqui:

3MB

alien_music.mp3

Abrir

No preload, temos uma novidade: precisamos avisar o processing qual formato de música vamos tocar, pra ele já deixar tudo preparado.

Isso é feito com o comando:

soundFormats('mp3');

se eu tivesse vários sons de diferentes formatos, eles ficariam assim:

soundFormats('mp3', 'wav');

depois vem o loadSound, exatemente igual fizemos com loadImage.

musica = loadSound("SomAlien.mp3");

Agora pra tocar, o lugar é muito importante… você não quer que ele comece a tocar a cada frame. Então vamos colocar pra tocar no setup, uma vez só.

let nave, x, y;
let musica;

function preload() {
  soundFormats('mp3');
  musica = loadSound("alien_music.mp3");
  nave = loadImage('nave.png');
}

function setup() {
  createCanvas(600, 400);
  y = 50;
  x = -100;
  musica.play(); // Tocamos aqui!
}

function draw() {
  background(0);
  circle(400, 100, 100);
  image(nave, x, y, 100, 100);
  
  if (x >= width) {
    x = -100;
  }
  
  x++;
}

Agora é com você

Sua vez. Primeiro faça um exatamente igual a este, salve pra deixar como referência pra projetos futuros.

Depois, use sua criatividade, suas próprias imagens, sons, e faça algo legal!