Fire JS Bin - Many-Lines

// Super Simple Particle System
// Eric Ishii Eckhardt for Adapted
// http://adaptedstudio.com
//

var _r;
var _g;
var _b;
var _a = .5;
var rad = 100;
var particleList;
var system;
var particleColor;
var systemSize = 250;
var lots = true;

var pcMode = false;
var fadeStage = false;
var grayScale = false;
var dx = 2;
var dy = 4;
var lineColor = 'rgba(255,0,100,.2)';
var particleCount = 0;
var particleList = {};

function draw() {
  // FOR PARICLES NOT LINES
  //clear();
  
  // UPDATE PARTICLE SYSTEM
  if (system){
    system.update();
  }
    
  // FOR FADING LINES
  if (fadeStage){
    fade();  
  }
}

function initParticleSystem (){
  system = new ParticleSystem ();
  system.init(systemSize);
}

function ParticleSystem (){
  //this.init(systemSize);
}

ParticleSystem.prototype.init = function(_systemSize){
  this.list = [];
  var i = 0;
  for(i=0; i < _systemSize+1; i++){
    this.createParticle();
  }
}

ParticleSystem.prototype.createParticle = function(){
  var newParticle = new Particle();
  newParticle.init();
  this.list.push(newParticle);
}

ParticleSystem.prototype.update = function(){
  var i = 0;
  for(i = 0; i < systemSize-1; i++){
    this.list[i].draw();
  }
}

function Particle(){
  // Particle
}

Particle.prototype.init = function(){
  setColor(this);
  this.x = Math.random() * WIDTH;
  this.y = Math.random() * HEIGHT;
  this.vel = Math.random() * 5 + 1;
  this.ang = Math.random() * (Math.PI);
  this.diameter = Math.random() * 5 + 1;
  this.oldX = this.x;
  this.oldY = this.y;
  this.speedModX = Math.random() * 20 + 8;
  this.speedModY = Math.random() * 20 + 8;
  this.speedModTargX = Math.random() * 3 + 2;
  this.speedModTargY = Math.random() * 3 + 2;
  this.maxSpeed = Math.random() * 20 + 5;
  this.speedX = 0;
  this.speedY = 0;
}

Particle.prototype.draw = function(){
  ctx.fillStyle = this.color;
  
  var _x = this.x;
  var _y = this.y;
  var _d = this.diameter;
  var _vel = this.vel;
  var _ang = this.ang;
  var _smx = this.speedModX;
  var _smy = this.speedModY;
  
  var _sX = this.speedX;
  var _sY = this.speedY;
  
  this.oldX = _x;
  this.oldY = _y;
  
  var targSpeedX = (cursorX - _x)/this.speedModTargX;
  var targSpeedY = (cursorY - _y)/this.speedModTargY;
  
  var maxSpeed = this.maxSpeed;
  if (Math.abs(_sX) > maxSpeed){
    if (_sX > 0){
      _sX = maxSpeed;
    } else {
      _sX = 0 - maxSpeed;
    }
  }
  if (Math.abs(_sY) > maxSpeed){
    if (_sY > 0){
      _sY = maxSpeed;
    } else {
      _sY = 0 - maxSpeed;
    }
  }
  
  _sX += (targSpeedX - _sX)/_smx;
  _sY += (targSpeedY - _sY)/_smy;
  
  _x += _sX;
  _y += _sY;
  
  this.speedX = _sX;
  this.speedY = _sY;
  
  this.x = _x;
  this.y = _y;
  this.vel = _vel;
  this.ang = _ang;
  
  particleLine(this)
  
}

function particleLine(p) {
  
  
  var _x = p.x;
  var _y = p.y;
  var _oldX = p.oldX;
  var _oldY = p.oldY;
  ctx.lineWidth = .5;
  if (p.colorTint > 5){
    ctx.lineWidth = 1.2;  
  }
  ctx.strokeStyle = p.color;
    ctx.beginPath();
    ctx.moveTo(_oldX,_oldY);
    ctx.lineTo(_x,_y);
  ctx.closePath();
    ctx.stroke();
  
}

// Chooses Grayscale or color image
function setColor(targ){
  if (grayScale){
    var gryV = Math.round(Math.random()*100);
    var gryA = (Math.random()*.35);
    targ.color = 'rgba('+gryV+','+gryV+','+gryV+','+gryA+')';
  } else {
    var colorTint = Math.round(Math.random() * 7);
    targ.colorTint = colorTint;
    //getColor(colorTint);
    _a = .55;
    if (colorTint <= 1){
      _r = 255;
      _g = 0;
      _b = 144;
      targ.color = 'rgba(255,0,144,'+_a+')';
    } else if (colorTint == 2){
      _r = 0;
      _g = 209;
      _b = 255;  
      targ.color = 'rgba(0,209,255,'+_a+')';
    } else if (colorTint == 3){
      _r = 0;
      _g = 255;
      _b = 4;  
      targ.color = 'rgba(0,255,4,'+_a+')';
    } else if (colorTint == 4){
      _r = 100;
      _g = 0;
      _b = 255;
      targ.color = 'rgba(100,0,255,'+_a+')';
    } else if (colorTint == 5){
      _r = 255;
      _g = 70;
      _b = 0;
      targ.color = 'rgba(255,70,0,'+_a+')';
    } else if (colorTint > 5){
      _r = 255;
      _g = 255;
      _b = 255;
      targ.color = 'rgba(255,255,255,'+_a+')';
    }
    
  }
}

