Forked from: hakim's Trail Fader diff(3)

forked from: Trail Fader

rainafter200..

2010-07-06 06:44:57

License: MIT License

Fork: 1

Fav: 4

View: 3489

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 162 lines
HTML 2 lines
CSS 3 lines

More at: http://hakim.se/experiments/
* Twitter: @hakimel

forked from: Trail Fader

// forked from hakim's "Trail Fader" http://jsdo.it/hakim/fxVB
  /**
   * More at: http://hakim.se/experiments/
   * Twitter: @hakimel
   */
  
  var SCREEN_WIDTH = window.innerWidth;
  var SCREEN_HEIGHT = window.innerHeight;
  
  var RADIUS = 70;
  
  var RADIUS_SCALE = 1;
  var RADIUS_SCALE_MIN = 1;
  var RADIUS_SCALE_MAX = 1.5;
  
  var QUANTITY = 25;

var canvas;
  var context;
  var particles;
  
  var mouseX = SCREEN_WIDTH * 0.5;
  var mouseY = SCREEN_HEIGHT * 0.5;
  var mouseIsDown = false;
  
  init();

function init() {

canvas = document.getElementById( 'world' );
    
    if (canvas && canvas.getContext) {
      context = canvas.getContext('2d');
      
      // Register event listeners
      document.addEventListener('mousemove', documentMouseMoveHandler, false);
      document.addEventListener('mousedown', documentMouseDownHandler, false);
      document.addEventListener('mouseup', documentMouseUpHandler, false);
      document.addEventListener('touchstart', documentTouchStartHandler, false);
      document.addEventListener('touchmove', documentTouchMoveHandler, false);
      window.addEventListener('resize', windowResizeHandler, false);
      
      createParticles();
      
      windowResizeHandler();
      
      setInterval( loop, 1000 / 60 );
    }
  }

function documentTouchStartHandler(event) {
    if(event.touches.length == 1) {
      event.preventDefault();

mouseX = event.touches[0].pageX - (window.innerWidth - SCREEN_WIDTH) * .5;;
      mouseY = event.touches[0].pageY - (window.innerHeight - SCREEN_HEIGHT) * .5;
    }
  }
  
  function documentTouchMoveHandler(event) {
    if(event.touches.length == 1) {
      event.preventDefault();

mouseX = event.touches[0].pageX - (window.innerWidth - SCREEN_WIDTH) * .5;;
      mouseY = event.touches[0].pageY - (window.innerHeight - SCREEN_HEIGHT) * .5;
    }
  }
  
  function windowResizeHandler() {
    SCREEN_WIDTH = window.innerWidth;
    SCREEN_HEIGHT = window.innerHeight;
    
    canvas.width = SCREEN_WIDTH;
    canvas.height = SCREEN_HEIGHT;
  }

forked from: Trail Fader

