Paper.js Experiments 001 – The Circles

Here is the quick thingie i made with paper.js

DEMO

The script draws 5 concentric circles that are made of many randomly colored and random length lines.

Source code:

<script type="text/javascript">

        window.onload = function() {

            TVF.init('myCanvas');
            var tool = new paper.Tool();
            var cnt = 0;
            var radius = 20;
            var circles = 5;

            var lineLenght = 15;

            paper.view.setOnFrame(function(event) {

                var startingX = 250 - Math.floor( Math.sin(2000/cnt)  * radius);
                var startingY = 250 - Math.floor( Math.cos(2000/cnt)  * radius);

                var randomLength =   (Math.random() * lineLenght);

                var randomEndingX = Math.floor(Math.sin(2000/cnt) * randomLength);
                var randomEndingY = Math.floor(Math.cos(2000/cnt) * randomLength);

                //calculate random R,G,B and alpha values
                var R = Math.random();
                var G = Math.random();
                var B  =Math.random();
                var A = Math.random();

                //at some point, jump to next circle
                if(event.count % 1000 ==0){
                    cnt = 0;
                    radius += 30;

                    //stop animation after X circles
                    if(circles == 0){
                        paper.view.setOnFrame(null);
                    }
                    circles -= 1;
                }
                cnt +=1;

                //draw a line
                TVF.drawLine(startingX,startingY,randomEndingX,randomEndingY,  new paper.RgbColor(R,G,B,A));

            });
        }
    </script>

Or you can, of course look at he source of the demo page.