html3d龙卷风特效代码,使用Canvas 2D模拟出来的3D龙卷风动画特效

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var canvas = document.getElementsByTagName('canvas')[0];

var ctx = canvas.getContext('2d');

canvas.width = canvas.height = 400;

aaa();

function aaa() {

var a, b, c, d, e, f, g, h, tim, st, max, len, r, r2, r3, pt, p, p1,

x, y, z, x0, z1;

tim = new Date().getTime() / 71;

max = 30;

len = 18;

r3 = 0;

pt = [];

f = 0.5 + Math.sin(tim / 23) * 0.5;

g = 0.5 + Math.sin(tim / 29) * 0.5;

h = 0.5 + Math.sin(tim / 31) * 0.5;

for (b = 0; b < len; b++) {

p = [];

r = tim / 43;

c = 1.2 + Math.sin(r3 * 3 + tim / 19) * 0.2 * f;

d = 0 + Math.sin(r3 * 2 - tim / 37) * 0.2 * g;

for (a = 0; a < max; a++) {

e = a / max * Math.PI * 2;

x0 = Math.cos(r) + Math.cos(r * 6 + tim / 19 + e) / 12 * h;

y = Math.sin(r) + Math.sin(r * 6 + tim / 19 + e) / 12 * h + d;

x = x0 + c;

r2 = r + tim / 37 + r3;

z = x * Math.cos(r2);

x = x * Math.sin(r2);

p.push([x, y, z]);

r += Math.PI * 2 / max;

}

pt.push(p);

r3 += Math.PI * 2 / len;

}

for (b = 0; b < pt.length; b++) {

p = pt[b];

for (a = 0; a < p.length; a++) {

x = p[a][0];

y = p[a][1];

z = p[a][2];

z1 = Math.pow(1.4, z * 2);

p[a][0] = x * 145 * z1 + canvas.width / 2;

p[a][1] = y * 145 * z1 + canvas.height / 2;

p[a][2] = z * 145;

}

}

for (a = 0; a < pt.length; a++) {

p = pt[a];

p1 = pt[(a + 1) % pt.length];

e = Math.sin(tim / 23 + a * 13) + Math.sin(tim / 29 + a * 17) + 2;

e = (tim / 19 + a * 113 + e * 30) | 0;

e = e % p.length;

for (b = 0; b < p.length; b++) {

c = (b + 1) % p.length;

pp([p[b], p[c], p1[b]], ((a) % 2), b == e);

pp([p[c], p1[c], p1[b]], ((a) % 2), b == e);

}

}

d = st;

for (z = 0; z < 10000; z++) {

if (!st) break;

e = d.q;

ctx.beginPath();

for (a = 0; a < e.length; a++) ctx.lineTo(e[a][0], e[a][1]);

ctx.closePath();

c = "hsl(" + d.c + ",97%," + d.lit + "%)";

ctx.fillStyle = c;

ctx.strokeStyle = c;

ctx.lineWidth = 1;

ctx.fill();

ctx.closePath();

if (d.af) ctx.stroke();

if (!d.tugi) break;

d = d.tugi;

}

function pp(q, co, af) {

var a, b, c, d, e, f, g, h, i, ob, col;

ob = {

q: q,

c: (co * 50 + 295)

};

a = q[0];

b = q[1];

c = q[2];

d = [b[0] - a[0], b[1] - a[1], b[2] - a[2]];

e = [c[0] - b[0], c[1] - b[1], c[2] - b[2]];

h = d[0] * e[1] - d[1] * e[0];

f = d[1] * e[2] - d[2] * e[1];

g = d[2] * e[0] - d[0] * e[2];

if (h < 0) return;

a = f + g * 0.7 + h * 1.2;

b = Math.abs(f) + Math.abs(h) + Math.abs(g);

a = a / b;

a = a * 50 + 15;

ob.lit = a;

if (af) ob.lit = 90;

a = (q[0][2] + q[1][2] + q[2][2]) / 3;

ob.m = a;

if (!st) {

st = ob;

return;

}

b = st;

while (1) {

if (b.m > a) {

if (!b.mae) {

st = ob;

} else {

b.mae.tugi = ob;

}

ob.mae = b.mae;

b.mae = ob;

ob.tugi = b;

break;

}

if (!b.tugi) {

b.tugi = ob;

ob.mae = b;

break;

}

b = b.tugi;

}

}

requestAnimationFrame(aaa);

}