{"id":1864,"date":"2016-01-01T00:58:26","date_gmt":"2015-12-31T23:58:26","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/insituhacklab\/?p=1864"},"modified":"2016-09-12T08:19:37","modified_gmt":"2016-09-12T07:19:37","slug":"dessiner","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=1864","title":{"rendered":"\/ p5.js \/ 2 \/ dessiner"},"content":{"rendered":"<p style=\"text-align: center;\"><!--more--><\/p>\n<p>Pour dessiner on peut utiliser une feuille, avec p5.js il faut cr\u00e9er la feuille et d\u00e9finir sa taille.<br \/>\nLa fonction <em>createCanvas(with, height); <\/em>permet de cr\u00e9er la feuille et de d\u00e9finir sa taille.<br \/>\nL&#8217;\u00e9cran est une grille compos\u00e9e de pixels, il faut donc d\u00e9finir la taille de la feuille en pixels, <em>createCanvas(600px, 300px);<\/em><br \/>\nChaque pixel a sa position dans la feuille. L&#8217;origine se trouve en haut \u00e0 gauche.<br \/>\n<img loading=\"lazy\" class=\"alignleft wp-image-1868 size-thumbnail\" src=\"http:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2015\/12\/drawing-03-150x150.png\" alt=\"drawing-03\" width=\"150\" height=\"150\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>Pour dessiner un point :<\/p>\n<pre>function setup() {\r\ncreateCanvas(600, 300);\r\n}\r\nfunction draw() {\r\nbackground(125);\r\npoint(300, 150);\r\n}<\/pre>\n<p><em>p5.js<\/em> dispose d&#8217;un certain nombre de formes de base qui peuvent \u00eatre combin\u00e9es.<br \/>\n<img loading=\"lazy\" class=\"alignleft wp-image-1869 size-medium\" src=\"http:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2015\/12\/drawing-06-300x197.png\" alt=\"drawing-06\" width=\"300\" height=\"197\" \/><img loading=\"lazy\" class=\"alignleft wp-image-1871\" src=\"http:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2015\/12\/drawing-07-300x176.png\" alt=\"drawing-07\" width=\"350\" height=\"205\" \/><img loading=\"lazy\" class=\"wp-image-1873 size-medium alignleft\" src=\"http:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2015\/12\/drawing-10-1-300x183.png\" alt=\"\" width=\"300\" height=\"183\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><img class=\"size-medium wp-image-1878 alignleft\" src=\"http:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2015\/12\/drawing-10-2-300x171.png\" alt=\"drawing-10\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<pre>function setup() {\r\ncreateCanvas(800, 600);\r\n}\r\nfunction draw() {\r\nbackground(200);\r\nline(20, 50, 760, 510);\r\n}<\/pre>\n<pre>function setup() {\r\ncreateCanvas(800, 600);\r\n}\r\nfunction draw() {\r\nbackground(200);\r\nrect(100, 50, 500, 300);\r\n}<\/pre>\n<pre>function setup() {\r\ncreateCanvas(800, 600);\r\n}\r\nfunction draw() {\r\nbackground(200);\r\nellipse(400, 300, 400, 400);\r\nellipse(120, 100, 110, 110);\r\nellipse(400, 200, 18, 18);\r\n}<\/pre>\n<h6>Tester, modifier les valeurs.<\/h6>\n<p>Remarques : Pour l&#8217;exemple de l&#8217;ellipse on constate que le dernier cercle<em> ellipse(400, 200, 18, 18); <\/em>se trouve au-dessus du premier <em>ellipse(400, 300, 400, 400);<br \/>\n<\/em>Cet exemple montre comment <em>p5.js<\/em> affiche les \u00e9l\u00e9ments. En effet les \u00e9l\u00e9ments sont affich\u00e9s du haut vers le bas.<br \/>\nSi l&#8217;on remplace le code par celui-ci :<\/p>\n<pre>function setup() {\r\ncreateCanvas(800, 600);\r\n}\r\nfunction draw() {\r\nbackground(200);\r\nellipse(400, 200, 18, 18);\r\nellipse(400, 300, 400, 400);\r\nellipse(120, 100, 110, 110);\r\n}<\/pre>\n<p>la premi\u00e8re ellipse est derri\u00e8re la deuxi\u00e8me&#8230;<\/p>\n<p>Il est possible de dessiner des formes complexes en utilisant la fonction <em>quad, <\/em>par exemple :<\/p>\n<pre>function setup() {\r\ncreateCanvas(800, 600);\r\n}\r\nfunction draw() {\r\nbackground(200);\r\nquad(150, 100, 250, 200, 600, 400, 450, 100);\r\n}<\/pre>\n<p>Par d\u00e9faut le contour d&#8217;une forme est de 1 pixel.<br \/>\nPour d\u00e9finir la couleur du contour <em>stroke(100); <\/em>donne un contour gris<br \/>\nLa fonction<em> strokeWeight();<\/em> permet de modifier l&#8217;\u00e9paisseur du contour. <em>strokeWeight(10); <\/em>d\u00e9finit un contour de 10 pixels par exemple.<br \/>\nPour supprimer le contour utiliser la fonction <em>noStroke();<\/em><\/p>\n<pre>function setup() {\r\ncreateCanvas(800, 600);\r\n}\r\nfunction draw() {\r\n\u00a0 background(204);\r\n\u00a0 strokeWeight(4);\r\n\u00a0 stroke(120);\r\n\u00a0 ellipse(75, 60, 90, 90);\r\n\u00a0 noStroke();\r\n\u00a0 ellipse(200, 60, 90, 90);\r\n\u00a0 strokeWeight(10);\r\n\u00a0 stroke(120);\r\n\u00a0 ellipse(330, 60, 90, 90);\r\n}\r\n<\/pre>\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\/1864"}],"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=1864"}],"version-history":[{"count":7,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/1864\/revisions"}],"predecessor-version":[{"id":3004,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/1864\/revisions\/3004"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1864"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}