Circle Packing - All Work and no Play makes Jack a Dull BOY

circle-packing.html

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.js"></script>
<script src="sketch.js"></script>
<script src="circle.js"></script>

circle.js

function Circle(x_, y_, gwidth, gheight){

	this.x = x_;
	this.y = y_;
	this.r = 1;

	this.width = gwidth;
	this.height = gheight;

	this.growing = true;

	this.grow = function(){
		if(this.growing){
			this.r = this.r + 0.1
		}
	}

	this.edges = function(){
		return (this.r/2 + this.x > this.width ||
		 this.x - this.r/2 < 0 ||
		  this.y + this.r/2 > this.height ||
		this.y - this.r/2 < 0)
	}
	
	this.show = function(){
		stroke(255);
		strokeWeight(1);
		noFill();
		ellipse(this.x, this.y, this.r);
	}

}

sketch.js

var circles = [];
var img;
var spots = [];

function preload(){
	//img = loadImage("http://i.imgur.com/K6L5ieC.png");
	// 2 - impact, spaced
	//img = loadImage("http://i.imgur.com/H4h9KOZ.png")
	// 3 - Arial, spaced
	//img = loadImage("http://i.imgur.com/KAgRLq3.png");
	// 4 - Arial, spaced, bolder
	img = loadImage("http://i.imgur.com/SAOvcrX.png");
}

function setup(){
	
	createCanvas(img.width, img.height);
	//img = loadImage("http://i.imgur.com/K6L5ieC.png")
	//circles.push(new Circle(100,100, width, height))
	// create n random circles
	
	// iterate through pixels
	img.loadPixels();
	img.filter(THRESHOLD);
	
	console.log(img.pixels);
	
	for(var i=0;i<2*img.width;i++){
		for(var j=0;j<img.height;j++){
			var index = i*2 + (j*img.width)*8;
			
			if (img.pixels[index] > 200){
				spots.push(createVector(i/2,j*2));
			}
		}
	}
	console.log('num of spots', spots.length);
	//console.log(img.width, img.height);
}


function draw(){
	background(0);
	frameRate(25);

	// create 'n' new circle every frame
	var num_circles = 0;
	// it will get stuck in an infinite loop
	//	keep track of num of attempts
	var num_attempts = 1000;
	while(num_circles < 10 ){
		
		var c = createCircle();
		if(c){
			circles.push(c);
			num_circles++;
		}
		num_attempts--;

		 if(!Boolean(num_attempts)){
			 noLoop();
		 }
	}
	
	
	for(var i=0; i<circles.length; i++){
		// if you touch an edge, stop growing
		if(circles[i].edges()){ circles[i].growing = false; }
		// also, stop growing if you touch another cirlce
		// 	distance between the centers should be greater
		// 		than the sum of the radii
		//  dist(x1,y1,x2,y2) > r1+r2
		var x = circles[i].x;
		var y = circles[i].y;
		var r = circles[i].r;
		for(var j=0; j<circles.length; j++){
			if(i!=j &&
				dist(x, y, circles[j].x, circles[j].y) < (circles[j].r + r)/2){
				circles[i].growing = false;
				break;
			}
		}
		circles[i].show();
		circles[i].grow();
	
		
	}
}

// while creating a new circle
//  Conditions 
//		1. do not create one inside existing one
function createCircle(){
	var x,y;
	
	// find a random spot to create a circle
	var randi = int(random(0,spots.length));

	x = spots[randi].x;
	y = spots[randi].y;

	//if(circles.length == 0){ done = true; }

	var valid = true;
	for(var i=0;i<circles.length;i++){
		// lies inside the circle -> terrible.. take a lap!
		//  else break out
		if(dist(x, y, circles[i].x, circles[i].y) <= circles[i].r){
			valid = false;
			break;
		}
	}

	if(valid){
		// add to circles
		return new Circle(x,y,width,height);
	}

	return false;
}