Canvas pallini

by sandro_paganotti

HTML

<canvas></canvas>

JavaScript

var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');

var pallini = [];

function getNewPoint(){
    var overlap = true;
    var tries = 1000;
    while(overlap && --tries > 0){
        overlap = false;
        var x = Math.round(Math.random()*canvas.width);
        var y = Math.round(Math.random()*canvas.height);
        var r = Math.round(Math.random()*1+8);
        for(var k =0; k < pallini.length; k++){
            var xa0 = x - r;
            var xb0 = pallini[k].x - pallini[k].r;
            var xa1 = x + r;
            var xb1 = pallini[k].x + pallini[k].r;
            var ya0 = y - r;
            var yb0 = pallini[k].y - pallini[k].r;
            var ya1 = y + r;
            var yb1 = pallini[k].y + pallini[k].r;            
            if( (
                 (xa0 >= xb0 && xa0 <= xb1) || (xa1 >= xb0 && xa1 <= xb1) || (xa0 <= xb0 && xa1 >= xb1)
                ) && (
                 (ya0 >= yb0 && ya0 <= yb1) || (ya1 >= yb0 && ya1 <= yb1) || (ya0 <= yb0 && ya1 >= yb1)
                ) 
              ){
            overlap = true;
            }
        }
    }
    var point = {x: x, y: y, r: r};
    pallini.push(point);
    return tries > 0 ? point : false;
}

var interval = setInterval(function(){
    var point = getNewPoint();
    if(!point){
        clearInterval(interval);
        alert('Finito!');
    }
    context.beginPath();
    context.arc(point.x,point.y,point.r,0,360);
    context.fill();
    context.closePath();
}, 500);