Setup, draw e formas básicas

Setup e Draw

Essas são funções fundamentais para criação de uma animação em P5js. Mais a frente falaremos melhor sobre o que é uma função e como você pode criar suas próprias. Antes quero que você seja capaz de começar a criar alguns desenhos próprios, para isso você deve conhecer setup( ) e draw( ).

setup( )

Essa função rodará uma no início do programa, sendo responsável por definir alguns atributos do ambiente como o tamanho da canvas ou frequencia de quadros por segundo. Leia mais e veja o código de exemplo na página de referência setup( ). 

draw( )

Essa é a função responsável por transformar suas linhas de código em um desenho. Ela tem uma particularidade, por padrão ela roda repetidamente várias vezes por segundo e assim possibilita não só a criação de desenhos, mas de animações também. É dentro de draw( ) que escreveremos o código que representa nossos desenhos.

Leia mais sobre essa função e veja um código de exemplo na página de refência em português draw( ).

Formas básicas

Código completo no editor web.

Na canvas, e no código acessível acima, apresento algumas formas 2D básicas. Vamos olhar o código abaixo:

function setup() {            //função setup()

  createCanvas(400, 400);

}

function draw() {            //função draw()

  background(200);

  strokeWeight(10);

  

  circle(100, 100, 100);

  square(250, 50, 100);

  triangle(100,250,50,350,150,350);

  line(250,300,350,350);

  point(300, 250);

}

Primerio, quando disse que dentro da função setup( ) são definidos atributos do ambiente eu me refiro ao corpo da função que pode ser visto na sugnda linha do código acima. Uma função tem um nome, no caso dessa é a palabra setup acompanhado de um par de parênteses ( ) e depois um par de chaves { }, é dentro destas chaves que colocamos as instruções que uma determinada função fará. Ou seja, quando eu digo que algo está dentro de uma função significa que está entre as chaves que definem o início e fim do corpo da função. Falaremos mais sobre funções no futuro.

Agora vamos revendo o código linha por linha.

• function setup() {

    Aqui estamos definindo a função setup( ) para este programa específico. Lembrando que ela só será chamada uma vez.

•   createCanvas(400, 400);

    Aqui estamos chamando a função createCanvas( ), e passando os valores de largura, 400 pixels, e altura, 400 pixels.   

• function draw() {            //função draw()

    Nesta linha estamos definindo a funão draw( ). Outra função que não pode ser chamada outra vez dentro do código. 

•   background(200);

    A função background( ), define a cor de fundo da nossa canvas. Aqui foi passado apenas um valor de 200. Assim estamos definindo uma escala de cinza que vai de 0 a 255, sendo 0 o mais escuro, preto, e 255 o mais claro, branco. Falaremos mais sobre cores na próxima aula.

•   strokeWeight(10);

    A função strokeWeight( ) define o "peso" do traço do, ou seja, a grossura das linhas. Aqui demos a largura de 10 pixels. E isso afetará todos os desenhos a seguir até que haja outra linha alterando o traço. 

•   circle(100, 100, 100);

       A função circle( ) define que seja desenhando um círculo, ela recebe três valores dentro de seus parenteses para funcionar, sendo o primeiro a coordenada X e o segundo a coordenada Y, o círculo é desenhando a partir do ponto central dele, ou seja seus valores de X e Y vão dizer onde na cavas fica o centro do círculo. Leia mais sobre o sistema de coordenadas na canvas. O terceiro valor define o diâmetro do círculo.

•   square(250, 50, 100);

    A função  square( ) desenha um quadrado na tela. Ela recebe três valores dentro de seus parenteses para funcionar, sendo o primeiro a coordenada X e o segundo a coordenada Y. Diferente do círculo, o quadrado é desenado a partir de seu canto superior esquerdo, esticando em largura para a esquerda e em altura para baixo. O último valor é referente ao tamanho dos lados do quadrado, nesse caso 100 pixels.

•   point(300, 250);

    A função point( ) desenha um ponto na tela. Ela recebe um valor de X e um valor de Y entre seus parâmetros. Para controlar o tamanho de um ponto deve-se usar a função strokeWeight( ) logo antes da função point( ), a fução strokeWeight( ) vai alterar todos os traços e pontos subsequentes até ser chamada novamente.

•   line(250,300,350,350);

    A função line( ) desenha uma reta linha. Para desenhar uma linha precisamos pensar na que estamos conectando dois pontos, pois os valores que passamos para a função são dois pares de coordenadas X, Y, sendo o primeiro par um ponto e o segundo outro. 

•   triangle(100,250,50,350,150,350);

      A função triangle( ) desenhará um  triângulo na tela. Diferente das funções anteriores, essa função não receberá um tamanho de altura ou largura. Para desenhar um triângulo é importante ter entendido bem o sistema de coordenadas na canvas, pois será necessário darmos 6 valores diferentes a função, Esses valores definem os pontos onde os lados do triangulo se conectarão. Um jeito mais fácil de entender isso é ter em mente que você deve colocar três pontos na tela, e cada par de valeres se refere a um ponto sendo o primeiro um X e o segundo um Y.

Atividade sugerida

Entre no editor web e veja o código completo que trabalhamos nessa aula, mexa um pouco e veja o que acontece, explore o códito e veja o que consegue fazer. Tente usar as formas básicas para formar desenhos maiores e mais complexos.

Qualquer dúvida sinta-se livre para deixar nos comentários. 

Referencias:

https://p5js.org/reference/#group-Shape