TONER KEBAB WIKI

Outils pour utilisateurs

Outils du site

Piste:
wiki:flossmanuals:boitier-interactif-01:accueil

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision 		Révision précédente
wiki:flossmanuals:boitier-interactif-01:accueil [2021/09/07 09:06]
damien.muti [Boîtier Interactif : Apprendre la profondeur dans un tableau] 		wiki:flossmanuals:boitier-interactif-01:accueil [2021/10/31 15:23] (Version actuelle)
lise [Boîtier Interactif : Apprendre la profondeur dans un tableau]
Ligne 3: Ligne 3:
   * **Date** : 03/2021   * **Date** : 03/2021
   * **Contexte** : projet "Mallette pédagogique" au Musée des Beaux Arts - 2021   * **Contexte** : projet "Mallette pédagogique" au Musée des Beaux Arts - 2021
-  * **Fichiers** : {{ :wiki:flossmanuals:boitier-interactif-01:presentationdispositifs.pdf |}}+  * **Fichiers** : {{ :wiki:flossmanuals:boitier-interactif-01:liseirrmann_dispositifs.pdf |}}
   * **Lien** :   * **Lien** :
   * **Capteurs/Actionneurs** :   * **Capteurs/Actionneurs** :
Ligne 16: Ligne 16:
  
 ====== Intentions : explication du projet et objectifs ====== ====== Intentions : explication du projet et objectifs ======
-Dans le cadre d'un projet avec le musée des Beaux Arts, l'objectif de ce projet est de créer un boîtier interactif permettant de faciliter la compréhension de la perspective dans un tableau.+==== Le Contexte ==== 
 +Commande de malette pédagogique pour les enfants de 5-6 ans de la part du musée de Beaux Arts de Marseille. 
 +Chaque élève propose des dispositifs qui pourraient s’insérer dans la malette, en se basant sur un ou plusieurs des tableaux proposés par le musée. 
 +==== Les Objectifs ==== 
 +Permettre aux enfants d’appréhender la profondeur, la perspective, qui sont des concepts difficiles pour leur âge. Qu’est ce qui est grand? Petit? Loin? Près? Apprendre aux enfants à se repérer dans l’espace. 
 +==== Le Dispositif ==== 
 +Une tablette / un ordinateur tactile affiche le tableau d’Émile LOUBON. Elle est reliée à un boitier Arduino, avec des sliders, des potentiomètres et un capteur de distance. Ceux-ci permettent à l’utilisateur de déplacer un personnage dans le tableau.  
 + 
 +Il peut le faire de deux différentes manières : 
 + 
 +- de haut en bas : le personnage change de taille et de saturation 
 + 
 +- de droite à gauche : le personnage ne change pas 
 + 
 +Ainsi, le médiateur peut se servir du boitier pour démontrer la perspective aux enfants. 
 +Ensuite, les enfants volontaires peuvent passer à tour de rôle pour s’en servir pendant que leurs camarades se servent du kit tampographique.
 ====== Plans et schémas de fonctionnement ====== ====== Plans et schémas de fonctionnement ======
-A compléter+{{ :wiki:flossmanuals:boitier-interactif-01:dispositifs_dn3.2.jpg?nolink |}}
 ====== Programmes ====== ====== Programmes ======
 ===== Arduino ===== ===== Arduino =====
Ligne 172: Ligne 187:
  
 Le rendu est le suivant : Le rendu est le suivant :
-{{ :wiki:flossmanuals:boitier-interactif-01:aygalades_1.png?800 |}}+{{ :wiki:flossmanuals:boitier-interactif-01:interface.png?800 |}}
  
 Le programme est le suivant : {{ :wiki:flossmanuals:boitier-interactif-01:boitier_interactifprocessing_2.zip |}} Le programme est le suivant : {{ :wiki:flossmanuals:boitier-interactif-01:boitier_interactifprocessing_2.zip |}}
Ligne 185: Ligne 200:
 int[] serialInArray = new int[NbData];    // Where we'll put what we receive int[] serialInArray = new int[NbData];    // Where we'll put what we receive
 int serialCount = 0;                 // A count of how many bytes we receive int serialCount = 0;                 // A count of how many bytes we receive
-int xPerso, yPerso, ChoixPerso, CouleurPerso, ChoixMesureDistance, Distance, sPerso;              // Starting position of the ball+int ChoixPerso, CouleurPerso, ChoixMesureDistance, Distance, SaturPerso;              // Starting position of the ball
 boolean firstContact = false;        // Whether we've heard from the microcontroller boolean firstContact = false;        // Whether we've heard from the microcontroller
