![](\"http:\/\/www.lyceelecorbusier.eu\/p5js\/wp-content\/uploads\/sites\/25\/2016\/01\/jardin.jpg\")
<\/a><\/p>\n“Je vais dans le jardin, je vois voir maman ou je vais manger des cerises (dans ce cas il faut que je prenne l’\u00e9chelle), je mange des cerises, je vais faire la sieste…”<\/em><\/strong><\/p>\n Voici la structure de l’histoire. T\u00e9l\u00e9charger les images et les fichiers de bases<\/a><\/p>\n D’abord les variables pour les images et une variable pour l’\u00e9tat initial (attention \u00e0 \u00e9crire etat<\/em> et non \u00e9tat)<\/em>.<\/p>\n Ensuite, une fonction preload()<\/em>\u00a0est cr\u00e9\u00e9e pour le chargement des images.<\/p>\n Dans setup()<\/em> cr\u00e9er le canvas :<\/p>\n Dans la fonction draw()<\/em>\u00a0cr\u00e9er les conditions d’affichage :<\/p>\n Si la variable\u00a0etat<\/em> est \u00e9gale \u00e0 0 alors l’image sortir<\/em> s’affiche, si la variable \u00e9tat<\/em> est \u00e9gale \u00e0 1 c’est l’image jardin<\/em> qui s’affiche… et ainsi de suite pour toutes les \u00e9tats de la variable. Si la touche 0 est utilis\u00e9e l’\u00e9tat = 0 (c’est-\u00e0-dire que l’image “sortir” s’affiche (rappelons que c’est la valeur par d\u00e9faut)) Code \u00e9tape 1<\/a><\/p>\n\t\t \n Tout \u00e7a permet de tester l’affichage de nos images et le bon fonctionnement de nos \u00e9tats.<\/p>\n<\/p><\/div>\n\t\t<\/div>\n <\/p>\n
\nPour rendre l’histoire plus int\u00e9ressante une condition d’acc\u00e8s au cerisier est requise (il faut prendre l’\u00e9chelle).
\nSi le mot (en rose) est saisi dans le champ, le lecteur passe \u00e0 l’\u00e9tape suivante…<\/p>\n![\"\"](\"http:\/\/www.lyceelecorbusier.eu\/p5js\/wp-content\/uploads\/sites\/25\/2016\/01\/nnl2.png\")
<\/p>\n\u00c9tape 1<\/h2>\n
var sortir;\r\nvar jardin;\r\nvar mere;\r\nvar cerisier;\r\nvar manger;\r\nvar sieste;\r\n\r\nvar etat = 0;<\/pre>\n
function preload(){\r\n\u00a0 sortir = loadImage(\"images\/0-sortir.jpg\");\r\n\u00a0 jardin = loadImage(\"images\/1-jardin.jpg\");\r\n\u00a0 mere = loadImage(\"images\/2-mere.jpg\");\r\n\u00a0 cerisier = loadImage(\"images\/3-cerisier.jpg\");\r\n\u00a0 manger = loadImage(\"images\/4-manger.jpg\");\r\n\u00a0 sieste= loadImage(\"images\/5-sieste.jpg\");\r\n}<\/pre>\nfunction setup() {\r\n createCanvas(1280, 800);\r\n}<\/pre>\n if (etat == 0){\r\n\u00a0\u00a0\u00a0 image(sortir, 0,0); \r\n\u00a0}else if (etat == 1) {\r\n\u00a0\u00a0\u00a0 image(jardin, 0,0);\r\n }\r\n...<\/pre>\n
\nAfin de tester le chargement des images, il faut cr\u00e9er une fonction keyTaped() <\/em>pour afficher les images \u00e0 l’aide d’une touche du clavier :<\/p>\nif(key == '0'){\r\n\u00a0\u00a0\u00a0 etat = 0;\r\n\u00a0 }else if (key == '1'){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0etat = 1;\r\n\u00a0\u00a0 \u00a0}<\/pre>\n
\nSi la touche 1 est utilis\u00e9e l’\u00e9tat = 1 (c’est-\u00e0-dire que l’image “jardin” s’affiche)
\net ainsi de suite…. \u00a0Attention l’etat3<\/em> et l’etat4<\/em> appelle la m\u00eame image (le texte diff\u00e9rera par la suite) !<\/p>\n\n\t\tvar sortir;\r\nvar jardin;\r\nvar mere;\r\nvar cerisier;\r\nvar manger;\r\nvar sieste;\r\n\r\nvar etat = 0;\r\n\r\n\r\nfunction preload(){\r\n sortir = loadImage(\"images\/0-sortir.jpg\");\r\n jardin = loadImage(\"images\/1-jardin.jpg\");\r\n mere = loadImage(\"images\/2-mere.jpg\");\r\n cerisier = loadImage(\"images\/3-cerisier.jpg\");\r\n manger = loadImage(\"images\/4-manger.jpg\");\r\n sieste= loadImage(\"images\/5-sieste.jpg\");\r\n}\r\n\r\n\r\nfunction setup() {\r\n createCanvas(1280, 800);\r\n}\r\n\r\nfunction draw() {\r\n background(255);\r\n textSize(20);\r\n if (etat == 0){\r\n image(sortir, 0,0);\r\n }else if (etat == 1) {\r\n image(jardin, 0,0);\r\n }else if (etat == 2) {\r\n image(mere, 0,0);\r\n }else if (etat == 3) {\r\n image(cerisier, 0,0);\r\n }else if (etat == 4) {\r\n image(cerisier, 0,0);\r\n }else if (etat == 5) {\r\n image(manger, 0,0);\r\n }else if (etat == 6) {\r\n image(sieste, 0,0);\r\n }\r\n }\r\n\r\nfunction keyTyped(){\r\n if(key == '0'){\r\n etat = 0;\r\n }else if (key == '1'){\r\n etat = 1;\r\n }else if (key == '2'){\r\n etat = 2;\r\n }else if (key == '3'){\r\n etat = 3;\r\n }else if (key == '4'){\r\n etat = 4;\r\n }else if (key == '5'){\r\n etat = 5;\r\n }else if (key == '6'){\r\n etat = 6;\r\n }\r\n}<\/pre>\n\u00c9tape 2<\/h2>\n