"use strict";

​

//Canvas and context

var canvas = document.getElementById('canvas'),

    ctx = canvas.getContext('2d'),

​

//Buttons

    randColBtn = document.getElementById('randColBtn'),

    randPosBtn = document.getElementById('randPosBtn'),

    sortDotsBtn = document.getElementById('sortDotsBtn'),

​

//Globals

    dots = [],

    color = '#AAAAAA';

​

//Constants

const DOT_RADIUS = 20;

​

​

//Dot constructor

var Dot = function(x, y, c) {

  this.x = x;

  this.y = y;

  this.color = c;

​

  this.draw = function() {

    ctx.fillStyle = this.color;

    ctx.beginPath();

    ctx.arc(this.x-DOT_RADIUS/2, this.y-DOT_RADIUS/2, DOT_RADIUS, 0, 2 * Math.PI);

    ctx.fill();

  }

}

​

//Checks if the mouse has clicked within the boundaries of an existing dot

var isOverlap = function(d) {

  for (var i = dots.length - 1; i >= 0; i--) {

    let normalizedX = d.x - dots[i].x,

        normalizedY = d.y - dots[i].y;

    if (-DOT_RADIUS < normalizedX && normalizedX < DOT_RADIUS && -DOT_RADIUS < normalizedY && normalizedY < DOT_RADIUS) {

      dots.splice(i,1);

      return true;

    }

  }

  return false;

}

​

​

var limit = 10;

var bouncing = [-100, 100];

var rand = (min, max) => ~~(Math.random() * (max - min + 1)) + min;

var randColor = ()=> "rgb(" + ~~(Math.random()*256) + "," + ~~(Math.random()*256) + "," + ~~(Math.random()*256) + ")";

​

//Event listeners

canvas.addEventListener("click", function(e) {  

  // just check position, no need to create dot here

  if (!isOverlap({x: e.clientX, y:e.clientY})) {

    // array of random dots

    var newDots = [...Array(limit||0)]

        .map((v,i) => new Dot(

             e.clientX + rand.apply(null, bouncing),

             e.clientY + rand.apply(null, bouncing),

             randColor()

        ))

    // draw new dots

    newDots.forEach(dot=>dot.draw());

    //extend dots

    dots = [...dots, ...newDots];

  } else {

    ctx.clearRect(0,0,canvas.width,canvas.height);

    for (var i = 0; i < dots.length; i++) {

      dots[i].draw();

    }

  }

});

​

randColBtn.addEventListener("click", function(e) {

  color = "rgb(" + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + ")";

});

​

randPosBtn.addEventListener("click", function(e) {

  ctx.clearRect(0,0,canvas.width,canvas.height);

  for (var i = 0; i < dots.length; i++) {

    dots[i].x = Math.random()*canvas.width;

    dots[i].y = Math.random()*canvas.height;

    dots[i].draw();

  }

});

​

sortDotsBtn.addEventListener("click", function(e) {

  ctx.clearRect(0,0,canvas.width,canvas.height);

  for (var i = 0; i < dots.length; i++) {

    dots[i].x = 2*DOT_RADIUS*i%canvas.width + 3/2*DOT_RADIUS;

    dots[i].y = Math.floor(2*DOT_RADIUS * i/canvas.width) * 2*DOT_RADIUS + 3/2*DOT_RADIUS;

    dots[i].draw();

  }

});