Salut les zestes !
Je vous propose un petit atelier créatif pour réaliser ce type d’images (cliquez pour agrandir) :
Concept
Chaque pixel d’une image se positionne à partir de son abscisse x et de son ordonnée y. En parcourant les pixels dont l’abscisse est multiple de N1 et l’ordonnée multiple de N2, on leurs associe une ellipse de hauteur h, de largeur k et de couleur c. En dessinant ces ellipses dont les paramètres h, k et c dépendent de la position du pixel courant, on peut obtenir de chouettes dessins. Notons également d la distance entre un pixel donné et le milieu de l’image.
La couleur c est encodée en RVBA : c = (Rouge, Vert, Bleu, Alpha ou transparence).
Par exemple, si N1 = 50, N2 = 50, h = 2*d, k = 2*d et c = (0, 255 - d, 255 - d/3, d/2) :
Codes
Voici le pseudo-code de l’exemple ci-dessus :
N1 ← 50
N2 ← 50
largeur ← 500
hauteur ← 500
im ← creer_image(largeur, hauteur)
Pour x de 0 jusqu'à largeur avec un pas de N1
Pour y de 0 jusqu'à hauteur avec un pas de N2
qx ← x - largeur/2
qy ← y - hauteur/2
d ← sqrt(qx*qx + qy*qy)
Si d > 0 ET d < 255
k ← 2*d
h ← 2*d
c ← creer_couleur_RVBA(0, 255 - d, 255 - d/3, d/2)
dessiner_ellipse(x, y, k, h, c)
Fin Si
Fin Pour
Fin Pour
afficher_image(im)
Le même exemple implémenté en PHP, puis Java (avec Processing 3) :
<?php
$N1 = 50;
$N2 = 50;
$width = 500;
$height = 500;
$im = imagecreatetruecolor($width, $height);
for ($x = 0; $x < $width; $x += $N1)
{
for ($y = 0; $y < $height; $y += $N2)
{
$qx = $x - $width/2;
$qy = $y - $height/2;
$d = sqrt($qx*$qx + $qy*$qy);
if ($d > 0 && $d < 255)
{
$color = imagecolorallocatealpha($im, 0, 255-$d, 255-$d/3, $d/2);
imageellipse($im, $x, $y, 2*$d, 2*$d, $color);
}
}
}
header('Content-type: image/png');
imagepng($im);
int N1 = 50;
int N2 = 50;
void setup()
{
size(500, 500);
background(0);
noFill();
for (int x = 0; x < width; x += N1)
{
for (int y = 0; y < height; y += N2)
{
float qx = x - width/2;
float qy = y - height/2;
float d = sqrt(qx*qx + qy*qy);
if (d > 0 && d < 255)
{
float k = 2*d;
float h = 2*d;
color c = color(0, 255 - d, 255 - d/3, 256-d);
stroke(c);
ellipse(x, y, k, h);
}
}
}
}
Codes sources PHP des images présentées :
<?php
$NX = 52;
$NY = 48;
$width = 500;
$height = 500;
$im = imagecreatetruecolor($width, $height);
for ($x = 0; $x < $width; $x += $NX)
{
for ($y = 0; $y < $height; $y += $NY)
{
$qx = $x - $width/2;
$qy = $y - $height/2;
$d = sqrt($qx*$qx + $qy*$qy);
if ($d > 0 && $d < 255)
{
$color = imagecolorallocatealpha($im, $d*$d/50, 255-$d, 255-$d/3, $d/2);
imageellipse($im, $x, $y, (2*$d)%70, $d%90, $color);
}
}
}
header('Content-type: image/png');
imagepng($im);
<?php
$NX = 20;
$NY = 1;
$width = 500;
$height = 500;
$im = imagecreatetruecolor($width, $height);
for ($x = 0; $x < $width; $x += $NX)
{
for ($y = 0; $y < $height; $y += $NY)
{
$qx = $x - $width/2;
$qy = $y - $height/2;
$d = sqrt(0.4*$qx*$qx + ($qx%30)*$qy*$qy);
if ($d > 0 && $d < 255)
{
$color = imagecolorallocatealpha($im, 255-$d, $d, 255, 100);
imageellipse($im, $x, $y, $d, $d, $color);
if ($d < 50)
{
$NX += 0.3;
}
}
}
}
header('Content-type: image/png');
imagepng($im);
<?php
$NX = 4;
$NY = 4;
$width = 500;
$height = 500;
$im = imagecreatetruecolor($width, $height);
for ($x = 0; $x < $width; $x += $NX)
{
for ($y = 0; $y < $height; $y += $NY)
{
$qx = $x - $width/2;
$qy = $y - $height/2;
$d = 1.5*sqrt($qx*$qx - $qy*$qy);
if ($d > 0 && $d < 255)
{
$color = imagecolorallocatealpha($im, 255-$d/1.5, 255-$d/1.5, 0, 95);
imageellipse($im, $x, $y, (150-$d)*sin(0.08*$d-1), cos(0.1*$d)*(180-$d), $color);
}
}
}
header('Content-type: image/png');
imagepng($im);
Pour aller plus loin…
- Au lieu d’associer une ellipse à chaque pixel, associer une couleur, un triangle, un carré, un polygone à n côtés…
- …ou pourquoi pas un morceau de la fractale de Mandelbrot, dont voici un tutoriel sur ZdS.
Cette fractale suit un principe assez similaire : on associe à chaque pixel une suite de nombres complexes. Si cette suite est bornée au pixel courant, on dessine le pixel. - Au lieu de prendre les pixels sur toute l’image, prendre ceux situés sur un cercle et les relier par un segment : ce sujet de @Rockaround a été source d’inspiration pour cet atelier.
- Implémenter l’algorithme dans un max. de langages
- Me donner un retour sur cet atelier.
À vous de jouer, essayez de faire un chouette dessin !