TP No 2

Touchons aux pixels

Nous vous proposons de créer un nouveau programme avec une fonction mouseMoved() qui modifie un pixel de l'écran

void setup() {
  background(0);
  size(640, 480);
  noLoop();
}

void draw(){
}

void mouseMoved() {
  loadPixels();
  pixels[640*mouseY+mouseX] = color(255, 255, 0);
  updatePixels();
  redraw();
}

Questions :

Ajoutez une deuxième ligne de modification : pixels[640*mouseY+640-mouseX] = color(255, 0, 255);
Remplacez les 640 par la variable faites pour ça.
Changez le code pour faire une symetrie autour d'un axe horizontal
Modifiez les valeurs dans color(...) pour afficher des pixels Magenta
Déplacer tout le code de dessin dans la fonction draw() et enlevez le noLoop() de setup
Sauvegardez la position de la souris dans deux variables globales(px et py) et dessinez une ligne blanche sur fond noir entre deux positions successives (vu en cours).
Que se passe t-il quand vous maintenez le bouton de la souris enfoncé ?

Résultats Attendus

Questions subsidiaires :

Arrétez de dessiner quand la souris est cliqué en modifient une nouvelle variable dans mousePressed() et mouseReleased()
Dessinez de deux couleurs selon que le bouton de la souris soit enfoncé ou non.

Déposons une image sur Processing

Sous Processing il suffit d'utiliser le menu sketch->"Afficher le dossier" pour ouvrir le répertoire ou se situe votre programme. Il suffit de glisser-deposer votre image dedans en notant bien son nom exact (avec les majuscules) tel que 256cols.gif

Affichons cette image

Nous vous proposons de remplacer le code par le programme Processing suivant (faites un copier-coller). Attention, le nom du repertoire (p.2418) et le nom de l'image (256cols.gif) doivent correspondre à votre image à VOUS. Si le depot de fichier ne fonctionne pas il est toutefois possible d'utiliser p.2418 qui est l'image de l'enseignant

Sous Processing :

PImage img;
void setup() {  // this is run once.
  size(640, 480);
  noLoop();
  img = loadImage("256cols.gif");
}
void draw() {
  stroke(0, 0, 0);
  background(255, 255, 255);
  image(img, 0, 0);
  line(0, 0, width, height);
  line(0, height, width, 0);
}

une zone de dessin de 640x480 pixels

2 lignes diagonales sur une image de fond

résultat attendu

Créez une boucle qui affiche des lignes horizontales par dessus toute l'image
Utilisez une couleur à quatre composantes stroke (0, 255, 0, 128); afin de rendre les lignes transparentes.

Manipulation des pixels

Nous allons maintenant apprendre à manipuler les pixels de l'image. Compte tenu de certaines limitations il n'est pas possible de modifier les pixels de l'image img que nous avons chargée en mémoire. Nous allons donc en premier lieu retailler l'image afin de la rendre manipulable. Dans un second temps nous allons parcourir tous les pixels de l'image par des boucles imbriquées. Enfin nous accédons au n^ième pixel en trouvant l'indice correspondant à i et j;


PImage img;

void setup() {  // this is run once.
  size(640, 440);
  img = loadImage("cb4.png");
  img.resize(img.width, img.height);
  img.loadPixels();
  for (int j=0; j < img.height; j=j+2) {
    for (int i=0; i < img.width; i=i+2) {
      img.pixels[i+j*img.width] = color(0,0,0);
    }
  }
  img.updatePixels();
  noLoop();
}

void draw() {
  image(img, 0, 0);
}

Modifier le programme pour couvrir tous les pixels du quartier haut-gauche de l'image
Modifier le programme pour remplacer la couleur noire par une couleur dont le r, le g et/ou le b dependantent de i et/ou de j (jouer un peu avec !)
L'image s'affiche actuellement en 0,0,Affichez la en width/2, height/2 ou en mouseX, mouseY
Trouvez comment bien centrer l'image (sur la souris ou sur l'écran)

des points noirs partout sur l'image

le quartier haut-gauche complètement couvert

un dégradé de couleur dans le quartier haut-gauche

Modification de l'image

Nous allons maintenant apprendre à modifier les pixels de l'image. Pour cela nous extrayons les composantes RVB de chaque pixel de l'image. Dans un second temps nous modifions la composante rouge en la divisant par 4 (car les valeurs de r doivent rester entre 0 et 255) Enfin nous recomposons le pixel à avec la fonction color()


PImage img;

void setup() {  // this is run once.
  size(640, 440);
  img = loadImage("cb4.png");
  img.resize(img.width, img.height);
  img.loadPixels();
  for (int j=0; j < img.height; j=j+1) {
    for (int i=0; i < img.width; i=i+1) {
      int c = img.pixels[i+j*img.width];
      float a = alpha(c);
      float r = red(c);
      float g = green(c);
      float b = blue(c);
      r=r/4;
      img.pixels[i+j*img.width] = color(r, g, b, a);
    }
  }
  img.updatePixels();
  noLoop();
}

void draw() {
  image(img, (width-img.width)/2, (height-img.height)/2);
}

Modifier le programme pour "booster" le rouge au lieu de le diminuer (ATTENTION !, r ne doit jamais depasser 255).
Modifier le programme pour ne booster le rouge QUE si la composante rouge est la plus forte des trois.
Calculer la luminosité lum0=(r+g+b)/3; ou bien lum2=max(max(r,g), b); et remplacer r, g et b par lum0 ou lum2 dans la reconstruction du pixel.

Trois modifications

r=r/4;

g=g/4;

b=b/4;

Résultats attendus

Questions subsidiaires :

Rendre l'image deux fois plus sombre.
Rendre l'image deux fois plus lumineuse.
Intervertir r, g et b par une permutation circulaire (tester les 2 cas possibles).
Remplacer les pixels blancs par des pixels transparents (if(...) {a=0;})
Faire un filtre d'inverse vidéo (r=255-r; g=255-g; b=255-b;)
Inverser l'image (effet miroir droite-gauche) en utilisant des indices différents dans la récuperation de c et dans la reconstruction du pixel.
A partir d'une image de marylin créez 9 filtres différents et Affichez 9 versions de marilyn !.

Résultats Attendus