Basandoci sulla nostra precedente esplorazione di P5.js per la grafica vettoriale SVG, ci addentriamo ora nel mondo della programmazione dell’arte digitale con rinnovato vigore 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 a penna 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, stabiliamo 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, creando le basi per la nostra esplorazione creativa.
function setup() {
createCanvas(400,400);
noFill(0);
stroke(255);
}
Passaggio 2: disegnare 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 75. A questo punto, possiamo usare un ciclo for per definire le coordinate (X, Y) dei centri dei piccoli cerchi. Nello specifico, 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 Y positivi che aumentano verso il basso.
Per posizionarlo al centro, dobbiamo quindi aggiungere metà della larghezza e dell’altezza della tela, ovvero 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 centri si trovano sui lati di un quadrato con lato 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 senza restrizioni. Ciò significa che i cerchi sull’anello più esterno manterranno invariate le coordinate Y, mentre le coordinate X saranno tutte impostate su 320. Di conseguenza, la parte rossa si sposta nella 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 X e Y 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 più esterni. 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. Disegnando i cerchi e le linee completiamo questa semplice opera d’arte digitale. Il codice è il seguente: circle(x,y,6); line(x,y,X,Y);
Puoi regolare il valore di suddivisione di PI nel ciclo for per rendere l’opera d’arte digitale più compatta o più diradata.
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’intricata danza tra codice e immaginazione che ha dato vita alla nostra opera, ricordiamo il potere trasformativo della tecnologia nelle mani degli artisti. Ispirati da questo viaggio, invitiamo gli altri creativi a intraprendere la propria odissea nella programmazione, sfruttando gli strumenti e le tecniche che abbiamo scoperto per creare capolavori unici. E per chi desidera portare le proprie creazioni digitali nel mondo fisico, consigliamo vivamente di utilizzare il nostro prodotto - Plotter a penna iDraw - per riprodurre le proprie opere con precisione ed eleganza, colmando il divario tra mondo digitale e fisico alla ricerca dell’eccellenza artistica.
Altri articoli correlati: