mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2024-12-24 10:01:38 +00:00
168 lines
5.6 KiB
Markdown
168 lines
5.6 KiB
Markdown
---
|
|
category: tool
|
|
tool: p5.js
|
|
filename: p5-pt.js
|
|
contributors:
|
|
- ['Amey Bhavsar', 'https://github.com/ameybhavsar24']
|
|
- ['Claudio Busatto', 'https://github.com/cjcbusatto']
|
|
translators:
|
|
- ["Adaías Magdiel", "https://adaiasmagdiel.com/"]
|
|
lang: pt-br
|
|
---
|
|
|
|
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
|
|
triangle(100, 400, 130, 200, 200, 300); // x1, y1, x2, y2, x3, y3
|
|
point(100, 300); // cria um ponto na posição x, y
|
|
// existem outras formas, mas elas são mais complexas.
|
|
}
|
|
|
|
/** Animação de bolas quicando
|
|
* Você pode copiar e colar esse código no editor online, acessando:
|
|
* https://editor.p5js.org/
|
|
*/
|
|
class Ball {
|
|
constructor(x, y, xvel, yvel, radius, col) {
|
|
this.position = createVector(x, y); // cria um objeto p5.Vector que armazena os valores de x e y
|
|
this.velocity = createVector(xvel, yvel); // criar um objeto p5.Vector armazenando a velocidade
|
|
this.radius = radius;
|
|
this.col = col; // p5.js já utiliza a palavra color, então usaremos "col" no nosso exemplo
|
|
}
|
|
|
|
update() {
|
|
this.position.add(this.velocity); // você pode somar vetores usando a função p5.Vector.add(p5.Vector)
|
|
if (this.position.x + this.radius > width) {
|
|
// muda a direção da bola se ela bater nas paredes
|
|
this.velocity.x *= -1;
|
|
}
|
|
if (this.position.x - this.radius < 0) {
|
|
this.velocity.x *= -1;
|
|
}
|
|
if (this.position.y + this.radius > height) {
|
|
this.velocity.y *= -1;
|
|
}
|
|
if (this.position.y - this.radius < 0) {
|
|
this.velocity.y *= -1;
|
|
}
|
|
}
|
|
|
|
render() {
|
|
// com base nesses exemplos, você já deve ser capaz de entender o que essa função está fazendo
|
|
fill(this.col);
|
|
ellipse(this.position.x, this.position.y, this.radius);
|
|
}
|
|
}
|
|
|
|
let numBalls = 23;
|
|
let balls = [];
|
|
|
|
function setup() {
|
|
createCanvas(400, 400); // largura, altura
|
|
for (let i = 0; i < numBalls; i++) {
|
|
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
|
|
|
|
## Fonte
|
|
|
|
- [p5.js - Código Fonte](https://github.com/processing/p5.js)
|
|
- [p5.sound.js](https://github.com/processing/p5.js-sound)
|