Forked from: hakim's Trail Fader diff(3) forked from: Trail Fader rainafter200.. Follow 2010-07-06 06:44:57 License: MIT License Fork1 Fav4 View3374 More at: http://hakim.se/experiments/ * Twitter: @hakimel 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 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> forked from: Trail Fader body { background-color: #000000; padding: 0; margin: 0; overflow: hidden; } 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; } use an iframe compat browser, deer Tweet QR code Embed Design view Code view <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> zip tags Tweet twitter Tags colorful graphics gravity Favorite by syouyusekai yass7th OTL sharavsambuu..: colorfulgraphicsgravity Forked sort new page view favorite forked fork1 OTL 00 369views 163/2/3