// UI Checkbox Toggles Toggles
function toggleFade(){
  log("toggle fade");
  if (fadeStage == false){
    fadeStage = true;
  } else {
    fadeStage = false;
  }
}

function toggleAmount(){
  if (lots == false){
    lots = true;
    systemSize = 150;
  } else {
    lots = false;
    systemSize = 10;
  }
  
  initParticleSystem ();
}

var x = 150;
var y = 150;
var oldX = 150;
var oldY = 150;

var ctx;
var ctCanvas;
var WIDTH = 2000;
var HEIGHT = 1000;

var intervalID = 0;
var cursorX = 150;
var cursorY = 150;
var fadeRate = .05;
var showLog = true;

function init() {
  //ctx = $('#canvas')[0].getContext('2d');
  ctx = $('#canvas')[0].getContext('2d');
  HEIGHT = window.innerHeight;
  WIDTH = window.innerWidth;
  ctCanvas = document.getElementById("canvas");

if ($.browser.msie && document.all) {
    //alert("PC MODE");
    //setTimeout("initCanvasSize();",3000);
    pcMode = true;
    showLog = false;
    initCanvasSize();
  } else {
    initCanvasSize();
  }
  //ctx = document.getElementById('canvas').getContext('2d');
  //ctx.globalCompositeOperation = source-over;

intervalId = setInterval(draw, 1);
  return intervalId;

}

function initCanvasSize() {
  // check for IEs innerHeight alternative
  if (!pcMode) {
    HEIGHT = window.innerHeight;
    WIDTH = window.innerWidth;
  } else {
    WIDTH = document.body.clientWidth;
    HEIGHT = document.documentElement.clientHeight;
  }

ctCanvas.width = WIDTH - 15;
  ctCanvas.height = HEIGHT;

log(window.innerHeight);
}

function onMouseMove(evt) {
  cursorX = evt.pageX;
  cursorY = evt.pageY;
}

function line(x, y, r) {
  ctx.lineWidth = 1;
  ctx.strokeStyle = lineColor;
  ctx.beginPath();
  ctx.moveTo(oldX, oldY);
  ctx.lineTo(x, y);
  ctx.stroke();

oldX = x;
  oldY = y;
}

function circle(x, y, r) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.fill();
}

function rect(x, y, w, h) {
  ctx.beginPath();
  ctx.rect(x, y, w, h);
  ctx.closePath();
  ctx.fill();
}

function fade() {
  ctx.fillStyle = "rgba(255, 255, 255, " + fadeRate + ")"
  ctx.beginPath();
  ctx.rect(0, 0, WIDTH, HEIGHT);
  ctx.closePath();
  ctx.fill();
}

function clear() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

$(document).mousemove(onMouseMove);

// Logging that i can turn off

function log(m) {
  if (showLog) {
    //  console.log(m);
  }
}

<!DOCTYPE html> 
<html lang=""> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
      google.load("jquery", "1.3.2");
      google.load("jqueryui", "1.7.2");
    </script> 
     
     
  
    <script> 
      //get a reference to the canvas
      $(document).ready(function() {
        init();
        initParticleSystem ();
      });  
    </script> 
  
    <title>Lines go all over the place.</title> 
  </head>

<body class="index"> 
    <canvas height="700" width="700" id="canvas"> </canvas> 
    
  <div id="explain"> 
    <p> 
      <span> 
      Accumulation of drawn lines, this time with options. Tested in Firefox 3.5 Safari 4.0.2 <br/>& Chrome
      </span> 
    </p>

<p> 
      <span> 
      Fade? <input type="checkbox" name="fade" onclick="toggleFade()" /><br/> 
      Color? <input type="checkbox" name="fade" checked="checked" onclick="toggleColor()" /><br/> 
      Lots? <input type="checkbox" name="fade" checked="checked" onclick="toggleAmount()" /> 
      </span> 
    </p> 
    
    <p> 
      <span> 
      Javascript Files:<br/> <a href="static/js/adapted.library.js">library.js</a>   <a href="static/js/adapted.particles.js">particle.js</a> 
      </span> 
    </p> 
    
    <p> 
      <span> 
        Full Source:<br/> <a href="many-lines.zip">many-lines.zip</a> 
      </span> 
    </p> 
    
    <p> 
      <span> 
        Related Links:
        <br/> <a href="../">More HTML5</a> 
        <br/> <a href="http://adaptedstudio.com">Adapted</a> 
      </span> 
    </p> 
  </div>

</body> 
</html>