Collisions

var sprite1;
var sprite2;
function setup() {
 createCanvas(400, 400);
 sprite1 = createSprite(width/2, height/2, 150, 150);
 sprite2 = createSprite(0, 0, 50, 50);
 sprite2.shapeColor = color(236,36,94);
}
function draw() {
 background(220);
 sprite2.velocity.x = (mouseX-sprite2.position.x)*0.2;
 sprite2.velocity.y = (mouseY-sprite2.position.y)*0.2;
 if (sprite2.overlap(sprite1)) {
 sprite1.shapeColor = color(36,236,94);
 }
 else {
 sprite1.shapeColor = color(236,36,94);
 }
 drawSprites();
}

.collide

var sprite1;
var sprite2;
function setup() {
 createCanvas(400, 400);
 sprite1 = createSprite(width/2, height/2, 100, 100);
 sprite1.shapeColor = color(236,36,94);
 sprite2 = createSprite(0, 0, 50, 50);
 sprite2.shapeColor = color(36,236,94);
}
function draw() {
 background(220);
 sprite2.velocity.x = (mouseX-sprite2.position.x)*0.2;
 sprite2.velocity.y = (mouseY-sprite2.position.y)*0.2;
 sprite2.collide(sprite1);
 drawSprites();
}

.displace

var sprite1;
var sprite2;
function setup() {
 createCanvas(400, 400);
 sprite1 = createSprite(width/2, height/2, 100, 100);
 sprite1.shapeColor = color(236,36,94);
 sprite2 = createSprite(0, 0, 50, 50);
 sprite2.shapeColor = color(36,236,94);
}

function draw() {
 background(220);
 sprite2.displace(sprite1);
 drawSprites();
}

function keyPressed() {
 if (keyCode == RIGHT_ARROW) {
 sprite2.setSpeed(1.5, 0);
 }
 else if (keyCode == DOWN_ARROW) {
 sprite2.setSpeed(1.5, 90);
 }
 else if (keyCode == LEFT_ARROW) {
 sprite2.setSpeed(1.5, 180);
 }
 else if (keyCode == UP_ARROW) {
 sprite2.setSpeed(1.5, 270);
 }
 else if (key == ' ') {
 sprite2.setSpeed(0, 0);
 }
 return false;
}

Group collisions

var murs;
var boites;
var joueur;

function setup() {
 createCanvas(400, 400);
 murs = new Group();
 boites = new Group();
 joueur = createSprite(100, 100, 40, 40);
 joueur.shapeColor = color(236,36,94);
 for (var i = 0; i < 5; i++) {
 var mur = createSprite(random(125, width-125), (height/5)*i, random(10, 100), random(10, 100));
 mur.shapeColor = color(94,236,36);
 murs.add(mur);
 }
 for (var i = 0; i < 4; i++) {
 var boite = createSprite(random(50, 100), random(100, height-100),25, 25);
 boite.shapeColor = color(236,236,94);
 boites.add(boite);
 }
}

function draw() {
 background(220);
 joueur.velocity.x = 
 (mouseX-joueur.position.x)*0.1;
 joueur.velocity.y = (mouseY-joueur.position.y)*0.1;
 joueur.collide(murs);
 joueur.displace(boites);
 boites.collide(murs);
 boites.displace(boites);
 drawSprites();
}

Collision callbacks

var pieces;
var joueur;
var score = 0;
function setup() {
 createCanvas(400, 400);
 pieces = new Group();
 for (var i = 0; i < 10; i++) {
 var piece = createSprite(random(10, width-10), random(10, height-10), 10, 10);
 piece.shapeColor = color(36, 236, 94);
 pieces.add(piece);
 }
 joueur = createSprite(50, 50, 40, 40);
 joueur.shapeColor = color(236,36,94);
}
function draw() {
 background(220);
 joueur.velocity.x = 
 (mouseX-joueur.position.x)*0.1;
 joueur.velocity.y = 
 (mouseY-joueur.position.y)*0.1;
 joueur.overlap(pieces, getPiece);
 drawSprites();
 fill(255);
 noStroke();
 textSize(72);
 textAlign(CENTER, CENTER);
 if (pieces.length > 0) {
 text(score, width/2, height/2);
 }
 else {
 text("Bravo !", width/2, height/2);
 }
}
function getPiece(joueur, piece) {
 piece.remove();
 score += 1;
}

Images & animations

sm0.svg

var sm;
var smImg;
function preload() {
  smImg = loadImage('sm0.svg');
}

function setup() {
  createCanvas(400, 400);
  sm = createSprite(width/2, height/2);
  sm.addImage(smImg);
}

function draw() {
  background(255);
  sm.position.x = mouseX;
  sm.position.y = mouseY;
  if (mouseIsPressed) {
    sm.rotation += 2;
    noCursor();  
} else {
  cursor(CROSS);  
}  
drawSprites();}

var sprite;
var spriteImg;

function preload() {
 spriteImg = loadAnimation("sm0.svg", "sm1.svg", "sm2.svg", "sm3.svg", "sm4.svg", "sm5.svg");
}

function setup() { 
  createCanvas(400, 400);
  sprite = createSprite(width/2, height/2);
  sprite.addAnimation("default", spriteImg);
  sprite.rotateToDirection = true; 
  sprite.maxSpeed = 2; sprite.friction = .01;
}

function draw() {
 background(255);
 if (mouseIsPressed) {
 sprite.attractionPoint(0.5, mouseX, mouseY); 
} 
drawSprites();
}