JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
var two = new Two({
type: Two.Types.canvas,
fullscreen: true,
autostart: true
}).appendTo(document.body);
var totalFrames = 72;
var colors = ['#33c09e', '#f0453d', '#c5953a'];
var index = 0;
var velocityScale = two.height / (totalFrames / (colors.length + 0.5));
var amount = Math.round(two.width / 50);
var points = _.map(_.range(amount), function(i) {
var pct = i / (amount - 1);
var x = 1.5 * two.width * pct - two.width / 4;
var y = -two.height / 4;
var a = new Two.Anchor(x, y);
a.step = getStep(i);
return a;
});
var backdrop = two.makeRectangle(two.width / 2, two.height / 2, two.width, two.height);
var paint = two.makeCurve(
[
new Two.Anchor(two.width * 1.25, -two.height / 4),
new Two.Anchor(-two.width * 0.25, -two.height / 4)
].concat(points)
);
backdrop.noStroke();
paint.noStroke().fill = colors[colors.length - 1];
paint.stroke = '#302f2a';
paint.linewidth = 50;
reset();
two.bind('update', function(frameCount) {
// setInterval(function() {
var outside = true;
for (var i = 0; i < points.length; i++) {
var v = points[i];
v.y += v.step;
v.step *= 1.0125;
if (v.y < two.height * 1.33) {
outside = false;
}
}
if (outside) {
reset();
}
});
// }, 1000 / 24);
function reset() {
backdrop.fill = paint.fill;
for (var i = 0; i < points.length; i++) {
var v = points[i];
v.y = 0;
v.step = getStep(i);
}
index = (index + 1) % colors.length;
paint.fill = colors[index];
paint.curved = Math.random() > 0.5;
}
function getStep(i) {
var n = Math.sin(Math.PI * i / amount);
var pct = 0.33 * n;
var ipct = 1 - pct;
return velocityScale * Math.random() * pct + velocityScale * ipct;
}
function mod(v, l) {
while (v < 0) {
v += l;
}
return v % l;
}