var mx = 1;
var el = document.getElementById("canv");
el.addEventListener("mousemove", function (e) {
mx = e.clientX;
});
var ctx = el.getContext("2d");
var w = 480;
var h = 480;
function Point(x, y) {
this.p = { x: x, y: y };
this.v = { x: 0, y: -5 };
this.a = { x: 0.1, y: 0.3 };
this.t = 0;
this.i = 0;
this.step = 0.01 + Math.random() * 0.1;
}
var po = new Point(w / 2, h);
var p = po.p;
var ps = [];
var n = 20;
generate();
function generate() {
ps.length = 0;
ctx.fillStyle = "white";
ctx.fillRect(0, 0, w, h);
for (var i = 0; i < n; i++) {
var pp = new Point(w / 2, h);
pp.i = (i / n) * 4;
pp.rnd = Math.random() * 50;
ps.push(pp);
}
}
el.addEventListener("mousedown", generate);
animate();
function animate() {
ps.forEach(function (po) {
p = po.p;
ctx.beginPath();
ctx.moveTo(p.x, p.y);
var t = po.t;
var lw = 1 - t / 3.5;
if (t > 3.5) return;
po.t += po.step;
t = po.t;
ctx.lineWidth = lw * 3;
var x = t * Math.PI * po.i;
var sign = Math.sin(x) / x;
sign = sign / Math.abs(sign);
var v = po.v;
var p = po.p;
var a = po.a;
var b = ((Math.PI * (t * t)) / po.rnd) * sign;
var cosb = Math.cos(b);
var sinb = Math.sin(b);
var xx = v.x * cosb - v.y * sinb;
var yy = v.y * cosb + v.x * sinb;
v.x = xx;
v.y = yy;
p.x += v.x;
p.y += v.y;
ctx.lineTo(p.x, p.y);
ctx.stroke();
});
requestAnimationFrame(animate);
}