Play with my Code

/*
I play with my code all the time to show other designs and motions that can come from it. This piece has been my favorite to remix so far && this pen demonstrates the effect very basic numeric changes can have. So much more can be done beyond this, but below are values that I think are the most fun to play with - without getting too in depth. Over there is a spiral design I made using this pen...

The x value on line 23 is controlling size,
so we'll leave that alone and play with y.

We're at line 24:

y = x * Math.sin(i + l * t + x / 50) / m;

Playful l and m are going to effect speed, angles && movement; the results of which are heavily influenced by line 34. Current values are shown; you may input new values below.

*/

...(i + ...x / 50) /  ;

/*
b is important, it's used in lines 25 && 26 to manipulate our _x, _y points. We define its value at line 34, where the real magic is:

b = ( j * n) * Math.PI / o;

j = loop counter from line 21 which we are multiplying by n; consider n our theta value. You can use any number.

*/

( j * )

/*
o = our pi divider. We're going to muliply the result of ( j*n ) by Math.PI, divided by some number o.
You don't have to "know" what number to divide by.
Play with it.

*/

Math.PI /

/*
Bonus: var i = num of layers. We use this as a counter on line 17:

(var i = 0; i < k; i++)

We want i to be less than some number k. Best results between .1 && 5
*/


i < ;

/*
Bonus 2: You can adjust the width of the lines by entering a value for var lw on line 20:

$.lineWidth = lw;

Keep in mind that we are using the stroke(), which tends to hurt performance; sacrificing perf for width/line thickness. Keeping it below 2 is generally safe.

*/

$.lineWidth = ;

/*
Bonus 3: We have little circles at the meeting of each angle. We can adjust the size of them by editing var r within the arc() on line 34. For no circles, enter 0:

$.arc(w / 2 + _x, h / 2 + _y, r, 0, 2 * Math.PI);

*/

$.arc(... + _y, , ...);

/*
Bonus 4: May as well mess with the color alpha; .01 to 1, line 22.

$.strokeStyle = 'hsla('+(u*2)+',100%,60%,'+a+')';

u = our color update var; init @ 0 && incremented on line 40. We'll just play with the alpha value a.

*/

$.strokeStyle = 'hsla(...%, )' ;

/* Hope You've Been Entertained! */