<\/p>\n
Les sprites<\/strong><\/em> dans la librairie p5.play<\/strong><\/em> sont livr\u00e9s avec un m\u00e9canisme int\u00e9gr\u00e9 pour d\u00e9tecter si l’utilisateur interagit ou non avec le sprite<\/strong><\/em> \u00e0 l’aide de la souris. Il y a 2 fa\u00e7ons de v\u00e9rifier l’interaction avec la souris: les callbacks<\/strong> ou les attributs bool\u00e9ens<\/strong>. Les quatre attributs sont: La fonction affect\u00e9e \u00e0 ces attributs est ex\u00e9cut\u00e9e chaque fois que l’\u00e9v\u00e9nement sp\u00e9cifi\u00e9 se produit. Dans la fonction, l’expression se r\u00e9f\u00e8re \u00e0 l’objet auquel l’interaction est arriv\u00e9e. Cela est utile pour \u00e9crire des gestionnaires d’\u00e9v\u00e9nements qui peuvent \u00eatre appliqu\u00e9s \u00e0 plusieurs objets : voir ci-dessous. Vous pouvez appeler la fonction createSprite()<\/em><\/strong> autant de fois que vous le souhaitez ! La librairie p5.play<\/em><\/strong> garde une trace de tous les sprites<\/strong><\/em> que ajout\u00e9s. Dans l’exemple suivant, le code dans mousePressed ()<\/em><\/strong>\u00a0cr\u00e9e un nouveau sprite<\/em><\/strong> chaque fois que l’utilisateur clique avec la souris :<\/p>\n Notez ici l’utilisation de l’attribut .life<\/em><\/strong>, qui d\u00e9termine la dur\u00e9e de vie du sprite<\/strong><\/em> avant d’\u00eatre automatiquement supprim\u00e9 par la librairie p5.play<\/em><\/strong>.<\/p>\n Pour appliquer des changements aux sprites<\/strong><\/em> apr\u00e8s leur cr\u00e9ation, autres que les changements que la librairie p5.play<\/em><\/strong> effectue seul, il faut it\u00e9rer sur tous les sprites<\/strong><\/em> de la m\u00e9thode draw ()<\/em><\/strong>. La librairie fournit un tableau (une\u00a0<\/strong>array<\/strong>)<\/em> appel\u00e9 allSprites<\/em><\/strong> qui contient tous les sprites<\/em> <\/strong>actifs. <\/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":[1,2],"tags":[],"_links":{"self":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/3462"}],"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=3462"}],"version-history":[{"count":12,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3507,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/3462\/revisions\/3507"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nIl existe 4 attributs d’un objet sprite<\/strong><\/em> auxquels des fonctions peuvent \u00eatre affect\u00e9es afin de d\u00e9finir le comportement du sprite<\/strong><\/em> par rapport au mouvement de la souris de l’utilisateur.
\nL’exemple suivant illustre les 4:<\/p>\nvar sprite1;\r\nvar sprite2;\r\nfunction setup() {\r\n createCanvas(400, 400);\r\n\r\nsprite1 = createSprite(width\/2, height\/3,100, 100);\r\n sprite1.shapeColor = color(236,36,94);\r\n sprite1.onMouseOver = function() {\r\n this.scale = 2;\r\n }\r\n sprite1.onMouseOut = function() {\r\n this.scale = 1;\r\n }\r\n\r\nsprite2 = createSprite(width\/2, height*0.67,100, 100);\r\n sprite2.shapeColor = color(36,236,94);\r\n sprite2.onMousePressed = function() {\r\n this.shapeColor = color(236,36,94);\r\n }\r\n sprite2.onMouseReleased = function() {\r\n this.shapeColor = color(36,236,94);\r\n }\r\n}\r\nfunction draw() {\r\n background(220);\r\n drawSprites();\r\n}<\/pre>\n
\nonMouseOver<\/strong><\/em> (lorsque le curseur de la souris se d\u00e9place sur l’objet)
\nonMouseOut<\/em><\/strong> (lorsque le curseur de la souris quitte l’objet)
\nonMousePressed<\/strong><\/em> (lorsque l’utilisateur appuie sur le bouton de la souris et que le curseur de la souris se trouve sur l’objet)
\nonMouseReleased<\/strong><\/em> (lorsque l’utilisateur rel\u00e2che le bouton de la souris, apr\u00e8s un \u00e9v\u00e9nement onMousePressed<\/em>)<\/p>\n
\nChaque objet sprite<\/em><\/strong> a aussi un attribut mouseIsOver<\/em><\/strong>, qui a une valeur bool\u00e9enne: true<\/strong><\/em> si la souris est au-dessus de l’objet, et false<\/em><\/strong> autrement. Dans l’exemple suivant, les 2 sprites<\/strong><\/em> r\u00e9pondent lorsque la souris est au-dessus d’eux. (Pour le second sprite<\/strong><\/em>, le comportement de r\u00e9action ne se produit que si le bouton de la souris est \u00e9galement appuy\u00e9).<\/p>\nvar sprite1;\r\nvar sprite2;\r\n\r\nfunction setup() {\r\n createCanvas(400, 400);\r\n sprite1 = createSprite(width\/2, height\/3,100, 100);\r\n sprite1.shapeColor = color(236,36,94);\r\n sprite1.mouseActive = true;\r\n sprite2 = createSprite(width\/2, height*0.67,100, 100);\r\n sprite2.shapeColor = color(36,236,94);\r\n sprite2.mouseActive = true;\r\n}\r\n\r\nfunction draw() {\r\n background(220);\r\n if (sprite1.mouseIsOver) {\r\n background(36,236,94);\r\n }\r\n if (sprite2.mouseIsOver && mouseIsPressed) {\r\n sprite2.rotation += 4;\r\n }\r\n drawSprites();\r\n}<\/pre>\nLes sprites multiples<\/h3>\n
function setup() {\r\n createCanvas(400, 400);\r\n}\r\nfunction draw() {\r\n background(220);\r\n drawSprites();\r\n}\r\nfunction mousePressed() {\r\n var sprite = createSprite(width\/2, height\/2, random(10, 50), random(10, 50));\r\n sprite.shapeColor = color(236,36,94);\r\n sprite.velocity.y = random(3);\r\n sprite.velocity.x = random(-3, 3);\r\n sprite.position.x = mouseX;\r\n sprite.position.y = mouseY;\r\n sprite.friction = 0.01;\r\n sprite.life = 200;\r\n}<\/pre>\n
\nDans l’exemple suivant, la variable allSprites<\/em><\/strong>\u00a0est utilis\u00e9e pour appliquer la “gravit\u00e9” (c’est-\u00e0-dire une force constante vers le bas) \u00e0 chaque sprite<\/em><\/strong> ajout\u00e9 \u00e0 la sc\u00e8ne dans mousePressed ()<\/em><\/strong>\u00a0une autre variable\u00a0allSprites<\/em><\/strong>\u00a0<\/em>v\u00e9rifie si le sprite<\/strong><\/em> est au-del\u00e0 de la hauteur du croquis (400px ici), et le fait “rebondir” si c’est le cas. Une variable\u00a0allSprites<\/em><\/strong><\/i>\u00a0supprime tous les sprites<\/strong><\/em> qui ont d\u00e9pass\u00e9 la limite de l’esquisse dans la dimension x.<\/p>\nfunction setup() {\r\n createCanvas(400, 400);\r\n}\r\nfunction draw() {\r\n background(220);\r\n for (var i = 0; i < allSprites.length; i++) {\r\n \/\/ gravit\u00e9\r\n allSprites[i].addSpeed(0.1, 90);\r\n if (allSprites[i].position.y > height) {\r\n allSprites[i].velocity.y *= -1;\r\n }\r\n \/* tout code supprimant les sprites doit \u00eatre \u00e0 la fin de draw *\/\r\n if (allSprites[i].position.x > width+20 || allSprites[i].position.x < -20) {\r\n allSprites[i].remove();\r\n }\r\n }\r\n textAlign(RIGHT, TOP);\r\n text(\"compteur de sprites: \" + allSprites.length, width-10, 10);\r\n drawSprites();\r\n}\r\nfunction mousePressed() {\r\n var sprite = createSprite(width\/2, height\/2, 40, 40);\r\n sprite.shapeColor = color(236,36,94);\r\n sprite.velocity.y = random(3);\r\n sprite.velocity.x = random(-3, 3);\r\n sprite.position.x = mouseX;\r\n sprite.position.y = mouseY;\r\n}<\/pre>\n\u00c9v\u00e9nements sur plusieurs sprites<\/h3>\n
var score = 0;\r\n\r\nfunction setup() {\r\n createCanvas(400, 400);\r\n for (var i = 0; i < 10; i++) {\r\n var sprite = createSprite(random(width), random(height), 40, 40);\r\n var r = random(255);\r\n var v = random(255);\r\n var b = random(255);\r\n sprite.shapeColor = color(r, v, b);\r\n sprite.onMouseOver = removeAndScore;\r\n }\r\n}\r\n\r\nfunction draw() {\r\n background(220);\r\n drawSprites();\r\n fill(255);\r\n noStroke();\r\n textSize(72);\r\n textAlign(CENTER, CENTER);\r\n if (score < 10) {\r\n text(score, width\/2, height\/2);\r\n }\r\n else {\r\n text(\"Bravo !\", width\/2, height\/2);\r\n }\r\n}\r\n\r\nfunction removeAndScore() {\r\n score += 1;\r\n this.remove();\r\n}<\/pre>\nGroupes de sprites<\/h3>\n
var nuages;\r\nvar oiseaux;\r\nfunction setup() {\r\n createCanvas(400, 400);\r\n nuages = new Group();\r\n oiseaux = new Group();\r\n\r\nfor (var i = 0; i < 10; i++) {\r\n var sprite1 = createSprite(random(width), random(height), random(25, 100), random(25, 100));\r\n sprite1.shapeColor = color(random(200, 255));\r\n nuages.add(sprite1);\r\n }\r\n for (var i = 0; i < 5; i++) {\r\n var sprite2 = createSprite(random(width), random(height), random(10, 50), random(5, 25));\r\n sprite2.shapeColor = color(255, 0, random(255));\r\n sprite2.friction = random(-0.01, -0.03);\r\n sprite2.maxSpeed = random(1, 4);\r\n sprite2.rotateToDirection = true;\r\n oiseaux.add(sprite2);\r\n }\r\n}\r\nfunction draw() {\r\n background(0, 150, 240);\r\n for (var i = 0; i < nuages.length; i++) {\r\n nuages[i].position.x += nuages[i].width * 0.01;\r\n if (nuages[i].position.x > width) {\r\n nuages[i].position.x = 0;\r\n }\r\n }\r\n for (var i = 0; i < oiseaux.length; i++) {\r\n oiseaux[i].attractionPoint(0.2, mouseX, mouseY);\r\n }\r\n drawSprites();\r\n}<\/pre>\n