wofockham/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>United Document</title>
  <link rel="stylesheet" href="plasma.css">
</head>
<body>
  <canvas id="plasma" width="255" height="160"></canvas>
  <script src="plasma.js"></script>
</body>
</html>

## plasma.css
html, body {
  margin: 0;
}
canvas {
  width: 100%;
  height: 100%;
  display: block;
  margin: auto;
}

## plasma.js
var plasmate = function (canvasID, fn, map) {
  var drawFrame = function () {

    var w = canvas.width, h = canvas.height;
    var now = Date.now() / (1024);

    var imageData = context.getImageData(0, 0, w, h);
    var pixels = imageData.data;

    var kx = w / h;
    for (var y = 0; y < h; y++) {
      var yy = y / h - 0.5;
      for (var x = 0; x < w; x++) {
        var xx = kx * x / w - kx / 2;
        var v = fn(xx, yy, now);
        map(pixels, (y * w + x) * 4, v);
      }
    }

    context.putImageData(imageData, 0, 0);
  };

  var animate = function () {
    drawFrame();
    requestAnimationFrame(animate); // Retake, retake!
  };

  var canvas = document.getElementById(canvasID);
  var context = canvas.getContext('2d');

  if (! context) return 'canvas not found: #' + canvasID;

  animate();
};

var skinMap = function colorMap1(px, offset, v) {
     var c = 255 * (0.5 + 0.5 * v * 0.8);
     px[offset+0] = c;
     px[offset+1] = c / 2;
     px[offset+2] = c / 3;
     px[offset+3] = 255;
};

plasmate('plasma', function(x, y, time) {
  var v = Math.sin((x*10+time));
  v += Math.sin(10*(x*Math.sin(time/20)+y*Math.cos(time/3))+time);
  var cx = y + 0.5 * Math.sin(time/250.0);
  var cy = x + 0.5 * Math.cos(time/230.0);
  v += Math.sin(Math.sqrt(100*(cx*cx+cy*cy)+1)+time);
  return v/2;
}, skinMap);

// Adapted from http://www.bidouille.org/prog/plasma
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>United Document</title>
	<link rel="stylesheet" href="plasma.css">
	</head>
	<body>
	<canvas id="plasma" width="255" height="160"></canvas>
	<script src="plasma.js"></script>
	</body>
	</html>
	html, body {
	margin: 0;
	}
	canvas {
	width: 100%;
	height: 100%;
	display: block;
	margin: auto;
	}
	var plasmate = function (canvasID, fn, map) {
	var drawFrame = function () {

	var w = canvas.width, h = canvas.height;
	var now = Date.now() / (1024);

	var imageData = context.getImageData(0, 0, w, h);
	var pixels = imageData.data;

	var kx = w / h;
	for (var y = 0; y < h; y++) {
	var yy = y / h - 0.5;
	for (var x = 0; x < w; x++) {
	var xx = kx * x / w - kx / 2;
	var v = fn(xx, yy, now);
	map(pixels, (y * w + x) * 4, v);
	}
	}

	context.putImageData(imageData, 0, 0);
	};

	var animate = function () {
	drawFrame();
	requestAnimationFrame(animate); // Retake, retake!
	};

	var canvas = document.getElementById(canvasID);
	var context = canvas.getContext('2d');

	if (! context) return 'canvas not found: #' + canvasID;

	animate();
	};

	var skinMap = function colorMap1(px, offset, v) {
	var c = 255 * (0.5 + 0.5 * v * 0.8);
	px[offset+0] = c;
	px[offset+1] = c / 2;
	px[offset+2] = c / 3;
	px[offset+3] = 255;
	};

	plasmate('plasma', function(x, y, time) {
	var v = Math.sin((x*10+time));
	v += Math.sin(10(xMath.sin(time/20)+y*Math.cos(time/3))+time);
	var cx = y + 0.5 * Math.sin(time/250.0);
	var cy = x + 0.5 * Math.cos(time/230.0);
	v += Math.sin(Math.sqrt(100(cxcx+cy*cy)+1)+time);
	return v/2;
	}, skinMap);

	// Adapted from http://www.bidouille.org/prog/plasma