{"id":2129,"date":"2016-01-01T00:47:09","date_gmt":"2015-12-31T23:47:09","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2129"},"modified":"2016-02-13T14:12:53","modified_gmt":"2016-02-13T13:12:53","slug":"p5-js-13-motion","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2129","title":{"rendered":"\/ p5.js \/ 13 \/ Motion : d\u00e9placement, compteur"},"content":{"rendered":"

<\/p>\n

D\u00e9placement lin\u00e9aire<\/h4>\n
var x = 0;\r\nvar vitesse = 1;\r\nfunction setup() {\r\ncreateCanvas(800, 300);\r\nellipseMode(CENTER);\r\n}\r\nfunction draw() {\r\nbackground(0);\r\nellipse(x,150,100,100);\r\nx += vitesse;\r\n}<\/pre>\n
var x = 0;\r\nvar vitesse = 2;\r\nvar d = 100; \/\/diam\u00e8tre\r\nfunction setup() {\r\ncreateCanvas(800, 300);\r\nellipseMode(CENTER);\r\n}\r\nfunction draw() {\r\nbackground(0);\r\nx += vitesse;\r\n\u00a0\u00a0 \u00a0if(x > width+d){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0x = -d;\r\n\u00a0\u00a0 \u00a0}\r\nellipse(x,150,d,d);\r\n}<\/pre>\n
D\u00e9placement linaire avec rebondissement sur les murs<\/h4>\n
var d = 100;\r\nvar x = 100;\r\nvar vitesse = 2;\r\nvar direction = 1;\r\nfunction setup() {\r\ncreateCanvas(800, 300);\r\nellipseMode(CENTER);\r\n}\r\nfunction draw() {\r\nbackground(0);\r\nx += vitesse * direction;\r\nellipse(x, 100, d, d);\r\nif ((x > width-d\/2) || (x< d\/2)) {\r\ndirection = -direction; \/\/ Changer de direction\r\n}\r\n}<\/pre>\n
Mouvements al\u00e9atoires<\/h4>\n
La fonction random(min, max);<\/em><\/strong> permet de rendre les donn\u00e9es al\u00e9atoires. Les 2 valeurs fixent la valeur minimum et la valeur maximum. Il faut placer les variables comprenant des random();<\/em> dans draw();<\/em> ou une function.<\/em><\/p>\n
function setup() {\r\ncreateCanvas(800, 300);\r\n}\r\nfunction draw() {\r\nbackground(204);\r\nfor (var x = 20; x < width; x += 20) {\r\nvar valeurA = random(-10, 10);\r\nvar valeurB = random(-10, 10);\r\nline(x + valeurA, 20, x - valeurB, 280);\r\n}\r\n}<\/pre>\n
L’animation peut-\u00eatre am\u00e9lior\u00e9e en modifiant les valeurs de l’al\u00e9atoire en fonction de la position en x de la souris.<\/p>\n
function setup() {\r\ncreateCanvas(800, 300);\r\n}\r\nfunction draw() {\r\nbackground(204);\r\nfor (var x = 20; x < width; x += 20) {\r\nvar mx = mouseX\/10;\r\nvar valeurA = random(-mx, mx);\r\nvar valeurB = random(-mx, mx);\r\nline(x + valeurA, 20, x - valeurB, 280);\r\n}\r\n}<\/pre>\n
D\u00e9placer des formes al\u00e9atoirement<\/h4>\n
var vitesse = 5;\r\nvar diametre = 100;\r\nvar x;\r\nvar y;\r\nfunction setup() {\r\ncreateCanvas(800, 300);\r\nx = width\/2;\r\ny = height\/2;\r\nbackground(200);\r\n}\r\nfunction draw() {\r\nx += random(-vitesse, vitesse);\r\ny += random(-vitesse, vitesse);\r\nellipse(x, y, diametre, diametre);\r\n}<\/pre>\n
Pour emp\u00eacher le cercle de sortir compl\u00e8tement de l’animation il faut utiliser la fonction constrain();<\/em><\/p>\n
function draw() {\r\nx += random(-vitesse, vitesse);\r\ny += random(-vitesse, vitesse);\r\nx = constrain(x, 0, width);\r\ny = constrain(y, 0, height);\r\nellipse(x, y, diametre, diametre);\r\n}<\/pre>\n
compteur \/ timer<\/h4>\n
Il est possible de d\u00e9clencher une action \u00e0 un moment pr\u00e9cis. Dans le m\u00eame exemple que le pr\u00e9c\u00e9dent on ajoute une variable qui permet de faire d\u00e9buter l’animation au bout de 2000 millisecondes c’est \u00e0 dire 2 secondes.<\/p>\n
var vitesse = 5;\r\nvar diametre = 100;\r\nvar x;\r\nvar y;\r\nvar timer = 2000;\r\nfunction setup() {\r\ncreateCanvas(800, 300);\r\nx = width\/2;\r\ny = height\/2;\r\nbackground(200);\r\n}\r\n\r\nfunction draw() {\r\n\u00a0\u00a0 \u00a0if (millis() > timer){\r\nx += random(-vitesse, vitesse);\r\ny += random(-vitesse, vitesse);\r\nx = constrain(x, 0, width);\r\ny = constrain(y, 0, height);\r\nellipse(x, y, diametre, diametre);\r\n}\r\n}<\/pre>\n
 <\/p>\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\/2129"}],"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=2129"}],"version-history":[{"count":9,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2129\/revisions"}],"predecessor-version":[{"id":2574,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2129\/revisions\/2574"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}