-PImage loubon; +float xPerso, yPerso, sPerso; 
-PImage bouvier; +PImage loubon, bouvier,img; 
 +color c =color(#192A76); 
 +int r = 25, g = 42, b=118; 
 +PImage imgMask;
  
 void setup() { void setup() {
   size(1000,570);  // Stage size   size(1000,570);  // Stage size
   noStroke();      // No border on the next thing drawn   noStroke();      // No border on the next thing drawn
-  colorMode(HSB);+
  
   // Initialisation des variables   // Initialisation des variables
   ChoixPerso=0; // Potentiomètre 1   ChoixPerso=0; // Potentiomètre 1
   CouleurPerso = 0; //Potentiomètre 2   CouleurPerso = 0; //Potentiomètre 2
-  xPerso = width/2; // Slider 1 +  xPerso = 0.76*width; // Slider 1 
-  yPerso = height/2; // Slider 2 - Distance +  yPerso = 0.84*height; // Slider 2 - Distance 
-  sPerso = 250; //Taille du personnage +  sPerso = 2000; //Taille du personnage 
-  bouvier = loadImage("Images/Bouviercarre.png"); //Image du personnage+  SaturPerso = 255; 
 +  bouvier = loadImage("Images/test2/BouvierCarre.png"); //Image du personnage
   loubon= loadImage("Images/Loubon_-_Vue_de_Marseille.jpg"); // Image du fond   loubon= loadImage("Images/Loubon_-_Vue_de_Marseille.jpg"); // Image du fond
 +  img = createImage(bouvier.width, bouvier.width, ARGB); 
 +  image(loubon,0,0);   
 +  colorMode(HSB);
   // Print a list of the serial ports, for debugging purposes:   // Print a list of the serial ports, for debugging purposes:
   printArray(Serial.list());   printArray(Serial.list());
 +  imgMask = loadImage("Images/mask.png"); 
 +  imgMask = createImage(bouvier.width, bouvier.width, ARGB); //création d'un masque pour effacer les anciennes images
   // I know that the first port in the serial list on my mac   // I know that the first port in the serial list on my mac
   // is always my  FTDI adaptor, so I open Serial.list()[0].   // is always my  FTDI adaptor, so I open Serial.list()[0].
Ligne 217: Ligne 238:
  
 void draw() { /////////////////////////////////////// r@Lise : ajouter le graphisme... void draw() { /////////////////////////////////////// r@Lise : ajouter le graphisme...
-  background(loubon); 
-  //fill(fgcolor); 
-  // Draw the shape 
-  //ellipse(xPerso, yPerso, 20, 20); 
  
-  if (ChoixPerso == 0) { +  imageMode(CENTER);   
-    bouvier = loadImage("Images/Bouviercarre.png");+  image(loubon,width/2,height/2); 
 +  if (ChoixPerso == 0) {                             //Changer l'image selon la position du potentiomètre 
 +    bouvier = loadImage("Images/test2/BouvierCarre.png"); 
 +    img.mask(imgMask); //Masque l'image précédente lorsqu'on change d'image
   }   }
   if (ChoixPerso == 1){   if (ChoixPerso == 1){
-   bouvier = loadImage("Images/Arbrecarre.png"); +   bouvier = loadImage("Images/test2/ArbreCarre.png");  
 +   img.mask(imgMask);
   }   }
   if (ChoixPerso == 2){   if (ChoixPerso == 2){
-   bouvier = loadImage("Images/Vachecarre.png"); +   bouvier = loadImage("Images/test2/MoulinCarre.png"); 
 +   img.mask(imgMask);
   }   }
-  image(bouvier, xPerso, yPerso, sPerso, sPerso);+  
 +  for (int i = 0; i < bouvier.pixels.length; i++) { 
 +    int r_i = (bouvier.pixels[i] >> 16) & 0xFF;  // Faster way of getting red(argb) 
 +    int g_i = (bouvier.pixels[i] >> 8) & 0xFF;   // Faster way of getting green(argb) 
 +    int b_i= bouvier.pixels[i] & 0xFF;          // Faster way of getting blue(argb) 
 +    if (r_i == r && g_i == g && b_i == b) { 
 +      float h = CouleurPerso; 
 +      //float h = 128; 
 +      float s = SaturPerso; 
 +      float b =brightness(bouvier.pixels[i]); 
 + 
 +      //println("h =" + h + " s=" + s + " b=" +b); 
 + 
 +      img.pixels[i] = color(h, s, b); 
 +    } 
 + 
 +  img.updatePixels(); 
 + 
 +  } 
 + 
 + 
 +  image(bouvier, xPerso, yPerso, sPerso, sPerso); //permet de garder les parties blanches de l'image 
 + 
 +  image(img, xPerso, yPerso, sPerso, sPerso); 
  
 } }
Ligne 259: Ligne 304:
       ChoixPerso=serialInArray[0];       ChoixPerso=serialInArray[0];
       CouleurPerso = serialInArray[1]; //rouge       CouleurPerso = serialInArray[1]; //rouge
-      xPerso = serialInArray[2]*3-50; +      xPerso =0.2*width +2*serialInArray[2]; 
-      yPerso = serialInArray[3]+100; +      yPerso = 0.53*height + serialInArray[3]; 
-      sPerso = serialInArray[3]*2+100;+      sPerso =  12*serialInArray[3]; 
 +      SaturPerso = serialInArray[3];
              
       // print the values (for debugging purposes only):       // print the values (for debugging purposes only):
-      println(ChoixPerso + "\t" + CouleurPerso + "\t" +  xPerso + "\t" + yPerso);+      println(ChoixPerso + "\t" + CouleurPerso + "\t" +  xPerso + "\t" + yPerso + "\t" + sPerso);
              
       // Send a capital A to request new sensor readings: Envoie d'une letter "A" pour signifier à la carte Arduino de renvoyer des données       // Send a capital A to request new sensor readings: Envoie d'une letter "A" pour signifier à la carte Arduino de renvoyer des données
Ligne 272: Ligne 318:
     }     }
   }   }
