init

miguelmota · Jan 15, 2016 · 1e2e5e3 · 1e2e5e3
commit 1e2e5e3
Show file tree

Hide file tree

Showing 10 changed files with 286 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,23 @@
+# EditorConfig http://editorconfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+# use line feed
+end_of_line = lf
+
+# ensure file ends with a newline when saving
+insert_final_newline = true
+
+# soft tabs
+indent_style = space
+
+# number of columns used for each indentation level
+indent_size = 2
+
+# remove any whitespace characters preceding newline characters
+trim_trailing_whitespace = true
+
+# character set
+charset = utf-8
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+# Convert line endings to LF (Line Feed)
+* text=auto
diff --git a/.jscsrc b/.jscsrc
@@ -0,0 +1,5 @@
+{
+  "preset": "google",
+  "disallowSpacesInAnonymousFunctionExpression": null,
+  "excludeFiles": ["node_modules/**"]
+}
diff --git a/.jshintrc b/.jshintrc
@@ -0,0 +1,30 @@
+{
+  "node": true,
+  "browser": true,
+  "esnext": true,
+  "bitwise": true,
+  "camelcase": true,
+  "curly": true,
+  "eqeqeq": true,
+  "immed": true,
+  "indent": 4,
+  "latedef": true,
+  "newcap": true,
+  "noarg": true,
+  "quotmark": "single",
+  "regexp": true,
+  "undef": true,
+  "unused": true,
+  "strict": true,
+  "trailing": true,
+  "smarttabs": true,
+  "jquery": true,
+  "globals": {
+    "define": true,
+    "require": true,
+    "module": true,
+    "export": true,
+    "$": true,
+    "_": true
+  }
+}
diff --git a/LICENSE.md b/LICENSE.md
@@ -0,0 +1,21 @@
+MIT license
+
+Copyright (C) 2015 Miguel Mota
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,11 @@
+# canvas particles
+
+> Glowing particles in canvas.
+
+# Demo
+
+[http://lab.moogs.io/canvas-particles](http://lab.moogs.io/canvas-particles)
+
+# License
+
+MIT
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=yes">
+  <title>Particles in canvas</title>
+  <link rel="stylesheet" href="./styles/index.css">
+</head>
+<body>
+  <canvas id="canvas"></canvas>
+
+  <a href="https://github.com/miguelmota/canvas-particles" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
+
+  <script src="./scripts/particle.js"></script>
+  <script src="./scripts/index.js"></script>
+</body>
+</html>
+
diff --git a/example/scripts/index.js b/example/scripts/index.js
@@ -0,0 +1,41 @@
+(function() {
+  'use strict';
+
+  var particleCount = 52;
+  var particles = [];
+  var speed = 60;
+
+  var width = window.innerWidth;
+  var height = window.innerHeight;
+  var canvas = document.getElementById('canvas');
+  var context = canvas.getContext('2d');
+
+  canvas.width = width;
+  canvas.height = height;
+
+  for (var i = 0; i < particleCount; i++) {
+    particles[i] = new Particle({
+      ttl: 20000,
+      speed: speed,
+      maxRadius: 60,
+      containerWidth: width,
+      containerHeight: height,
+      context: context
+    });
+
+    particles[i].reset();
+  }
+
+  function draw() {
+    context.clearRect(0, 0, width, height);
+
+    for (var i = 0; i < particles.length; i++) {
+      particles[i].fade();
+      particles[i].move();
+      particles[i].draw();
+    }
+  }
+
+  var interval = setInterval(draw,speed);
+
+})();
diff --git a/example/scripts/particle.js b/example/scripts/particle.js
@@ -0,0 +1,125 @@
+(function(root) {
+  'use strict';
+
+  function Particle(options) {
+    var defaults = {
+      ttl: 8000,
+      maxXSpeed: 5,
+      maxYSpeed: 2,
+      maxRadius: 20,
+      xVelocity: 4,
+      yVelocity: 4,
+      random: false,
+      blink: true,
+      speed: 30,
+      containerWidth: window.innerWidth,
+      containerHeight: window.innerHeight,
+      context: null
+    };
+
+    var settings = merge(defaults, options);
+    for (var name in settings) {
+      this[name] = settings[name];
+    }
+
+    this.xStart =  this.containerWidth / 2;
+    this.yStart = this.containerHeight / 2;
+
+    if (!(this.context instanceof Object)) {
+      throw new Error('Canvas `context` is required.');
+    }
+  }
+
+  Particle.prototype.reset = function() {
+    // position
+    this.x = (this.random ? this.containerWidth * Math.random() : this.xStart);
+    this.y = (this.random ? this.contaienrHeight * Math.random() : this.yStart);
+
+    // size
+    this.r = ((this.maxRadius - 1) * Math.random()) + 1;
+
+    // speed and direction
+    this.dx = (Math.random() * this.maxXSpeed) * (Math.random() < 0.5 ? -1 : 1);
+    this.dy = (Math.random() * this.maxYSpeed) * (Math.random() < 0.5 ? -1 : 1);
+
+    // half-life
+    this.hl = (this.ttl / this.speed) * (this.r / this.maxRadius);
+
+    // ratio of max speed and full opacity
+    // opacity starting place (closer to hl the dimmer)
+    this.rt = Math.random() * this.hl;
+
+    console.log(this.hl)
+    console.log(this.rt);
+
+    // opacity rate
+    this.rtt = Math.random() + 1;
+
+    // stop
+    this.stop = Math.random() * 0.2 + 0.4;
+
+    // constant velocity
+    this.xVelocity *= Math.random() * (Math.random() < 0.5 ? -1 : 1);
+    this.yVelocity *= Math.random() * (Math.random() < 0.5 ? -1 : 1);
+  };
+
+  Particle.prototype.fade = function() {
+    this.rt += this.rtt;
+  };
+
+  Particle.prototype.draw = function() {
+    // Invert fade if at the min or max level
+    if (this.blink && (this.rt <= 0 || this.rt >= this.hl)) {
+      this.rtt = this.rtt * -1;
+    } else if (this.rt >= this.hl) {
+      this.reset();
+    }
+
+    var opacity = 1 - (this.rt / this.hl);
+
+    this.context.beginPath();
+    this.context.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
+    this.context.closePath();
+
+    var cr = this.r * opacity;
+
+    var colorStop1 = '255,255,255';
+    var colorStop2 = '10,43,55';
+    var colorStop3 = '23,30,32';
+
+    var gradient = this.context.createRadialGradient(this.x, this.y, 0, this.x, this.y, (cr <= 0 ? 1 : cr));
+    gradient.addColorStop(0, 'rgba('+ colorStop1 + ',' + opacity + ')');
+    gradient.addColorStop(this.stop, 'rgba('+ colorStop2 + ',' + (opacity * 0.6) + ')');
+    gradient.addColorStop(1.0, 'rgba('+ colorStop3 + ',0)');
+
+    this.context.fillStyle = gradient;
+    this.context.fill();
+  };
+
+  Particle.prototype.move = function() {
+    this.x += (this.rt / this.hl) * this.dx;
+    this.y += (this.rt / this.hl) * this.dy;
+
+    if (this.x > this.containerWidth || this.x < 0) {
+      this.dx *= -1;
+    }
+
+    if (this.y > this.containerHeight || this.y < 0) {
+      this.dy *= -1;
+    }
+  };
+
+  function merge(obj1, obj2) {
+    var result = {};
+    for (var attrname in obj1) {
+      result[attrname] = obj1[attrname];
+    }
+
+    for (var attrname in obj2) {
+      result[attrname] = obj2[attrname];
+    }
+    return result;
+  }
+
+  root.Particle = Particle;
+})(this);
diff --git a/example/styles/index.css b/example/styles/index.css
@@ -0,0 +1,10 @@
+html,
+body,
+canvas {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  background: #000;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Convert line endings to LF (Line Feed)
		* text=auto