Contorno

O contorno é a cor aplicada às linhas e às bordas das formas geométricas. No p5.js, ele é definido com o comando stroke(), que passa a valer para todas as formas e linhas desenhadas depois dele, até que uma nova cor seja definida ou o contorno seja desativado.

O comando stroke() aceita as mesmas formas de chamada que fill(): stroke(v1, v2, v3, [alpha]) para valores RGB, stroke(gray, [alpha]) para um único valor de cinza, ou stroke(color) para uma variável de cor criada com color(). A espessura do contorno é controlada separadamente, com o comando strokeWeight().

Estrutura básica

stroke(v1, v2, v3, [alpha]);
strokeWeight(peso);

Exemplo

Para um exemplo de como utilizar esse comando, teste o Código e veja as formas contornadas com cores diferentes.

function setup() {
  createCanvas(800,600);
  noFill();
  strokeWeight(6);
  stroke(255,0,0);
  ellipse(150,300,150,150);
  stroke(0,150,80);
  ellipse(400,300,150,150);
  stroke(30,80,200);
  ellipse(650,300,150,150);
}

Espessura do contorno

O comando strokeWeight() define, em pixels, a espessura das linhas e bordas desenhadas em seguida. Valores maiores tornam o contorno mais grosso e podem alterar visualmente o tamanho aparente da forma.

function setup() {
  createCanvas(800,600);
  noFill();
  stroke(50);

  strokeWeight(1);
  ellipse(150,300,150,150);

  strokeWeight(6);
  ellipse(400,300,150,150);

  strokeWeight(14);
  ellipse(650,300,150,150);
}

Experimente combinar strokeCap() e strokeJoin() para controlar, respectivamente, o formato das pontas das linhas e o formato dos encontros entre segmentos, o que é especialmente perceptível em espessuras maiores. O contorno também aceita transparência através do canal alpha, da mesma forma que o preenchimento. Mais detalhes e exemplos podem ser encontrados na referência do p5.js.