EffectHub.com: your best source for gaming

Recommendation

More Effects...

Vector2D = (function() {
    function Vector2D(x1, y1) {
      this.x = x1 != null ? x1 : 0;
      this.y = y1 != null ? y1 : 0;
    }

Vector2D.prototype.add = function(vector) {
      return new Vector2D(this.x + vector.x, this.y + vector.y);
    };

Vector2D.prototype.subtract = function(vector) {
      return new Vector2D(this.x - vector.x, this.y - vector.y);
    };

Vector2D.prototype.multiply = function(n) {
      return new Vector2D(this.x * n, this.y * n);
    };

Vector2D.prototype.divide = function(n) {
      return new Vector2D(this.x / n, this.y / n);
    };

Vector2D.prototype.clone = function() {
      return new Vector2D(this.x, this.y);
    };

Vector2D.prototype.magnitude = function() {
      return Math.sqrt(this.x * this.x + this.y * this.y);
    };

return Vector2D;

})();

Obstacle = (function(superClass) {
    extend(Obstacle, superClass);

function Obstacle(x, y, radius, mass) {
      this.radius = radius;
      this.mass = mass != null ? mass : 6;
      Obstacle.__super__.constructor.call(this, x, y);
    }

Obstacle.prototype.move = function(x1, y1) {
      this.x = x1;
      this.y = y1;
    };

Obstacle.prototype.avoid = function(particle) {
      var d, v;
      v = particle.subtract(this);
      d = this.radius - Math.min(v.magnitude(), this.radius);
      return v.multiply(this.mass * d / this.radius);
    };

return Obstacle;

})(Vector2D);

Particle = (function(superClass) {
    extend(Particle, superClass);

Particle.prototype.reset = function(x1, y1) {
      this.x = x1 != null ? x1 : 0;
      this.y = y1 != null ? y1 : 0;
    };

Particle.prototype.update = function(velX, velY) {
      this.x += velX;
      return this.y += velY;
    };

return Particle;

})(Vector2D);

App = (function() {
    function App() {
      this.updateParticles = bind(this.updateParticles, this);
      var i, j, k;
      this.canvas = document.getElementById("particles");
      this.context = this.canvas.getContext("2d");
      this.width = this.canvas.width;
      this.height = this.canvas.height;
      this.data = this.context.createImageData(this.width, this.height);
      this.particles = [];
      this.obstacles = [];
      this.strength = 300;
      this.angle = Math.random() * Math.PI * 2;
      this.wind = new Vector2D(Math.cos(this.angle) * this.strength, Math.sin(this.angle) * this.strength);
      this.windVariation = 0;
      for (i = j = 1; j <= 8; i = ++j) {
        this.obstacles.push(new Obstacle(Math.random() * this.width, Math.random() * this.height, Math.random() * 60 + 60));
      }
      for (i = k = 1; k <= 2500; i = ++k) {
        this.particles.push(new Particle(Math.random() * this.width, Math.random() * this.height));
      }
      $(window).on("mousemove", (function(_this) {
        return function(e) {
          if (!_this.cursor) {
            _this.cursor = new Obstacle(_this.width * .5, _this.height * .5, 80, 20);
            _this.obstacles.push(_this.cursor);
          }
          return _this.cursor.move(e.clientX, e.clientY);
        };
      })(this));
      this.updateParticles();
    }

App.prototype.changeDirection = function() {
      this.windVariation += .002;
      this.wind.x = Math.sin(this.angle * Math.cos(this.windVariation)) * this.strength;
      return this.wind.y = Math.cos(this.angle * Math.cos(this.windVariation)) * this.strength;
    };

App.prototype.updateParticles = function() {
      var j, k, len1, len2, obstacle, p, ref, ref1, v;
      ref = this.particles;
      for (j = 0, len1 = ref.length; j < len1; j++) {
        p = ref[j];
        v = this.wind.clone();
        ref1 = this.obstacles;
        for (k = 0, len2 = ref1.length; k < len2; k++) {
          obstacle = ref1[k];
          v = v.add(obstacle.avoid(p));
        }
        v = v.divide(p.weight);
        p.update(v.x, v.y);
        if (p.x < 0) {
          p.reset(this.width, Math.random() * this.height);
        } else if (p.x > this.width) {
          p.reset(0, Math.random() * this.height);
        } else if (p.y < 0) {
          p.reset(Math.random() * this.width, this.height);
        } else if (p.y > this.height) {
          p.reset(Math.random() * this.width, 0);
        }
      }
      this.changeDirection();
      this.drawParticles();
      return requestAnimationFrame(this.updateParticles);
    };

App.prototype.drawParticles = function() {
      var i, j, len, len1, p, ref;
      ref = this.particles;
      for (j = 0, len1 = ref.length; j < len1; j++) {
        p = ref[j];
        this.setPixel(this.data, p.x, p.y, 235, 202, 47, 255);
      }
      len = this.data.data.length;
      i = 3;
      while (i < len) {
        this.data.data[i] -= 50;
        i += 4;
      }
      return this.context.putImageData(this.data, 0, 0);
    };

App.prototype.setPixel = function(imageData, x, y, r, g, b, a) {
      var index;
      if (x < 0 || x > this.width || y < 0 || y > this.height) {
        return;
      }
      x = Math.round(x);
      y = Math.round(y);
      index = (x + y * imageData.width) * 4;
      imageData.data[index + 0] = r;
      imageData.data[index + 1] = g;
      imageData.data[index + 2] = b;
      imageData.data[index + 3] = a;
      index = ((x + 1) + (y + 1) * imageData.width) * 4;
      imageData.data[index + 0] = r;
      imageData.data[index + 1] = g;
      imageData.data[index + 2] = b;
      imageData.data[index + 3] = a;
      index = ((x - 1) + (y - 1) * imageData.width) * 4;
      imageData.data[index + 0] = r;
      imageData.data[index + 1] = g;
      imageData.data[index + 2] = b;
      imageData.data[index + 3] = a;
      index = ((x + 1) + (y - 1) * imageData.width) * 4;
      imageData.data[index + 0] = r;
      imageData.data[index + 1] = g;
      imageData.data[index + 2] = b;
      imageData.data[index + 3] = a;
      index = ((x - 1) + (y + 1) * imageData.width) * 4;
      imageData.data[index + 0] = r;
      imageData.data[index + 1] = g;
      imageData.data[index + 2] = b;
      return imageData.data[index + 3] = a;
    };

return App;

})();

$(function() {
    return new App();
  });

}).call(this);

CSS

HTML

Recommendation

Join Effecthub.com