Perlin noise | Plasma effect

https://en.wikipedia.org/wiki/Perlin_noise

by Ali Utku Selen

HTML

<div>
<label for="select">Shader</label>
<select id="select">
<input type="checkbox" id="grid"></input>
<label for="compose">Grid</label>
<input type="checkbox" id="vectors"></input>
<label for="compose">Vectors</label>
</select>
</div>
<canvas id="canvas" width="640" height="480"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var menu = document.getElementById("select");
var pixels = new Uint32Array(canvas.width * canvas.height);
var imgData = new ImageData(new Uint8ClampedArray(pixels.buffer), canvas.width, canvas.height);

var GRID_SCALE = 2;
var GRID_X = 4 * GRID_SCALE;
var GRID_Y = 3 * GRID_SCALE;
var GRID_W = canvas.width / GRID_X;
var GRID_H = canvas.height / GRID_Y;
var ANIM_SPEED = 100;

var grid2 = [];

var showGrid = false;
var showVectors = false;

var showGridCheckbox = document.getElementById("grid");
showGridCheckbox.checked = showGrid;
showGridCheckbox.onchange = function() {
    showGrid = !showGrid;
};

var showVectorsCheckbox = document.getElementById("vectors");
showVectorsCheckbox.checked = showVectors;
showVectorsCheckbox.onchange = function() {
    showVectors = !showVectors;
};

function addSelect(menu, name) {
    var option = document.createElement("option");
    option.text = name;
    menu.add(option);
}

var shader;
var shaders = [
    {name: "Green plasma", func: function(noise) {return 0xFF000000 | (128 + noise * 128) << 8}},
    {name: "Green plasma layered", func: function(noise) {return 0xFF000000 | Math.floor((128 + noise * 128) / 8) << 11}},
    {name: "Neon", func: function(noise) {return 0xFF000000 | (128 + (Math.sin(Math.PI * 2 * noise) * 128)) << 8}},
    {name: "Solid", func: function(noise) {return 0xFF000000 | (Math.round(noise + 0.50) * 255) << 8}},
    {name: "Water", func: function(noise) {return 0xFF000000 | (noise * 10) * 16 << 8}},
    {name: "Psychedelic hippie", func: function(noise) {return 0xFF000000 | (128 + (Math.ceil(noise*10) * 128)) << 8}},
    {name: "Psychedelic neon", func: function(noise) {return 0xFF000000 | ((noise * noise - 3 * (0 - noise)) * 255) << 8}},
    {name: "Psychedelic neon 2", func: function(noise) {return 0xFF000000 | ((noise * noise - 2 * noise) * 0xFF) << 8}},
    {name: "Microscopic", func: function(noise, x, y) {return...