Randomizer Visualizer

by marakoss

HTML

<canvas id="scene" width="500" height="500"></canvas>

CSS

canvas{
	width: 500px;
	margin: 50px;
}

JavaScript

var canvas = document.getElementById('scene'),
	ctx = canvas.getContext('2d'),
	width = canvas.width,
	height = canvas.height,
	centerX = width/2,
	centerY = height/2,
	gridmove = 50,
	bitdepth = 512,
	offset = bitdepth/2,
	scale = 25600/bitdepth/100,
	signal;

function seqArray(length, max){
	var arr = [];
	for (var i = 0; i < length; i++) {
		arr.push(i);
	}
	return arr;
}

function randomArray(length, max, gprev) {
	var arr = [];
	for (var i = 0; i < length; i++) {
	
		// Start somewhere
		if (typeof arr[i-1] === 'undefined') {
			prev = gprev;
			if (!prev) {
				prev = 128;
			}
		}else{
			prev = arr[i-1];
		}

		var tendency = Math.round(Math.random() * 1000) / 1000;
		//console.log(tendency);
		
		var val;
		var split = 0.5;
		var zone = (6.26*Math.sqrt(Math.abs(bitdepth/2 - prev)));
		//console.log(1/(((bitdepth - prev)*10)/bitdepth));
		
		if ((tendency > 0.5) && (prev >= max-1)) {
			val = max-37*scale;
		} else if ((tendency < 0.5) && (prev < 1)) {
			val = 37*scale;
		} else {
			//console.log(zone);
			val = prev+((-0.5+((zone/200)-zone/190))+tendency)*36*scale;
			//val = prev+0.1;
		}

		if (val <= 0) {
			val = 1;
		}
		
		if (val > max){
			val = max;
		}

		arr.push(val);

	}
	return arr;
}

function C3(ctx) {
	this.ctx = ctx;
}

C3.prototype.addLine = function(fromX, fromY, toX, toY) {
	this.ctx.beginPath();
	this.ctx.lineWidth = 1;
	//this.ctx.lineCap = 'round';
	this.ctx.strokeStyle = '#ff0000';
	this.ctx.moveTo(fromX, fromY);
	this.ctx.lineTo(toX, toY);
	this.ctx.stroke();
	this.ctx.closePath();
}

C3.prototype.addSquare = function (fromX, fromY, toX, toY){
	this.ctx.fillRect(fromX, fromY, Math.abs(fromX-toX), Math.abs(fromY-toY));
}

C3.prototype.addPoint = function(x, y) {
	this.addSquare(x, y, x+1, y+1);
}

C3.prototype.clear = function() {
	this.ctx.clearRect(0, 0, width, height);
}

var c3 = new C3(ctx);

function bitcrusher(current, depth) {
	if (!depth) {
		depth = 2;
	}
	for (var i = 0; i < depth; i++) {
		current = (current % (i+2)...