More at: http://hakim.se/experiments/ * Twitter: @hakimel // forked from hakim's "Trail Fader" http://jsdo.it/hakim/fxVB /** * More at: http://hakim.se/experiments/ * Twitter: @hakimel */ var SCREEN_WIDTH = window.innerWidth; var SCREEN_HEIGHT = window.innerHeight; var RADIUS = 70; var RADIUS_SCALE = 1; var RADIUS_SCALE_MIN = 1; var RADIUS_SCALE_MAX = 1.5; var QUANTITY = 25; var canvas; var context; var particles; var mouseX = SCREEN_WIDTH * 0.5; var mouseY = SCREEN_HEIGHT * 0.5; var mouseIsDown = false; init(); function init() { canvas = document.getElementById( 'world' ); if (canvas && canvas.getContext) { context = canvas.getContext('2d'); // Register event listeners document.addEventListener('mousemove', documentMouseMoveHandler, false); document.addEventListener('mousedown', documentMouseDownHandler, false); document.addEventListener('mouseup', documentMouseUpHandler, false); document.addEventListener('touchstart', documentTouchStartHandler, false); document.addEventListener('touchmove', documentTouchMoveHandler, false); window.addEventListener('resize', windowResizeHandler, false); createParticles(); windowResizeHandler(); setInterval( loop, 1000 / 60 ); } } function createParticles() { particles = []; for (var i = 0; i < QUANTITY; i++) { var particle = { size: 10, position: { x: mouseX, y: mouseY }, offset: { x: 0, y: 0 }, shift: { x: mouseX, y: mouseY }, speed: 0.01+Math.random()*0.04, targetSize: 1, fillColor: '#' + (Math.random() * 0x404040 + 0xaaaaaa | 0).toString(16), orbit: RADIUS*.9 + (RADIUS * .5 * Math.random()) }; particles.push( particle ); } } function documentMouseMoveHandler(event) { mouseX = event.clientX - (window.innerWidth - SCREEN_WIDTH) * .5; mouseY = event.clientY - (window.innerHeight - SCREEN_HEIGHT) * .5; } function documentMouseDownHandler(event) { mouseIsDown = true; } function documentMouseUpHandler(event) { mouseIsDown = false; } function documentTouchStartHandler(event) { if(event.touches.length == 1) { event.preventDefault(); mouseX = event.touches[0].pageX - (window.innerWidth - SCREEN_WIDTH) * .5;; mouseY = event.touches[0].pageY - (window.innerHeight - SCREEN_HEIGHT) * .5; } } function documentTouchMoveHandler(event) { if(event.touches.length == 1) { event.preventDefault(); mouseX = event.touches[0].pageX - (window.innerWidth - SCREEN_WIDTH) * .5;; mouseY = event.touches[0].pageY - (window.innerHeight - SCREEN_HEIGHT) * .5; } } function windowResizeHandler() { SCREEN_WIDTH = window.innerWidth; SCREEN_HEIGHT = window.innerHeight; canvas.width = SCREEN_WIDTH; canvas.height = SCREEN_HEIGHT; } function loop() { if( mouseIsDown ) { RADIUS_SCALE += ( RADIUS_SCALE_MAX - RADIUS_SCALE ) * (0.02); } else { RADIUS_SCALE -= ( RADIUS_SCALE - RADIUS_SCALE_MIN ) * (0.02); } RADIUS_SCALE = Math.min( RADIUS_SCALE, RADIUS_SCALE_MAX ); context.fillStyle = 'rgba(0,0,0,0.05)'; context.fillRect(0, 0, context.canvas.width, context.canvas.height); for (i = 0, len = particles.length; i < len; i++) { var particle = particles[i]; var lp = { x: particle.position.x, y: particle.position.y }; // Rotation particle.offset.x += particle.speed; particle.offset.y += particle.speed; // Follow mouse with some lag particle.shift.x += ( mouseX - particle.shift.x) * (particle.speed); particle.shift.y += ( mouseY - particle.shift.y) * (particle.speed); // Apply position particle.position.x = particle.shift.x + Math.cos(i + particle.offset.x) * (particle.orbit*RADIUS_SCALE); particle.position.y = particle.shift.y + Math.sin(i + particle.offset.y) * (particle.orbit*RADIUS_SCALE); // Limit to screen bounds particle.position.x = Math.max( Math.min( particle.position.x, SCREEN_WIDTH ), 0 ); particle.position.y = Math.max( Math.min( particle.position.y, SCREEN_HEIGHT ), 0 ); particle.size += ( particle.targetSize - particle.size ) * 0.05; if( Math.round( particle.size ) == Math.round( particle.targetSize ) ) { particle.targetSize = 1 + Math.random() * 7; } context.beginPath(); context.fillStyle = particle.fillColor; context.strokeStyle = particle.fillColor; context.lineWidth = particle.size; context.moveTo(lp.x, lp.y); context.lineTo(particle.position.x, particle.position.y); context.stroke(); context.arc(particle.position.x, particle.position.y, particle.size/2, 0, Math.PI*2, true); context.fill(); } } <canvas id='world'></canvas> body { background-color: #000000; padding: 0; margin: 0; overflow: hidden; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/eAzy/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/rainafter2000/eAzy" title="forked from: Trail Fader">forked from: Trail Fader - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code