Différences

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

--- atelier:processing:start [2023/02/18 09:34]
gweltaz
+++ atelier:processing:start [2023/03/02 23:39] (Version actuelle)
gweltaz
@@ Ligne 358: / Ligne 358: @@
-===== Sketch 04 : Étoile des neiges... =====
+===== Sketch 05 : Étoile des neiges... =====
 Encore un truc de saison, saupoudré de kitshitude, avec cette ode à l'hiver : nous allons faire tomber de flocons. Une façon d'aborder les particules et de s'émerveiller devant son écran.
@@ Ligne 503: / Ligne 503: @@
-===== Pluie =====
+===== Sketch 06 : Pluie =====
-On continue de suivre le fil des saisons avec une idée proposée par Martin et inspirée par un sketch, "[[http://www.polguezennec.fr/archive/12_impluvium/index.html|Impluvium]]" de Pol Guezennec.
+On continue de suivre le fil des saisons avec une idée proposée par Martin et inspirée par un sketch, [[http://www.polguezennec.fr/archive/12_impluvium/index.html|Impluvium]] de Pol Guezennec.
 La particularité de cet exercice (et sa complexité) tient dans le fait qu'il y a deux états à l'animation : le premier lorsque la goutte tombe verticalement, le second lorsque 3 ondes croissent jusqu'à atteindre chacun leur taille maximale.
@@ Ligne 511: / Ligne 511: @@
 Puisqu'il n'y a que ces deux états on pourra utiliser une variable ''etat'' de type ''boolean'' (valeur binaire ''true'' ou ''false'') pour définir l'état actuel de notre euh... élément aqueux.
-L'''etat'' passera de ''false'' (goutte tombante) à ''true'' (onde croissante) lorsque la goutte est tombée d'une hauteur supérieure à la composante ''y'' de la variable ''pg''. ''pg'' est un //vecteur// à deux composantes (''x'' et ''y'') qui définit à la fois le point de départ (sur l'axe horizontal) et le point d'arrivée (sur l'axe vertical) de notre goutte. Les valeurs de ''pg'' seront réinitialisées au hasard à chaque nouveau cycle de notre goutte pour ajouter un peu de variété à l'animation.
+L' ''etat'' passera de ''false'' (goutte tombante) à ''true'' (onde croissante) lorsque la goutte sera tombée d'une hauteur supérieure à la composante ''y'' de la variable ''pg''. ''pg'' est un //vecteur// à deux composantes (''x'' et ''y'') qui définit à la fois le point de départ (sur l'axe horizontal) et le point d'arrivée (sur l'axe vertical) de notre goutte. Les valeurs de ''pg'' seront réinitialisées au hasard à chaque nouveau cycle pour ajouter un peu de variété à l'animation.
+L'illusion n'est pas parfaite car la goutte disparaît instantanément après impact pour laisser place aux ondes. Si on était soucieux du réalisme on tronquerait progressivement la partie inférieur de la goutte qui est au-delà du point d'impact mais bon... L'animation est suffisamment rapide pour qu'on y voit que du feu !
+{{ :atelier:processing:goutte_01.gif?nolink |}}
 <code java>
+// Variables de l'état "goutte"
+float vitesse_goutte = 30;  // Vitesse verticale (en pixel/frame)
+float taille_goutte = 70;
+float inclinaison = 20;     // Décallage horizontal (en pixels) entre le haut et le bas de la goutte
+PVector pg = new PVector(random(500), 370);  // Contient la coordonnée horizontale de la goutte (x)
+                                              // Et la coordonnée verticale du point d'impact final (y)
+PVector p1 = new PVector(pg.x, -taille_goutte);  // Point supérieur de la goutte
+PVector p2 = new PVector(pg.x + inclinaison, 0); // Point inférieur de la goutte
+// Variables de l'état "onde"
+float vitesse_onde = 3;     // Vitesse de croissance des ondes (en pixel/frame)
+float decalage_onde = 40;   // Décallage entre chaque onde (en pixels)
+float taille = 0.0;         // Taille de la première onde, à chaque instant
+float taille2 = -1 * decalage_onde;  // Taille de la deuxième onde, à chaque instant
+float taille3 = -2 * decalage_onde;  // Taille de la troisième onde, à chaque instant
+float taille_max = 150;
+float ratio = 2.5;          // Ratio entre la largeur et la hauteur de l'onde
+boolean etat = false;      // État goutte si "true, état onde si "false"
+void setup() {
+  size(500, 500);
+  stroke(#9D62FF);
+  strokeWeight(2);
+  noFill();
+}
+void draw() {
+  background(255);
+  if (etat == false) {
+    // Goutte d'eau
+    p1.y += vitesse_goutte;      // La goutte descend (verticalement)
+    p2.y += vitesse_goutte;
+    p1.x += vitesse_goutte * inclinaison / taille_goutte;  // La goutte se décalle en fct de son inclinaison
+    p2.x += vitesse_goutte * inclinaison / taille_goutte;
+    line(p1.x, p1.y, p2.x, p2.y);
+    if (p2.y > pg.y) {
+      etat = true;
+      pg.x = p2.x;
+    }
+  } else {
+    // Ondes
+    taille = taille + vitesse_onde;
+    taille2 = taille2 + vitesse_onde;
+    taille3 = taille3 + vitesse_onde;
+    if (taille > 0 && taille < taille_max)
+      ellipse(pg.x, pg.y, ratio * taille, taille);
+    if (taille2 > 0  && taille2 < taille_max)
+      ellipse(pg.x, pg.y, ratio * taille2, taille2);
+    if (taille3 > 0)
+      ellipse(pg.x, pg.y, ratio * taille3, taille3);
+    if (taille3 > taille_max) {
+      taille = 0.0;
+      taille2 = -1 * decalage_onde;
+      taille3 = -2 * decalage_onde;
+      etat = false;
+      pg = new PVector(random(0, 500), random(200, 400));
+      p1 = new PVector(pg.x, -taille_goutte);
+      p2 = new PVector(pg.x + inclinaison, 0);
+    }
+  }
+}
 </code>