Mystify

index.html

<!-- Lets make some ribbon effects -->
<canvas id="canvas"></canvas>

Mystify.markdown

Mystify

Forked from David Scott Kirby's Pen Mystify.

A Pen by Nate Cheng on CodePen.

License.

script.js

window.onload = function() {
  
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	
	var W = window.innerWidth, 
      H = window.innerHeight;
  
	canvas.width = W;
	canvas.height = H;
	
	var particles = [];
  
	for (var i = 0; i < 25; i++)
	{
		particles.push(new particle());
	}
	
	function particle()
	{
		this.location = {
      x: Math.random() * W, 
      y: Math.random() * H
    };
    		
		this.radius = 0;		
		this.speed = 3;
		this.angle = Math.random() * 360;
		    
		var r = 33;
		var g = Math.round(Math.random() * 33);
		var b = Math.round(Math.random() * 255);
		var a = Math.random();
    
		this.rgba = "rgba("+r+", "+g+", "+b+", "+a+")";
	}
  
	function draw()
	{ 
    ctx.globalCompositeOperation = "source-over";
		ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.globalCompositeOperation = "lighter";
		
		for (var i = 0; i < particles.length; i++)
		{
			var p = particles[i];
			ctx.fillStyle = "white";
			ctx.fillRect(p.location.x, p.location.y, p.radius, p.radius);
			
			for (var n = 0; n < particles.length; n++)
			{
				var p2 = particles[n];
        
				var yd = p2.location.y - p.location.y;
				var xd = p2.location.x - p.location.x;
        
				var distance = Math.sqrt(xd*xd + yd*yd);
				
				if (distance < 250)
				{
					ctx.beginPath();
					ctx.lineWidth = 2;
					ctx.moveTo(p.location.x, p.location.y);
					ctx.lineTo(p2.location.x, p2.location.y);
					ctx.strokeStyle = p.rgba;
					ctx.stroke();					
				}
			}
      
			p.location.x = p.location.x + p.speed*Math.cos(p.angle*Math.PI/180);			
			p.location.y = p.location.y + p.speed*Math.sin(p.angle*Math.PI/180);

      if (p.location.x < 0) { p.location.x = W; }
			if (p.location.x > W) { p.location.x = 0; }
			if (p.location.y < 0) { p.location.y = H; }
			if (p.location.y > H) { p.location.y = 0; }
		}
    
  }
  
  function filter() {    
    var i, 
        j, 
        threshold = 10, 
        rgb = [],
        imgData = ctx.getImageData(0, 0, W, H), 
        Npixels = imgData.data.length;

    for (i = 0; i < Npixels; i += 4) {
        rgb[0] = imgData.data[i];
        rgb[1] = imgData.data[i + 1];
        rgb[2] = imgData.data[i + 2];
        if (rgb[0] < threshold &&
            rgb[1] < threshold &&
            rgb[2] < threshold) {
          imgData.data[i] = 0;
          imgData.data[i + 1] = 0;
          imgData.data[i + 2] = 0;
        }
    }    
    ctx.putImageData(imgData, 0, 0);
  }
  
	setInterval(filter, 2000);
	setInterval(draw, 30);
}

style.css

body {
  background-color:#000;
}