Com base na nossa exploração anterior do P5.js para gráficos vetoriais SVG, aventuramo-nos agora no mundo da criação de arte digital através de código, com renovado vigor 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 plotters de caneta iDraw. Enquanto 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 alguns ficheiros SVG com código? Transfira aqui>>>
Passo 1: Criar a tela
Para começarmos a nossa jornada pela criação de arte digital através de código com P5.js, estabelecemos primeiro a tela na qual a nossa obra de arte 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 no centro
Observamos atentamente 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 um diâmetro de 75. Neste momento, 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' aumentará π/32 até 'i' exceder 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 no centro, precisamos de adicionar metade da largura e da altura da tela, que é 200. Utilizando o comando ellipse(x,y,6,6) para desenhar um círculo com um diâmetro de 6 píxeis. Em seguida, vejamos os círculos da secção central. Os centros encontram-se nos lados de um quadrado com um comprimento lateral de 280, 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 as coordenadas X serão todas definidas como 320. Isto faz com que a parte vermelha se desloque para a parte verde, como mostrado no diagrama.
Da mesma forma，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 círculo pequeno mais interior, e 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
Como deslocámos os círculos mais exteriores para o centro, vamos voltar a adicionar os círculos mais exteriores. Neste momento, 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 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 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 criação de arte digital através de código com P5.js revelou um mundo de criatividade ilimitada e possibilidades sem fim. Ao refletirmos sobre a intrincada dança entre o código e a imaginação que deu vida à nossa obra de arte, somos lembrados do poder transformador da tecnologia nas mãos dos artistas. Inspirados por esta jornada, convidamos outros criativos a embarcarem na sua própria odisseia de programação, aproveitando 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 - Plotters de caneta iDraw - para reproduzirem as suas obras de arte com precisão e elegância, estabelecendo uma ponte entre os mundos digital e físico na procura da excelência artística.
Mais artigos relacionados: