Skip to content

Instantly share code, notes, and snippets.

@yuheiy
Last active December 9, 2015 17:44
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save yuheiy/06c32236fee0c18de989 to your computer and use it in GitHub Desktop.
snow canvas
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Snow Canvas</title>
<style>
body {
background-color: #2c3e50;
}
#snow {
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id="snow"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/EaselJS/0.8.0/easeljs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel">
'use strict';
class Crystal {
constructor(width = window.innerWidth, height = window.innerHeight) {
this.shape = new createjs.Shape();
const radius = _.random(2, 4);
this.shape.graphics.beginFill('#ecf0f1').drawCircle(0, 0, radius);
this.shape.x = _.random(radius, width - radius);
this.shape.y = _.random(-height, -radius);
this.shape.addEventListener('mouseover', this.onMouseOver.bind(this));
}
onMouseOver() {
this.fadeOut()
.then(this.reset.bind(this));
}
fadeOut() {
return new Promise(done => {
const handler = () => {
if (this.shape.alpha <= 0) {
this.shape.removeEventListener('tick', handler);
return done();
}
this.shape.alpha -= 0.05;
}
this.shape.addEventListener('tick', handler);
});
}
reset() {
const radius = this.shape.graphics.command.radius;
this.shape.y = -radius;
this.shape.alpha = 1;
}
}
class Snow {
constructor(canvas) {
this.canvas = canvas;
this.stage = new createjs.Stage(this.canvas);
this.stage.enableMouseOver(this.length);
this.setSize();
createjs.Ticker.framerate = 40;
createjs.Ticker.addEventListener('tick', this.onTick.bind(this));
window.addEventListener('resize', this.setSize.bind(this));
}
setSize() {
this.width = window.innerWidth;
this.height = window.innerHeight;
this.canvas.width = this.width;
this.canvas.height = this.height;
this.length = Math.floor(this.width * this.height / 1000);
if (this.crystals) {
this.stage.removeChild(...this.crystals);
}
this.crystals = _.times(this.length, () =>
new Crystal(this.width, this.height).shape);
this.stage.addChild(...this.crystals);
}
onTick() {
this.crystals.forEach((crystal, i) => {
const radius = crystal.graphics.command.radius;
crystal.y - radius > this.height
? crystal.y = -radius
: crystal.y += (i % 3 + 1) * 0.05;
});
this.stage.update();
}
}
new Snow(document.getElementById('snow'));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment