JavaScript

語言：

JaveScriptBabelCoffeeScript

確定

(function() {

var bands, c, can, clamp, ctx, getXY, maxRadius, points, render, size, time;

can = document.getElementById("c");

ctx = can.getContext("2d");

size = 800;

c = size / 2;

can.width = size;

can.height = size;

points = 21;

bands = 16;

maxRadius = Math.sqrt(2 * c * c) / Math.pow(bands, 3) * 1.8;

time = 0;

getXY = (function(_this) {

return function(p, b) {

var a, mo, r;

p = p % points;

b = b % bands;

a = p / points * Math.PI * 2;

mo = time * 0.001;

mo %= 1;

r = Math.pow(b + mo, 3) * maxRadius;

return {

x: c + Math.sin(a) * r + Math.sin(mo + b) * 15,

y: c + Math.cos(a) * r + Math.cos(mo + b) * 15,

r: r

};

};

})(this);

clamp = (function(_this) {

return function(v) {

if (v < 0) {

return 0;

} else if (v > 1) {

return 1;

} else {

return v;

}

};

})(this);

render = (function(_this) {

return function(t) {

var b, blue, c0, c1, c2, c3, colour, distanceShadow, green, i, j, p, radialShadow, red, ref, ref1, shade;

time = t;

ctx.clearRect(0, 0, size, size);

for (p = i = 0, ref = points; 0 <= ref ? i < ref : i > ref; p = 0 <= ref ? ++i : --i) {

for (b = j = 0, ref1 = bands - 1; 0 <= ref1 ? j < ref1 : j > ref1; b = 0 <= ref1 ? ++j : --j) {

c0 = getXY(p, b);

c1 = getXY(p, b + 1);

c2 = getXY(p + 1, b + 1);

c3 = getXY(p + 1, b);

distanceShadow = c0.r / maxRadius / 700;

radialShadow = 0.2 + (Math.abs(((p + 0.5) - points / 2) / points)) * 0.7;

shade = Math.round(radialShadow * distanceShadow * 255);

if (shade > 255) {

shade = 255;

}

red = Math.round(distanceShadow * 160);

green = Math.round(shade);

blue = Math.round(255 - shade);

colour = "rgba(" + [red, green, blue, 1] + ")";

ctx.fillStyle = colour;

ctx.beginPath();

ctx.moveTo(c0.x, c0.y);

ctx.lineTo(c1.x, c1.y);

ctx.lineTo(c2.x, c2.y);

ctx.lineTo(c3.x, c3.y);

ctx.closePath();

ctx.fill();

/*

ctx.beginPath()

ctx.moveTo(c0.x, c0.y)

ctx.lineTo(c2.x, c2.y)

ctx.closePath()

ctx.fill()

ctx.stroke()

*/

}

}

return requestAnimationFrame(render);

};

})(this);

render(0);

}).call(this);

總結

以上是生活随笔為你收集整理的计算机模拟虫洞,Canvas 3D虫洞模拟的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。