let selected;

let droppedImage;

​

function setup() {

  main = createCanvas(800, 800);

  main.drop(gotFile);

  angleMode(DEGREES);

  a[0] = new Im(100, 100, 100, 100);

  a[1] = new Im(80, 300, 100, 100);

  selected = -1;

}

​

function draw() {

  background(220);

  for (let i = 0; i < a.length; i++) a[i].display();

}

​

function mousePressed() {

  selected = -1;

  for (let i = 0; i < a.length; i++)

    if (a[i].isNear()) selected = i;

}

​

function mouseReleased() {

  selected = -1;

  for (let i = 0; i < a.length; i++)

    if (a[i].isNear()) selected = i;

  if (selected >= 0)

    print(a[selected].im);

}

​

function mouseDragged() {

  if (selected >= 0) {

    a[selected].x += mouseX - pmouseX;

    a[selected].y += mouseY - pmouseY;

  }

}

​

function gotFile(file) {

  // print(file.name + ' ' + file.size);

  droppedImage = createImg(file.data).hide();

  if (selected >= 0) {

    a[selected].setImage(droppedImage);

  }

}

​

function mouseWheel(event) {

  if (selected >= 0) 

    a[selected].s += 0.001*event.deltaY;

}

​

class Im {

  constructor(x, y, w, h) {

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.a = 0;

    this.s = 1;

    this.im = createImage(100, 100);

    this.index = a.length;

  }

  display() {

    push();

    rectMode(CENTER);

    translate(this.x, this.y);

    rotate(this.a);

    scale(this.s);

    imageMode(CENTER);

    image(this.im, 0, 0);

    noFill();

    rect(0, 0, this.w, this.h);

    if ((this.isNear() && (selected == -1)) || (selected == this.index)) {

      fill(255);

      circle(0, 0, 10);

      circle(-this.w / 2, -this.h / 2, 10);

      circle(-this.w / 2, this.h / 2, 10);

      circle(this.w / 2, -this.h / 2, 10);

      circle(this.w / 2, this.h / 2, 10);

    }

    pop();

  }

  isNear() {

    return ((dist(mouseX, mouseY, this.x, this.y) < 50));

  }

  setImage(img) {

    this.im = img;

    this.w = img.width;

    this.h = img.height;

  }

}