var r,n=Math.PI,t=Math.abs,o=0,i=a.width,F=a.height,e=[],u=25,f=h("FEFEFE","DDD",5),v=h("F09B0C","FFF900",5);function D(r,a,o,i,F,e){var f=t(u+i),v=t(r.r+i);c.beginPath(),c.ellipse(r.x+a+f,r.y+o+v,f,v,r.a,0,2*n),F&&(c.fillStyle=F,c.fill()),e&&c.stroke()}function h(r,a,n){var t=i/2,o=c.createRadialGradient(t,t,t,t,t,0);n--;for(var F=0;F<=n;F++)o.addColorStop(F*(1/n),"#"+(F%2==0?r:a));return o}function d(r,a){return Math.random()*(a-r)+r}fillCoinShadow="#333",c.strokeStyle=h("DDD","000",2),b.style.background="#D6FAFF",function a(t){var h,s,l,m=(t-r)/1e3;r=t,t-o>=25&&(s=d(0,1)<.5?-1:1,h={x:i/2-u,y:F,r:u,a:s*n*d(1.2,1.4),n:-1*s*3,t:d(0,1)<.2?f:v,o:{x:s*d(25,350),y:d(-1e3,-900),c:200,r:u*d(-1,-.5),a:s*n*d(.05,.2)}},d(0,1)<.3?e.push(h):e.unshift(h),o=t),c.clearRect(0,0,i,F);for(var y=e.length-1;y>=0;y--)l=(h=e[y]).o,h.y<0||h.y>F?e.splice(y,1):(D(h,h.n,0,0,"#333"),D(h,0,0,0,h.t,!0),D(h,6,6,-6,"rgba(0,0,0,0.08)"),h.x+=l.x*m,h.y+=(l.y+l.c)*m,h.r+=l.r*m,h.a+=l.a*m,l.c+=l.c*m*2);requestAnimationFrame(a)}(0);
/**
* Created by Richard Livingston on 16/02/2018.
*/
var MathPI = Math.PI,
MathAbs = Math.abs;
var coinInsertInterval = 20,
prevCoinTime = 0,
prevLoopTime;
var canvasWidth = a.width,
canvasHeight = a.height;
var coins = [],
coinRadius = 25;
var fillCoinSilver = makeGradient('FEFEFE', 'DDD', 5),
fillCoinGold = makeGradient('F09B0C', 'FFF900', 5),
fillCoinCenter = 'rgba(0,0,0,0.08)';
fillCoinShadow = '#333';
c.strokeStyle = makeGradient('DDD', '000', 2);
b.style.background = '#D6FAFF';
(function loop(now){
var delta = (now - prevLoopTime) / 1000,
coin,
direction,
increment;
prevLoopTime = now;
if(now - prevCoinTime >= coinInsertInterval){
direction = rand(0, 1) < 0.5 ? -1 : 1;
coin = {
// Registration point is at 0,0
// Position at bottom center of the canvas
x: (canvasWidth / 2) - coinRadius,
y: canvasHeight,
// RadiusY will be reduced to give the appearance of rotation
radiusY: coinRadius,
// Because the radius on x and y will not be equal (ellipse), it can be rotated
rotation: direction * MathPI * rand(1.2, 1.4),
// Shaddow will be 3px on the opposite side to the direction
shadowX: direction * -1 * 3,
// 1/4 of the coins will be silver
color: rand(0, 1) < 0.2 ? fillCoinSilver : fillCoinGold,
// On each update, the above values will be incremented with the below
increment: {
x: direction * rand(25, 350),
y: rand(-1000, -900),
gravity: 200,
radiusY: coinRadius * rand(-1, -0.5),
rotation: direction * MathPI * rand(0.05, 0.2)
}
};
if(rand(0, 1) < 0.3){
coins.push(coin);
}
else{
coins.unshift(coin);
}
prevCoinTime = now;
}
c.clearRect(0, 0, canvasWidth, canvasHeight);
for(var i = coins.length - 1; i >= 0; i --){
coin = coins[i];
increment = coin.increment;
if(coin.y < 0 || coin.y > canvasHeight){
coins.splice(i, 1);
continue;
}
// Shaddow
drawShape(coin, coin.shadowX, 0, 0, fillCoinShadow);
// Coin
drawShape(coin, 0, 0, 0, coin.color, true);
// Coin Center
drawShape(coin, 6, 6, -6, fillCoinCenter);
coin.x += increment.x * delta;
coin.y += (increment.y + increment.gravity) * delta;
coin.radiusY += increment.radiusY * delta;
coin.rotation += increment.rotation * delta;
// Gravity increases over time, so the coins fall progressively faster
increment.gravity += increment.gravity * delta * 2;
}
requestAnimationFrame(loop);
})(0);
function drawShape(coin, offsetX, offsetY, offsetRadius, fillStyle, applyStroke){
var radiusX = MathAbs(coinRadius + offsetRadius),
radiusY = MathAbs(coin.radiusY + offsetRadius);
c.beginPath();
c.ellipse(coin.x + offsetX + radiusX, coin.y + offsetY + radiusY, radiusX, radiusY, coin.rotation, 0, MathPI * 2);
if(fillStyle){
c.fillStyle = fillStyle;
c.fill();
}
if(applyStroke){
c.stroke();
}
}
function makeGradient(color1, color2, stops){
var radius = canvasWidth / 2,
gradient = c.createRadialGradient(radius, radius, radius, radius, radius, 0);
stops --;
for(var i = 0; i <= stops; i ++){
gradient.addColorStop(i * (1 / stops), '#' + (i % 2 === 0 ? color1 : color2));
}
return gradient;
}
function rand(min, max){
return (Math.random() * (max - min)) + min;
}
