Voici le lien pour télécharger ce site.
Décompresser l'archive dans le répertoire www d'un serveur comme Uwamp ou easyphp il en existe des portables (clé USB).
Si vous avez besoin de davantage d'infos : Stephan.Van-Zuijlen@ac-nice.fr
Voici un petit florilège (non exhaustif..) de ce que l'on peut faire en P5js avec des images.
Tous ces programmes sont réalisables avec Processing (mode P5js) et sans aucun doute transposables à d'autres langages..
Vous pouvez modifier directement les programmes sur cette page (grâce à un widget récupéré sur le net..)
Si d'autres idées vous viennent à l'esprit n'hésitez pas à nous les transmettre..
Certaines fonctions permettent de modifier l'image.
Par exemple on teinte l'image en rouge avec la fonction : tint(255,0,0);
Essayez avec d'autres couleurs.
Il existe également des filtres pour modifier une image: Essayez avec les filtres suivant :
img1.filter(GRAY);
img1.filter(OPAQUE);
img1.filter(INVERT);
img1.filter(ERODE);
img1.filter(POSTERIZE,3);
img1.filter(DILATE);
img1.filter(BLUR,3);
Modification des pixels-Réalisation de filtres
Comme vous le savez une image est "un tableau" de pixels, et chacun d'entre eux est une couleur définie par 4 composantes (r,v,b,a). En Javascript, il s'agit en fait d'une liste où les quatre premiers nombres sont les composantes (r,v,b,a) du premier pixel, les quatre suivants celles du second pixels etc.... Soit :
$$(r_0,v_0,b_0,a_0,r_1,v_1,b_1,a_1,...,r_n,v_n,b_n,a_n)$$ La taille de l'image de la joconde est de 408x320=130560 pixels et la liste correspondante est quatre fois plus grande.
L'instruction loadPixels(); charge dans une liste les composantes (r,v,b,a) de tous les pixels de l'image.
L'instruction updatePixels(); actualise les changements faits dans la liste.
Le programme suivant met à 255 toutes les composantes rouges des pixels.
Mettre à 100 toutes les composantes bleues des pixels de l'image.
Modifiez les trois composantes (r,v,b) des pixels.
Imaginez une transformation des couleurs de l'image.
Ce programme réalise le filtre "INVERT".
On peut imaginer d'autres combinaisons...
Un autre exemple: Mettre une image en niveaux de gris. Il faut pour chaque pixels remplacer les composantes (r,v,b) par leur moyenne.
Transformations géométriques
On peut modifier l'image en changeant de place les pixels (la renverser, l'inverser).
Pour inverser l'image, il faut imaginer la liste comme un tableau et inverser les pixels sur la moitié de la largeur..
Avec un peu d'animation
Dans cet exemple, on utilise la fonction draw() qui s'éxécute (60 fois par seconde par défaut) 20 fois dans ce programme, pour afficher une zone de l'image avec le filtre "INVERT".
Voilà une version "pointilliste" de la joconde.
Filtrage par seuil
Modifier les couleurs suivant une condition.
On utilise ici le fait que la composante rouge d'un pixel de coordonnées (x;y) est repérée par l'indice (x+y*largeur de l'image)*4 de la liste.
Condition que vous pouvez modifier à souhait..
Le filtrage par seuil (Treshold)
Modifier le seuil à souhait...
Convolution...
la plupart des filtres, comme la détection des contours, consiste à appliquer à chaque pixel une combinaison linéaire de lui même et de ses 8 voisins.
Le programme proposé permet de faire une détection des contours (ou une mise en relief...).
On crée une image (à la bonne taille) vide que l'on remplit avec les pixels modifiés.
Celui-ci utilise un filtre médian pour éliminer le "bruit" sur une image, chaque pixel est remplacé par la médiane de la série constituée du pixel et de ses huit voisins.
Avec du son
On peut également faire varier les pixels d'une image en fonction d'une musique.
Cryptage
Dans ce programme, on a crypté les pixels avec un cryptage affine.
Pour le décryptage, il suffit de remplir l'image3(img3) avec les composantes des pixels de l'image2(img2) avec la formule :
img3.pixels[i]=(img2.pixels[i]*94-188)%255; (à réitérer pour les autres composantes) Et de faire afficher l'image 3 aux coordonnées (272,320) image(img3,272,320); par exemple..
Des modifications plus sophistiquées
Dans ce programme, on modifie les valeurs des pixels en faisant en sorte qu'ils ne peuvent prendre que deux valeurs 0 ou 255 (pour la variable "factor=1" ); 3 valeurs(0, 127 ou 255) pour la variable "factor=2" etc...
En gros on transforme l'image avec le programme précédent
On détermine l'erreur engendrée en faisant la différence entre les anciens pixels et les nouveaux
On applique à certains une transformation
Voici le rendu et le code fait avec Processing (en java), après avoir suivi la vidéo de Daniel Shiffman qui est une source d'inspiration quasi inépuisable...
// Daniel Shiffman
// http://codingtra.in
// http://patreon.com/codingtrain
// Floyd Steinberg Dithering
// Edited Video: https://youtu.be/0L2n8Tg2FwI
PImage joconde;
int factor = 1;
void setup() {
size(816, 320);
joconde = loadImage("joconde.png");
image(joconde, 0, 0);
joconde.filter(GRAY);
joconde.loadPixels();
for (int y = 0; y < joconde.height-1; y++) {
for (int x = 1; x < joconde.width-1; x++) {
color pix = joconde.pixels[index(x, y)];
float oldR = red(pix);
float oldG = green(pix);
float oldB = blue(pix);
int newR = round(factor * oldR / 255) * (255/factor);
int newG = round(factor * oldG / 255) * (255/factor);
int newB = round(factor * oldB / 255) * (255/factor);
joconde.pixels[index(x, y)] = color(newR, newG, newB);
float errR = oldR - newR;
float errG = oldG - newG;
float errB = oldB - newB;
int ind = index(x+1, y );
color c = joconde.pixels[ind];
float r = red(c);
float g = green(c);
float b = blue(c);
r = r + errR * 7/16.0;
g = g + errG * 7/16.0;
b = b + errB * 7/16.0;
joconde.pixels[ind] = color(r, g, b);
ind = index(x-1, y+1 );
c = joconde.pixels[ind];
r = red(c);
g = green(c);
b = blue(c);
r = r + errR * 3/16.0;
g = g + errG * 3/16.0;
b = b + errB * 3/16.0;
joconde.pixels[ind] = color(r, g, b);
ind = index(x, y+1);
c = joconde.pixels[ind];
r = red(c);
g = green(c);
b = blue(c);
r = r + errR * 5/16.0;
g = g + errG * 5/16.0;
b = b + errB * 5/16.0;
joconde.pixels[ind] = color(r, g, b);
ind = index(x+1, y+1);
c = joconde.pixels[ind];
r = red(c);
g = green(c);
b = blue(c);
r = r + errR * 1/16.0;
g = g + errG * 1/16.0;
b = b + errB * 1/16.0;
joconde.pixels[ind] = color(r, g, b);
}
}
joconde.updatePixels();
image(joconde, 408, 0);
}
int index(int x, int y) {
return x + y * joconde.width;
}
void draw() {
}
La version en P5js, très inspirée de ce que j'ai vu là
Création d'images..
On peut aussi créer des images et dans ce domaine notre imagination est notre seule limite...
Un premier exemple, une image qui change toute les secondes.
Cliquez dans le canvas et appuyer sur la touche " s " pour stopper la boucle...
La multiplication modulaire
Sur un cercle on place n points équitablement répartis, puis on relie ces points au résultat (modulo n) de leur multiplication avec un entier p... C'est de l'art-itmétique.
Voici la table de 2 modulo 100, essayez les tables de 3, 4, 6...
Une vidéo de Micmaths sur la multiplication modulaire
Voici d'autres exemples pris sur le site de b2renger
La taille des figures dépend de la "vitesse" de la souris...
