1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
|
---
category: tool
tool: p5
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)
|
