Partendo dalla nostra precedente esplorazione di P5.js per la grafica vettoriale SVG, ci addentriamo ora nel mondo della programmazione dell’arte digitale con rinnovato entusiasmo e determinazione. Spinti dal rapporto simbiotico tra tecnologia ed espressione artistica, la nostra esplorazione nasce dalla richiesta di strumenti innovativi per la creazione di opere in formato SVG pensate per i plotter da disegno iDraw. In qualità di sostenitori della creatività attraverso la programmazione, puntiamo a fornire agli artisti digitali le competenze e le conoscenze necessarie per sfruttare appieno il potenziale di P5.js, trasformando così l’immaginazione in capolavori tangibili su una tela digitale. Ti servono file SVG con codice? Scaricali qui>>>
Passaggio 1: creazione della tela
Per iniziare il nostro viaggio nella programmazione dell’arte digitale con P5.js, definiamo innanzitutto la tela sulla quale la nostra opera prenderà vita. Utilizzando la funzione createCanvas() di P5.js, definiamo una tela di 400x400 con sfondo nero e senza riempimento, preparando il terreno per la nostra esplorazione creativa.
function setup() {
createCanvas(400,400);
noFill(0);
stroke(255);
}
Passaggio 2: disegno di cerchi disposti in un quadrato al centro
Osserviamo attentamente il cerchio interno formato da piccoli cerchi e individuiamo uno schema: è composto da 64 cerchi distribuiti uniformemente lungo una circonferenza con diametro pari a 75. A questo punto possiamo utilizzare un ciclo for per definire le coordinate (X, Y) dei centri dei piccoli cerchi. In particolare, a ogni iterazione del ciclo il valore di 'i' aumenterà di π/32 finché 'i' non supererà il valore di TAU (che rappresenta un cerchio completo). Il corpo del ciclo può essere scritto come segue.
let r=75;
let x=sin(i)*r+200;
let y=cos(i)*r+200;
ellipse(x,y,6,6);
I valori X e Y sono coordinate polari. Perché aggiungere 200? Perché in P5.js l’origine del sistema di coordinate si trova nell’angolo in alto a sinistra, con valori positivi di Y che aumentano verso il basso.
Quindi, per posizionarlo al centro, dobbiamo aggiungere metà della larghezza e dell’altezza della tela, cioè 200. Utilizziamo il comando ellipse(x,y,6,6) per disegnare un cerchio con diametro di 6 pixel. Osserviamo ora i cerchi nella sezione centrale. I loro centri si trovano sui lati di un quadrato con lato pari a 280, centrato sulla tela. Possiamo limitare la posizione dei centri dei cerchi utilizzando un’istruzione IF, come segue:
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 la coordinata X è maggiore di 320, impostiamo la coordinata X su 320. La coordinata Y rimane libera. Ciò significa che i cerchi dell’anello più esterno manterranno invariate le coordinate Y, mentre tutte le coordinate X verranno impostate su 320. Il risultato è lo spostamento della parte rossa verso la parte verde, come mostrato nel diagramma.
Analogamente，if(X<80) X=80;
if(Y>320) Y=320;
if(Y<80) Y=80;
Passaggio3 : collegare con linee le forme dei passaggi 1 e 2
Ora che i valori di X e Y si trovano sulla circonferenza del cerchio piccolo più interno e rappresentano i centri dei cerchi nel quadrato centrale, possiamo collegarli utilizzando il comando line: line(x,y,X,Y);
Passaggio 4: disegnare piccoli cerchi nell’anello più esterno e collegarli direttamente ai cerchi del passaggio 2
Poiché abbiamo spostato i cerchi più esterni verso il centro, aggiungiamo nuovamente i cerchi dell’anello esterno. A questo punto, i valori di x e y sono dati da r * sin(i) e r = cos(i). Inizialmente r era impostato su 78, ma ora è 170. Dobbiamo solo assegnare i valori a x e y:x=sin(i)*r+200; y=cos(i)*r+200;Ora x e y rappresentano i centri dei piccoli cerchi più esterni. Disegnare i cerchi e le linee completa questa semplice opera d’arte digitale. Il codice è il seguente: circle(x,y,6); line(x,y,X,Y);
Puoi modificare il valore di suddivisione di PI nel ciclo for per rendere l’opera d’arte digitale più compatta o più rada.
Il codice completo è il seguente:
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);
}
}
Riepilogo
In conclusione, la nostra esplorazione della programmazione dell’arte digitale con P5.js ha rivelato un mondo di creatività illimitata e possibilità infinite. Riflettendo sull’intricato intreccio tra codice e immaginazione che ha dato vita alla nostra opera, ci ricordiamo del potere trasformativo della tecnologia nelle mani degli artisti. Ispirati da questo viaggio, invitiamo gli altri creativi a intraprendere la propria avventura nella programmazione, sfruttando gli strumenti e le tecniche che abbiamo scoperto per realizzare capolavori unici. E per chi desidera portare le proprie creazioni digitali nel mondo fisico, raccomandiamo vivamente di utilizzare il nostro prodotto: Plotter da disegno iDraw , per riprodurre le proprie opere con precisione ed eleganza, colmando il divario tra mondo digitale e mondo fisico alla ricerca dell’eccellenza artistica.
Altri articoli correlati: