Sulla base della nostra precedente incursione in P5.js per la grafica vettoriale SVG, ci avventuriamo ora nel regno della codifica dell'arte digitale con rinnovato vigore e determinazione. Motivati dalla relazione simbiotica tra tecnologia ed espressione artistica, la nostra esplorazione è alimentata dalla richiesta di strumenti innovativi per la creazione di opere d'arte in formato SVG, su misura per i plotter a penna iDraw. Come sostenitori della creatività nella codifica, 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 la codifica? Scarica qui>>>
Fase 1: Creazione della tela
Per iniziare il nostro viaggio nella codifica di arte digitale con P5.js, definiamo innanzitutto la tela su cui la nostra opera d'arte prenderà vita. Utilizzando la funzione createCanvas() di P5.js, definiamo una tela 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 di piccoli cerchi e troviamo uno schema: è composto da 64 cerchi distribuiti uniformemente lungo una circonferenza con un diametro di 75. A questo punto, possiamo usare un ciclo for per definire le coordinate (X, Y) dei centri dei cerchi piccoli. Nello specifico, 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 come segue.
let r=75;
let x=sin(i)*r+200;
let y=cos(i)*r+200;
ellipse(x,y,6,6);
I valori di 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, ovvero 200. Utilizzando il comando ellipse(x,y,6,6) disegniamo un cerchio con un diametro di 6 pixel. Ora, diamo un'occhiata ai cerchi nella sezione centrale. I centri si trovano sui lati di un quadrato con lato di 280, centrato sulla tela. Possiamo limitare la posizione dei centri dei cerchi usando un'istruzione IF, in questo modo:
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, impostarla su 320. La coordinata Y rimane illimitata. Ciò significa che i cerchi sull'anello più esterno manterranno le loro coordinate Y invariate, mentre le loro coordinate X saranno tutte impostate su 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;
Passaggio3: collega le forme dei passaggi 1 e 2 con delle linee
Ora che i valori di X e Y si trovano sulla circonferenza del cerchio più piccolo più interno 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, Dott.Crea piccoli cerchi nell'anello più esterno e collegali direttamente ai cerchi del passaggio 2
Poiché abbiamo spostato i cerchi più esterni al centro, aggiungiamoli di nuovo. A questo punto, i valori di x e y sono dati da r * sin(i) e r = cos(i). Inizialmente, r era impostato a 78, ma ora è 170. Dobbiamo solo assegnare 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);
È possibile modificare il valore di suddivisione di PI nel ciclo for per rendere le opere d'arte digitali più compatte o più sparse.
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;
sia X=sin(i)*r+200;
sia Y=cos(i)*r+200;
se(X>320) X=320;
se(X<80) X=80;
se(Y>320) Y=320;
se(Y<80) Y=80;
cerchio(X,Y,6);
linea(x,y,X,Y);
x=sin(i)*r+200;
y=cos(i)*r+200;
cerchio(x,y,6);
linea(x,y,X,Y);
}
Riepilogo
In conclusione, la nostra esplorazione della codifica dell'arte digitale con P5.js ha svelato un regno di creatività e possibilità illimitate. Riflettendo sull'intricata danza di codice e immaginazione che ha dato vita alle nostre opere, ci viene ricordato il potere trasformativo della tecnologia nelle mani degli artisti. Ispirati da questo viaggio, invitiamo altri creativi a intraprendere la loro odissea di programmazione, sfruttando gli strumenti e le tecniche che abbiamo scoperto per creare i loro capolavori unici. E per coloro che desiderano portare le proprie creazioni digitali nel mondo fisico, consigliamo vivamente di utilizzare il nostro prodotto - iDraw Pen Plotters - per realizzare le proprie opere d'arte con precisione ed eleganza, colmando il divario tra il mondo digitale e quello fisico alla ricerca dell'eccellenza artistica.
Altri articoli correlati: