Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
lise_diwan:skeudennou-bev [2019/12/11 18:06] 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 ====== | ====== 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. | 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 216: | Ligne 219: | ||
===== Spritesheets ===== | ===== 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]] |