Différences

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

--- lise_diwan:skeudennou-bev [2019/12/04 16:17]
gweltaz [Let's get Crazy !]
+++ lise_diwan:skeudennou-bev [2023/02/19 21:09] (Version actuelle)
gweltaz
@@ Ligne 1: / Ligne 1: @@
+**Cette page peut être supprimée**
 ====== Skeudennoù-bev gant p5.js ======
 Implijet e vo ar yezh p5.js evit deskiñ tresañ traoù war ar skramm. Ar yezh p5.js a zo diazezet war ar yezh javascript. Graet eo evit bezañ peurgaset diouzh ur merdeer hag aes eo da enframmañ ar poelladoù skrivet ganti e-barzh ur bajenn Web.
@@ Ligne 163: / Ligne 166: @@
 Menozioù : Klaskit krouiñ 2 listennad nevez ''tizh_x'' ha ''tizh_y'' evit derc'hel un tizh disheñvel evit pep kelc'h. Al listennoù-se a vo ar memes ment eget ar re all (6 elfenn ma n'ho peus ket cheñchet an traoù).
+[[https://editor.p5js.org/lise_diwan/sketches/vSCogDPDm]]
 ===== Let's get Crazy ! =====
 Termeniñ pep kelc'h dre dorn a zo skuizus. Penaos ober evit termeniñ un niver bras tre a kelc'hoù (pe traoù all) en un doare aes ? Implijet e vo ar rodell ''for'' en-dro evit-se.
+<accordion>
+<panel title="Crazy (Klikit evit diskouez ar c'hod)">
+<code javascript crazy_objedou.js>
 let x = [];  // Krouiñ ul listenn goulo 'x'
 let y = [];  // Krouiñ ul listenn goulo 'y'
 let niver = 500;  // Niver a elfennoù da grouiñ
-<accordion>
-<panel title="Crazy (Klikit evit diskouez ar c'hod)">
-<code javascript crazy_objedou.js>
 function setup() {
   createCanvas(400, 400);
@@ Ligne 211: / Ligne 216: @@
 </accordion>
-[[https://editor.p5js.org/lise_diwan/sketches/vSCogDPDm]]
+[[https://editor.p5js.org/lise_diwan/sketches/a7_tCZmO0]]
+===== Spritesheets =====
+Gant ar yezh p5.js ez eus tu enframmañ skeudennoù gif bev met pa 'vez kalz a skeudennoù bev disheñvel da implij e-barzh ho poellad e c'hell dont da vezañ luziet buhan a walc'h.
+Un doare all d'ober a zo lakaat ur bern tresadennoù bihan war ar memes skeudenn, anvet ur "spritesheet". Evit krouiñ ur skeudenn bev e vo diskouezet nemet un lodennig eus ar skeudenn bras bep gwech.
+Pouezus e vefe eus ar memes ment pep skeudennig eus ar spritesheet.
+Ur skouer spritesheet eus ar re gentañ e istor mab den :
+{{ https://upload.wikimedia.org/wikipedia/commons/4/4a/Muybridge_race_horse_gallop.jpg?nolink&400 }}
+<accordion>
+<panel title="Spritesheet (Klikit evit diskouez ar c'hod)">
+<code javascript spritesheet.js>
+let img;
+let img_size = 32;
+let x_pos, y_pos;
+let last_frame;
+const frame_dur = 800;
+const animation = [[0, 3], [1, 3]];
+let frame_i;
+function preload() {
+  img = loadImage("data/toto.png");
+}
+function setup() {
+  createCanvas(400, 400);
+  imageMode(CENTER);
+  x_pos = width/2;
+  y_pos = height-4*img_size;
+  last_frame = millis();
+  frame_i = 0;
+}
+function draw() {
+  background(255);
+  if (millis() - last_frame >= frame_dur) {
+    frame_i += 1;
+    last_frame = millis();
+    if (frame_i >= animation.length) {
+      frame_i = 0;
+    }
+  }
+  image(img, x_pos, y_pos,
+        img_size*4, img_size*4,
+        img_size*animation[frame_i][0],
+        img_size*animation[frame_i][1],
+        img_size, img_size);
+}
+</code>
+</panel>
+</accordion>
+[[https://editor.p5js.org/lise_diwan/sketches/gpLMaorbY5]]
+===== Aotomata =====
+Setu an teknik diwezhañ a vo gwelet evit krouiñ ur sekañs skeudennoù-bev o cheñch ingal.
+Gant pep animasion e klot ur stad. Pep stad a zo liammet gant stadoù all ha pa 'vez cheñchet stad ne c'heller nemet mont betek ar stadoù liammet d'ar stad diwezhañ.
+Pa vez loc'het ar poellad e vez aet d'ar stad a-orin (an hini gwer war ar skeudenn). Pa 'vez erruet d'ar stad fin (an hini ruz) e vez echu ar c'hoari ("Game Over").
+Evit cheñch stad e vez tenet un niverenn er sort (evel gant un diñs) hag hervez an disoc'h e vez aet betek ur stad pe ur stad all.
+{{ :lise_diwan:aotomata.png?nolink&400 |}}
+<accordion>
+<panel title="Aotomata (Klikit evit diskouez ar c'hod)">
+<code javascript aotomata.js>
+// Listenn ar skeudennoù evit pep animasion
+const anim_dihunet = [[6, 1]];
+const anim_dihun = [[0, 0]];
+const anim_bazailhat = [[4, 4], [4, 4], [4, 4]];
+const anim_kousket = [[0, 3], [1, 3]];
+const anim_skrab = [[5, 2], [6, 2], [5, 2], [6, 2], [5, 2], [6, 2]];
+const anim_marv = [[6, 4]];
+// Ment pep skeudennig (e pixels)
+const img_size = 32;
+// Padelez pep skeudenn en animasion
+const frame_dur = 400;
+// Roadennoù all...
+let anim;
+let frame_i;
+let last_frame;
+let stad;
+let rand;
+let img;
+let x_pos, y_pos;
+function preload() {
+  // Karg ar spritesheet e memor an urzhiataer
+  img = loadImage("data/toto.png");
+}
+function setup() {
+  createCanvas(400, 400);
+  imageMode(CENTER);
+  x_pos = width/2;
+  y_pos = height-4*img_size;
+  last_frame = millis();
+  frame_i = 0;
+  stad = "DIHUNET";
+  anim = anim_dihunet;
+}
+function draw() {
+  background(255);
+  if (millis() - last_frame >= frame_dur) {
+    // Tremen d'ar skeudenn da-heul
+    frame_i += 1;
+    last_frame = millis();
+    if (stad == "DIHUNET") {
+      rand = int(random(20));
+      if (rand == 0) {
+        // Bazailhat
+        anim = anim_bazailhat;
+        frame_i = 0;
+        stad = "BAZAILHAT";
+      } else if (rand == 1) {
+        // En em skrabañ
+        anim = anim_skrab;
+        frame_i = 0;
+        stad = "SKRAB";
+      }
+    } else if (stad == "DIHUN") {
+      anim = anim_dihunet;
+      frame_i = 0;
+      stad = "DIHUNET";
+    } else if (stad == "BAZAILHAT") {
+      // Gortoz e vefe echu an animasion araok cheñch stad
+      if (frame_i == anim.length) {
+        if (random(6) < 1.0) {
+          // Mont da gousket
+          anim = anim_kousket;
+          frame_i = 0;
+          stad = "KOUSKET";
+        } else {
+          // Dihunet
+          anim = anim_dihunet;
+          frame_i = 0;
+          stad = "DIHUNET";
+        }
+      }
+    } else if (stad == "KOUSKET") {
+      rand = int(random(100));
+      if (rand == 0) {
+        anim = anim_marv;
+        frame_i = 0;
+        stad = "MARV";
+      } else if (rand < 6) {
+        anim = anim_dihun;
+        frame_i = 0;
+        stad = "DIHUN";
+      }
+    } else if (stad == "SKRAB") {
+      if (frame_i == anim.length) {
+        anim = anim_dihunet;
+        frame_i = 0;
+        stad = "DIHUNET";
+      }
+    } else if (stad == "MARV") {
+      anim = anim_marv;
+    }
+    // Distreiñ en penn kentañ an animation ma'z eo echu
+    if (frame_i >= anim.length) {
+      frame_i = 0;
+    }
+  }
+  // Tresañ ar skeudenn
+  image(img, x_pos, y_pos,
+        img_size*4, img_size*4,
+        img_size*anim[frame_i][0],
+        img_size*anim[frame_i][1],
+        img_size, img_size);
+}
+</code>
+</panel>
+</accordion>
+[[https://editor.p5js.org/lise_diwan/sketches/pOJwECXkE]]