canvas实现脉冲爆炸飞舞粒子效果代码
代码语言：html
所属分类：粒子
代码描述：canvas实现脉冲爆炸飞舞粒子效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body,html{
background: #000;
margin: 0;
height: 100vh;
overflow: hidden;
}
#c{
background:#fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<canvas id=c>
<script >
c = document.querySelector('#c');
c.width = 1920;
c.height = 1080;
x = c.getContext('2d');
C = Math.cos;
S = Math.sin;
t = 0;
T = Math.tan;
rsz = window.onresize = () => {
setTimeout(() => {
if (document.body.clientWidth > document.body.clientHeight * 1.77777778) {
c.style.height = '100vh';
setTimeout(() => c.style.width = c.clientHeight * 1.77777778 + 'px', 0);
} else {
c.style.width = '100vw';
setTimeout(() => c.style.height = c.clientWidth / 1.77777778 + 'px', 0);
}
}, 0);
};
rsz();
async function Draw() {
if (!t) {
R = (Rl, Pt, Yw, m) => {
M = Math;
A = M.atan2;
H = M.hypot;
X = S(p = A(X, Y) + Rl) * (d = H(X, Y));
Y = C(p) * d;
X = S(p = A(X, Z) + Yw) * (d = H(X, Z));
Z = C(p) * d;
Y = S(p = A(Y, Z) + Pt) * (d = H(Y, Z));
Z = C(p) * d;
if (m) {
X += oX;
Y += oY;
Z += oZ;
}
};
Q = () => [c.width / 2 + X / Z * 400, c.height / 2 + Y / Z * 400];
I = (A, B, M, D, E, F, G, H) => (K = ((G - E) * (B - F) - (H - F) * (A - E)) / (J = (H - F) * (M - A) - (G - E) * (D - B))) >= 0 && K <= 1 && (L = ((M - A) * (B - F) - (D - B) * (A - E)) / J) >= 0 && L <= 1 ? [A + K * (M - A), B + K * (D - B)] : 0;
Rn = Math.random;
geoSphere = (mx, my, mz, iBc, size) => {
let collapse = 0;
let B = Array(iBc).fill().map(v => {
X = Rn() - .5;
Y = Rn() - .5;
Z = Rn() - .5;
return [X, Y, Z];
});
for (let m = 99; m--;) {
B.map((v, i) => {
X = v[0];
Y = v[1];
Z = v[2];
B.map((q, j) => {
if (j != i) {
X2 = q[0];
Y2 = q[1];
Z2 = q[2];
d = 1 + (Math.hypot(X - X2, Y - Y2, Z - Z2) * (3 + iBc / 40) * 3) ** 4;
X += (X - X2) * 99 / d;
Y += (Y - Y2) * 99 / d;
Z += (Z - Z2) * 99 / d;
}
});
d = Math.hypot(X, Y, Z);
v[0] = X / d;
v[1] = Y / d;
v[2] = Z / d;
if (collapse) {
d = 25 + Math.hypot(X, Y, Z);
v[0] = (X - X / d) / 1.1;
v[1] = (Y - Y / d) / 1.1;
v[2] = (Z - Z / d) / 1.1;
}
});
}
B.map(v => {
v[0] *= size;
v[1] *= size;
v[2] *= size;
v[0] += mx;
v[1] += my;
v[2] += mz;
});
return [mx, my, mz, size, B];
};
Cylinder = (rw, cl, ls1, ls2) => {
let a = [];
for (let i = rw; i--;) {
let b = [];
for (let j = cl; j--;) {
X = S(p = Math.PI * 2 / cl * j) * ls1;
Y = (1 / rw * i - .5) * ls2;
Z = C(p) * ls1;
b = [...b, [X, Y, Z]];
}
//a = [...a, b]
for (let j = cl; j--;) {
b = [];
X = S(p = Math.PI * 2 / cl * j) * ls1;
Y = (1 / rw * i - .5) * ls2;
Z = C(p) * ls1;
b = [...b, [X, Y, Z]];
X = S(p = Math.PI * 2 / cl * (j + 1)) * ls1;
Y = (1 / rw * i - .5) * ls2;
Z = C(p) * ls1;
b = [...b, [X, Y, Z]];
X = S(p = Math.PI * 2 / cl * (j + 1)) * ls1;
Y = (1 / rw * (i + 1) - .5) * ls2;
Z = C(p) * ls1;
b = [...b, [X, Y, Z]];
X = S(p = Math.PI * 2 / cl * j) * ls1;
Y = (1 / rw * (i + 1) - .5) * ls2;
Z = C(p) * ls1;
b = [...b, [X, Y, Z]];
a = [...a, b];
}
}
b = [];
for (let j = cl; j--;) {
X = S(p = Math.PI * 2 / cl * j) * ls1;
Y = ls2 / 2;
Z = C(p) * ls1;
b = [...b, [X, Y, Z]];
}
//a = [...a, b]
return a;
};
Tetrahedron = size => {
ret = [];
a = [];
let h = size / 1.4142 / 1.25;
for (i = 3; i--;) {
X = S(p = Math.PI * 2 / 3 * i) * size / 1.25;
Y = C(p) * size / 1.25;
Z = h;
a = [...a, [X, Y, Z]];
}
ret = [...ret, a];
for (j = 3; j--;) {
a = [];
X = 0;
Y = 0;
Z = -h;
a = [...a, [X, Y, Z]];
X = S(p = Math.PI * 2 / 3 * j) * size / 1.25;
Y = C(p) * size / 1.25;
Z = h;
a = [...a, [X, Y, Z]];
X = S(p = Math.PI * 2 / 3 * (j + 1)) * size / 1.25;
Y = C(p) * size / 1.25;
Z = h;
a = [...a, [X, Y, Z]];
ret = [...ret, a];
}
ax = ay = az = ct = 0;
ret.map(v => {
v.map(q => {
ax += q[0];
ay += q[1];
az += q[2];
ct++;
});
});
ax /= ct;
ay /= ct;
az /= ct;
ret.map(v => {
v.map(q => {
q[0] -= ax;
q[1] -= ay;
q[2] -= az;
});
});
return ret;
};
Cube = size => {
for (CB = [], j = 6; j--; CB = [...CB, b]) for (b = [], i = 4; i--;) b = [...b, [(a = [S(p = Math.PI * 2 / 4 * i + Math.PI / 4), C(p), 2 ** .5 / 2])[j % 3] * (l = j < 3 ? size / 1.5 : -size / 1.5), a[(j + 1) % 3] * l, a[(j + 2) % 3] * l]];
return CB;
};
Octahedron = size => {
ret = [];
let h = size / 1.25;
for (j = 8; j--;) {
a = [];
X = 0;
Y = 0;
Z = h * (j < 4 ? -1 : 1);
a = [...a, [X, Y, Z]];
X = S(p = Math.PI * 2 / 4 * j) * size / 1.25;
Y = C(p) * size / 1.25;
Z = 0;
a = [...a, [X, Y, Z]];
X = S(p = Math.PI * 2 / 4 * (j + 1)) * size / 1.25;
Y = C(p) * size / 1.25;
Z = 0;
a = [...a, [X, Y, Z]];
ret = [...ret, a];
}
return ret;
};
Dodecahedron = size => {
ret = [];
a = [];
mind = -6e6;
for (i = 5; i--;) {
X = S(p = Math.PI * 2 / 5 * i + Math.PI / 5);
Y = C(p);
Z = 0;
if (Y > mind) mind = Y;
a = [...a, [X, Y, Z]];
}
a.map(v => {
X = v[0];
Y = v[1] -= mind;
Z = v[2];
R(0, .553573, 0);
v[0] = X;
v[1] = Y;
v[2] = Z;
});
b = JSON.parse(JSON.stringify(a));
b.map(v => {
v[1] *= -1;
});
ret = [...ret, a, b];
mind = -6e6;
ret.map(v => {
v.map(q => {
X = q[0];
Y = q[1];
Z = q[2];
if (Z > mind) mind = Z;
});
});
d1 = Math.hypot(ret[0][0][0] - ret[0][1][0], ret[0][0][1] - ret[0][1][1], ret[0][0][2] - ret[0][1][2]);
ret.map(v => {
v.map(q => {
q[2] -= mind + d1 / 2;
});
});
b = JSON.parse(JSON.stringify(ret));
b.map(v => {
v.map(q => {
q[2] *= -1;
});
});
ret = [...ret, ...b];
b = JSON.parse(JSON.stringify(ret));
b.map(v => {
v.map(q => {
X = q[0];
Y = q[1];
Z = q[2];
R(0, 0, Math.PI / 2);
R(0, Math.PI / 2, 0);
q[0] = X;
q[1] = Y;
q[2] = Z;
});
});
e = JSON.parse(JSON.stringify(ret));
e.map(v => {
v.map(q => {
X = q[0];
Y = q[1];
Z = q[2];
R(0, 0, Math.PI / 2);
R(Math.PI / 2, 0, 0);
q[0] = X;
q[1] = Y;
q[2] = Z;
});
});
ret = [...ret, ...b, ...e];
ret.map(v => {
v.map(q => {
q[0] *= size / 2;
q[1] *= size / 2;
q[2] *= size / 2;
});
});
return ret;
};
Icosahedron = size => {
ret = [];
B = [
[[0, 3], [1, 0], [2, 2]],
[[0, 3], [1, 0], [1, 3]],
[[0, 3], [2, 3], [1, 3]],
[[0, 2], [2, 1], [1, 0]],
[[0, 2], [1, 3], [1, 0]],
[[0, 2], [1, 3], [2, 0]],
[[0, 3], [2, 2], [0, 0]],
[[1, 0], [2, 2], [2, 1]],
[[1, 1], [2, 2], [2, 1]],
[[1, 1], [2, 2], [0, 0]],
[[1, 1], [2, 1], [0, 1]],
[[0, 2], [2, 1], [0, 1]],
[[2, 0], [1, 2], [2, 3]],
[[0, 0], [0, 3], [2, 3]],
[[1, 3], [2, 0], [2, 3]],
[[2, 3], [0, 0], [1, 2]],
[[1, 2], [2, 0], [0, 1]],
[[0, 0], [1, 2], [1, 1]],
[[0, 1], [1, 2], [1, 1]],
[[0, 2], [2, 0], [0, 1]]];
for (p = [1, 1], i = 38; i--;) p = [...p, p[l = p.length - 1] + p[l - 1]];
phi = p[l] / p[l - 1];
a = [
[-phi, -1, 0],
[phi, -1, 0],
[phi, 1, 0],
[-phi, 1, 0]];
for (j = 3; j--; ret = [...ret, b]) for (b = [], i = 4; i--;) b = [...b, [a[i][j], a[i][(j + 1) % 3], a[i][(j + 2) % 3]]];
ret.map(v => {
v.map(q => {
q[0] *= size / 2.25;
q[1] *= size / 2.25;
q[2] *= size / 2.25;
});
});
cp = JSON.parse(JSON.stringify(ret));
out = [];
a = [];
B.map(v => {
idx1a = v[0][0];
idx2a = v[1][0];
idx3a = v[2][0];
idx1b = v[0][1];
idx2b = v[1][1];
idx3b = v[2][1];
a = [...a, [cp[idx1a][idx1b], cp[idx2a][idx2b], cp[idx3a][idx3b]]];
});
out = [...out, ...a];
return out;
};
stroke = (scol, fcol, lwo = 1) => {
if (scol) {
x.closePath();
x.globalAlpha = .2;
x.strokeStyle = scol;
x.lineWidth = Math.min(100, 200 * lwo / Z);
x.stroke();
x.lineWidth /= 4;
x.g.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0