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);