1.8 Linhas

Estamos chegando ao final desta parte introdutória de Javascript/P5. Meu objetivo foi ser bastante “iniciático” e não avançar muito. Para finalizar as 10 postagens desta “unidade”, separei um “apêndice” q conterá três comandos de desenho muito utilizados em P5: o line(), o ellipse() e o rect(), usados para desenhar linhas retas, elipses e retângulos, respectivamente.

Neste post falaremos sobre o line().

Para criar uma linha reta, precisamos de apenas dois pontos distintos, isto é, eles não podem ser iguais. Por um ponto passam infinitas linhas, mas por dois pontos (distintos), passa apenas uma única linha reta. A sintaxe será a seguinte:

line(x1, y1, x2, y2);

Para desenhar uma linha usando P5, precisaremos de 4 valores, sendo os dois primeiros usados para desenhar o ponto inicial da linha (x1 e y1), e o dois últimos (x2, y2), para desenhar o ponto final. A seguir um exemplo simples de construção de uma linha reta.

linhas_1
Uma linha desenhada usando 4 valores, dois para o ponto inicial e dois para o ponto final

No exemplo, o ponto inicial encontra-se nas coordenadas x1 = 100, y1=100 e o ponto final está em x2=300, y2=300.

Se quisermos q a linha seja “infinita”, precisaremos usar os valores 0, widht e height para desenhar a linha, como ilustrado a seguir.

linhas_2
Linha “infinita” atravessando uma das diagonais do canvas

Da mesma forma como podemos alterar a espessura e a cor do ponto usando os comandos strokeWeight() e stroke(), podemos usar os mesmos parâmetros para modificar a espessura e o cor da linha. Se nada for configurado, a espessura da linha será de 1 pixel e a cor será preta.

linhas_3
Podemos alterar a espessura e cor da linha criada

No exemplo anterior, a espessura da linha é de 25 pixels e a cor do traço é um valor de RGB q gera a cor azul (R = 0, G  =0 e B = 255).

Existe ainda um parâmetro de “acabamento” da linha, o strokeCap(). Por padrão, as extremidades da linha serão sempre arredondadas, conforme podemos verificar no exemplo mostrado anteriormente. Esta opção é chamada strokeCap(ROUND). Existem outras duas: o strokeCap(SQUARE), q gera uma terminação reta; e o strokeCap(PROJECT), q além da terminação reta, faz o comprimento da linha ser igual ao apresentando quando o strokeCap() escolhido é o ROUND.

linhas_4
Os tipos possíveis de “acabamento” da linha em p5

Note q, da mesma forma q um ponto pode se parecer com um círculo, variando a espessura do traço (o stroke()), modificando a espessura e o acabamento da linha, podemos obter retângulos.

Nas próximas postagens veremos a forma “correta” de criar círculos (e elipses) e retângulos, sem termos de “apelar” para o point() e o line(), deixando o stroke() e o strokeWeight() para atuar sobre os contornos das figuras.

1.8 Linhas