{"id":2697,"date":"2016-01-01T00:44:45","date_gmt":"2015-12-31T23:44:45","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2697"},"modified":"2016-04-15T14:13:37","modified_gmt":"2016-04-15T13:13:37","slug":"p5-js-17-boutons-champs","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2697","title":{"rendered":"\/ p5.js \/ 17 \/ boutons, champs&#8230;"},"content":{"rendered":"<p style=\"text-align: center;\"><!--more--><\/p>\n<h3 style=\"text-align: left;\">Bouton \/ Button<\/h3>\n<p>Le bouton cr\u00e9\u00e9 ici permet de d\u00e9placer le carr\u00e9 de 10 px au clic sur le bouton.<br \/>\nIl faut cr\u00e9er une<em> var bouton;<br \/>\n<\/em>Ensuite il suffit de cr\u00e9er le bouton <em>bouton = createButton(&#8220;avance&#8221;); <\/em>entre () le texte du bouton&#8230;<br \/>\nPour rattacher une action au bouton on lui associe une action (<em>mousePressed<\/em>) et une fonction <em>(avanceCarre) <\/em>dans l&#8217;exemple.<br \/>\nLa fonction est d\u00e9finie ensuite&#8230;<br \/>\nIl est possible de positionner le bouton ou on le souhaite dans le <em>canvas<\/em> mais aussi \u00e0 l&#8217;ext\u00e9rieur de celui-ci : <em>bouton.position(x,y);<\/em><\/p>\n<p style=\"text-align: center;\">\n<!-- iframe plugin v.5.1 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"http:\/\/lyceelecorbusier.eu\/p5\/seformer\/bouton\" width=\"790\" height=\"225\" style=\"border: 1px solid #ddd;\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n<em><br \/>\n<\/em><\/p>\n<pre>var bouton;\r\nvar x = 25;\r\nvar y = 75;\r\n\r\nfunction setup() {\r\n\u00a0 canvas = createCanvas(780, 200);\r\n\u00a0 background(200,222,22);\r\n\u00a0 \r\n\u00a0 bouton = createButton(\"avance\");\r\n\u00a0 bouton.mousePressed(avanceCarre);\r\n\u00a0 bouton.position(width\/2,170);\r\n\u00a0 \r\n\u00a0 noStroke();\r\n\u00a0 fill(236, 36, 94);\r\n\u00a0 rect(x, y, 50, 50);\r\n\u00a0 }\r\n\u00a0 \r\nfunction avanceCarre(){\r\n\u00a0\u00a0 \u00a0 background(200,222,22);\r\n\u00a0\u00a0 \u00a0fill(236, 36, 94);\r\n\u00a0\u00a0 \u00a0rect(x+10, y, 50, 50);\r\n\u00a0 x = x+10;\r\n}<\/pre>\n<h3 style=\"text-align: left;\">Curseur \/ Slider<\/h3>\n<p>Pour le slider (ou curseur) il faut cr\u00e9er une variable <em>var curseur;<\/em> (par exemple) et d\u00e9clarer le curseur :<br \/>\n<em>curseur = createSlider(a, b, c); <\/em><strong><em>a<\/em><\/strong> = la valeur initiale, <strong>b<\/strong> = la valeur finale et <strong>c<\/strong> = la valeur par d\u00e9faut sur laquelle le curseur est positionn\u00e9. Dans l&#8217;exemple le curseur permet de d\u00e9placer le carr\u00e9 sur la largeur du canvas.<\/p>\n<p style=\"text-align: center;\">\n<!-- iframe plugin v.5.1 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"http:\/\/lyceelecorbusier.eu\/p5\/seformer\/curseur\" width=\"790\" height=\"225\" style=\"border: 1px solid #ddd;\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<pre>var curseur;\r\n\r\nfunction setup() {\r\n\u00a0 canvas = createCanvas(780, 200);\r\n\r\n<strong>\u00a0curseur = createSlider(25, 705, 730\/2);<\/strong>\r\n<strong>\u00a0curseur.position(25,180);<\/strong>\r\n}\r\nfunction draw(){\r\n\u00a0\u00a0\u00a0 background(236,36,94);\r\n\u00a0\u00a0\u00a0 fill(255);\r\n\u00a0\u00a0\u00a0 rect(<strong>curseur.value()<\/strong>, 75, 50,50);\r\n}<\/pre>\n<h3>Champ \/ Input<\/h3>\n<h4>Afficher un texte avec ENTER ou TAB<\/h4>\n<p>Pour cr\u00e9er un champ \u00e0 compl\u00e9ter (input) il faut une variable <em>var champ; <\/em>et d\u00e9clarer le <em>champ = createInput();<br \/>\n<\/em>On utilise ensuite un \u00e9v\u00e9nement (<em>event<\/em>) nomm\u00e9 <em>changed <\/em>rattach\u00e9e \u00e0 une fonction qui permet l&#8217;affichage de notre texte mais qui pourrait aussi modifier un texte existant. On positionne ensuite le champ avec <em>position.<\/em><br \/>\nDans la fonction <em>afficheTexte <\/em>le texte s&#8217;affichera quand l&#8217;utilisateur utilisera la touche ENTER ou TAB.<\/p>\n<p>(Si l&#8217;on utilise <em>input <\/em> \u00e0 la place de <em>changed <\/em>comme \u00e9v\u00e9nement <em>champ.input(afficheTexte); <\/em>le texte sera imm\u00e9diatement recopi\u00e9 et il n&#8217;est plus n\u00e9cessaire d&#8217;utiliser enter ou tab&#8230;)<\/p>\n<p style=\"text-align: center;\">\n<!-- iframe plugin v.5.1 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"http:\/\/lyceelecorbusier.eu\/p5\/seformer\/inputenter\" width=\"780\" height=\"200\" style=\"border: 1px solid #ddd;\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<pre>var champ;\r\n\r\nfunction setup() {\r\n\u00a0 createCanvas(710, 200);\r\n\u00a0 background(236,36,94);\r\n\u00a0 textAlign(LEFT)\r\n\u00a0 textSize(20);\r\n\u00a0 \r\n\u00a0 champ = createInput();\r\n\u00a0 champ.changed(afficheTexte);\r\n\u00a0 champ.position(20, 65);\r\n}\r\n\r\nfunction afficheTexte() {\r\n\u00a0\u00a0 \u00a0background(236,36,94);\r\n\u00a0\u00a0 \u00a0text(champ.value(),20,120);\r\n}<\/pre>\n<p style=\"text-align: left;\">On peut ajouter un bouton&#8230;<\/p>\n<p style=\"text-align: center;\">\n<!-- iframe plugin v.5.1 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"http:\/\/lyceelecorbusier.eu\/p5\/seformer\/inputbouton\" width=\"780\" height=\"200\" style=\"border: 1px solid #ddd;\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<pre style=\"text-align: left;\">var champ;\r\nvar bouton;\r\n\r\nfunction setup() {\r\n\u00a0 createCanvas(780, 200);\r\n\u00a0 background(236,36,94);\r\n\u00a0 textAlign(LEFT)\r\n\u00a0 textSize(20);\r\n\u00a0 \r\n\u00a0 champ = createInput();\r\n\u00a0 champ.changed(afficheTexte);\r\n\u00a0 champ.position(20, 65);\r\n\u00a0 \r\n\u00a0 bouton = createButton(\"cliquer\");\r\n\u00a0 bouton.mousePressed(afficheTexte);\r\n\u00a0 bouton.position(195,65); \r\n}\r\n\r\nfunction afficheTexte() {\r\n\u00a0\u00a0 \u00a0background(236,36,94);\r\n\u00a0\u00a0 \u00a0text(champ.value(),20,120);\r\n}<\/pre>\n<h3 style=\"text-align: left;\">Boutons &amp; champs avec CSS<\/h3>\n<p>Les champs &amp; boutons peuvent \u00eatre styl\u00e9s avec CSS&#8230;<\/p>\n<p style=\"text-align: center;\">\n<!-- iframe plugin v.5.1 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"http:\/\/lyceelecorbusier.eu\/p5\/input1\/\" width=\"780\" height=\"400\" style=\"border: 1px solid #ddd;\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<pre style=\"text-align: left;\">var input, button, entete;\r\nvar etat = 0;\r\n\r\nfunction setup() {\r\n\u00a0 createCanvas(710, 400);\r\n\u00a0 textFont(\"Helvetica\");\r\n\u00a0 textSize(24);\r\n\u00a0 textAlign(LEFT);\r\n\u00a0 \r\n\u00a0 entete = createElement('h2', '\u00c9crire ici');\r\n\u00a0 entete.position(20, 150);\r\n\u00a0 \r\n\u00a0 input = createInput();\r\n\u00a0 input.position(20, 200);\r\n\u00a0 \r\n\u00a0 button = createButton('submit');\r\n\u00a0 button.position(194, 200);\r\n\u00a0 button.mousePressed(action);\r\n}\r\n\r\nfunction draw(){\r\n\u00a0\u00a0 background(255);\r\n\u00a0\u00a0\u00a0 if (etat === 0){\r\n\u00a0\u00a0\u00a0 text('bonjour', 20, 50,450,100);\r\n\u00a0\u00a0\u00a0 }else if (etat == 1) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 text(\"au revoir\", 20, 50,450,200);\r\n\u00a0\u00a0\u00a0 }else if (etat == 2) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 text(\"\u00e0+\", 20, 50,450,200);\r\n\u00a0\u00a0\u00a0 }\r\n}\r\n\r\nfunction action() {\r\n\u00a0\u00a0 var text = input.value();\r\n\u00a0\u00a0\u00a0 if (text == '\u00e0+'){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 etat = 0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 input.value('');\r\n\u00a0\u00a0\u00a0 }else if (text == 'bonjour'){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 etat = 1;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 input.value('');\r\n\u00a0\u00a0\u00a0 }else if (text == 'au revoir'){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 etat = 2;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 input.value('');\r\n\u00a0\u00a0\u00a0 }\r\n}<\/pre>\n<p>C&#8217;est dans la page <em>index.html<\/em> qu&#8217;il faut ajouter les \u00e9l\u00e9ments CSS (ou dans un fichier CSS reli\u00e9).<\/p>\n<pre>&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n\u00a0 &lt;head&gt;\r\n\u00a0\u00a0\u00a0 &lt;meta charset=\"UTF-8\"&gt;\r\n\u00a0\u00a0\u00a0 &lt;title&gt;construction&lt;\/title&gt;\r\n\u00a0\u00a0\u00a0 &lt;script src=\"libraries\/p5.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;script src=\"libraries\/p5.dom.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\r\n\u00a0\u00a0\u00a0 &lt;script src=\"libraries\/p5.sound.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;script src=\"sketch.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;style&gt; \r\n\u00a0\u00a0\u00a0 body {padding: 0; margin: 0;} \r\n\u00a0\u00a0\u00a0 canvas {vertical-align: top;} \r\n\u00a0\u00a0\u00a0 h2{font-family: helvetica; color:rgb(13,108,147);}\r\n\u00a0\u00a0\u00a0 input {width:168px;}\r\n\u00a0\u00a0\u00a0 button {\r\n\u00a0\u00a0\u00a0 background-color: rgb(13,108,147);\r\n\u00a0\u00a0\u00a0 border: none;\r\n\u00a0\u00a0\u00a0 color: white;\r\n\u00a0\u00a0\u00a0 padding: 2px 10px;\r\n\u00a0\u00a0\u00a0 text-align: center;\r\n\u00a0\u00a0\u00a0 text-decoration: none;\r\n\u00a0\u00a0\u00a0 display: inline-block;\r\n\u00a0\u00a0\u00a0 font-size: 14px;\r\n}\r\nbutton:hover {\r\n\u00a0\u00a0 background-color: rgb(13,108,147);\r\n\u00a0\u00a0 color: #ccc;\r\n\u00a0\u00a0\u00a0 box-shadow: 0 2px 6px 0 rgba(0,0,0,0.24), 0 7px 5px 0 rgba(0,0,0,0.19);\r\n}\r\n\u00a0\u00a0\u00a0 &lt;\/style&gt;\r\n\u00a0 &lt;\/head&gt;\r\n\u00a0 &lt;body&gt;\r\n\u00a0 &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p style=\"text-align: center;\">\n<!-- iframe plugin v.5.1 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"http:\/\/lyceelecorbusier.eu\/p5\/input\/\" width=\"780\" height=\"400\" style=\"border: 1px solid #ddd;\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\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\/2697"}],"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=2697"}],"version-history":[{"count":30,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2697\/revisions"}],"predecessor-version":[{"id":2770,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2697\/revisions\/2770"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}