JavaScript (SVG drawing): Positioning x amount of points in an area

Question

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..?

Answer 1

You want modulo.

I'm not sure exactly what your bounding box is, but something like:

var width = 300;
for (var i = 0; i < 1000; i++) {
    var multiplier = i*3;
    var x = 2 * multiplier * i % width;
    var y = 2 + 6 * (i + 50) / 100;
}