collision.js

function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

class Entity {
  constructor(_color, _radius, _x, _y, col) {
    this.color = _color;
    this.radius = _radius;
    this.x = _x;
    this.y = _y;
    this.collides = true;
  }
  
  draw() {
    fill(hexToRgb(this.color).r,
         hexToRgb(this.color).g,
         hexToRgb(this.color).b);
    ellipse(this.x, this.y, this.radius, this.radius);
    
  }
}

foo = new Entity("#000000", 40, 300, 300);
let collider;

function setup() {
  createCanvas(400, 400);
  background(255, 255, 255);
  fill(0, 0, 0);
  collider = new Entity("#FF0000", 60, width/2, height/2);
}

function draw() {
  background(255, 255, 255);
  foo.x = mouseX;
  foo.y = mouseY;
  
  if (pythagoras(foo.x, collider.x, foo.y, collider.y) < (collider.radius/2 + foo.radius/2)) {
    foo.color = "#FF0000";
      }
  else {
    foo.color = "#000000";
  }
  collider.draw();
  foo.draw();
}

function pythagoras (x1, x2, y1, y2) {
  toRet = sqrt(pow(x2 - x1, 2) + pow ((y2 - y1), 2));
  console.log(toRet);
  return toRet;
}