-} 
-</code> 
- 
-==== Programme de test de couleur sur des images en PNG ==== 
-De manière connexe, des tests sur la manière de modifier la couleur d'un contour SVG/PNG ont été effectués. L'objectif est de pouvoir modifier la couleur d'un contour en jouant sur un potentiomètre, oui ici, avec la sourie. 
- 
-Le rendu est le suivant : 
- 
-{{ :wiki:flossmanuals:boitier-interactif-01:test_png_3.png?400 |}} 
- 
- 
-Le programme Processing est le suivant : {{ :wiki:flossmanuals:boitier-interactif-01:test_png_3.zip |}} 
-<code> 
-/** 
- * Create Image.  
- *  
- * The createImage() function provides a fresh buffer of pixels to play with. 
- * This example creates an image gradient. 
- */ 
- 
-PImage img, imgIntiale; 
-color c =color(#192A76); 
-int r = 25, g = 42, b=118; 
-// Arbre : 2480*2480 
-void setup() { 
-  size(1000, 570); 
-  background(255); 
-  imgIntiale = loadImage("Arbrecarre.png"); 
-  img = createImage(imgIntiale.width, imgIntiale.width, ARGB); 
- 
-  colorMode(HSB); 
- 
-  //float a = map(i, 0, img.pixels.length, 255, 0); 
-  //img.pixels[i] = color(0, 153, 204, a); 
-} 
- 
-void draw() { 
-  background(255); 
-  image(imgIntiale, 0, 0, 250, 250); 
- 
-  for (int i = 0; i < imgIntiale.pixels.length; i++) { 
-    int r_i = (imgIntiale.pixels[i] >> 16) & 0xFF;  // Faster way of getting red(argb) 
-    int g_i = (imgIntiale.pixels[i] >> 8) & 0xFF;   // Faster way of getting green(argb) 
-    int b_i= imgIntiale.pixels[i] & 0xFF;          // Faster way of getting blue(argb) 
-    if (r_i == r && g_i == g && b_i == b) { 
-      float h = map(mouseX, 0, width, 0, 255); 
-      //float h = 128; 
-      float s = saturation(imgIntiale.pixels[i]); 
-      float b = brightness(imgIntiale.pixels[i]); 
- 
-      //println("h =" + h + " s=" + s + " b=" +b); 
- 
-      img.pixels[i] = color(h, s, b); 
-    } 
-    img.updatePixels(); 
-  } 
- 
- 
-  image(img, 260, 260, 250, 250); 
 } }
 </code> </code>
wiki/flossmanuals/boitier-interactif-01/accueil.1630998361.txt.gz · Dernière modification: 2021/09/07 09:06 de damien.muti

Outils de la page

Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Noncommercial 4.0 International
CC Attribution-Noncommercial 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki