Sources
Main html file: | dhtml/mTrail-svg.html |
ge1doot mini library: | /library/ge1doot.js |
CSS
html {
overflow: hidden;
-ms-touch-action: none;
-ms-content-zooming: none;
}
body {
margin: 0;
padding: 0;
position: absolute;
width: 100%;
height: 100%;
}
#screen {
position:absolute;
left: 0;
top: 0;
width:100%;
height: 100%;
background: #000;
}
HTML
<canvas id="screen"></canvas>
JS
/*
* ==============================================================
* javascript experiment
* http://www.dhteumeuleu.com/
* Author Gerard Ferrandez - June 2006
* Javascript released under the MIT license
* http://www.dhteumeuleu.com/LICENSE.html
* Last updated: 22 Dec 2012
* ===============================================================
*/
"use strict";
(function () {
var scr, ctx, pointer,
buffer = new Array(),
vx = 0,
vy = 0,
xb = 0,
yb = 0,
Particle = function () {
this.x = pointer.X - scr.left;
this.y = pointer.Y - scr.top;
this.vx = vx * .35;
this.vy = vy * .35;
this.w = 1;
if (Math.random() > .8) this.w = 20;
if (Math.random() > .97) this.w = 100;
},
run = function () {
scr.ctx.clearRect(0, 0, scr.width, scr.height);
vx -= (pointer.X - xb);
vy -= (pointer.Y - yb);
if (pointer.X - xb + pointer.Y - yb === 0) {
vx += Math.random() * 20 - 10;
vy += Math.random() * 20 - 10;
if (Math.random()>.98) {
vx = Math.random() * 400 - 200;
vy = Math.random() * 400 - 200;
}
}
vx *= .6;
vy *= .6;
xb = pointer.X;
yb = pointer.Y;
buffer.push(
new Particle()
);
var N = buffer.length;
for (var n = 0; n < N; n++) {
var o = buffer[n];
if (n > 1) {
var p = buffer[n - 1];
var x = p.x;
var y = p.y;
} else {
var x = o.x;
var y = o.y;
}
var c = Math.min(255, Math.round(n * 6));
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(o.x, o.y);
ctx.strokeStyle = "rgb("+ c + "," + c + "," + Math.round(c * c * .04) + ")";
ctx.lineWidth = o.w;
ctx.lineCap = 'round';
ctx.stroke();
ctx.closePath();
o.x += o.vx;
o.y += o.vy;
}
if (N > 100) buffer.shift();
// ---- loop ----
requestAnimFrame(run);
},
init = function () {
/* ---- init script ---- */
scr = new ge1doot.Screen({
container: "screen"
});
ctx = scr.ctx;
// ---- init pointer ----
pointer = new ge1doot.Pointer({});
pointer.X = scr.width / 2;
pointer.Y = scr.height / 2;
/* ---- start engine ---- */
run();
}
return {
load : function () {
window.addEventListener('load', function () {
init();
}, false);
}
}
})().load();