Ceci est une ancienne révision du document !
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.
Ne'z eus ket ezhomm staliañ netra evit kregiñ da kodiñ gant p5.js. Tu 'zo deoc'h implij un “éditeur” enlinenn, evel amañ.
Tresañ gant livioù
Tresañ gant livioù (Klikit evit diskouez ar c'hod)
- liviou.js
function setup() { createCanvas(400, 400); } function draw() { background(200, 200, 255); // Livet e vez ar foñs fill(10, 220, 50); // Dibabet e vez un liv nevez (tost da gwer) rect(280, 100, 80, 80); // Treset e vez ur skouergornek fill(255, 60, 200); // Dibabet e vez ul liv nevez (tost da roz) ellipse(width/2, height/2, 100, 200); // Treset un elips }
Ar fonksion background
a servij da livañ ar prenestr grafik penn-da-benn gant al liv o peus c'hoant. Diverket e vo pep tra a oa bet treset araok. Roet e vez dezhi 3 arguzenn : ur c'hementad a ruz (etre 0 ha 255), ur c'hementad a gwer (etre 0 ha 255) hag ur c'hementad a glas (etre 0 ha 255).
Bep gwech ma vez implijet ur fonksion gant livioù e vo roet 3 arguzenn (Ruz, Gwer, Glas) evel-se.
Ar fonksion fill
a vez implijet evit dibab ul liv nevez. Gwellet e vo an disoc'h gant pep fonksion tresañ a teuio warlec'h.
Gant ar fonksion rect
e vez treset ur skouergornek. Roet e vez dezhi 4 arguzenn : position x, position y, ment x ha ment y.
Gant ar fonksion ellipse
e vez treset un elips. Roet e vez dezhi 4 arguzenn : position kreiz x, position kreiz y, ment x, ment y.
Lakaat an traoù da fiñval
Fiñval (Klikit evit diskouez ar c'hod)
- finval.js
function setup() { let x; // Krouiñ ur varienn 'x' let y; // Krouiñ ur varienn 'y' function setup() { createCanvas(400, 400); fill(255, 0, 0); // Dibab al liv ruz evit pep elfenn treset x = 20; // Deraouiñ ar varienn 'x' y = 20; // Deraouiñ ar varienn 'y' } function draw() { background(255); // Livet e vez ar foñs e gwenn kann ellipse(x, y, 50, 50); // Treset e vez ur c'helc'h d'an daveenoù 'x' ha 'y' x += 1; // Kemmet e vez ar varienn 'x' y += 1; // Kemmet e vez ar varienn 'y' }
Amañ e vez krouet div varienn, x
hag y
evit derc'hel daveenoù ur c'helc'h. Bep gwech ma vez peurgaset ar fonksion draw
(30 wech dre eilenn dre ziouer) e vo diverket ar prenest, treset ar c'helc'h gant an daveenoù x
hag y
hag cheñchet an deveenoù un tammig.
Klaskit cheñch an doare ma fiñv ar c'helc'h.
Wrap around
Ur gudenn on eus. Ma'z a re bell hor c'helc'h e vo er maez eus hor prenestr. Implijet e vo ur framm konsision evit gwiriekaat daveenoù ar c'helc'h hag adlakaat anezho el lec'h mat ma'z eont kuit eus ar prenestr.
Wrap Around (Klikit evit diskouez ar c'hod)
- wrap_around.js
function setup() { let x; // Krouiñ ur varienn 'x' let y; // Krouiñ ur varienn 'y' function setup() { createCanvas(400, 400); fill(255, 0, 0); // Dibab al liv ruz evit pep elfenn treset x = 20; // Deraouiñ ar varienn 'x' y = 20; // Deraouiñ ar varienn 'y' } function draw() { background(255); // Livet e vez ar foñs e gwenn kann ellipse(x, y, 50, 50); // Treset e vez ur c'helc'h d'an daveenoù 'x' ha 'y' x += 3.6; // Kemmet e vez ar varienn 'x' y += 2.2; // Kemmet e vez ar varienn 'y' if (x>width) { x -= width; } if (x<0) { x += width; } if (y>height) { y -= height; } if (y<0) { y += height; } }
Gwirieket e vez 4 kondision gant ar stadamant if
: Ma'z eo x
er maez eus an tu kleiz x<0
, ma'z eo x
er maez eus an tu dehou x>width
, ma'z eo y
re izel y>height
ha ma'z eo y
re uhel y<0
.
E-barzh ar variennoù width
ha height
e vez dalc'het ledander hag uhelder ar prenestr grafik.
Merzet ho peus maretez e oa tuet fall ax an uhelder. Gwir eo, war ur skramm, al linenn gant an daveen y=0
a zo en nec'h tout ha pa vez kresket an daveen y
ez a izeloc'h an traoù. Ar poent 0, 0
a zo en nec'h en tu kleiz hag ar poent width, heigh
a zo en traoñ hag en tu dehou eus ar prenestr.
Ur bern objedoù o fiñval
War un urzhiataer, pa vez graet un dra gant un elfenn n'eo ket diaes tre ober ar memes tra gant un niver bras tre a elfennoù eñvel.
Ur bern objedoù (Klikit evit diskouez ar c'hod)
- bern_objedou.js
let x = [4, 53, 233, 12, 300, 210]; // Krouiñ ul listenn 'x' let y = [320, 111, 23, 201, 50, 15]; // Krouiñ ul listenn 'y' function setup() { createCanvas(400, 400); fill(255, 0, 0); // Dibab al liv ruz evit pep elfenn treset } function draw() { background(255); // Livet e vez ar foñs e gwenn kann for (let i=0; i<x.length; i++) { ellipse(x[i], y[i], 50, 50); // Treset e vez ur c'helc'h d'an daveenoù 'x' ha 'y' x[i] += 1; // Kemmet e vez ar varienn 'x' el listenn y[i] += 5; // Kemmet e vez ar varienn 'y' el listenn if (x[i]>width) { x[i] -= width; } if (x[i]<0) { x[i] += width; } if (y[i]>height) { y[i] -= height; } if (y[i]<0) { y[i] += height; } } }
Amañ e vez gwelet ur bern traoù nevez ha galoudus. Implijet e vez listennoù evit derc'hel meur a variennoù dameñvel. Implijet e vez ar rodell for
evit iteriñ war pep talvoud kavet e-barzh al listennoù.
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ù).
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.
let x = []; Krouiñ ul listenn goulo 'x' let y = []; Krouiñ ul listenn goulo 'y' let niver = 500; Niver a elfennoù da grouiñ
Crazy (Klikit evit diskouez ar c'hod)
- crazy_objedou.js
function setup() { createCanvas(400, 400); fill(255, 0, 0); // Dibab al liv ruz evit pep elfenn treset // Amañ e vo leuniet al listennoù dre ur rodell 'for' for (let i=0; i<niver; i++) { x[i] = random(width); y[i] = random(height); } } function draw() { background(255); // Livet e vez ar foñs e gwenn kann for (let i=0; i<x.length; i++) { ellipse(x[i], y[i], 20, 20); // Treset e vez ur c'helc'h d'an daveenoù 'x' ha 'y' x[i] += 1; // Kemmet e vez ar varienn 'x' el listenn y[i] += 10; // Kemmet e vez ar varienn 'y' el listenn if (x[i]>width) { x[i] -= width; } if (x[i]<0) { x[i] += width; } if (y[i]>height) { y[i] -= height; } if (y[i]<0) { y[i] += height; } } }