Arcos

O arco é um segmento de uma elipse, definido por um ângulo inicial e um ângulo final. No p5.js, ele é criado com o comando arc(), útil para representar setores circulares, indicadores de progresso, relógios ou qualquer forma que dependa de uma porção de curva.

O comando arc(x, y, w, h, start, stop, [mode], [detail]) recebe as coordenadas do centro (x, y), a largura (w) e a altura (h) da elipse que contém o arco, e os ângulos inicial (start) e final (stop), medidos em radianos. Os parâmetros mode e detail são opcionais e controlam, respectivamente, a forma como o arco é fechado e o nível de detalhe da curva.

Estrutura básica

arc(x, y, w, h, start, stop, [mode], [detail]);

Exemplo

Para um exemplo de como utilizar esse comando, teste o Código e veja o arco formado.

function setup() {
  createCanvas(800,600);
  noFill();
  strokeWeight(4);
  arc(400, 300, 300, 200, 0, PI + HALF_PI);
}

Modos de fechamento

O parâmetro mode define como as extremidades do arco se conectam ao centro da elipse. O p5.js oferece quatro opções: OPEN (o arco não é fechado), CHORD (as extremidades são ligadas por uma linha reta), PIE (as extremidades são ligadas ao centro, como uma fatia de pizza) e o padrão, quando nenhum modo é informado, que se comporta como PIE quando há preenchimento.

function setup() {
  createCanvas(800,600);
  strokeWeight(2);
  fill(200);

  arc(150, 300, 180, 180, 0, PI + QUARTER_PI, OPEN);
  arc(400, 300, 180, 180, 0, PI + QUARTER_PI, CHORD);
  arc(650, 300, 180, 180, 0, PI + QUARTER_PI, PIE);
}

Experimente animar o ângulo stop ao longo do tempo, usando uma variável global incrementada em draw(), para criar indicadores de carregamento ou ponteiros de relógio. O arco também é a base conceitual usada internamente pelo p5.js para desenhar círculos e elipses, já que ambos podem ser entendidos como arcos completos, de 0 a TWO_PI. Mais detalhes e exemplos podem ser encontrados na referência do p5.js.