/* built with Studio Sketchpad: 
 *   https://sketchpad.cc
 * 
 * observe the evolution of this sketch: 
 *   https://p5js.sketchpad.cc/sp/pad/view/ro.MWj8xpYD4cC/rev.11
 * 
 * authors: 
 *   GoToLoop

 * license (unless otherwise specified): 
 *   creative commons attribution-share alike 3.0 license.
 *   https://creativecommons.org/licenses/by-sa/3.0/ 
 */ 



/**
 * Easing Box (v2.2)
 * Author: MsKelly (2016-Oct-04)
 * Mod: GoToLoop
 *
 * forum.Processing.org/two/discussion/18404/
 * processing-code-doesn-t-work-in-p5#Item_6
 *
 * p5js.SketchPad.cc/sp/pad/view/ro.CQ494WRivD81VV/latest
 * Bl.ocks.org/GoSubRoutine/dc44acdaa0f05c1402ea33bd60a69da4
 */

"use strict";

const EASING = .05, LIMIT = .1,
      RAD = 15, EDGE = 50,
      INNER = EDGE + RAD;

let mx = INNER, my = INNER,
    iw, ih, ew, eh,
    boxCol, ballCol;

function setup() {
  createCanvas(400, 500);

  ellipseMode(RADIUS).rectMode(CORNERS);
  noStroke().background(0);

  iw = width - INNER, ih = height - INNER;
  ew = width - EDGE,  eh = height - EDGE;

  boxCol  = color(196, 239, 234);
  ballCol = color(146, 140, 211);
}

function draw() {
  const dx = mouseX - mx, dy = mouseY - my;

  if (abs(dx) > LIMIT)  mx = constrain(mx + dx*EASING, INNER, iw);
  if (abs(dy) > LIMIT)  my = constrain(my + dy*EASING, INNER, ih);

  fill(boxCol).rect(EDGE, EDGE, ew, eh);
  fill(ballCol).ellipse(mx, my, RAD, RAD);
}