script.js

var canvas;
var handleVal;
var isClicked = false;
//var clock;


// Class Definition
var UiHandle = function (startX, startY, width, height){
  this.x = startX;
  this.y = startY;
  //this.handleVal = ;  
  this.width = width;
  this.height = height;
  this.isClicked = false;
  this.getClick = getClicked;
  this.col = color(175, 175, 175);

  fill(this.col);
  rect(this.x, this.y, this.width, this.height);
}

function getClicked(){
  // Determining if click is inside handle dimensions
  if(mouseX > this.x && mouseX < this.x + this.width && mouseY > this.y && mouseY < this.y + this.height && mouseIsPressed){
    this.isClicked = true;
    this.col = color(255, 25, 25);
    console.log("Condition 1: " + this.isClicked);
  } else {
    this.isClicked = false;
    this.col = color(175, 175, 175);
    console.log("Condition 2: " + this.isClicked);
  }
  return this.isClicked;
  return this.col;
}

function setup() {
  canvas = createCanvas(400, 200);
}

function draw() {
  background(255);
  ellipse(canvas.width/2, canvas.height/4, 25, 25);
  //clock = document.getElementById('clock').setInnerHTML(mouseX);
  line(50, 100, 350, 100);
  
  // Instantiating handle object 
  var handle = new UiHandle(50,87,25,25);
  handle.getClick();
  //console.log(handle.isClicked);
  
  // If handle is clicked and moved, update handle location and color
  if (isClicked === true){
    handle.x = mouseX;
    handle.col = (255, 25, 25);
    //handle.isClicked();
  }
}