var separation = 100, amountx = 50, amounty = 50;

  var container;
  var camera, scene, renderer;

  var particles, particle, count = 0;

  var mousex = 0, mousey = 0;

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

  init();
  animate();

  function init() {

    container = document.createelement( 'div' );
    
    container.classname = 'orcile';

    document.getelementbyid('index2').appendchild( container );

    // document.body.appendchild( container );

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

    scene = new three.scene();

    particles = new array();

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

      color: 0xcecdcd,
      program: function ( context ) {

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

      }

    } );

    var i = 0;

    for ( var ix = 0; ix < amountx; ix ++ ) {

      for ( var iy = 0; iy < amounty; iy ++ ) {

        particle = particles[ i ++ ] = new three.particle( material );
        particle.position.x = ix * separation - ( ( amountx * separation ) / 2 );
        particle.position.z = iy * separation - ( ( amounty * separation ) / 2 );
        scene.add( particle );

      }

    }

    renderer = new three.canvasrenderer();
    renderer.setsize( window.innerwidth, window.innerheight );
    container.appendchild( renderer.domelement );

    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;
    mousey = event.clienty - windowhalfy;

  }

  function ondocumenttouchstart( event ) {

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

      event.preventdefault();

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

    }

  }

  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 ) * .05;
    camera.position.y += ( - mousey - camera.position.y ) * .05;
    camera.lookat( scene.position );

    var i = 0;

    for ( var ix = 0; ix < amountx; ix ++ ) {

      for ( var iy = 0; iy < amounty; iy ++ ) {

        particle = particles[ i++ ];
        particle.position.y = ( math.sin( ( ix + count ) * 0.3 ) * 50 ) + ( math.sin( ( iy + count ) * 0.5 ) * 50 );
        particle.scale.x = particle.scale.y = ( math.sin( ( ix + count ) * 0.3 ) + 1 ) * 2 + ( math.sin( ( iy + count ) * 0.5 ) + 1 ) * 2;

      }

    }

    renderer.render( scene, camera );

    count += 0.1;

  }