P5 JS: Plano cartesiano
![P5 JS: Plano cartesiano](assets/p5-plano-cartesiano/p5-plano-cartesiano.png)
O plano cartesiano é um conjunto de dois eixos onde ambos os eixos se cruzam em um ponto central. Esse ponto central é a coordenada 0,0. Porém, no P5 Js, esse ponto não se encontra no centro da tela, e sim no canto superior esquerdo, como ilustra a imagem abaixo.
![Imagem que exibe um quadro dividido em tamanhos iguais com eixo x apontando para direita e no eixo y apontando para baixo.](assets/p5-plano-cartesiano/img1.png)
Vamos entender melhor
Todas as formas desenhadas na tela têm uma posição especificada como uma coordenada, ou seja, definimos uma posição onde a figura será desenhada. Vamos desenhar um círculo passando como parâmetro a posição x
e y
igual a 0
.
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
circle(0, 0, 80); //(valor do x, valor do y, diâmetro do círculo)
}
Ao executar o programa, nosso resultado será:
![Imagem que exibe um círculo pela metade centralizado no canto superior esquerdo.](assets/p5-plano-cartesiano/img2.png)
Veja que a bolinha está centralizada no canto superior esquerdo.
![](assets/p5-plano-cartesiano/img3.png)
![Banner da Escola de Programação: Matricula-se na escola de Programação. Junte-se a uma comunidade de mais de 500 mil estudantes. Na Alura você tem acesso a todos os cursos em uma única assinatura; tem novos lançamentos a cada semana; desafios práticos. Clique e saiba mais!](assets/alura-matricula-maior-escola-tecnologia-brasil-mais-500-mil-estudantes/matricula-escola-programacao-alura-saiba-mais-versao-mobile.png)
O eixo x
O eixo x, altera o objeto para esquerda ou para direita. Quanto maior o valor do x
, mais para direita ele estará. Quanto menor o valor de x
, mais para esquerda ele estará. Vamos alterar a posição x
atribuindo o valor 50
como ilustra o código abaixo (neste exemplo, não vamos alterar a posição y
).
function draw() {
background(220);
circle(50, 0, 80);
}
Observe o resultado:
![Imagem que exibe um círculo mais visível pela metade no lado esquerdo.](assets/p5-plano-cartesiano/img4.png)
Quanto maior o valor do eixo
x
, mais para o lado direito o círculo estará.
Agora, se o valor do eixo x
for menor do que zero, ou seja, um valor negativo, o círculo estará mais para o lado esquerdo. Vamos atribuir o valor -30
para o eixo x
, como ilustra o código abaixo:
function draw() {
background(220);
circle(-30, 0, 80);
}
Ao executar o programa, nosso resultado será um círculo quase todo do lado esquerdo.
![Imagem que exibe um círculo quase não visível no canto superior esquerdo.](assets/p5-plano-cartesiano/img5.png)
Lembre-se: o eixo x, altera a posição do objeto para esquerda ou para direita.
![Imagem que exibe um X com uma seta para direita e outra para esquerda.](assets/p5-plano-cartesiano/img6.png)
O eixo y
O eixo y, altera o objeto para cima ou para baixo. Quanto maior o valor do y
, mais para baixo ele estará. Quanto menor o valor de y
, mais para cima ele estará. Vamos alterar a posição y
atribuindo o valor 50
como ilustra o código abaixo (neste exemplo, não vamos alterar a posição x
).
function draw() {
background(220);
circle(0, 50, 80);
}
Ao executar o programa, o círculo se moveu mais para baixo.
![Imagem que exibe um círculo na metade mais para baixo da tela.](assets/p5-plano-cartesiano/img7.png)
Agora, se o valor do eixo y
for menor do que zero, ou seja, um valor negativo, o círculo estará mais para cima. Vamos atribuir o valor -30
para o eixo y
, como ilustra o código abaixo:
function draw() {
background(220);
circle(0, -30, 80);
}
Ao executar o programa, veja se o círculo se moveu mais para cima.
![Imagem que exibe um círculo bem no canto superior, quase fora da tela.](assets/p5-plano-cartesiano/img8.png)
Lembre-se: o eixo y, altera a posição do objeto para cima ou para baixo.
![Imagem que exibe a letra Y com uma seta para cima e outra para baixo..](assets/p5-plano-cartesiano/img9.png)
Centralizando um objeto
No P5, existem dois atributos chamados width
e height
, que determinam a largura da tela e o tamanho da altura da tela respectivamente, e podemos usar esses atributos para centralizar um objeto. Porém não podemos passar apenas esses atributos como parâmetros para a função círculo, pois isso moveria a bolinha para o canto direito inferior da tela, como ilustra o código abaixo:
function draw() {
background(220);
circle(width, height, 80);
}
![Imagem que exibe um círculo centralizado no canto inferior direito da tela.](assets/p5-plano-cartesiano/img13.png)
Para centralizar um objeto, podemos dividir os parâmetros da altura
e largura
da tela por 2
, como ilustra o código abaixo:
circle(width/2, height/2, 80);
Nosso resultado será:
![alt text:Imagem que exibe um círculo centralizado na tela.](assets/p5-plano-cartesiano/012-p5js.png)
Conclusão
Neste artigo, aprendemos mais sobre o plano cartesiano e como funciona o posicionamento dos objetos no P5 Js.
Quer aprender mais sobre Javascript? Então veja a: