We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
Index › Programming Questions & Help › Programs › How to evenly space circles along a line
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
How to evenly space circles along a line? (Read 447 times)
semioticDave
How to evenly space circles along a line?
Jul 3rd, 2008, 1:38am  

Hi,

I'm working on a visualization of my firefox browser history, where every domain visited is a circle.

I display a number of circles, 5 at the moment, on the screen at any moment on a straight line. The diameter of the circles varies, sites visited often are larger than less frequently visited sites.

My question is: how can I display circles of varying size evenly spaced on a straight line?

The first idea was to calculate the average distance that the center of every circle should occupy. That doesn't work so well because as they have difference sizes, you can end up a with large circle very close to another large circle, and a couple of smaller ones that seem to be far away of the cluster of larger circles.

So can I make sure that all circles are at a same distance, this seems to be similar to having magnets that repel each other "falling" into equilibrium.

Does anyone have any ideas, pointers?

David
Back to top
 
 
Jo Wood
Re: How to evenly space circles along a line?
Reply #1 - Jul 3rd, 2008, 11:59am  
If you find the total length occupied by the circles if arranged without any gaps, and take that length from the length of the line you wish to display them along, that will give you how much space you have to play with. Simply divide that space evenly between all the circles. There will always be one gap fewer than there are circles.


For example,

Quote:


final int NUM_CIRCLES = 5;
int[] radii = new int[NUM_CIRCLES];
int spacing = 0;

void setup()
{
 size(400,400);
 noLoop();
 
 // Create some randomly sized circles
 int sumDiameters = 0;
 for (int i=0; i<NUM_CIRCLES; i++)
 {
   radii[i] = int(random(10,width/(2*NUM_CIRCLES)));
   sumDiameters += radii[i]*2;
 }
 // Space circles evenly to take up spare space.
 spacing = (width - sumDiameters)/(NUM_CIRCLES-1);
}


void draw()
{
 noFill();
 smooth();
 background(255);
 ellipseMode(RADIUS);
 int circlePos = 0;
 
 line(0,height/2,width,height/2);
 
 for (int i=0; i<NUM_CIRCLES; i++)
 {
   circlePos += radii[i];    
   ellipse(circlePos,height/2,radii[i],radii[i]);
   circlePos += radii[i] + spacing;
 }
}



You could modify this a little by weighting the gaps between adjacent circles slightly so that gaps that separate smaller circles are some fraction (<1) of the standard gap, and those that separate larger circles are weighted >1. As long as the sum of these weights was 1, they should all fit on the line.
Back to top
 
 
semioticDave
Re: How to evenly space circles along a line?
Reply #2 - Jul 5th, 2008, 2:04pm  
Thanks for your answer. It was the part with weighting the gap between the circles that I was missing.

David
Back to top
 
 
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›