{"id":2117,"date":"2016-01-01T00:48:59","date_gmt":"2015-12-31T23:48:59","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2117"},"modified":"2016-02-13T14:11:29","modified_gmt":"2016-02-13T13:11:29","slug":"p5-js-12-media-charger-des-sons","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2117","title":{"rendered":"\/ p5.js \/ 12 \/ Transformations : translate, rotate, scale"},"content":{"rendered":"

<\/p>\n

Dans le syst\u00e8me de coordonn\u00e9es par d\u00e9faut le point d’origine (0,0) est situ\u00e9 en haut \u00e0 gauche. Il est toutefois possible de modifier l’emplacement de ce point d’origine. Dans l’exemple ci-dessous le point de coordonn\u00e9es (0,0) est d\u00e9plac\u00e9 \u00e0 l’aide de la fonction translate(); <\/em>La fonction translate(); <\/em>doit \u00eatre encadr\u00e9e par push(); et pop();
\npush() et pop() <\/em>d\u00e9finissent la zone sur laquelle s’applique translate();<\/em><\/p>\n

\"translate1\"<\/a><\/p>\n

function setup() {\r\ncreateCanvas(500, 500);\r\n}\r\n\r\nfunction draw() {\r\nbackground(255);\r\nrect(0, 0, 55, 55);\r\npush();\r\ntranslate(30, 20);\r\nrect(0, 0, 55, 55); \r\ntranslate(14, 14);\r\nrect(0, 0, 55, 55);\r\nellipse(150,50, 50,50); \/\/ translate s'applique apr\u00e8s push();\r\npop();\r\nellipse(150,50,50,50); \/\/ translate ne s'applique plus apr\u00e8s pop();\r\n}<\/pre>\n
function setup() {\r\ncreateCanvas(500, 500);\r\n}\r\nfunction draw() {\r\nbackground(255);\r\npush();\r\ntranslate(mouseX, mouseY);\r\nellipse(0, 0, 55, 55);\r\npop();\r\n}<\/pre>\n
La fonction rotate()<\/em> permet la rotation des coordonn\u00e9es \u00e0 partir du point d’origine.<\/p>\n
\"rotate1\"<\/a><\/p>\n
La fonction scale();<\/em> permet de zoomer.<\/p>\n
\"scale1\"<\/a><\/p>\n
function setup() {\r\ncreateCanvas(500, 500);\r\n}\r\n\r\nfunction draw() {\r\nbackground(255);\r\nline(mouseX-50, mouseY-50, mouseX+50, mouseY+50);\r\nline(mouseX+50, mouseY-50, mouseX-50, mouseY+50);\r\n}<\/pre>\n
Est \u00e9quivalent \u00e0 :<\/p>\n
function setup() {\r\ncreateCanvas(500, 500);\r\n}\r\n\r\nfunction draw() {\r\nbackground(255);\r\npush();\r\ntranslate(mouseX, mouseY);\r\nline(-50, -50, 50, 50);\r\nline(50, -50, -50, 50);\r\npop();\r\n}<\/pre>\n
\"transformations-radian_degrev2\"<\/a><\/p>\n
rotate();<\/em> s’exprime en radians ce qui n’est pas habituel (pour moi !) Pour pallier ce petit probl\u00e8me il est possible d’\u00e9crire :
\nrotate(radians(45)); <\/em>ce qui \u00e9quivaut \u00e0 une rotation de 45\u00b0 au lieu de rotate(PI\/4);<\/em><\/p>\n
function setup() {\r\ncreateCanvas(500, 500);\r\n}\r\n\r\nfunction draw() {\r\nbackground(255);\r\npush();\r\ntranslate(mouseX, mouseY);\r\nrotate(radians(45));\r\nline(-50, -50, 50, 50);\r\nline(50, -50, -50, 50);\r\npop();\r\n}<\/pre>\n
Il est possible de remplacer la valeur par une variable.<\/p>\n
var angle = 0;\r\n\r\nfunction setup() {\r\ncreateCanvas(500, 500);\r\n}\r\n\r\nfunction draw() {\r\nbackground(255);\r\npush();\r\ntranslate(mouseX, mouseY);\r\nrotate(radians(angle));\r\nline(-50, -50, 50, 50);\r\nline(50, -50, -50, 50);\r\nangle++;\r\npop();\r\n}<\/pre>\n
L’ordre dans lequel les fonctions sont utilis\u00e9s est important :<\/p>\n
    \n
  1. Translation puis rotation<\/li>\n<\/ol>\n
    var angle = 0.0;\r\n\r\nfunction setup() {\r\ncreateCanvas(800, 600);\r\nbackground(204);\r\n}\r\nfunction draw() {\r\n\u00a0\u00a0 \u00a0push();\r\ntranslate(mouseX, mouseY);\r\nrotate(angle);\r\nrect(-15, -15, 30, 30);\r\nangle += 0.1;\r\npop();\r\n}<\/pre>\n
      \n
    1. Rotation puis translation<\/li>\n<\/ol>\n
      var angle = 0.0;\r\nfunction setup() {\r\ncreateCanvas(800, 600);\r\nbackground(204);\r\n}\r\nfunction draw() {\r\n\u00a0\u00a0 \u00a0push();\r\nrotate(angle);\r\ntranslate(mouseX, mouseY);\r\nrect(-15, -15, 30, 30);\r\nangle += 0.1;\r\npop();\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\/2117"}],"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=2117"}],"version-history":[{"count":9,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2117\/revisions"}],"predecessor-version":[{"id":2571,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2117\/revisions\/2571"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}