{"id":2011,"date":"2016-01-01T00:53:56","date_gmt":"2015-12-31T23:53:56","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2011"},"modified":"2016-02-13T14:09:34","modified_gmt":"2016-02-13T13:09:34","slug":"p5-js-7-map-dist","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2011","title":{"rendered":"\/ p5.js \/ 7 \/ map() & dist()"},"content":{"rendered":"

<\/p>\n

\u00a0fonction map()<\/h4>\n

La fonction map()<\/em> permet de transformer une valeur d’une plage de valeur \u00e0 une autre plage de valeur.
\nLe canvas utilis\u00e9 est de 780px de large. Afin de cr\u00e9er un d\u00e9grad\u00e9 de gris on dispose de 255 valeurs de gris. Afin d’obtenir un d\u00e9grad\u00e9 homog\u00e8ne il faut utilis\u00e9 la fonction map();
\nLa fonction map()<\/em> comporte 5 valeurs map(ce \u00e0 quoi s’applique la fonction, minimum que peut avoir cet \u00e9l\u00e9ment, son max, le minimum dans la nouvelle plage, le maximum dans la nouvelle plage);<\/em><\/p>\n

function setup() {\r\ncreateCanvas(780, 200);\r\nstrokeWeight(4);\r\n}\r\nfunction draw() {\r\n\u00a0background(100);\r\nvar grey = map(mouseX, 0, 780, 0, 255);\r\nfill(grey)\r\n\u00a0ellipse(mouseX,mouseY,50,50);\r\n}<\/pre>\n
Dans cet exemple map()<\/em> s’applique \u00e0 mouseX, le min et le max sont 0 et 780px (ou width), la nouvelle plage de valeur est 0 et 255.<\/p>\n
fonction dist()<\/h4>\n
Cette fonction permet de simplifier un certains calculs. Dans l’exemple ci-dessous il s’agit de r\u00e9aliser un programme qui permet de modifier la couleur du fond \/ background quand on clique dans le cercle situ\u00e9 au centre.<\/p>\n
function setup() {\r\ncreateCanvas(780, 780);\r\nstrokeWeight(4);\r\n}\r\nfunction draw() {\r\n\u00a0background(0);\r\n\u00a0fill(255);\r\n\u00a0noStroke();\r\n\u00a0ellipse(width\/2, height\/2, 200, 200);\r\n}<\/pre>\n
Utilisons une variable qui mesure la distance entre le centre de l’ellipse et la position de la souris. Cette distance doit \u00eatre inf\u00e9rieure au rayon.
\ndist (x, y, mouseX, mouseY) < rayon <\/em><\/p>\n
Utilisons une autre variable pour la couleur du fond var bg = 0;<\/em><\/p>\n
var bg = 0;\r\n\r\nfunction setup() {\r\ncreateCanvas(780, 780);\r\nstrokeWeight(4);\r\n}\r\nfunction draw() {\r\n\u00a0background(bg);\r\n\u00a0fill(255);\r\n\u00a0noStroke();\r\n\u00a0ellipse(width\/2, height\/2, 200, 200);\r\n\u00a0 var d = dist(width\/2, height\/2, mouseX, mouseY)\r\n\u00a0if (d < 100) { \/\/longueur du rayon de l'ellipse\r\n\u00a0\u00a0\u00a0 \u00a0bg = 100;\r\n\u00a0}else{\r\n\u00a0\u00a0\u00a0 \u00a0bg = 0;\r\n\u00a0}\r\n}<\/pre>\n
Afin que le changement s’effectue dans le cerce et au clic de souris il faut utiliser la syntaxe suivante :<\/p>\n
if (d<100 && mouseIsPressed) {<\/pre>\n
&& = et<\/em><\/strong>
\n|| = ou<\/em><\/strong><\/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\/2011"}],"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=2011"}],"version-history":[{"count":7,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2011\/revisions"}],"predecessor-version":[{"id":2566,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2011\/revisions\/2566"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2011"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2011"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2011"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}