En nous appuyant sur notre précédente incursion dans P5.js pour les graphiques vectoriels SVG, nous nous aventurons désormais dans le domaine du codage artistique numérique avec un nouvel élan et un objectif clair. Motivés par la relation symbiotique entre technologie et expression artistique, notre exploration est alimentée par la demande d’outils innovants pour la création d’œuvres au format SVG adaptées aux iDraw Pen Plotters. En tant que défenseurs de la créativité par le code, nous visons à doter les artistes numériques des compétences et connaissances nécessaires pour exploiter pleinement 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échargez ici>>>
Étape 1 : Création de la toile
Pour commencer notre voyage dans le codage artistique numérique avec P5.js, nous établissons d’abord la toile sur laquelle notre œuvre prendra vie. En utilisant la fonction createCanvas() de P5.js, nous définissons une toile de 400x400 avec un fond noir et sans remplissage, posant ainsi les bases de notre exploration créative.
function setup() {
createCanvas(400,400);
noFill(0);
stroke(255);
}
Étape 2 : Dessiner des cercles disposés en carré au centre
Nous observons attentivement le cercle intérieur composé de petits cercles et remarquons un motif : il est constitué de 64 cercles répartis uniformément le long d’une circonférence de diamètre 75. À 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 ainsi.
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 est en haut à gauche, avec des valeurs Y positives qui augmentent vers le bas.
Donc, pour positionner au centre, il faut ajouter la moitié de la largeur et de la hauteur de la toile, soit 200. On utilise la commande ellipse(x,y,6,6) pour dessiner un cercle de diamètre 6 pixels. Ensuite, regardons les cercles dans la section centrale. Les centres sont situés sur les côtés d’un carré de côté 280, centré sur la toile. Nous pouvons restreindre la position des centres des cercles avec 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, alors on fixe X à 320. La coordonnée Y reste libre. Cela signifie que les cercles de l’anneau extérieur auront leur coordonnée Y inchangée tandis que leur coordonnée X sera fixée à 320. Cela fait que la partie rouge se déplace vers la partie verte, comme montré dans 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 cercle intérieur, et que X et Y représentent les centres des cercles du carré central, nous pouvons les relier avec la commande line : line(x,y,X,Y);
Étape 4, Dessiner les petits cercles de 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, remettons les cercles extérieurs à leur place. À ce stade, les valeurs de x et y sont données par r * sin(i) et r * cos(i). Initialement, r était 78, mais maintenant il est 170. Il suffit d’assigner les 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. Dessiner les cercles et les lignes complète cette simple œuvre d’art numérique. Le code est le suivant : circle(x,y,6); line(x,y,X,Y);
Vous pouvez ajuster la subdivision de PI dans la boucle for pour rendre l’œuvre numérique plus compacte ou plus espacée.
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;
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 du codage artistique numérique avec P5.js a révélé un univers de créativité illimitée et de possibilités infinies. En réfléchissant à la danse complexe entre code et imagination qui a donné vie à notre œuvre, nous sommes rappelés du pouvoir transformateur de la technologie entre les mains des artistes. Inspirés par ce parcours, nous invitons les créatifs à entreprendre leur propre odyssée de codage, en tirant parti des outils et techniques que nous avons découverts pour créer leurs chefs-d’œuvre uniques. Et pour ceux qui souhaitent porter leurs créations numériques dans le monde physique, nous recommandons chaleureusement d’utiliser notre produit - iDraw Pen Plotters - pour rendre leur œuvre avec précision et élégance, comblant ainsi le fossé entre les mondes numérique et physique dans la quête de l’excellence artistique.
Plus d’articles liés :