Non overlapping circles Faster Edition

by asemahle

HTML

<canvas id="canvas" 
        width="640px" 
        height="480px"
        ></canvas>

CSS

canvas {
  border:1px solid #d3d3d3;
}

JavaScript

function drawCircle(c, maxSize) {
	ctx.beginPath();
	ctx.arc(c.x, c.y, c.r, 0, 2*Math.PI);
  //let rgb = hslToRgb(Math.sqrt(c.r)/Math.sqrt(maxSize), 0.5, 0.5);
  let rgb = hslToRgb(c.x/640, 0.5, 1 - c.y/480);
  ctx.fillStyle = 'rgb('+rgb[0]+','+rgb[1]+','+rgb[2]+')';
  ctx.fill();
  //ctx.strokeStyle = 'rgb('+rgb[0]+','+rgb[1]+','+rgb[2]+')';
	//ctx.stroke();
}

function hslToRgb(h, s, l){
    var r, g, b;

    if(s == 0){
        r = g = b = l; // achromatic
    }else{
        var hue2rgb = function hue2rgb(p, q, t){
            if(t < 0) t += 1;
            if(t > 1) t -= 1;
            if(t < 1/6) return p + (q - p) * 6 * t;
            if(t < 1/2) return q;
            if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
            return p;
        }

        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        var p = 2 * l - q;
        r = hue2rgb(p, q, h + 1/3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1/3);
    }

    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}

function fillCircle(c, filled,empty) {
	let dTheta = 1 / c.r;
  for(let theta = 0; theta < Math.PI; theta+=dTheta) {
  	let p = {x: c.r * Math.cos(theta), y: c.r * Math.sin(theta)};
    
    for(let y = p.y; y > -p.y; y--) {
    	if (filled[Math.floor(c.x + p.x)])
      	filled[Math.floor(c.x + p.x)][Math.floor(c.y + y)] = true;
    }
  }
  
  let si = null;
  let count = 0;
  for(let i = 0; i < empty.length; i++) {
  	point = empty[i];
  	if(filled[point.x][point.y]) {
    	if (si == null) {
      	si = i;
      	count = 0;
      }
      count++
    } else if(si != null) {
    	empty.splice(si, count);
      si = null;
    }
  }
}

function noIntersection(c, filled) {
	let dTheta = 1 / c.r;
  for(let theta = 0; theta < (2*Math.PI); theta+=dTheta) {
    let p = {x: c.r * Math.cos(theta), y: c.r * Math.sin(theta)};
    if (filled[Math.floor(c.x+p.x)] && 
    		filled[Math.floor(c.x+p.x)][Math.floor(c.y+p.y)]
    ) {
    	return false;
    }
  }
 ...