JavaScript (SVG drawing): Positioning x amount of points in an area
- by Jack
I'm using http://raphaeljs.com/ to try and draw multiple small circles. The problem I'm having is that the canvas has a fixed width, and if I want to draw, say, 1000 circles, they don't wrap onto a 'new line' (because you have to specify the xy position of each circle).
E.g.
I want this:
..................................................
to look like this:
............................
......................
At the moment I'm doing this:
for ( var i = 0; i < 1000; i++ ) {
var multiplier = i*3;
if ( i <= 50 ) {
paper.circle((2*multiplier),2,2);
} else if ( i >= 51 && i <= 101 ) {
paper.circle((2*multiplier) - 304,8,2);
} else if ( i >= 152 && i <= 202 ) {
paper.circle((2*multiplier) - 910,14,2);
}
}
For reference: circle(x co-ord, y co-ord, radius)
This is messy. I have to add an if statement for every new line I want. Must be a better way of doing it..?
