Turns an image into moving particles.

particle.js

var w,h,partcounter;
var canvas, ctx;
var mousex, mousey;

function map(value, low1, high1, low2, high2) {
    return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
}

function vec(x_, y_){
  this.x = x_;
  this.y = y_;
};
vec.prototype.add = function(vec_){
  return new vec(this.x + vec_.x, this.y + vec_.y);
};
vec.prototype.sub = function(vec_){
  return new vec(this.x - vec_.x, this.y - vec_.y);
};
vec.prototype.mult = function(val){
  return new vec(this.x * val, this.y * val);
};
vec.prototype.div = function(val){
  return new vec(this.x/val, this.y/val);
};
vec.prototype.abs = function(){
  return new vec(Math.abs(this.x), Math.abs(this.y));
};
vec.prototype.dot = function(vec_){
  return (this.x*vec_.x+this.y*vec_.y);
};
vec.prototype.length = function(){
  return Math.sqrt(this.dot(this));
};
vec.prototype.limit = function(val){
  if(this.length > val*val) {
    this.normalise;
    this.mult(val);
  }
  return this;
}
vec.prototype.normalise = function(){
  var vlen = this.length();
  this.x = this.x/vlen;
  this.y = this.y/vlen;
}

function particle(loc_,target_,mass_) {
  this.loc = new vec(loc_.x,loc_.y);
  this.velocity = new vec(0,0);
  this.acceleration = new vec(0,0);
  this.desired = new vec(0,0);
  this.extra = new vec(0,0);
  this.d, this.m;
  this.targ = new vec(target_.x,target_.y);
  this.topspeed = 5;
  this.mass = mass_;
  this.colour = 0;
}

particle.prototype.applyForce = function(force_) {
  this.extra = force_;
};

particle.prototype.update = function() {
  this.desired = this.targ.sub(this.loc);
  this.d = this.desired.length();
  this.desired.normalise();
  if(this.d < 50){
    this.m = map(this.d,0,50,0,this.topspeed);
    //console.log("M " + this.m);
    this.desired = this.desired.mult(this.m);
  } else {
    this.desired = this.desired.mult(this.topspeed);
  }
  this.acceleration = this.desired.sub(this.velocity);
  this.acceleration = this.acceleration.add(this.extra);
  this.accelertation = this.acceleration.mult(0.2);
  this.velocity = this.velocity.add(this.acceleration);
  this.velocity = this.velocity.limit(this.topspeed);
  this.loc = this.loc.add(this.velocity);
  this.acceleration = this.acceleration.mult(0);
  this.extra = this.extra.mult(0);
};

particle.prototype.bounceOffEdges = function(){
  if (this.loc.x < this.mass) {
    this.loc.x = this.mass;
    this.velocity.x *= -0.5;
  } else if (this.loc.x > w - this.mass) {
    this.loc.x = w - this.mass;
    this.velocity.x *= -0.5;
  } else if (this.loc.y < this.mass) {
    this.loc.y = this.mass;
    this.velocity.y *= -0.5;
  } else if (this.loc.y > h - this.mass) {
    this.loc.y = h - this.mass;
    this.velocity.y *= -0.5;
  }
};

particle.prototype.draw = function(){
  ctx.beginPath();
    ctx.fillStyle = "black";
    ctx.arc(this.loc.x, this.loc.y, this.mass, 0, Math.PI*2);
    ctx.fill();
}

window.onload = function(){
	var image = document.getElementById("image");
	w = image.width
	h = image.height;

	var r,g,b,grey;
	var counter = 0;
	var particles = [];
	var grays = [];
	var targets = [];

	//1
	canvas = document.getElementById("canvas");
	canvas.width = w;
	canvas.height = h;
	ctx = canvas.getContext("2d");
	ctx.drawImage(image,0,0,w,h);

	var pixels = ctx.getImageData(0,0,w,h);
	var colorData = pixels.data;

	//Shrink RGBA data to just singular BLACK or WHITE
	for (var i = 0; i < colorData.length; i+=4) {
		r = colorData[i];
		g = colorData[i+1];
		b = colorData[i+2];
		gray = r*0.2126 + g*0.7152 + b*0.0722;
		if(gray < 1) {
			targets.push(0);
			counter++;
		}
		else {
			targets.push(255);
		}
	};

	for (var x = 0; x < targets.length/h; x++) {
		for (var y = 0; y < targets.length/w; y++) {
			var ploco = x+y*w;
			if(targets[ploco] === 0){
				var r = Math.random();
					if(r < 0.05){
					var cl = new vec(Math.random()*w,Math.random()*h);
					var ct = new vec(x,y);
					var mass = (Math.random()*2)+0.5;
					particles.push(new particle(cl,ct,mass));
				}
			}
		}
	}

	function splash(x_,y_){
		this.cursorLoc = new vec(x_,y_);
		for (var i = 0; i < particles.length; i++) {
			var dist = particles[i].loc.sub(cursorLoc).length();
			if(dist < 50){
				particles[i].applyForce(new vec((Math.random()*dist)-dist/2,(Math.random()*dist)-dist/2));
			}
		};
	}

	canvas.onmousemove = function(e){
 		mousex = e.pageX;
 		mousey = e.pageY;
 		splash(mousex,mousey);
	}

	setInterval(loop, 45);

	function loop(){
		ctx.fillStyle = "WHITE";
		ctx.fillRect(0,0,w,h);
		for (var i = 0; i < particles.length; i++) {
			var r = Math.random();
			if(r < 0.05) particles[i].applyForce(new vec((Math.random()*30)-15,(Math.random()*30)-15));
			particles[i].update();
			//particles[i].bounceOffEdges();
			particles[i].draw();
		}
	};	
}

particle_type.html

<!DOCTYPE html>
<html>
<head>
	<title>Particle Type</title>
	<style>
	  #image {
	    display: none;
    }

    #canvas{
	    z-index: 0;
	    position: absolute;
    }

    #canvas2{
	    z-index: 1;
	    position: absolute;
    }
  </style>
</head>
<body>
	<script src="map.js"></script>
	<script src="vector.js"></script>
	<script src="particle2.js"></script>
	<script src="particle_type_js.js"></script>
	<img src="hotfun3.png" id="image">
	<canvas id="canvas"></div>
</body>
</html>