SSSSample
by Humphry Huang
HTML
<div id="preload_wraper">
<img src="http://dl.dropboxusercontent.com/u/17958375/work/eqcanvas/images/0.png">
<img src="http://dl.dropboxusercontent.com/u/17958375/work/eqcanvas/images/0.png">
<img src="http://dl.dropboxusercontent.com/u/17958375/work/eqcanvas/images/1.png">
<img src="http://dl.dropboxusercontent.com/u/17958375/work/eqcanvas/images/2.png">
<img src="http://dl.dropboxusercontent.com/u/17958375/work/eqcanvas/images/3.png">
<img src="http://dl.dropboxusercontent.com/u/17958375/work/eqcanvas/images/4.png">
<img src="http://dl.dropboxusercontent.com/u/17958375/work/eqcanvas/images/5.png">
<img src="http://dl.dropboxusercontent.com/u/17958375/work/eqcanvas/images/6.png">
<img src="http://dl.dropboxusercontent.com/u/17958375/work/eqcanvas/images/7.png">
</div>
CSS
#preload_wraper { display: none; }
* { margin:0; padding:0; height:100%; overflow:hidden }
JavaScript
"use strict" ;
var Vector = function(x, y) {
this.x = x;
this.y = y;
}
Vector.prototype = {
copy: function() {
return new Vector(this.x, this, y);
},
length: function() {
return Math.sqrt(this.x * this.x + this.y * this.y)
},
sqrLength: function() {
return this.x * this.x + this.y * this.y
},
normalize: function() {
var inv = 1 / this.length();
return new Vector(this.x * inv, this.y * inv)
},
negate: function() {
return new Vector(-this.x, -this.y)
},
add: function(v) {
return new Vector(this.x + v.x, this.y + v.y)
},
subtract: function(v) {
return new Vector(this.x - v.x, this.y - v.y)
},
multiply: function(f) {
return new Vector(this.x * f, this.y * f)
},
divide: function(f) {
return new Vector(this.x / f, this.y / f)
},
dot: function(v) {
return this.x * v.x + this.y * v.y
}
}
Vector.zero = new Vector(0, 0);
var Particle = (function() {
var _default = {
position: new Vector(0, 0),
speed: Vector.zero,
acceleration: new Vector(0, 100),
life: 1,
age: 0,
color: [255, 0, 0],
size: 5
} ;
return function(c){
for (var i in c) this[i] = c[i];
for (var i in _default)
this[i] = c.hasOwnProperty(i) ? c[i] : _default[i];
}
})();
var ParticleSystem = function() {
var that = this;
var particles = [];
this.items = particles;
this.effectors = [];
this.decased = function() {};
/** 装入粒子 **/
this.emit = function(particle) {
particles.push(particle);
}
/** 粒子演化 **/
this.simulate = function(dt) {
aging(dt);
applyEffectors();
kindematics(dt);
}
/** 渲染粒子到画布 **/
this.render = function() {
var args = arguments;
particles.forEach(function(particle) {
if (typeof args[0] != 'undefined' && args[0]) {
...