diff --git a/Animation/Animation.js b/Animation/Animation.js new file mode 100644 index 0000000..fcc1025 --- /dev/null +++ b/Animation/Animation.js @@ -0,0 +1,29 @@ +/** + * Particle class. + * + * @author OMS Development Team + * @author Dennis Eichhorn + * @copyright 2013 Dennis Eichhorn + * @license OMS License 1.0 + * @version 1.0.0 * @since 1.0.0 + */ +(function (jsOMS) +{ + "use strict"; + + /** @namespace jsOMS.Animation */ + jsOMS.Autoloader.defineNamespace('jsOMS.Animation'); + + jsOMS.Animation.Animation.requestAnimationFrame = (function () + { + return window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + window.oRequestAnimationFrame || + window.msRequestAnimationFrame || + function (callback) + { + window.setTimeout(callback, 1000 / 60); + }; + })(); +}(window.jsOMS = window.jsOMS || {})); diff --git a/Animation/Canvas/Particle.js b/Animation/Canvas/Particle.js new file mode 100644 index 0000000..911275f --- /dev/null +++ b/Animation/Canvas/Particle.js @@ -0,0 +1,69 @@ +/** + * Particle class. + * + * @author OMS Development Team + * @author Dennis Eichhorn + * @copyright 2013 Dennis Eichhorn + * @license OMS License 1.0 + * @version 1.0.0 * @since 1.0.0 + */ +(function (jsOMS) +{ + "use strict"; + + /** @namespace jsOMS.Animation.Canvas */ + jsOMS.Autoloader.defineNamespace('jsOMS.Animation.Canvas'); + + /** + * @constructor + * + * @since 1.0.0 + * @author Dennis Eichhorn + */ + jsOMS.Animation.Canvas.Particle = function (posX, posY, velX, velY, radius) + { + this.posX = posX; + this.posY = posY; + this.velX = velX; + this.velY = velY; + + this.radius = radius; + + this.color = {r: 255, g: 255, b: 255, a: 0.5}; + }; + + jsOMS.Animation.Canvas.Particle.prototype.getRadius = function () + { + return this.radius; + }; + + jsOMS.Animation.Canvas.Particle.prototype.setPosition = function (posX, posY) + { + this.posX = posX; + this.posY = posY; + }; + + jsOMS.Animation.Canvas.Particle.prototype.getPosition = function () + { + return {x: this.posX, y: this.posY}; + }; + + jsOMS.Animation.Canvas.Particle.prototype.setVelocity = function (velX, velY) + { + this.velX = velX; + this.velY = velY; + }; + + jsOMS.Animation.Canvas.Particle.prototype.getVelocity = function () + { + return {x: this.velX, y: this.velY}; + }; + + jsOMS.Animation.Canvas.Particle.prototype.draw = function (ctx) + { + ctx.fillStyle = 'rgba(' + this.color.r + ', ' + this.color.g + ', ' + this.color.b + ', ' + this.color.a + ')'; + ctx.beginPath(); + ctx.arc(this.posX, this.posY, this.radius, 0, Math.PI * 2, false); + ctx.fill(); + }; +}(window.jsOMS = window.jsOMS || {})); diff --git a/Animation/Canvas/ParticleAnimation.js b/Animation/Canvas/ParticleAnimation.js new file mode 100644 index 0000000..4b1a3a2 --- /dev/null +++ b/Animation/Canvas/ParticleAnimation.js @@ -0,0 +1,127 @@ +/** + * Particle class. + * + * @author OMS Development Team + * @author Dennis Eichhorn + * @copyright 2013 Dennis Eichhorn + * @license OMS License 1.0 + * @version 1.0.0 * @since 1.0.0 + */ +(function (jsOMS) +{ + "use strict"; + + /** @namespace jsOMS.Animation.Canvas */ + jsOMS.Autoloader.defineNamespace('jsOMS.Animation.Canvas'); + + /** + * @constructor + * + * @since 1.0.0 + * @author Dennis Eichhorn + */ + jsOMS.Animation.Canvas.ParticleAnimation = function (canvas) + { + this.canvas = canvas; + this.ctx = canvas.getContext('2d'); + this.width = screen.width; + this.height = screen.height; + + this.canvas.width = width; + this.canvas.height = height; + + this.particles = []; + this.maxDistance = 70; + this.gravitation = 10000000; + }; + + jsOMS.Animation.Canvas.ParticleAnimation.prototype.draw = function () + { + this.invalidate(); + + let length = this.particles.length; + + for (let i = 0; i < length; i++) { + this.particles[i].draw(this.ctx); + } + + this.updateParticles(); + jsOMS.Animation.Animation.requestAnimationFrame(this.draw); + }; + + jsOMS.Animation.Canvas.ParticleAnimation.prototype.invalidate = function () + { + this.ctx.clearRect(0, 0, this.width, this.height); + }; + + jsOMS.Animation.Canvas.ParticleAnimation.prototype.updateParticles = function () + { + let particle, + length = this.particles.length, + pos, + vel, + radius; + + for (let i = 0; i < length; i++) { + particle = particles[i]; + pos = particle.getPosition(); + vel = particle.getVelocity(); + radius = particle.getRadius(); + + pos.x += vel.x; + pos.y += vel.y; + + // Change on wall hit + if (pos.x + radius > this.width) { + pos.x = this.width - radius; + } else if (pos.x - radius < 0) { + pos.x = this.width - radius; + } + + if (pos.y + radius > this.height) { + pos.y = radius; + } else if (pos.y - radius < 0) { + pos.y = this.height - radius; + } + + particle.setPosition(pos.x, pos.y); + + for (let j = i + 1; j < length; j++) { + this.updateDistance(particle, particles[j]); + } + } + }; + + jsOMS.Animation.Canvas.ParticleAnimation.prototype.updateDistance = function (p1, p2) + { + let pos1 = p1.getPosition(), + pos2 = p2.getPosition(), + dx = pos1.x - pos2.x, + dy = pos1.y - pos2.y, + dist = Math.sqrt(dx * dx + dy * dy), + vel1 = p1.getVelocity(), + vel2 = p2.getVelocity(); + + // Draw line if particles are close + if (dist <= this.maxDistance) { + this.ctx.beginPath(); + this.ctx.strokeStyle = 'rgba(255, 255, 255, ' + ((1.2 - dist / this.maxDistance) * 0.5) + ')'; + this.ctx.moveTo(pos1.x, pos1.y); + this.ctx.lineTo(pos2.x, pos2.y); + this.ctx.stroke(); + this.ctx.closePath(); + + // Accelerate based on distance (no acceleration yet) + let ax = dx / this.gravitation, + ay = dy / this.gravitation; + + vel1.x -= ax; + vel1.y -= ay; + p1.setVelocity(vel1.x, vel1.y); + + vel2.x -= ax; + vel2.y -= ay; + p2.setVelocity(vel2.x, vel2.y); + } + }; +}(window.jsOMS = window.jsOMS || {})); \ No newline at end of file