let rollover = false;

let cx, cy, cr;

let x, y, r;

let lx, ly, angle, lcol;

let offsetX, offsetY;

​

function setup() {

  createCanvas(500, 500);

  cx = width / 2;

  cy = height / 2;

  cr = 25;

  r = 0;

  offsetX = 0;

  offsetY = 0;

  lcol = 255;

  rectMode(CENTER);

  angleMode(DEGREES);

}

​

function draw() {

  background(50);

​

  if (dist(mouseX, mouseY, cx, cy) < cr) {

    rollover = true;

  } else {

    rollover = false;

  }

​

  for (x = 0; x <= width; x += width / 20) {

    for (y = 0; y <= height; y += height / 20) {

      stroke(255);

      strokeWeight(1);

      fill(255);

      // changes size of ellipse according to mouseX, mouseY

      ellipse(x, y, r);

    }

  }

  strokeWeight(0.25);

  for (lx = -width; lx <= width * 2; lx += width / 20) {

    for (ly = -height; ly <= height * 2; ly += height / 20) {

      push();

      translate(width/2, height/2);

      rotate(angle);

      stroke(lcol);

      line(lx, ly + width / 20, lx + width / 20, ly);

      pop();

    }

  }

​

  if (dragging) {

    cx = constrain(mouseX + offsetX, width / 2 - cr * 4, width / 2 + cr * 4);

    cy = constrain(mouseY + offsetY, height / 2 - cr * 4, height / 2 + cr * 4);

    r = constrain(map(mouseX, width / 2 - cr * 5, width / 2 + cr * 5, 0, width/15), 0, width/15);

    angle = constrain(map(mouseY, height / 2 - cr * 5, height / 2 + cr * 5, 0, 90), 0, 90);

    lcol = map(mouseX, width / 2 - cr * 5, width / 2 + cr * 5, 255, 50);

  }

  stroke(180, 50, 80);

  strokeWeight(3);

  fill(180, 50, 80, 25);

  rect(width / 2, height / 2, cr * 10, cr * 10);

​

  noStroke();

  if (dragging) {

    fill(225, 100, 150);

  } else if (rollover) {

    fill(225, 50, 100);

  } else {

    fill(180, 50, 80);

  }

  ellipse(cx, cy, cr * 2);

}

​

function mousePressed() {

  if (dist(mouseX, mouseY, cx, cy) < cr) {

    dragging = true;

    offsetX = cx - mouseX;

    offsetY = cy - mouseY;

  }

}

​

function mouseReleased() {

  dragging = false;

}