p5.js é biblioteca JavaScript que carrega o princípio original do [Processing](https://processing.org), tornar a programação acessível à artistas, designers, professores e alunos e traz esse lema para os dias atuais.
Como o p5.js é uma biblioteca JavaScript, você precisa aprender [Javascript](https://learnxinyminutes.com/docs/pt-br/javascript-pt/) primeiro.
Para rodar códigos com p5.js online, você pode acessar o [editor online](https://editor.p5js.org/).
```js
///////////////////////////////////
// p5.js possui duas funções importantes para se trabalhar.
function setup() {
// a função setup é carregada apenas uma vez, quando a janela é carregada
}
function draw() {
// a função draw é chamada a cada frame
// se o framerate é definido como 30, essa função vai ser chamada 30 vezes por segundo
}
// o seguinte código explica todas as funcionalidades
function setup() {
createCanvas(640, 480); // cria um novo elemento canvas com 640px de largura e 480px de altura
background(128); // muda a cor do background para rgb(128, 128, 128)
// background('#aaf') // Você pode usar hexadecimal como código de cor, também
}
function draw() {
// normalmente, a função `background` é chamada na função `draw` para limpar a tela
background('#f2f2fc');
// cria uma elipse a partir de 10px do topo e 10px da esquerda, com uma largura e altura de 37
ellipse(10, 10, 37, 37);
// no p5.js a origem é sempre no canto à esquerda e no topo do canvas
if (mouseIsPressed) {
// mouseIsPressed é uma variável booleana que é verdadeira quando o mouse está pressionado e falso quando é liberado
fill(0); // define a cor de preenchimento, que permanece até ser modificada novamente
} else {
fill(255, 255, 255, 240); // fill(a, b, c, d) define a cor de preenchimento para rgba(a, b, c, d)
}
ellipse(mouseX, mouseY, 80, 80);
// mouseX e mouseY são as coordenadas da posição do mouse, x e y respectivamente
// o código acima cria uma elipse embaixo da posição do mouse e preenche com branco ou preto
// algumas outras formas primitivas em 2d que você pode utilizar:
rect(9, 3, 23, 26); // x, y, largura, altura
noFill(); // define a cor de preenchimento como transparente
let r = random(255); // um número aleatório entre 0 e 255
let g = random(255);
let b = random(255);
balls.push(
new Ball(
random(30, width), // posição x
random(height), // posição y
random(-4, 4), // velocidade x
random(-4, 4), // velocidade y
random(4, 10), // raio
color(r, g, b) // cor de preenchimento para a bola
)
);
}
}
function draw() {
background(255);
for (let ball of balls) {
ball.update();
ball.render();
}
}
// Até agora, só vimos o modo de renderização padrão.
// Dessa vez, usaremos o modo de renderização "webgl".
function setup() {
createCanvas(400, 400, WEBGL); // largura, altura, modo de renderização
}
function draw() {
background(0);
stroke('#000');
fill('#aaf');
// rotaciona entorno dos eixos x, y e z com base na quantidade de frames dividido por 50
rotateX(frameCount / 50);
rotateY(frameCount / 50);
rotateZ(frameCount / 50);
// frameCount é uma variável do p5.js que armazena a quantidade de frames que já ocorreu
box(50, 50, 50); // largura, altura, profundidade
}
```
## Saiba Mais
- [Começando com p5.js](http://p5js.org/get-started/) A documentação oficial
- [Code! Programming for Beginners with p5.js - YouTube](https://www.youtube.com/watch?v=yPWkPOfnGsw&vl=en) Introdução e desafios usando Processing e p5.js por Coding Train
- [The Coding Train](https://codingtra.in/) Um site com exemplos feito utilizando p5.js e Processing