Com base na nossa exploração anterior do P5.js para gráficos vetoriais SVG, aventuramo-nos agora no mundo da programação de arte digital com renovado entusiasmo e propósito. Motivada pela relação simbiótica entre a tecnologia e a expressão artística, a nossa exploração é impulsionada pela procura de ferramentas inovadoras para a criação de obras de arte em formato SVG, concebidas para os iDraw Pen Plotters. Como defensores da criatividade através da programação, pretendemos dotar os artistas digitais das competências e dos conhecimentos necessários para aproveitarem todo o potencial do P5.js, transformando assim a imaginação em obras-primas tangíveis numa tela digital. Precisa de ficheiros SVG com código? Descarregue aqui>>>
Passo 1: Criar a tela
Para iniciar a nossa jornada pela programação de arte digital com P5.js, começamos por estabelecer a tela na qual a nossa obra ganhará vida. Utilizando a função createCanvas() do P5.js, definimos uma tela de 400x400 com fundo preto e sem preenchimento, preparando o cenário para a nossa exploração criativa.
function setup() {
createCanvas(400,400);
noFill(0);
stroke(255);
}
Passo 2: Desenhar círculos dispostos num quadrado ao centro
Observamos cuidadosamente o círculo interior formado por pequenos círculos e encontramos um padrão: é composto por 64 círculos distribuídos uniformemente ao longo de uma circunferência com 75 de diâmetro. Nesta fase, podemos utilizar um ciclo for para definir as coordenadas (X, Y) dos centros dos pequenos círculos. Especificamente, em cada iteração do ciclo, o valor de 'i' aumenta π/32 até 'i' ultrapassar o valor de TAU (que representa um círculo completo). O corpo do ciclo pode ser escrito da seguinte forma.
let r=75;
let x=sin(i)*r+200;
let y=cos(i)*r+200;
ellipse(x,y,6,6);
Os valores X e Y são coordenadas polares. Por que adicionar 200? Porque, no P5.js, a origem do sistema de coordenadas encontra-se no canto superior esquerdo, com os valores positivos de Y a aumentarem para baixo.
Assim, para o posicionar ao centro, precisamos de adicionar metade da largura e da altura da tela, que é 200. Utilizamos o comando ellipse(x,y,6,6) para desenhar um círculo com 6 píxeis de diâmetro. Em seguida, observemos os círculos da secção central. Os centros encontram-se nos lados de um quadrado com 280 de lado, centrado na tela. Podemos restringir a posição dos centros dos círculos utilizando uma instrução IF, da seguinte forma:
if(X>320) X=320;
if(X<80) X=80;
if(Y>320) Y=320;
if(Y<80) Y=80;
if(X>320) X=320;
Se a coordenada X for superior a 320, definimos a coordenada X como 320. A coordenada Y permanece sem restrições. Isto significa que os círculos do anel mais exterior terão as coordenadas Y inalteradas, enquanto todas as coordenadas X serão definidas como 320. O resultado é o deslocamento da parte vermelha para a parte verde, conforme apresentado no diagrama.
De forma semelhante，if(X<80) X=80;
if(Y>320) Y=320;
if(Y<80) Y=80;
Passo3 : Ligar as formas dos passos 1 e 2 com linhas
Agora que os valores de X e Y se encontram na circunferência do pequeno círculo mais interior, e que X e Y representam os centros dos círculos do quadrado central, podemos ligá-los utilizando o comando line: line(x,y,X,Y);
Passo 4: Desenhar pequenos círculos no anel mais exterior e ligá-los diretamente aos círculos do passo 2
Uma vez que deslocámos os círculos mais exteriores para o centro, vamos adicioná-los novamente. Nesta fase, os valores de x e y são dados por r * sin(i) e r = cos(i). Inicialmente, r tinha o valor 78, mas agora é 170. Basta atribuir valores a x e y:x=sin(i)*r+200; y=cos(i)*r+200;Agora, x e y representam os centros dos pequenos círculos mais exteriores. Desenhar os círculos e as linhas conclui esta simples obra de arte digital. O código é o seguinte: circle(x,y,6); line(x,y,X,Y);
Pode ajustar o valor de subdivisão de PI no ciclo for para tornar a obra de arte digital mais compacta ou mais dispersa.
O código completo é o seguinte:
function setup() {
createCanvas(400,400);
noFill(0);
stroke(255);
}
function draw() {
background(0);
for(i=0;i<TAU;i+=PI/36){
let r=75;
let x=sin(i)*r+200;
let y=cos(i)*r+200;
ellipse(x,y,6,6);
r=78;
x=sin(i)*r+200;
y=cos(i)*r+200;
r=170;
let X=sin(i)*r+200;
let Y=cos(i)*r+200;
if(X>320) X=320;
if(X<80) X=80;
if(Y>320) Y=320;
if(Y<80) Y=80;
circle(X,Y,6);
line(x,y,X,Y);
x=sin(i)*r+200;
y=cos(i)*r+200;
circle(x,y,6);
line(x,y,X,Y);
}
}
Resumo
Em conclusão, a nossa exploração da programação de arte digital com P5.js revelou um mundo de criatividade ilimitada e possibilidades infinitas. Ao refletirmos sobre a intrincada dança entre o código e a imaginação que deu vida à nossa obra, somos recordados do poder transformador da tecnologia nas mãos dos artistas. Inspirados por esta jornada, convidamos outros criativos a iniciarem a sua própria odisseia de programação, utilizando as ferramentas e técnicas que descobrimos para criarem as suas obras-primas únicas. E, para aqueles que procuram trazer as suas criações digitais para o mundo físico, recomendamos vivamente a utilização do nosso produto — iDraw Pen Plotters — para reproduzirem as suas obras com precisão e elegância, aproximando os mundos digital e físico na busca da excelência artística.
Mais artigos relacionados: