{"id":2060,"date":"2016-01-01T00:51:37","date_gmt":"2015-12-31T23:51:37","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2060"},"modified":"2016-02-13T14:10:25","modified_gmt":"2016-02-13T13:10:25","slug":"p5-js-9-charger-des-images-des-typos-des-sons","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2060","title":{"rendered":"\/ p5.js \/ 9 \/ m\u00e9dia : charger des images"},"content":{"rendered":"<p style=\"text-align: center;\"><!--more--><\/p>\n<h4>Les images<\/h4>\n<p><em>p5.js<\/em> permet de charger les formats suivants : <em>jpg, gif, png &amp; svg <\/em><\/p>\n<p>Plusieurs \u00e9tapes sont n\u00e9cessaires pour charger une image dans <em>p5.js<br \/>\n<\/em>_ Placer l&#8217;image dans le dossier du fichier <em>sketch.js<br \/>\n<\/em>_ Cr\u00e9er une variable qui stocke l&#8217;image <em>img<\/em> par exemple<br \/>\n_ Pr\u00e9-charger l&#8217;image dans la variable \u00e0 l&#8217;aide de <em>loadImage <\/em>dans une fonction <em>preload()<br \/>\n<\/em><\/p>\n<p>Une fois ces \u00e9tapes effectu\u00e9es il est possible de placer l&#8217;image dans l&#8217;animation : <em>image(img, 0, 0);<br \/>\n<\/em>La fonction <em>image<\/em> comporte 3 param\u00e8tres : l&#8217;image \u00e0 charger, ses coordonn\u00e9es en x et en y.<\/p>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/p5js\/wp-content\/uploads\/sites\/25\/2016\/01\/soudure.jpg\" rel=\"attachment wp-att-2067\"><img loading=\"lazy\" width=\"400\" height=\"225\" class=\"size-full wp-image-2067 alignleft\" src=\"http:\/\/www.lyceelecorbusier.eu\/p5js\/wp-content\/uploads\/sites\/25\/2016\/01\/soudure.jpg\" alt=\"soudure\" srcset=\"https:\/\/www.lyceelecorbusier.eu\/p5js\/wp-content\/uploads\/sites\/25\/2016\/01\/soudure.jpg 400w, https:\/\/www.lyceelecorbusier.eu\/p5js\/wp-content\/uploads\/sites\/25\/2016\/01\/soudure-300x169.jpg 300w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<pre>var img;\r\nfunction preload() {\r\nimg = loadImage(\"soudure.jpg\");\r\n}\r\nfunction setup() {\r\ncreateCanvas(800, 600);\r\n}\r\nfunction draw() {\r\nimage(img, 0, 0);\r\n}<\/pre>\n<p>Deux param\u00e8tres optionnels permettent de redimensionner l&#8217;image.<\/p>\n<pre>image(img, 0, 0, 200, 200);<\/pre>\n<p>L&#8217;image obtenue est carr\u00e9e mais d\u00e9form\u00e9e. Afin de pallier ce probl\u00e8me il est n\u00e9cessaire de proc\u00e9der ainsi :<\/p>\n<pre>var img;\r\nfunction preload() {\r\nimg = loadImage(\"soudure.jpg\");\r\n}\r\nfunction setup() {\r\ncreateCanvas(800, 600);\r\n}\r\nfunction draw() {\r\n\u00a0\u00a0 \u00a0var aspect = img.height \/ img.width;\r\n\u00a0\u00a0 \u00a0var imageWidth = 200;\r\n\u00a0\u00a0 \u00a0var imageHeight = imageWidth * aspect;\r\nimage(img, 0, 0, imageWidth, imageHeight);\r\n}<\/pre>\n<p>Remplacer <em>imageWidth = 200;<\/em> par<em> imageWidth = mouseX; <\/em><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/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\/2060"}],"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=2060"}],"version-history":[{"count":10,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2060\/revisions"}],"predecessor-version":[{"id":2568,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2060\/revisions\/2568"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2060"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2060"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}