• Porteur du projet : Clara DELMON
• Date : 18/01/2017
• Contexte : Macro-projet
• Lien : https://www.behance.net/gallery/43723559/Illusions-dOptique

Reprise de mon kit d'illusions visuelles sur rhodoide (voir proto-mémoire) en version numérique> Processing

  PImage[] images = new PImage[9]; 

  int i=0;

  int x= 0; // position initiale de la fenêtre 
  int y= 0; // position initiale de la fenêtre
  
  float angle = 0; // degrès
  

  void setup (){
  
  size(500,500); 
     
    for(int i=0; i<9; i++) {
    images[i] = loadImage("kitillusions-" + i + ".png");
    image( images[i], random(width), random(height) );
  }
     
     imageMode(CENTER); 
  }
  
   void draw (){ 
     
    
     fill(255);
     rect(0,0,width, height);
     
     
     image( images[i],width/2 , height/2, 500, 500);
     
     
     pushMatrix();
     
     translate(mouseX, mouseY); 
     rotate(radians(angle)); 
     image(images[i],0,0,500,500); 
     
     popMatrix();
     
  }

void keyPressed() { 
      
    if (keyPressed){
          
        if (key ==' '){ 
           background(255); 
            i = (i+1)%9; 
        }
    }
        
     if (key == CODED){
       if (keyCode == LEFT) { 
        angle--; 
     } else if (keyCode == RIGHT) { 
        angle++; 
     } 
  } 
             
}

Ici j'explique les grandes notions du programme sans forcément citer toutes les étapes dans l'ordre:

On veut importer plusieurs images, ici: 9. On déclare donc au début:

PImage[] images = new PImage[9];

puis

int i=0;

Ensuite, plutôt que d'utiliser les listes d'images classiques qui limitent à 4,5 images, on va se servir des boucles for pour que le programme aille chercher directement les images dans data grâce à leur nom:

for(int i=0; i<9; i++) {
images[i] = loadImage(“kitillusions-” + i + “.png”);
image( images[i], random(width), random(height) );
}

Ainsi il va récupérer les images une à une de 0 à 9 grâce à la boucle for, puis il compose le nom des images “kitillusions-” suivi de leur numéro (il faut bien les numéroter de 0 à la dernière si le 6 manque par exemple cela ne fonctionnera pas) et leur format (.jpg, .png…). Puis on fait apparaître les images dans la fenêtre.

Les images sont en png, pour l'image qui reste fixe derrière il faudra donc effacer le fond car sinon on les verra toutes apparaître en même temps:

On lui dit donc de dessiner un rectangle de la taille de la fenêtre et blanc.

fill(255);
rect(0,0,width, height);

Ensuite on lui dit de faire apparaître les images de la liste en 500×500 px et au milieu de la fenêtre:

image( images[i],width/2 , height/2, 500, 500);

Pour l'image mobile qui vient se superposer sur l'autre, on va utiliser pushMatrix et popMatrix pour que les manips suivantes soient employées juste sur les images qu'on veut faire bouger:

pushMatrix(); \\translate(mouseX, mouseY);
rotate(radians(angle));
image(images[i],0,0,500,500);
popMatrix();

Ici on demande à l'image de se déplacer (translater son point d'origine) selon la souris, puis de tourner selon des degrès, ce que l'on a défini au début par= float angle = 0;. Enfin on indique que l'image apparaît initialement à 0, 0 dans la fenêtre, d'une dimension de 500×500 px et selon la liste.

Dans le void setup plus haut on aura indiqué: imageMode(CENTER); afin que la souris “tienne” l'image depuis son centre et non l'angle supérieur gauche (par défaut), cela permet un rotation plus pratique ensuite les commandes qui suivent.

Pour faire défiler les images, on utilise un test de condition “if” dans void keyPressed:

if (keyPressed){
if (key ==' '){
background(255);
i = (i+1)%9;
}
}

Là on lui dit que si j'appuie sur la barre espace (qui s'écrit: ' '), il affiche un fond blanc et change l'image de la liste (augmente d'1, jusqu'à 9, et recommence puisque c'est une boucle).

Puis pour faire tourner les images mobiles avec les flèches du clavier:

if (key == CODED){
if (keyCode == LEFT) {
angle–;
} else if (keyCode == RIGHT) {
angle++;
}
}

Ici on ré-emploie le test de condition if et on précise que si on appuie sur LEFT, il devra aller à l'inverse des aiguilles d'une montre (-), et sinon (else if), si on appuie sur RIGHT, il ira dans le sens des aiguilles d'une montre (+).

Comment faire ces motifs directement sur Processing? Voir tuto Motifs Processing

L'idéal serait d'obtenir un programme qui fonctionnerait sans les images mais plutôt avec les motifs directement générés par processing grâce aux boucles for et à la fonction beginShape().

Pour une plus grande immersion on pourrait imaginer que le programme soit vidéo-projeté sur un grand écran et que l'image supérieure soit manipulée à l'aide d'un joystick pour plus de sensations.

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

Pour la suite de mon macro-projet, j'aimerais développer ce programme sur la kinect. Par un même système d'image fixe et d'image mobile qui vient se superposer pour créer des interférences, j'aimerais rendre le spectateur encore plus actif en le rendant responsable du déplacement de l'image par son propre déplacement. Ainsi l'image bougerait avec lui et il pourrait contrôler le jeu de l'apparition et la disparition d'interférences.

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _