let creatures = [["dog", "mammal"],
                 ["cat", "mammal"],
                 ["bird", "avian"],
                 ["bee", "insect"],
                 ["wasp", "insect"]];

let mammals = creatures.filter(c => c[1] === "mammal");

let doOnce = true;

let colors = [];
let balls = [];

let hoverColor;
let selectedColor;

function setup() {
  createCanvas(640,480);
  frameRate(144);
  noStroke();
  textSize(50);
  console.table(creatures);
  console.table(mammals)

  hoverColor = color(50,200,50);
  selectedColor = color(50,50,200);

  //balls = [new Ball(100,100,100, color(255))];
  for(let i = 0; i < 10; i++){
    colors[i] = color(random(255), random(255), random(255));
  }
  background(50);
  console.log(balls[0]);
}

class Ball {
  x = 0;
  y = 0;
  r = 0;
  fillColor = 0;
  selected = false;
  ox = 0;
  oy = 0;

  constructor(x,y,r,c){
    this.x = x;
    this.y = y;
    this.r = r;
    this.fillColor = c;
  }

  display(){
    fill(this.fillColor);
    if(this.hovered){ fill(hoverColor); }
    if(this.selected){ fill(selectedColor); }
    circle(this.x,this.y,this.r);
  }
  update(){
    if(this.selected && mouseIsPressed){
      this.x = mouseX + this.ox;
      this.y = mouseY + this.oy;
    } else {
      this.selected = false;
    }
  }
  grab(mx,my){
    this.ox = this.x - mx;
    this.oy = this.y - my;
  }
  release(){
    this.ox = 0;
    this.oy = 0;
  }
}




let currentColor = 0;
let x = 10;
function draw() {
  background(0);
  if(doOnce){
    console.table(mammals);
    doOnce = false;
  }

  checkHover();
  displayBallPlacement(newBallX, newBallY);

  balls.forEach(ball => ball.update());
  balls.forEach(ball => ball.display());
}

var ballStarted = false;
var newBallX = 0;
var newBallY = 0;

function beginBall(mx, my){
  ballStarted = true;
  newBallX = mx;
  newBallY = my;
}

function displayBallPlacement(mx, my){
  let minSize = 10;

  if(ballStarted){
    let r = dist(mx, my, mouseX, mouseY) * 2;
    if(r > minSize){ fill(color(25,100,25)); }
    if(r < minSize){ fill(color(100,25,25)); }
    circle(mx, my, r);
    if(!mouseIsPressed){
      ballStarted = false;
      if(r > minSize){
        balls[balls.length] = (new Ball(mx,my,r,random(100,256)));
      }
    }
  }
}

let bgColor = 50;
let brushSize = 5;

function clearBG(){
  background(bgColor);
}
function randomBG(){
  bgColor = (color(random(255), random(255), random(255)));
  background(bgColor);
}

function checkHover(){
  if(mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height){
    balls.forEach(b => dist(mouseX, mouseY, b.x, b.y) < b.r/2 ? b.hovered = true : b.hovered = false);
  }
}

function mousePressed(){
  if(mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height){
    if(balls.filter(b => b.hovered).length === 0){
      beginBall(mouseX, mouseY);
    } else {
      balls.forEach(b => b.hovered ? b.selected = true : b.selected = false);
      balls.forEach(b => b.selected ? b.grab(mouseX, mouseY) : b.release());
    }
  }
}