var mousex = 0, mousey = 0,

            windowhalfx = window.innerwidth / 2,
            windowhalfy = window.innerheight / 2,

            separation = 200,
            amountx = 1,
            amounty = 1,

            camera, scene, renderer;

            init();
            animate();



            function init() {


                /*
                 *   define variables
                 */
                var container, separation = 1000, amountx = 50, amounty = 50, color = 0x333333,
                particles, particle;

                container = document.getelementbyid("canvas");


                camera = new three.perspectivecamera( 75, window.innerwidth / window.innerheight, 1, 10000 );
                camera.position.z = 100;

                scene = new three.scene();

                renderer = new three.canvasrenderer({ alpha: true });
                renderer.setpixelratio( window.devicepixelratio );
                renderer.setclearcolor( 0x000000, 0 );   // canvas background color
                renderer.setsize( window.innerwidth, window.innerheight );
                container.appendchild( renderer.domelement );

               

                var pi2 = math.pi * 2;
                var material = new three.spritecanvasmaterial( {

                    color: color,
                    opacity: 0.3,
                    program: function ( context ) {

                        context.beginpath();
                        context.arc( 0, 0, 0.5, 0, pi2, true );
                        context.fill();

                    }

                } );

                var geometry = new three.geometry();

                /*
                 *   number of particles
                 */
                for ( var i = 0; i < 150; i ++ ) {

                    particle = new three.sprite( material );
                    particle.position.x = math.random() * 2 - 1;
                    particle.position.y = math.random() * 2 - 1;
                    particle.position.z = math.random() * 2 - 1;
                    particle.position.normalize();
                    particle.position.multiplyscalar( math.random() * 10 + 600 );
                    particle.scale.x = particle.scale.y = 5;

                    scene.add( particle );

                    geometry.vertices.push( particle.position );

                }

                /*
                 *   lines
                 */

                var line = new three.line( geometry, new three.linebasicmaterial( { color: color, opacity: 0.1 } ) );
                scene.add( line );

                document.addeventlistener( 'mousemove', ondocumentmousemove, false );
                document.addeventlistener( 'touchstart', ondocumenttouchstart, false );
                document.addeventlistener( 'touchmove', ondocumenttouchmove, false );

                //

                window.addeventlistener( 'resize', onwindowresize, false );

            }

            function onwindowresize() {

                windowhalfx = window.innerwidth / 2;
                windowhalfy = window.innerheight / 2;

                camera.aspect = window.innerwidth / window.innerheight;
                camera.updateprojectionmatrix();

                renderer.setsize( window.innerwidth, window.innerheight );

            }

            //

            function ondocumentmousemove(event) {

                mousex = (event.clientx - windowhalfx) * 0.05;
                mousey = (event.clienty - windowhalfy) * 0.2;

            }

            function ondocumenttouchstart( event ) {

                if ( event.touches.length > 1 ) {

                    event.preventdefault();

                    mousex = (event.touches[ 0 ].pagex - windowhalfx) * 0.7;
                    mousey = (event.touches[ 0 ].pagey - windowhalfy) * 0.7;

                }

            }

            function ondocumenttouchmove( event ) {

                if ( event.touches.length == 1 ) {

                    event.preventdefault();

                    mousex = event.touches[ 0 ].pagex - windowhalfx;
                    mousey = event.touches[ 0 ].pagey - windowhalfy;

                }

            }

            //

            function animate() {

                requestanimationframe( animate );

                render();

            }

            function render() {

                camera.position.x += ( mousex - camera.position.x ) * 0.1;
                camera.position.y += ( - mousey + 200 - camera.position.y ) * 0.05;
                camera.lookat( scene.position );

                renderer.render( scene, camera );

            }