Basandoci sulla nostra precedente esplorazione di P5.js per grafica vettoriale SVG, ora ci avventuriamo nel mondo della programmazione dell’arte digitale con rinnovato vigore e scopo. Motivati dalla relazione simbiotica tra tecnologia ed espressione artistica, la nostra esplorazione è alimentata dalla domanda di strumenti innovativi per la creazione di opere d’arte in formato SVG pensate per iDraw Pen Plotters. Come sostenitori della creatività tramite il coding, miriamo 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. Hai bisogno di file svg con codice? Scarica qui>>>
Passo 1: Creare la Tela
Per iniziare il nostro viaggio nella programmazione dell’arte digitale con P5.js, prima definiamo la tela su cui la nostra opera prenderà vita. Utilizzando la funzione createCanvas() di P5.js, definiamo una tela di 400x400 con sfondo nero e senza riempimento, preparando così il terreno per la nostra esplorazione creativa.
function setup() {
createCanvas(400,400);
noFill(0);
stroke(255);
}
Passo 2: Disegnare Cerchi Disposti in un Quadrato al Centro
Osserviamo attentamente il cerchio interno di piccoli cerchi e troviamo un motivo: è 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. In particolare, per 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 così.
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 è nell’angolo in alto a sinistra, con valori Y positivi che aumentano verso il basso.
Quindi, per posizionarlo al centro, dobbiamo aggiungere metà della larghezza e dell’altezza della tela, cioè 200. Usiamo il comando ellipse(x,y,6,6) per disegnare un cerchio con diametro di 6 pixel. Passiamo ora ai 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 usando un’istruzione IF, così:
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, allora impostiamo X a 320. La coordinata Y rimane senza restrizioni. Questo significa che i cerchi nell’anello più esterno avranno le loro coordinate Y invariate mentre le coordinate X saranno tutte impostate a 320. Questo fa sì che la parte rossa si sposti verso la parte verde, come mostrato nel diagramma.
Analogamente, if(X<80) X=80;
if(Y>320) Y=320;
if(Y<80) Y=80;
Passo3 , Collegare le Forme dei Passi 1 e 2 con Linee
Ora che i valori di X e Y si trovano sulla circonferenza del cerchio più interno di piccoli cerchi, e X e Y rappresentano i centri dei cerchi nel quadrato centrale, possiamo collegarli usando il comando linea: line(x,y,X,Y);
Passo 4, Disegnare Piccoli Cerchi nell’Anello Più Esterno e Collegarli Direttamente ai Cerchi del Passo 2
Poiché abbiamo spostato i cerchi più esterni verso il centro, aggiungiamo di nuovo 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 78, 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 regolare il valore di suddivisione di PI nel ciclo for per rendere l’opera digitale più compatta o più sparsa.
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 svelato un mondo di creatività illimitata e possibilità infinite. Riflettendo sulla danza intricata tra codice e immaginazione che ha dato vita alla nostra opera, siamo ricordati del potere trasformativo della tecnologia nelle mani degli artisti. Ispirati da questo viaggio, invitiamo altri creativi a intraprendere la propria odissea di coding, sfruttando gli strumenti e le tecniche che abbiamo scoperto per creare i loro capolavori unici. E per chi desidera portare le proprie creazioni digitali nel mondo fisico, consigliamo caldamente di utilizzare il nostro prodotto - iDraw Pen Plotters - per realizzare le loro opere con precisione ed eleganza, colmando il divario tra mondo digitale e fisico nella ricerca dell’eccellenza artistica.
Altri articoli correlati: