Événement souris

Les sprites dans la librairie p5.play sont livrés avec un mécanisme intégré pour détecter si l’utilisateur interagit ou non avec le sprite à l’aide de la souris. Il y a 2 façons de vérifier l’interaction avec la souris: les callbacks ou les attributs booléens.
Il existe 4 attributs d’un objet sprite auxquels des fonctions peuvent être affectées afin de définir le comportement du sprite par rapport au mouvement de la souris de l’utilisateur.
L’exemple suivant illustre les 4:

var sprite1;
var sprite2;
function setup() {
 createCanvas(400, 400);

sprite1 = createSprite(width/2, height/3,100, 100);
 sprite1.shapeColor = color(236,36,94);
 sprite1.onMouseOver = function() {
 this.scale = 2;
 }
 sprite1.onMouseOut = function() {
 this.scale = 1;
 }

sprite2 = createSprite(width/2, height*0.67,100, 100);
 sprite2.shapeColor = color(36,236,94);
 sprite2.onMousePressed = function() {
 this.shapeColor = color(236,36,94);
 }
 sprite2.onMouseReleased = function() {
 this.shapeColor = color(36,236,94);
 }
}
function draw() {
 background(220);
 drawSprites();
}

Les quatre attributs sont:
onMouseOver (lorsque le curseur de la souris se déplace sur l’objet)
onMouseOut (lorsque le curseur de la souris quitte l’objet)
onMousePressed (lorsque l’utilisateur appuie sur le bouton de la souris et que le curseur de la souris se trouve sur l’objet)
onMouseReleased (lorsque l’utilisateur relâche le bouton de la souris, après un événement onMousePressed)

La fonction affectée à ces attributs est exécutée chaque fois que l’événement spécifié se produit. Dans la fonction, l’expression se réfère à l’objet auquel l’interaction est arrivée. Cela est utile pour écrire des gestionnaires d’événements qui peuvent être appliqués à plusieurs objets : voir ci-dessous.
Chaque objet sprite a aussi un attribut mouseIsOver, qui a une valeur booléenne: true si la souris est au-dessus de l’objet, et false autrement. Dans l’exemple suivant, les 2 sprites répondent lorsque la souris est au-dessus d’eux. (Pour le second sprite, le comportement de réaction ne se produit que si le bouton de la souris est également appuyé).

var sprite1;
var sprite2;

function setup() {
 createCanvas(400, 400);
 sprite1 = createSprite(width/2, height/3,100, 100);
 sprite1.shapeColor = color(236,36,94);
 sprite1.mouseActive = true;
 sprite2 = createSprite(width/2, height*0.67,100, 100);
 sprite2.shapeColor = color(36,236,94);
 sprite2.mouseActive = true;
}

function draw() {
 background(220);
 if (sprite1.mouseIsOver) {
 background(36,236,94);
 }
 if (sprite2.mouseIsOver && mouseIsPressed) {
 sprite2.rotation += 4;
 }
 drawSprites();
}

Les sprites multiples

Vous pouvez appeler la fonction createSprite() autant de fois que vous le souhaitez ! La librairie p5.play garde une trace de tous les sprites que ajoutés. Dans l’exemple suivant, le code dans mousePressed () crée un nouveau sprite chaque fois que l’utilisateur clique avec la souris :

function setup() {
 createCanvas(400, 400);
}
function draw() {
 background(220);
 drawSprites();
}
function mousePressed() {
 var sprite = createSprite(width/2, height/2, random(10, 50), random(10, 50));
 sprite.shapeColor = color(236,36,94);
 sprite.velocity.y = random(3);
 sprite.velocity.x = random(-3, 3);
 sprite.position.x = mouseX;
 sprite.position.y = mouseY;
 sprite.friction = 0.01;
 sprite.life = 200;
}

Notez ici l’utilisation de l’attribut .life, qui détermine la durée de vie du sprite avant d’être automatiquement supprimé par la librairie p5.play.

Pour appliquer des changements aux sprites après leur création, autres que les changements que la librairie p5.play effectue seul, il faut itérer sur tous les sprites de la méthode draw (). La librairie fournit un tableau (une array) appelé allSprites qui contient tous les sprites actifs.
Dans l’exemple suivant, la variable allSprites est utilisée pour appliquer la « gravité » (c’est-à-dire une force constante vers le bas) à chaque sprite ajouté à la scène dans mousePressed () une autre variable allSprites vérifie si le sprite est au-delà de la hauteur du croquis (400px ici), et le fait « rebondir » si c’est le cas. Une variable allSprites supprime tous les sprites qui ont dépassé la limite de l’esquisse dans la dimension x.

function setup() {
 createCanvas(400, 400);
}
function draw() {
 background(220);
 for (var i = 0; i < allSprites.length; i++) {
 // gravité
 allSprites[i].addSpeed(0.1, 90);
 if (allSprites[i].position.y > height) {
 allSprites[i].velocity.y *= -1;
 }
 /* tout code supprimant les sprites doit être à la fin de draw */
 if (allSprites[i].position.x > width+20 || allSprites[i].position.x < -20) {
 allSprites[i].remove();
 }
 }
 textAlign(RIGHT, TOP);
 text("compteur de sprites: " + allSprites.length, width-10, 10);
 drawSprites();
}
function mousePressed() {
 var sprite = createSprite(width/2, height/2, 40, 40);
 sprite.shapeColor = color(236,36,94);
 sprite.velocity.y = random(3);
 sprite.velocity.x = random(-3, 3);
 sprite.position.x = mouseX;
 sprite.position.y = mouseY;
}

Événements sur plusieurs sprites

var score = 0;

function setup() {
 createCanvas(400, 400);
 for (var i = 0; i < 10; i++) {
 var sprite = createSprite(random(width), random(height), 40, 40);
 var r = random(255);
 var v = random(255);
 var b = random(255);
 sprite.shapeColor = color(r, v, b);
 sprite.onMouseOver = removeAndScore;
 }
}

function draw() {
 background(220);
 drawSprites();
 fill(255);
 noStroke();
 textSize(72);
 textAlign(CENTER, CENTER);
 if (score < 10) {
 text(score, width/2, height/2);
 }
 else {
 text("Bravo !", width/2, height/2);
 }
}

function removeAndScore() {
 score += 1;
 this.remove();
}

Groupes de sprites

var nuages;
var oiseaux;
function setup() {
 createCanvas(400, 400);
 nuages = new Group();
 oiseaux = new Group();

for (var i = 0; i < 10; i++) {
 var sprite1 = createSprite(random(width), random(height), random(25, 100), random(25, 100));
 sprite1.shapeColor = color(random(200, 255));
 nuages.add(sprite1);
 }
 for (var i = 0; i < 5; i++) {
 var sprite2 = createSprite(random(width), random(height), random(10, 50), random(5, 25));
 sprite2.shapeColor = color(255, 0, random(255));
 sprite2.friction = random(-0.01, -0.03);
 sprite2.maxSpeed = random(1, 4);
 sprite2.rotateToDirection = true;
 oiseaux.add(sprite2);
 }
}
function draw() {
 background(0, 150, 240);
 for (var i = 0; i < nuages.length; i++) {
 nuages[i].position.x += nuages[i].width * 0.01;
 if (nuages[i].position.x > width) {
 nuages[i].position.x = 0;
 }
 }
 for (var i = 0; i < oiseaux.length; i++) {
 oiseaux[i].attractionPoint(0.2, mouseX, mouseY);
 }
 drawSprites();
}