function preload() {

  img = loadImage('robot-head.png');

}

​

​

var dragging = false; // Is the object being dragged?

var rollover = false; // Is the mouse over the ellipse?

​

var x, y, w, h; // Location and size

var offsetX, offsetY; // Mouseclick offset

​

​

function setup() {

​

  createCanvas(window.innerWidth, window.innerHeight);

​

​

  // Starting location

  x = 100;

  y = 100;

​

  // Dimensions

  w = 100;

  h = 100;

​

}

​

function draw() {

  background(255);

​

​

  // Is mouse over object

  if (mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + h) {

    rollover = true;

  } else {

    rollover = false;

  }

​

  // Adjust location if being dragged

  if (dragging) {

    x = mouseX + offsetX;

    y = mouseY + offsetY;

  }

​

  stroke(0);

​

  image(img, x, y, w, h);

​

​

}

​

​

function mousePressed() {

​

  if (mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + h) {

    dragging = true;

​

    offsetX = x - mouseX;

    offsetY = y - mouseY;

  }

​

}

​

​

function mouseReleased() {

  // Quit dragging

  dragging = false;

}

​

​

​

// appuyer sur la touche "a" permet de télécharger la composition

​

function keyTyped() {

  if (key === 'a') {

    save('image.png');

  }

}