{"id":1906,"date":"2016-01-01T00:56:41","date_gmt":"2015-12-31T23:56:41","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/insituhacklab\/?p=1906"},"modified":"2016-09-22T15:13:15","modified_gmt":"2016-09-22T14:13:15","slug":"variables","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=1906","title":{"rendered":"\/ p5.js \/ 4 \/ variables & boucles"},"content":{"rendered":"

<\/p>\n

Une variable<\/span> stocke une valeur<\/span> en m\u00e9moire afin<\/span> qu’elle puisse \u00eatre<\/span> utilis\u00e9e par la suite<\/span> dans un programme.
\n<\/span><\/span>Une <\/span>variable peut<\/span> \u00eatre utilis\u00e9e plusieurs fois<\/span> dans un <\/span>programme<\/span>.
\nLa raison<\/span> principale pour\u00a0<\/span>utiliser<\/span> des variables<\/span> est d’\u00e9viter<\/span> de r\u00e9p\u00e9ter<\/span> sa valeur dans le code<\/span>. Le code<\/span> est <\/span>plus facile \u00e0<\/span> mettre \u00e0 jour gr\u00e2ce aux variables <\/span>.
\n<\/span><\/p>\n

var y = 60;\r\nvar d = 100;\r\nfunction setup() {\r\ncreateCanvas(800, 600);\r\n}\r\nfunction draw() {\r\nbackground(200);\r\nellipse(100, y, d, d); \/\/ Gauche\r\nellipse(250, y, d, d); \/\/ Milieu\r\nellipse(400, y, d, d); \/\/ Droite\r\n}<\/pre>\n
Il est simple de modifier les valeurs y<\/em> et d<\/em><\/p>\n
Cr\u00e9er des variables<\/h4>\n
Pour cr\u00e9er une variable il faut lui donner un nom (pertinent avec son usage).
\nUne variable doit \u00eatre d\u00e9clar\u00e9e var<\/em> suivi par son nom<\/em> et sa valeur initiale<\/em>.<\/p>\n
var y = 60;<\/pre>\n
Il est \u00e9galement possible d’\u00e9crire :<\/p>\n
var y;\r\ny = 60;<\/pre>\n
Deux variables avec le <\/span>m\u00eame nom ne peuvent exister dans la m\u00eame partie du programme.<\/span><\/span><\/p>\n
Les variables peuvent \u00eatre plac\u00e9es \u00e0 l’ext\u00e9rieur de setup ()<\/em> et draw ()<\/em>. U<\/span>ne variable \u00e0 l’int\u00e9rieur de setup ()<\/em>, ne peut \u00eatre utilis\u00e9e \u00e0 l’int\u00e9rieur de d<\/em><\/span>raw ()<\/em>. Les<\/span> variables globales<\/strong> (plac\u00e9es en dehors de setup ()<\/em> et draw ()<\/em>, peuvent \u00eatre <\/span>utilis\u00e9es partout dans le programme.<\/span><\/span><\/p>\n
p5.js<\/span><\/strong> a une s\u00e9rie de<\/span> variables sp\u00e9ciales<\/span>. Par exemple,<\/span> la<\/span> largeur<\/strong> et la hauteur<\/strong><\/span> de l’animation<\/span> sont stock\u00e9es dans des<\/span> variables appel\u00e9es<\/span> width<\/em> et height<\/em><\/span>. Ces valeurs sont d\u00e9finies<\/span> par la fonction<\/span> createCanvas<\/span> <\/em>()<\/em>.
\n<\/span><\/span><\/p>\n
function setup() {\r\ncreateCanvas(800, 600);\r\n}\r\nfunction draw() {\r\nbackground(200);\r\nline(0, 0, width, height); \r\nline(width, 0, 0, height);\r\nellipse(width\/2, height\/2, 150, 150);\r\n}<\/pre>\n
Il est possible d’utiliser les op\u00e9rateurs +<\/em> (plus), –<\/em> (moins), \/<\/em> (diviser), et *<\/em> (multiplier)<\/p>\n
var x = 100\r\nvar y = 60;\r\nvar d = 100;\r\nfunction setup() {\r\ncreateCanvas(800, 600);\r\n}\r\nfunction draw() {\r\nbackground(200);\r\nellipse(x, y, d, d); \/\/ Gauche\r\nellipse(x*3, y+100, d, d); \/\/ Milieu\r\nellipse(x*5, y-50, d\/2, d\/2); \/\/ Droite\r\n}<\/pre>\n
Certains calculs existent sous une forme raccourcie :<\/p>\n
x += 10; \/\/ est \u00e9quivalent \u00e0 x = x + 10\r\ny \u2212= 15; \/\/ est \u00e9quivalent \u00e0 y = y - 15\r\n\r\nx++; \/\/ est \u00e9quivalent \u00e0 x = x + 1\r\ny\u2212\u2212; \/\/ est \u00e9quivalent \u00e0 y = y \u2212 1<\/pre>\n
Cr\u00e9er des animations interactives en utilisant la souris avec des variables int\u00e9gr\u00e9es \u00e0 p5.js<\/em> : mouseX<\/em> & mouseY. <\/em><\/p>\n
function setup() {\r\n\u00a0 createCanvas(780, 200);\r\n\u00a0 noStroke();\r\n\u00a0 fill(0,100)\r\n}\r\nfunction draw() {\r\n\u00a0ellipse(mouseX, mouseY, 10,10);\r\n}<\/pre>\n
Rappel : draw<\/em> est ex\u00e9cut\u00e9 60 fois pas seconde.<\/p>\n
Deux autres variables int\u00e9gr\u00e9es permettent de dessiner : pmouseX<\/em> & pmouseY<\/em><\/p>\n
function setup() {\r\ncreateCanvas(780, 200);\r\nstrokeWeight(4);\r\nstroke(255);\r\nbackground(0)\r\n}\r\nfunction draw() {\r\nline(mouseX, mouseY, pmouseX, pmouseY);\r\n}<\/pre>\n
\u00a0Les boucles<\/h4>\n
Les boucles \u00e9vitent les r\u00e9p\u00e9titions qui seraient fastidieuses \u00e0 \u00e9crire.<\/p>\n
function setup() {\r\ncreateCanvas(800, 600);\r\n\r\n}\r\nfunction draw() {\r\nbackground(200);\r\nline(20, 40, 80, 560);\r\nline(80, 40, 140, 560);\r\nline(140, 40, 200, 560);\r\nline(200, 40, 260, 560);\r\nline(260, 40, 320, 560);\r\nline(320, 40, 380, 560);\r\nline(380, 40, 440, 560);\r\nline(440, 40, 500, 560);\r\nline(500, 40, 560, 560);\r\nline(560, 40, 620, 560);\r\nline(620, 40, 680, 560);\r\nline(680, 40, 740, 560);\r\n}<\/pre>\n
La m\u00eame chose peut s’\u00e9crire gr\u00e2ce \u00e0 la boucle for<\/em><\/p>\n
function setup() {\r\ncreateCanvas(800, 600);\r\n}\r\nfunction draw() {\r\nbackground(200);\r\nfor (var i= 20; i<width-60; i += 60){\r\n\u00a0 line(i, 40, i + 60, 560);\r\n\u00a0 }\r\n}<\/pre>\n
Ce sch\u00e9ma illustre le m\u00e9canisme mis en \u0153uvre par la boucle for<\/em> :<\/p>\n
\"for\"<\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
Les boucles for peuvent \u00eatre embo\u00eet\u00e9es :<\/p>\n
function setup() {\r\n\u00a0 createCanvas(800, 600);\r\n}\r\n\r\nfunction draw() {\r\n\u00a0 background(255);\r\n\u00a0 for (var i=20; i<width; i+=20){\r\n\u00a0\u00a0\u00a0 for (var j=20; j<height; j+=20){\r\n\u00a0\u00a0\u00a0 ellipse(i, j, 20, 20);\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 }\r\n}<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"_links":{"self":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/1906"}],"collection":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1906"}],"version-history":[{"count":10,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/1906\/revisions"}],"predecessor-version":[{"id":3159,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/1906\/revisions\/3159"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1906"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1906"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}