let clicked;

let c1;

var objs;

let boxSize = 75

let overBox = false

let locked = false

let bx, by;

let xOffset, yOffset = 0.0

function setup() {

  createCanvas(400, 400);

  c1 = color(20, 20, 20)

  clicked = false

  rectMode(RADIUS)

  objs = [];

  let rect1 = {

    'xmin': 30,

    'xmax': 25,

    'ymin': 30,

    'ymax': 25,

    'clicked': false,

    'clr': color(20, 20, 20),

    'clr1': color(20, 20, 20),

    'clr2': color(15, 20, 250)

  }

  let rect2 = {

    'xmin': 120,

    'xmax': 25,

    'ymin': 30,

    'ymax': 25,

    'clicked': false,

    'clr': color(20, 20, 20),

    'clr1': color(20, 20, 20),

    'clr2': color(15, 20, 250)

  }

  objs.push(rect1)

  objs.push(rect2)

  bx = width / 2.0

  by = height / 2.0

  strokeWeight(2)

}

​

function draw() {

  background(220);

  //text(deltaTime/50, 200, 100)

  objs.forEach(function(item) {

    stroke(255)

    fill(item.clr);

    rect(item.xmin, item.ymin, item.xmax, item.ymax);

  })

  if (mouseX > bx-boxSize &&

      mouseX < bx+boxSize &&

      mouseY > by-boxSize &&

      mouseY < by+boxSize) {

    overBox = true

    if(!locked) {

      stroke(255)

      fill(244, 122, 158)

    }

  } else {

    stroke(156, 39, 176)

    fill(244, 122, 158)

    overBox = false

  }

  rect(bx, by, boxSize, boxSize)

}

function switcher(item) {

  if (mouseX >= item.xmin-item.xmax && mouseX <= item.xmin+item.xmax && mouseY >= item.ymin-item.ymax && mouseY <= item.ymin+item.ymax) {

    if (item.clicked) {

      item.clr = item.clr1

      item.clicked = false;

    } else {

      item.clr = item.clr2

      item.clicked = true;

    }

  }

}

​

function mouseClicked() {

  //console.log(mouseX)

 // console.log(mouseY)

  objs.forEach(switcher);

}

​

function mousePressed() {

  if (overBox) {

    locked = true;

    fill(255, 0, 255);

  } else {

    locked = false;

  }

  xOffset = mouseX - bx

  yOffset = mouseY - by

}

function mouseDragged() {

  if (locked) {

    bx = mouseX - xOffset

    by = mouseY - yOffset

  }

}

​

function mouseReleased(){

  locked = false

}

​