{"id":2019,"date":"2016-01-01T00:52:29","date_gmt":"2015-12-31T23:52:29","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2019"},"modified":"2016-02-13T14:09:56","modified_gmt":"2016-02-13T13:09:56","slug":"p5-js-8-interactions-avec-le-clavier","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2019","title":{"rendered":"\/ p5.js \/ 8 \/ interactions"},"content":{"rendered":"

<\/p>\n

Avec la souris<\/h4>\n

La variable mouseX<\/em> stocke les coordonn\u00e9es en X de la souris, mouseY<\/em> celle en Y.<\/p>\n

function setup() {\r\ncreateCanvas(480, 120);\r\nfill(0, 102);\r\nnoStroke();\r\n}\r\nfunction draw() {\r\nellipse(mouseX, mouseY, 9, 9);\r\n}<\/pre>\n
Les variables<\/span> pmouseX<\/span><\/em> et pmouseY<\/span>\u00a0stockent<\/span> la position de la <\/span>souris \u00e0<\/span> l’image pr\u00e9c\u00e9dente.<\/span><\/span><\/p>\n
function setup() {\r\ncreateCanvas(480, 120);\r\nstrokeWeight(4);\r\nstroke(0, 102);\r\n}\r\nfunction draw() {\r\nline(mouseX, mouseY, pmouseX, pmouseY);\r\n}<\/pre>\n
La variable<\/span> mouseIsPressed<\/em> de la souris est<\/span> utilis\u00e9 avec<\/span> l’instruction if<\/em><\/span> pour d\u00e9terminer quand<\/span> une ligne de code<\/span> sera ex\u00e9cut\u00e9<\/span> et quand<\/span> elle ne l’est pas<\/span>.\u00a0<\/span><\/p>\n
function setup(){\r\ncreateCanvas(500,500);\r\n}\r\nfunction draw(){\r\n\u00a0 for(var i=0;i<500 ;i+=5){\r\n\u00a0\u00a0\u00a0 rect(i, 0, 3, 500);\r\n\u00a0 }\r\n\u00a0 if (mouseIsPressed) { \/\/ ou bien (mouseIsPressed == true) \r\n\u00a0 for(\u00a0 var i=500 ; i>0 ; i-=4) {\r\n\u00a0\u00a0\u00a0\u00a0 \/\/ellipse(i,0, i,i);\r\n\u00a0\u00a0\u00a0\u00a0 ellipse(width\/2,height\/2, i,i);\r\n\u00a0 }\r\n\u00a0 }\r\n}<\/pre>\n
if<\/em> & else<\/em> : donnent deux possibilit\u00e9s<\/p>\n
function setup(){\r\ncreateCanvas(500,500);\r\n}\r\n\r\nfunction draw(){\r\n\u00a0 for(var i=0;i<500 ;i+=5){\r\n\u00a0 \u00a0\u00a0 \u00a0fill(255);\r\n\u00a0\u00a0\u00a0 rect(i, 0, 3, 500);\r\n\u00a0 }\r\n\u00a0 for(\u00a0 var i=500 ; i>0 ; i-=4) {\r\n\u00a0 if (mouseIsPressed == true) {\r\n\u00a0\u00a0\u00a0 ellipse(width\/2,height\/2, i,i);\r\n\u00a0 }else{\r\n\u00a0 \u00a0\u00a0 \u00a0ellipse(i,0, i,i);\r\n\u00a0 }\r\n}\r\n}<\/pre>\n
Utiliser plusieurs bouton de la souris : click droit & click gauche<\/p>\n
function setup(){\r\ncreateCanvas(500,500);\r\n}\r\n\r\nfunction draw(){\r\n\u00a0\u00a0 \u00a0 for(var i=0;i<500 ;i+=5){\r\n\u00a0\u00a0\u00a0 rect(i, 0, 3, 500);\r\n\u00a0 }\r\n\u00a0\u00a0 \u00a0if (mouseIsPressed) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if (mouseButton == RIGHT) {\r\n\u00a0\u00a0 \u00a0 \u00a0\u00a0\u00a0 \u00a0for(\u00a0 var i=500 ; i>0 ; i-=4) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0ellipse(width\/2,height\/2, i,i);\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0 \u00a0\u00a0 \u00a0}else{\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0 for(\u00a0 var i=500 ; i>0 ; i-=4) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0ellipse(i,500, i,i);\r\n\u00a0 \u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0}\r\n}<\/pre>\n
Le clavier<\/h4>\n
p5.js<\/span><\/em> garde la trace<\/span> du moment o\u00f9<\/span> une touche<\/span> sur un clavier<\/span> est enfonc\u00e9e,<\/span> ainsi la m\u00e9moire de\u00a0<\/span>la derni\u00e8re touche<\/span> enfonc\u00e9e.<\/span>\u00a0<\/span><\/p>\n
function setup() {\r\n\u00a0 createCanvas(600, 600);\r\n}\r\n\u00a0\r\nfunction draw() {\r\n  background(255);\r\n\u00a0 for (var x=0; x <= width; x+=40) {\r\n\u00a0\u00a0\u00a0 for (var y=0; y <= height; y+=80) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 ellipse(x, y, 40, 40);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 if (keyIsPressed) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 rect(x,y+20,40,40);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 }\r\n}<\/pre>\n
Dans cet exemple 3 touches sont utilis\u00e9es, h, j & k. L’op\u00e9rateur || (ou) permet d’utiliser soit les bas de casse soit les capitales.<\/p>\n
function setup() {\r\n\u00a0 createCanvas(400, 400);\r\n}\r\n\u00a0\r\nfunction draw() {\r\n\u00a0\u00a0 \u00a0var l = random(0,200);\r\n\u00a0 noStroke();\r\n\u00a0 fill(random(100), random(150, 220), random(150, 220), random(100, 150));\r\n\u00a0 if (keyIsPressed) {\r\n\u00a0\u00a0 \u00a0if ((key == 'h') || (key == 'H')) {\r\n\u00a0 ellipse(random(0, 400), random(0,400), l, l);\r\n\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0if ((key == 'g') || (key == 'G')) {\r\n\u00a0 rect(random(0, 400), random(0, 400),l, l);\r\n\u00a0\u00a0 \u00a0}\r\n\u00a0 if ((key == 'j') || (key == 'J')) {\r\n\u00a0 triangle(random(0,400), random(0,400), random(0,400), random(0,400), random(0,400), random(0,400));\r\n\u00a0 }\r\n\u00a0 }\r\n}<\/pre>\n
Pour d\u00e9placer un \u00e9l\u00e9ment au clavier avec les fl\u00e8ches directionnelles utiliser UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.<\/p>\n
var x = 400\/2-25;\r\nvar y = 400\/2-25;\r\nfunction setup() {\r\ncreateCanvas(400, 400);\r\n}\r\nfunction draw() {\r\nbackground(200);\r\n\u00a0\u00a0 \u00a0if (keyIsPressed) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if (keyCode == LEFT_ARROW) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0x--;\r\n\u00a0\u00a0 \u00a0}if (keyCode == RIGHT_ARROW) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0x++;\r\n\u00a0\u00a0 \u00a0}if (keyCode == DOWN_ARROW) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0y++;\r\n\u00a0\u00a0 \u00a0} if (keyCode == UP_ARROW) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0y--;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0}\r\nrect(x, y, 50, 50);\r\n}<\/pre>\n
L’\u00e9cran tactile<\/h4>\n
Pour les \u00e9crans tactiles p5.js<\/em> propose plusieurs variables qui fonctionnent comme celles de la souris.<\/p>\n
function setup() {\r\ncreateCanvas(800, 600);\r\n}\r\nfunction draw() {\r\nbackground(200);\r\nline(20, 20, width-20, height-20);\r\nif (touchIsDown) {\r\nline(width-20, 20, 20, height-20);\r\n}\r\n}<\/pre>\n
De m\u00eame touchX<\/em> & touchY<\/em> existent<\/p>\n
function setup() {\r\ncreateCanvas(800, 600);\r\nfill(0, 102);\r\nnoStroke();\r\n}\r\nfunction draw() {\r\nellipse(touchX, touchY, 30, 30);\r\n}<\/pre>\n
 <\/p>\n
 <\/p>\n
 <\/p>\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\/2019"}],"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=2019"}],"version-history":[{"count":16,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2019\/revisions"}],"predecessor-version":[{"id":2567,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2019\/revisions\/2567"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2019"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2019"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}