daily pastebin goal
46%
SHARE
TWEET

Untitled

a guest Feb 13th, 2018 75 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. var SEPARATION = 80, AMOUNTX = 50, AMOUNTY = 50;
  2.             var container, stats;
  3.             var camera, scene, renderer;
  4.             var startX, startY;
  5.             var particles, particle, count = 0;
  6.  
  7.  
  8.             var windowHalfX = window.innerWidth / 2;
  9.             var windowHalfY = window.innerHeight / 3;
  10.             var mouseX = 0, mouseY = 50;
  11.  
  12.             init();
  13.             animate();
  14.  
  15.             function init() {
  16.                 container = document.createElement( 'div' );
  17.                 document.body.appendChild( container );
  18.                 //camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
  19.                 //camera.position.z = 1000;
  20.                 camera = new THREE.PerspectiveCamera( 125, window.innerWidth / window.innerHeight, 1, 10000 );
  21.                 camera.position.z = 1100;
  22.  
  23.                 scene = new THREE.Scene();
  24.  
  25.                 particles = new Array();
  26.  
  27.                 var PI2 = Math.PI * 2;
  28.                 var material = new THREE.SpriteCanvasMaterial( {
  29.  
  30.                     color: 0xffffff,
  31.                     program: function ( context ) {
  32.  
  33.                         context.beginPath();
  34.                         context.arc( 0, 0, 0.5, 0, PI2, true );
  35.                         context.fill();
  36.  
  37.                     }
  38.  
  39.                 } );
  40.  
  41.                 var i = 0;
  42.  
  43.                 for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
  44.  
  45.                     for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
  46.  
  47.                         particle = particles[ i ++ ] = new THREE.Sprite( material );
  48.                         particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
  49.                         particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );
  50.                         scene.add( particle );
  51.  
  52.                     }
  53.  
  54.                 }
  55.  
  56.                 renderer = new THREE.CanvasRenderer();
  57.                 renderer.setPixelRatio( window.devicePixelRatio );
  58.                 renderer.setSize( window.innerWidth, window.innerHeight );
  59.                 container.appendChild( renderer.domElement );
  60.  
  61.                 document.addEventListener( 'mousemove', onDocumentMouseMove, false );
  62.                 document.addEventListener( 'touchstart', onDocumentTouchStart, false );
  63.                 document.addEventListener( 'touchmove', onDocumentTouchMove, false );
  64.  
  65.                 //
  66.  
  67.                 window.addEventListener( 'resize', onWindowResize, false );
  68.  
  69.             }
  70.  
  71.             function onWindowResize() {
  72.  
  73.                 windowHalfX = window.innerWidth / 2;
  74.                 windowHalfY = window.innerHeight / 2;
  75.  
  76.                 camera.aspect = window.innerWidth / window.innerHeight;
  77.                 camera.updateProjectionMatrix();
  78.  
  79.                 renderer.setSize( window.innerWidth, window.innerHeight );
  80.  
  81.             }
  82.  
  83.             function onDocumentMouseMove( event ) {
  84.                 console.log(event.clientX, windowHalfX, event.clientX - windowHalfX);
  85.                 console.log(event.clientY, windowHalfY, event.clientY - windowHalfY);
  86.                 mouseX = event.clientX - windowHalfX;
  87.                 mouseY = event.clientY - windowHalfY;
  88.  
  89.             }
  90.  
  91.             function onDocumentTouchStart( event ) {
  92.  
  93.                 if ( event.touches.length === 1 ) {
  94.  
  95.                     event.preventDefault();
  96.                     mouseX = event.touches[ 0 ].pageX - windowHalfX;
  97.                     mouseY = event.touches[ 0 ].pageY - windowHalfY;
  98.  
  99.                 }
  100.  
  101.             }
  102.  
  103.             function onDocumentTouchMove( event ) {
  104.  
  105.                 if ( event.touches.length === 1 ) {
  106.  
  107.                     event.preventDefault();
  108.                     mouseX = event.touches[ 0 ].pageX - windowHalfX;
  109.                     mouseY = event.touches[ 0 ].pageY - windowHalfY;
  110.  
  111.                 }
  112.  
  113.             }
  114.  
  115.             //
  116.  
  117.             function animate() {
  118.  
  119.                 requestAnimationFrame( animate );
  120.  
  121.                 render();
  122.                 //stats.update();
  123.  
  124.             }
  125.  
  126.             function render() {
  127.  
  128.                 camera.position.x += ( mouseX/3 - camera.position.x ) * .05;
  129.                 camera.position.y += 36 + ( - mouseY/3 - camera.position.y ) * .12;
  130.  
  131.                 camera.lookAt( scene.position );
  132.  
  133.                 var i = 0;
  134.  
  135.                 for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
  136.  
  137.                     for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
  138.  
  139.                         particle = particles[ i++ ];
  140.                         particle.position.y = ( Math.sin( ( ix + count ) * 0.3 ) * 50 ) +
  141.                             ( Math.sin( ( iy + count ) * 0.5 ) * 50 );
  142.                         particle.scale.x = particle.scale.y = ( Math.sin( ( ix + count ) * 0.3 ) + 1 ) * 4 +
  143.                             ( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 4;
  144.  
  145.                     }
  146.  
  147.                 }
  148.  
  149.                 renderer.render( scene, camera );
  150.  
  151.                 count += 0.1;
  152.  
  153.             }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top