Fixing particle animation (working)

This commit is contained in:
Dennis Eichhorn 2016-07-16 13:17:16 +02:00
parent 058aff0960
commit 288b9c38d6
2 changed files with 29 additions and 14 deletions

View File

@ -11,8 +11,8 @@
{ {
"use strict"; "use strict";
/** @namespace jsOMS.Animation */ /** @namespace jsOMS.Animation.Animation */
jsOMS.Autoloader.defineNamespace('jsOMS.Animation'); jsOMS.Autoloader.defineNamespace('jsOMS.Animation.Animation');
jsOMS.Animation.Animation.requestAnimationFrame = (function () jsOMS.Animation.Animation.requestAnimationFrame = (function ()
{ {

View File

@ -27,26 +27,40 @@
this.width = screen.width; this.width = screen.width;
this.height = screen.height; this.height = screen.height;
this.canvas.width = width; this.canvas.width = this.width;
this.canvas.height = height; this.canvas.height = this.height;
this.particles = []; this.particles = [];
this.maxDistance = 70; this.maxDistance = 70;
this.gravitation = 10000000; this.gravitation = 10000000;
for (let i = 0; i < this.width * this.height / 3000; i++) {
this.particles.push(new jsOMS.Animation.Canvas.Particle(
Math.random() * this.width,
Math.random() * this.height,
-1 + Math.random() * 2,
-1 + Math.random() * 2,
1
));
}
}; };
jsOMS.Animation.Canvas.ParticleAnimation.prototype.draw = function () jsOMS.Animation.Canvas.ParticleAnimation.prototype.draw = function (self)
{ {
this.invalidate(); self = typeof self !== 'undefined' ? self : this;
self.invalidate();
let length = this.particles.length; let length = self.particles.length;
for (let i = 0; i < length; i++) { for (let i = 0; i < length; i++) {
this.particles[i].draw(this.ctx); self.particles[i].draw(self.ctx);
} }
this.updateParticles(); self.updateParticles();
jsOMS.Animation.Animation.requestAnimationFrame(this.draw); jsOMS.Animation.Animation.requestAnimationFrame.call(window, function ()
{
self.draw(self);
});
}; };
jsOMS.Animation.Canvas.ParticleAnimation.prototype.invalidate = function () jsOMS.Animation.Canvas.ParticleAnimation.prototype.invalidate = function ()
@ -63,7 +77,7 @@
radius; radius;
for (let i = 0; i < length; i++) { for (let i = 0; i < length; i++) {
particle = particles[i]; particle = this.particles[i];
pos = particle.getPosition(); pos = particle.getPosition();
vel = particle.getVelocity(); vel = particle.getVelocity();
radius = particle.getRadius(); radius = particle.getRadius();
@ -73,7 +87,7 @@
// Change on wall hit // Change on wall hit
if (pos.x + radius > this.width) { if (pos.x + radius > this.width) {
pos.x = this.width - radius; pos.x = radius;
} else if (pos.x - radius < 0) { } else if (pos.x - radius < 0) {
pos.x = this.width - radius; pos.x = this.width - radius;
} }
@ -85,9 +99,10 @@
} }
particle.setPosition(pos.x, pos.y); particle.setPosition(pos.x, pos.y);
particle.setVelocity(vel.x, vel.y);
for (let j = i + 1; j < length; j++) { for (let j = i + 1; j < length; j++) {
this.updateDistance(particle, particles[j]); this.updateDistance(particle, this.particles[j]);
} }
} }
}; };