P5 JS: Plano cartesiano

P5 JS: Plano cartesiano
Guilherme Lima
Guilherme Lima

Compartilhe

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.

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.

Veja que a bolinha está centralizada no canto superior esquerdo.

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!

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.

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.

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.

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.

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.

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..

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.

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.

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:

Guilherme Lima
Guilherme Lima

Guilherme é desenvolvedor de software formado em Sistemas de Informação e possui experiência em programação usando diferentes tecnologias como Python, Javascript e Go. Criador de mais de 30 cursos de diferentes áreas da plataforma com foco no treinamento de profissionais de TI, como Data Science, Python para web com Django e Django Rest, jogos com Javascript, Infraestrutura como código com Terraform e Ansible, Orientação a Objetos com Go. Além disso, é um dos instrutores da Imersão Dev da Alura.

Veja outros artigos sobre Programação