Raphael JS Question

Question

I am following a tutorial from netuts about raphael js and I dont understand one of the examples, could some one possibly explain this to me in plainer english. I know I should learn more about javascript first.

for(var i = 0; i < 5; i+=1) {
     var multiplier = i*5;
     paper.circle(250 + (2*multiplier), 100 + multiplier, 50 - multiplier); }

Thanks! Very Much

Answer 1

for(var i = 0; i < 5; i+=1) {

Iterate 5 times. Store the number of times iterated so far in the variable i. The "{" begins the loop.

var multiplier = i * 5;

Multiply i by 5 and store in a variable called multiplier.

paper.circle(250 + (2*multiplier), 100 + multiplier, 50 - multiplier);

Draw a circle with an x coordinate at 250 plus twice the multiplier, a y coordinate at 100 plus the multiplier and with a radius of 50 minus the multiplier. (Essentially a fancy way of getting distinct circles.)

}

End the loop.

Answer 2

The code will create five circles

for(var i = 0; i < 5; i+=1) { // loop five times => create five circles
    var multiplier = i*5;     // multiply i to increase the effect in the next lines
    paper.circle( 250 + (2*multiplier), // the x coordinate of the new circle
                  100 + multiplier, // the y coordinate
                  50 - multiplier); // the radius
}

Results in this SVG element:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="556" height="109">
<desc>Created with Raphaël</desc>
<defs/>
    <circle cx="250" cy="100" r="50" fill="none" stroke="#000"/>
    <circle cx="260" cy="105" r="45" fill="none" stroke="#000"/>
    <circle cx="270" cy="110" r="40" fill="none" stroke="#000"/>
    <circle cx="280" cy="115" r="35" fill="none" stroke="#000"/>
    <circle cx="290" cy="120" r="30" fill="none" stroke="#000"/>
</svg>