Après notre première exploration de P5.js pour les graphiques vectoriels SVG, nous nous aventurons à présent dans l’univers du codage de l’art numérique avec une énergie et un objectif renouvelés. Inspirée par la relation symbiotique entre technologie et expression artistique, notre exploration est alimentée par la demande d’outils innovants pour créer des œuvres au format SVG adaptées aux machines de traçage iDraw. En tant que défenseurs de la créativité par le code, nous souhaitons donner aux artistes numériques les compétences et les connaissances nécessaires pour exploiter pleinement le potentiel de P5.js et ainsi transformer leur imagination en chefs-d’œuvre concrets sur une toile numérique. Besoin de fichiers SVG avec du code ? Téléchargez-les ici>>>
Étape 1 : créer la toile
Pour commencer notre voyage dans l’art numérique codé avec P5.js, nous définissons d’abord la toile sur laquelle notre œuvre prendra vie. À l’aide de la fonction createCanvas() de P5.js, nous définissons une toile de 400 x 400 avec un arrière-plan noir et aucun remplissage, préparant ainsi le terrain pour notre exploration créative.
function setup() {
createCanvas(400,400);
noFill(0);
stroke(255);
}
Étape 2 : dessiner des cercles disposés en carré au centre
Observons attentivement le cercle intérieur composé de petits cercles et cherchons un motif : il se compose de 64 cercles répartis uniformément sur une circonférence de 75 de diamètre. À ce stade, nous pouvons utiliser une boucle for pour définir les coordonnées (X, Y) des centres des petits cercles. Plus précisément, à chaque itération de la boucle, la valeur de « i » augmente de π/32 jusqu’à ce que « i » dépasse la valeur de TAU (qui représente un cercle complet). Le corps de la boucle peut s’écrire comme suit.
let r=75;
let x=sin(i)*r+200;
let y=cos(i)*r+200;
ellipse(x,y,6,6);
Les valeurs X et Y sont des coordonnées polaires. Pourquoi ajouter 200 ? Parce que dans P5.js, l’origine du système de coordonnées se trouve dans le coin supérieur gauche, et les valeurs positives de Y augmentent vers le bas.
Ainsi, pour le positionner au centre, nous devons ajouter la moitié de la largeur et de la hauteur de la toile, soit 200. Utilisez la commande ellipse(x,y,6,6) pour dessiner un cercle de 6 pixels de diamètre. Observons ensuite les cercles de la section centrale. Leurs centres se trouvent sur les côtés d’un carré de 280 de côté, centré sur la toile. Nous pouvons limiter la position des centres des cercles à l’aide d’une instruction IF, comme ceci :
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;
Si la coordonnée X est supérieure à 320, définissez-la sur 320. La coordonnée Y reste inchangée. Cela signifie que les cercles de l’anneau extérieur conserveront leurs coordonnées Y, tandis que leurs coordonnées X seront toutes définies sur 320. La partie rouge se déplace ainsi vers la partie verte, comme indiqué sur le schéma.
De même，if(X<80) X=80;
if(Y>320) Y=320;
if(Y<80) Y=80;
Étape3 : relier les formes des étapes 1 et 2 avec des lignes
Maintenant que les valeurs de X et Y se trouvent sur la circonférence du petit cercle intérieur, et que X et Y représentent les centres des cercles du carré central, nous pouvons les relier à l’aide de la commande line : line(x,y,X,Y);
Étape 4 : dessiner de petits cercles dans l’anneau extérieur et les relier directement aux cercles de l’étape 2
Comme nous avons déplacé les cercles extérieurs vers le centre, ajoutons à présent les cercles de l’anneau extérieur. À ce stade, les valeurs de x et y sont données par r * sin(i) et r = cos(i). Initialement, r valait 78, mais il vaut maintenant 170. Il suffit d’attribuer des valeurs à x et y : x=sin(i)*r+200; y=cos(i)*r+200; Maintenant, x et y représentent les centres des petits cercles extérieurs. Le dessin des cercles et des lignes complète cette œuvre d’art numérique simple. Le code est le suivant : circle(x,y,6); line(x,y,X,Y);
Vous pouvez ajuster la valeur de subdivision de PI dans la boucle for afin de rendre l’œuvre numérique plus compacte ou plus espacée.
Voici le code complet :
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);
}
}
Résumé
En conclusion, notre exploration de l’art numérique codé avec P5.js nous a ouvert les portes d’un univers de créativité illimitée et de possibilités infinies. En réfléchissant à la danse complexe du code et de l’imagination qui a donné vie à notre œuvre, nous nous rappelons le pouvoir transformateur de la technologie entre les mains des artistes. Inspirés par ce voyage, nous invitons les autres créateurs à entreprendre leur propre odyssée du code, en tirant parti des outils et techniques que nous avons découverts pour concevoir leurs chefs-d’œuvre uniques. Et pour ceux qui souhaitent donner une dimension physique à leurs créations numériques, nous recommandons chaleureusement notre produit : les machines de traçage iDraw , afin de reproduire leurs œuvres avec précision et élégance, en comblant le fossé entre les mondes numérique et physique à la recherche de l’excellence artistique.
Autres articles connexes :