JavaScript (рисование SVG): позиционирование х количество точек в области

Question

Я использую http://raphaeljs.com/, чтобы попытаться нарисовать несколько маленьких кругов. У меня проблема в том, что холст имеет фиксированную ширину, и если я хочу нарисовать, скажем, 1000 кругов, они не переносятся на «новую линию» (потому что вы должны указать положение xy каждого круга ).

например. Я хочу это:

............................................... ...

чтобы выглядеть так:

............................

......................

На данный момент я делаю это:

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);
        }
    }

Для справки: окружность (координата x, координата y, радиус)

Это грязно. Я должен добавить оператор if для каждой новой строки, которую я хочу. Должен быть лучший способ сделать это ..?

Answer 1

Вы хотите по модулю .

Я точно не знаю, какова ваша ограничительная рамка, но что-то вроде:

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;
}