Baseando-nos na nossa incursão anterior em P5.js para Gráficos Vetoriais SVG, agora aventuramo-nos no domínio da programação de arte digital com renovado vigor e propósito. Motivados pela relação simbiótica entre tecnologia e expressão artística, a nossa exploração é impulsionada pela procura de ferramentas inovadoras na criação de obras de arte em formato SVG adaptadas para os Pen Plotters iDraw. Como defensores da criatividade através da programação, pretendemos equipar os artistas digitais com as competências e conhecimentos necessários para aproveitar todo o potencial do P5.js, transformando assim a imaginação em obras-primas tangíveis numa tela digital. Precisa de alguns ficheiros svg com código? Descarregue aqui>>>
Passo 1: Criar a Tela
Para iniciar a nossa jornada na programação de arte digital com P5.js, começamos por estabelecer a tela onde 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 palco para a nossa exploração criativa.
function setup() {
createCanvas(400,400);
noFill(0);
stroke(255);
}
Passo 2: Desenhar Círculos Dispostos num Quadrado no Centro
Observamos cuidadosamente o círculo interior de pequenos círculos e encontramos um padrão: consiste em 64 círculos distribuídos uniformemente ao longo de uma circunferência com um diâmetro de 75. Neste ponto, podemos usar um ciclo for para definir as coordenadas (X, Y) dos centros dos pequenos círculos. Especificamente, para cada iteração do ciclo, o valor de 'i' aumentará em π/32 até que 'i' ultrapasse 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 está no canto superior esquerdo, com valores positivos de Y a aumentar para baixo.
Assim, para posicionar no centro, precisamos de adicionar metade da largura e altura da tela, que é 200. Usamos o comando ellipse(x,y,6,6) para desenhar um círculo com diâmetro de 6 pixels. A seguir, vamos observar os círculos na secção central. Os centros estão nos lados de um quadrado com lado de 280, centrado na tela. Podemos restringir a posição dos centros dos círculos usando uma instrução IF, assim:
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 maior que 320, então define-se a coordenada X para 320. A coordenada Y permanece sem restrições. Isto significa que os círculos no anel mais exterior terão as suas coordenadas Y inalteradas enquanto as coordenadas X serão todas definidas para 320. Isto resulta na parte vermelha a deslocar-se para a parte verde, como mostrado 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 estão na circunferência do círculo pequeno mais interior, e X e Y representam os centros dos círculos no quadrado do meio, podemos ligá-los usando 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
Como deslocámos os círculos mais exteriores para o meio, vamos adicionar novamente os círculos mais exteriores. Neste ponto, os valores de x e y são dados por r * sin(i) e r = cos(i). Inicialmente, r era 78, mas agora é 170. Só precisamos de 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 completa esta simples obra de arte digital. O código é o seguinte: circle(x,y,6); line(x,y,X,Y);
Pode ajustar o valor da subdivisão de PI no ciclo for para tornar a obra de arte digital mais compacta ou mais espaçada.
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 dança intricada entre código e imaginação que deu vida à nossa obra, lembramo-nos do poder transformador da tecnologia nas mãos dos artistas. Inspirados por esta jornada, convidamos outros criativos a embarcar na sua própria odisseia de programação, aproveitando as ferramentas e técnicas que descobrimos para criar as suas obras-primas únicas. E para aqueles que desejam trazer as suas criações digitais para o mundo físico, estendemos uma recomendação sincera para utilizarem o nosso produto - iDraw Pen Plotters - para reproduzirem as suas obras com precisão e elegância, ligando o mundo digital ao físico na busca da excelência artística.
Mais artigos relacionados: