// colors and line weights
var NOTHING = 0;
var EVERYTHING = 255;
var MOSTLY = 200;
var THICK_WEIGHT = 4;
var THIN_WEIGHT = 1;

// background
var CANVAS_WIDTH = 1000;
var CANVAS_HEIGHT = 750;

// touchpad
var BOX_SIZE = 50;
var X_MIN = CANVAS_WIDTH - (2 * BOX_SIZE);
var X_MAX = X_MIN + BOX_SIZE;
var Y_MIN = BOX_SIZE;
var Y_MAX = Y_MIN + BOX_SIZE;

// the circle
var DIAMETER = 20;
var EASING = 0.1;
var x_now = 0;
var y_now = 0;

var remap_cursor = function(sketch){
  sketch.setup = function(){
    sketch.createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT);
    sketch.background(NOTHING, NOTHING, EVERYTHING);
    sketch.stroke(EVERYTHING);
    sketch.strokeWeight(THIN_WEIGHT);
    sketch.fill(NOTHING, NOTHING, EVERYTHING);
    sketch.rect(X_MIN, Y_MIN, BOX_SIZE, BOX_SIZE);
  }// end sketch.setup

  sketch.draw = function(){
    // refresh the background
    sketch.background(NOTHING, NOTHING, EVERYTHING, MOSTLY);
    sketch.rect(X_MIN, Y_MIN, BOX_SIZE, BOX_SIZE);

    // map the mouse position in the box to the larger image
    mx = sketch.map(sketch.mouseX, X_MIN, X_MAX, 0, CANVAS_WIDTH);
    my = sketch.map(sketch.mouseY, Y_MIN, Y_MAX, 0, CANVAS_HEIGHT);

    // add easing
    x_now = x_now + (mx - x_now) * EASING;
    y_now = y_now + (my - y_now) * EASING;

    // draw the circle
    sketch.strokeWeight(THICK_WEIGHT);
    sketch.ellipse(x_now, y_now,
                   DIAMETER, DIAMETER);


  }// end sketch.draw
}// end remap_cursor
    sketch.strokeWeight(THIN_WEIGHT);