Différences

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

--- wiki:flossmanuals:boitier-interactif-01:accueil [2021/05/30 08:24]
damien.muti [Programme de test de couleur sur des images en PNG]
+++ 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
   * **Contexte** : projet "Mallette pédagogique" au Musée des Beaux Arts - 2021
-  * **Fichiers** :
+  * **Fichiers** : {{ :wiki:flossmanuals:boitier-interactif-01:liseirrmann_dispositifs.pdf |}}
   * **Lien** :
   * **Capteurs/Actionneurs** :
@@ Ligne 16: / Ligne 16: @@
 ====== 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 ====
-====== Plans et schémas de fonctionnement ======
+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 ======
+{{ :wiki:flossmanuals:boitier-interactif-01:dispositifs_dn3.2.jpg?nolink |}}
 ====== Programmes ======
 ===== Arduino =====
@@ Ligne 170: / Ligne 185: @@
 ==== Programme initial ====
 Le programme Processing a pour but de récupérer les différentes données envoyées par la carte Arduino. Chaque donnée constitue un paramètre d'affichage permettant de sélectionner un personnage, modifier sa position et sa taille dans une image.
+Le rendu est le suivant :
+{{ :wiki:flossmanuals:boitier-interactif-01:interface.png?800 |}}
 Le programme est le suivant : {{ :wiki:flossmanuals:boitier-interactif-01:boitier_interactifprocessing_2.zip |}}
@@ Ligne 182: / Ligne 200: @@
 int[] serialInArray = new int[NbData];    // Where we'll put what 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
-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() {
   size(1000,570);  // Stage size
   noStroke();      // No border on the next thing drawn
-  colorMode(HSB);
   // Initialisation des variables
   ChoixPerso=0; // Potentiomètre 1
   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
+  img = createImage(bouvier.width, bouvier.width, ARGB);
+  image(loubon,0,0);
+  colorMode(HSB);
   // Print a list of the serial ports, for debugging purposes:
   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
   // is always my  FTDI adaptor, so I open Serial.list()[0].
@@ Ligne 214: / Ligne 238: @@
 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){
-   bouvier = loadImage("Images/Arbrecarre.png");
+   bouvier = loadImage("Images/test2/ArbreCarre.png");
+   img.mask(imgMask);
   }
   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 256: / Ligne 304: @@
       ChoixPerso=serialInArray[0];
       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):
-      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
@@ Ligne 272: / Ligne 321: @@
 </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 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>
-Le rendu est le suivant :
-{{ :wiki:flossmanuals:boitier-interactif-01:test_png_3.png?400 |}}
 ====== Réalisation de la maquette ======
 vidéos, photos du making of...

TONER KEBAB WIKI

Outils pour utilisateurs

Outils du site

Différences

Outils de la page