{"id":1836,"date":"2016-01-01T00:59:06","date_gmt":"2015-12-31T23:59:06","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/insituhacklab\/?p=1836"},"modified":"2024-03-25T15:30:59","modified_gmt":"2024-03-25T14:30:59","slug":"commencer-a-coder","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=1836","title":{"rendered":"\/ p5.js \/ 1 \/ commencer \u00e0 coder"},"content":{"rendered":"

<\/p>\n

Plusieurs solutions existent pour coder en p5.js
\nEn ligne en utilisant l’\u00e9diteur\u00a0https:\/\/alpha.editor.p5js.org\/<\/a>\u00a0ou celui du site openprocessing.org
\n<\/a>Il possible d’utiliser Processing 4, \u00e0 t\u00e9l\u00e9charger sur le site processing<\/a>.<\/p>\n

Enfin il est possible de coder avec des \u00e9diteurs de code comme SublimeText
\n<\/a>T\u00e9l\u00e9charger le dossier zipper p5.js Complete
\n<\/a><\/p>\n

_ Dupliquer le dossier afin de garder une copie et renommer cette copie.
\n_ Ajouter le dossier renomm\u00e9 aux Folders<\/em> de Sublime text\u00a0<\/em>
\n_ Ouvrir le fichier index.html<\/em><\/p>\n

\"\"
\nCe fichier montre la structure de votre projet et le lien avec la librairie de p5.js et un autre fichier sketch.js, qui est celui dans lequel s’\u00e9crit le programme.<\/p>\n

_ Ouvrir sketch.js.\u00a0<\/em>Le code contient 2 blocs qui forment la base de tous les programmes p5.js.
\n_ <\/em>Ouvrir le fichier index.html<\/em> avec un navigateur (de pr\u00e9f\u00e9rence Firefox<\/strong>, car pour les fichiers qui doivent charger des images Chrome<\/strong> ne fonctionne pas en local).<\/p>\n

Le premier code ! (effacer le code existant et coller le code ci-dessous)<\/h4>\n
function setup() {\r\ncreateCanvas(800, 600);\r\n}\r\n\r\nfunction draw() {\r\nif (mouseIsPressed) {\r\nfill(0);\r\n} else {\r\nfill(255);\r\n}\r\nellipse(mouseX, mouseY, 80, 80);\r\n}<\/pre>\n
_ Que raconte ce code ?
\nfunction setup ( ) { }<\/strong> : <\/em>cette partie du code sera pr\u00e9sente dans tous les codes p5.js. Le setup<\/em> c’est la configuration de d\u00e9part. Cette partie du code ne va s’ex\u00e9cuter qu’une seule fois contrairement \u00e0 la function draw<\/em> qui va s’ex\u00e9cuter en boucle. setup<\/em> sert donc \u00e0 lister les \u00e9l\u00e9ments qui sont n\u00e9cessaires au d\u00e9part, les invariants comme createCanvas <\/em>(Attention, la capitale \u00e0 Canvas est obligatoire, p5.js<\/em> est sensible \u00e0 la casse) qui va d\u00e9finir la taille de l’animation (800 pixels sur 600 pixels dans l’exemple).<\/p>\n
function draw ( ) { } <\/em><\/strong>: tout ce qui se trouve est “dessin\u00e9” en boucle par le programme. Dans l’exemple :
\n– if (mouseIsPressed)\u00a0 <\/em>si la souris est press\u00e9e (on obtient du jus de souris) le remplissage (fill<\/em>) est noir (0<\/i>)
\n– else : <\/em>le remplissage est blanc fill(255);<\/em><\/p>\n
ellipse(mouseX, mouseY, 80, 80); <\/em>la fonction ellipse dessine une ellipse (si si). Cette fonction dispose de 4 param\u00e8tres (x, y, width, height) <\/em>
\n\"ellipse\"<\/em><\/p>\n
dans l’exemple x<\/em> est \u00e9gal \u00e0 la position en x de la souris mouseX<\/em>, y est \u00e9gal \u00e0 la position en y de la souris mouseY
\nwidth et height =<\/em> \u00e0 80 et donc l’ellipse est un cercle !<\/p>\n
\u00c0 propos de la syntaxe :
\n– attention \u00e0 la casse…
\n– ne pas oublier le ;<\/strong> \u00e0 la fin des lignes… createCanvas(800, 600) ;<\/strong>
\n– ne pas oublier de fermer les {<\/strong> ouvertes }<\/strong>
\n<\/em>En cas d’erreur un message s’affiche dans la console du navigateur. <\/em>(CTRL+MAJ+J dans Chrome \/ CTRL+MAJ+K dans Firefox).<\/p>\n
Modifier les valeurs comme la taille de createCanvas, <\/em>les valeurs de fill <\/em>entre 0 et 255, les valeurs de width et height.<\/h5>\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\/1836"}],"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=1836"}],"version-history":[{"count":21,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/1836\/revisions"}],"predecessor-version":[{"id":3577,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/1836\/revisions\/3577"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1836"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1836"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}