Forts de notre précédente incursion dans P5.js pour les graphiques vectoriels SVG, nous nous aventurons désormais dans le domaine du codage de l'art numérique avec une vigueur et une détermination renouvelées. Motivés par la relation symbiotique entre la technologie et l'expression artistique, notre exploration est alimentée par la demande d'outils innovants pour la création d'œuvres d'art au format SVG adaptées aux traceurs à stylet iDraw. En tant que défenseurs de la créativité en matière de codage, nous visons à doter les artistes numériques des compétences et des connaissances nécessaires pour exploiter tout le potentiel de P5.js, transformant ainsi l'imagination en chefs-d'œuvre tangibles sur une toile numérique. Besoin de fichiers SVG avec du code ? Télécharger ici>>>
Étape 1 : Création du canevas
Pour débuter notre aventure dans le codage d'art numérique avec P5.js, nous commençons par établir le canevas sur lequel notre œuvre prendra vie. En utilisant la fonction createCanvas() de P5.js, nous définissons une zone de travail de 400 x 400 avec un fond 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 milieu
Observons attentivement le cercle intérieur composé de petits cercles et trouvons un motif : il est composé de 64 cercles uniformément répartis 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 être écrit comme suit :
soit r=75 ;
soit x=sin(i)*r+200 ;
soit y=cos(i)*r+200 ;
ellipse(x,y,6,6) ;
Les valeurs X et Y sont des coordonnées polaires. Pourquoi ajouter 200 ? Car dans P5.js, l'origine du système de coordonnées se trouve dans le coin supérieur gauche, avec des valeurs Y positives augmentant vers le bas.
Pour le positionner au milieu, nous devons ajouter la moitié de la largeur et de la hauteur du canevas, 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. Les centres se trouvent sur les côtés d'un carré de 280° centré sur la zone de dessin. Nous pouvons restreindre 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 à 320. La coordonnée Y reste libre. Cela signifie que les coordonnées Y des cercles situés sur l'anneau extérieur resteront inchangées, tandis que leurs coordonnées X seront toutes fixées à 320. La partie rouge se déplacera alors vers la partie verte, comme illustré sur le schéma.
De même, si (X<80) X=80;
si(Y>320) Y=320;
si(Y<80) Y=80;
Étape3 : Relier les formes des étapes 1 et 2 par des lignes
Maintenant que les valeurs de X et Y se trouvent sur la circonférence du petit cercle le plus à l'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, DrCréer des petits cercles dans l'anneau extérieur et les relier directement aux cercles de l'étape 2
Puisque nous avons déplacé les cercles extérieurs vers le milieu, ajoutons-les à nouveau. À ce stade, les valeurs de x et y sont données par r * sin(i) et r = cos(i). Initialement, r était de 78, mais il est maintenant de 170. Il suffit d'attribuer des valeurs à x et y : x=sin(i)*r+200 ; y=cos(i)*r+200 ; x et y représentent désormais 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 pour rendre l'œuvre d'art numérique plus compacte ou plus éparse.
Le code complet est le suivant :
function setup() {
createCanvas(400,400);
noFill(0);
stroke(255);
}
function draw() {
background(0);
for(i=0;i<TAU;i+=PI/36){
let r=75;
soit x=sin(i)*r+200;
soit y=cos(i)*r+200;
ellipse(x,y,6,6);
r=78;
x=sin(i)*r+200;
y=cos(i)*r+200;
r=170;
soit X=sin(i)*r+200;
soit Y=cos(i)*r+200;
si(X>320) X=320;
si(X<80) X=80;
si(Y>320) Y=320;
si(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 du codage artistique numérique avec P5.js nous a révélé un monde de créativité et de possibilités illimitées. En réfléchissant à la complexité du code et de l'imagination qui a donné vie à nos œuvres, nous nous rappelons le pouvoir transformateur de la technologie entre les mains des artistes. Inspirés par ce voyage, nous invitons nos collègues créatifs à se lancer dans leur propre odyssée du codage, en exploitant les outils et techniques que nous avons découverts pour créer leurs chefs-d'œuvre uniques. Et pour ceux qui souhaitent transposer leurs créations numériques dans le monde physique, nous recommandons vivement notre produit : iDraw Pen Plotters - pour restituer leurs œuvres avec précision et élégance, comblant ainsi le fossé entre le monde numérique et le monde physique pour une recherche d'excellence artistique.
Autres articles connexes :