Однажды ночью, не так давно, наблюдал очаровательную погоду - стоял не очень сильный мороз, был абсолютный штиль и неспешно присыпал снежок.
И мне захотелось изобразить эту картину в коде.)
Не то чтобы круто, да я и не выпендривался, но может кому-нибудь понравится. :)
<head>
<style>
img, canvas { position: absolute; left: 0px; top: 0px; margin: 0px; padding: 0px; border: none; }
</style>
<script>
function byId ( id ) {
return document.getElementById( id );
}
function rand ( min, max ) {
return Math.random() * ( max - min ) + min;
}
function now () {
return ( +new Date() ) / 1000;
}
function Sprite ( image, sx, sy, sw, sh, originX, originY ) {
this.image = image;
this.sx = sx;
this.sy = sy;
this.sw = sw;
this.sh = sh;
this.originX = originX ? originX : 0;
this.originY = originY ? originY : 0;
}
Sprite.prototype.draw = function ( context, x, y, angle, scaleX, scaleY ) {
context.save();
context.translate( x, y );
context.rotate( angle );
context.scale( scaleX, scaleY );
context.drawImage(
this.image,
this.sx, this.sy,
this.sw, this.sh,
-this.originX,
-this.originY,
this.sw, this.sh
);
context.restore();
}
function Flakes ( canvas, flake, zmin, zmax, count, speed, loopTime ) {
var viewW = canvas.width;
var viewH = canvas.height;
zmax = Math.min( zmax, ( loopTime * speed - flake.height ) / viewH );
zmin = Math.min( zmin, zmax );
var particles = [];
var flakeHalfW = flake.width * 0.5;
var flakeHalfH = flake.height * 0.5;
for ( var i = 0; i < count; i++ ) {
var spawnZ = rand( zmin, zmax );
particles.push({
spawnX : rand( -flakeHalfW / spawnZ, viewW + flakeHalfW / spawnZ ),
spawnZ : spawnZ,
spawnTime : rand( 0, loopTime ),
speed : speed / spawnZ,
halfH : flakeHalfH / spawnZ
});
}
particles.sort( function ( a, b ) {
return b.spawnZ - a.spawnZ;
});
this.particles = particles;
this.viewW = viewW;
this.viewH = viewH;
this.loopTime = loopTime;
this.ctx = canvas.getContext( '2d' );
this.sprite = new Sprite(
flake,
0, 0,
flake.width, flake.height,
flake.width * 0.5, flake.height * 0.5
);
}
Flakes.prototype.draw = function ( time ) {
var ctx = this.ctx;
var sprite = this.sprite;
var particles = this.particles;
var viewH = this.viewH;
var loopTime = this.loopTime;
for ( var i = 0; i < particles.length; i++ ) {
var particle = particles[ i ];
var y = -particle.halfH + ( ( time + particle.spawnTime ) % loopTime ) * particle.speed;
if ( y < viewH + particle.halfH ) {
sprite.draw( ctx, particle.spawnX, y, 0, 1 / particle.spawnZ, 1 / particle.spawnZ );
}
}
}
window.onload = function () {
var imgBg = byId( 'image-bg' );
var imgFlake = byId( 'image-flake' );
var canvas = byId( 'canvas' );
document.body.removeChild( imgFlake );
canvas.width = imgBg.width;
canvas.height = imgBg.height;
var ctx = canvas.getContext( '2d' );
var flakes = new Flakes( canvas, imgFlake, 2, 25, 1500, 400, 30 );
function render () {
ctx.clearRect( 0, 0, canvas.width, canvas.height );
flakes.draw( now() - timeOffset );
}
var animate = true;
var timeStop;
var timeOffset = 0;
var intervalId = window.setInterval( render, 40 );
canvas.onclick = function () {
if ( animate = !animate ) {
timeOffset += now() - timeStop;
intervalId = window.setInterval( render, 40 );
}
else {
timeStop = now();
window.clearInterval( intervalId );
}
}
}
</script>
</head>
<body>
<img id="image-flake" src="http://dl.dropbox.com/u/19390559/share/snowflake.png">
<img id="image-bg" src="http://dl.dropbox.com/u/19390559/share/christmas-tree.png">
<canvas id="canvas"></canvas>
</body>
Можно кликнуть по картинке чтобы остановить/возобновить анимацию.
ps: фон, конечно же, не мой - нашел в гугле.)
