P5 JS: Plano cartesiano

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.

Ao executar o programa, nosso resultado será:

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

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

Observe o resultado:

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:

Ao executar o programa, nosso resultado será um círculo quase todo do lado esquerdo.

Lembre-se: o eixo x, altera a posição do objeto para esquerda ou para direita.

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

Ao executar o programa, o círculo se moveu mais para baixo.

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:

Ao executar o programa, veja se o círculo se moveu mais para cima.

Lembre-se: o eixo y, altera a posição do objeto para cima ou 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:

Para centralizar um objeto, podemos dividir os parâmetros da altura e largura da tela por 2, como ilustra o código abaixo:

Nosso resultado será:

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:

• Formação Javascript - A linguagem mais querida :)