9999years/pixelshader.html

## pixelshader.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>distance estimation</title>
	</head>
	<body>
		<canvas id="canvas"></canvas>
<script>
//html5 <canvas> pixel shader for javascript

//distance from a line segment
//this also can be a <canvas> pixel shader boilerplate

//plot a pixel on arbitrary image data
//image = ctx.createImageData...
//color = rgba byte array
function plot(image, x, y, color) {
	var inx = (y * image.width * 4) + (x * 4);
	image.data[inx]   = color[0];
	image.data[++inx] = color[1];
	image.data[++inx] = color[2];
	image.data[++inx] = color[3];
	return;
}

function sqr(x) {
	return x * x;
}

//dist between two coords
function dist(v, w) {
	return Math.sqrt(sqr(v.x - w.x) + sqr(v.y - w.y));
}

//clamp val to between min and max
function clamp(val, min, max) {
	return Math.min(Math.max(val, min), max);
}

//lerp interp is 0..1
function lerp(binterp, a, b) {
	binterp = clamp(binterp, 0, 1);
	ainterp = 1 - binterp;
	return a * ainterp + b * binterp;
}

//like an advanced gray(): instead of mapping a val from black to white,
//colormap() maps it between any two colors of your choice
function colormap(val, a, b) {
	val = clamp(val, 0, 255) / 255;
	return [lerp(val, a[0], b[0]),
		lerp(val, a[1], b[1]),
		lerp(val, a[2], b[2]),
		lerp(val, a[3], b[3])];
}

//make gray color from byte
function gray(v) {
	v = clamp(v, 0, 0xff);
	return [v, v, v, 0xff];
}

//PUT UR CODE HERE!!!!
//all the arguments of points that contain an x and y coord
//access w/ p.x & p.y etc...
//this must return a color: an array in the format
//[red, green, blue, alpha] where each number is between 0 and 0xff (255)
//the gray() function above converts a value from 0 to 0xff to a gray color
function estimateDistance(p, v, w) {
	period = (dist(p, w) / 20) + 15;
	return gray(0xff
		* Math.sin(p.x / period)
		* Math.cos(p.y / period)
		/ (dist(p, v) / 100));
}

(function() {
	//initialize cvs, ctx, etc
	var cvs = document.getElementById('canvas'),
	ctx = cvs.getContext('2d'),
	frameWidth = 650,
	frameHeight = 650,
	time = 0;

	cvs.setAttribute('height', frameHeight);
	cvs.setAttribute('width', frameWidth);

	var render = function(time) {
	//time is waaaaay too big, get it a bit smaller
	time /= 200;
	//set up the end points, make them wiggle with sin/cos
	var v = {
		x: 80  + 15 * Math.cos(time),
		y: 120 + 15 * Math.sin(time)
	};
	//offset so both coordinates aren't on the same cycle
	time += 1;
	var w = {
		x: 375 + 35 * Math.cos(time),
		y: 400 + 35 * Math.sin(time)
	};

	var p = {
		x: 0,
		y: 0
	};

	//create pixel array
	var image = ctx.createImageData(frameWidth, frameHeight);
	//iterate through the image
	for(var x = 0; x < frameWidth; x++) {
		for(var y = 0; y < frameHeight; y++) {
			p.x = x;
			p.y = y;
			//plot 100/distance as the brightness
			plot(image, x, y, estimateDistance(p, v, w));
			}
		}
	//push array to canvas
	ctx.putImageData(image, 0, 0);
	//update time, push a frame, call render() again
	time = window.requestAnimationFrame(render);
	};
	//first call
	render.call();
}());
</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>distance estimation</title>
	</head>
	<body>
	<canvas id="canvas"></canvas>
	<script>
	//html5 <canvas> pixel shader for javascript

	//distance from a line segment
	//this also can be a <canvas> pixel shader boilerplate

	//plot a pixel on arbitrary image data
	//image = ctx.createImageData...
	//color = rgba byte array
	function plot(image, x, y, color) {
	var inx = (y * image.width * 4) + (x * 4);
	image.data[inx] = color[0];
	image.data[++inx] = color[1];
	image.data[++inx] = color[2];
	image.data[++inx] = color[3];
	return;
	}

	function sqr(x) {
	return x * x;
	}

	//dist between two coords
	function dist(v, w) {
	return Math.sqrt(sqr(v.x - w.x) + sqr(v.y - w.y));
	}

	//clamp val to between min and max
	function clamp(val, min, max) {
	return Math.min(Math.max(val, min), max);
	}

	//lerp interp is 0..1
	function lerp(binterp, a, b) {
	binterp = clamp(binterp, 0, 1);
	ainterp = 1 - binterp;
	return a * ainterp + b * binterp;
	}

	//like an advanced gray(): instead of mapping a val from black to white,
	//colormap() maps it between any two colors of your choice
	function colormap(val, a, b) {
	val = clamp(val, 0, 255) / 255;
	return [lerp(val, a[0], b[0]),
	lerp(val, a[1], b[1]),
	lerp(val, a[2], b[2]),
	lerp(val, a[3], b[3])];
	}

	//make gray color from byte
	function gray(v) {
	v = clamp(v, 0, 0xff);
	return [v, v, v, 0xff];
	}

	//PUT UR CODE HERE!!!!
	//all the arguments of points that contain an x and y coord
	//access w/ p.x & p.y etc...
	//this must return a color: an array in the format
	//[red, green, blue, alpha] where each number is between 0 and 0xff (255)
	//the gray() function above converts a value from 0 to 0xff to a gray color
	function estimateDistance(p, v, w) {
	period = (dist(p, w) / 20) + 15;
	return gray(0xff
	* Math.sin(p.x / period)
	* Math.cos(p.y / period)
	/ (dist(p, v) / 100));
	}

	(function() {
	//initialize cvs, ctx, etc
	var cvs = document.getElementById('canvas'),
	ctx = cvs.getContext('2d'),
	frameWidth = 650,
	frameHeight = 650,
	time = 0;

	cvs.setAttribute('height', frameHeight);
	cvs.setAttribute('width', frameWidth);

	var render = function(time) {
	//time is waaaaay too big, get it a bit smaller
	time /= 200;
	//set up the end points, make them wiggle with sin/cos
	var v = {
	x: 80 + 15 * Math.cos(time),
	y: 120 + 15 * Math.sin(time)
	};
	//offset so both coordinates aren't on the same cycle
	time += 1;
	var w = {
	x: 375 + 35 * Math.cos(time),
	y: 400 + 35 * Math.sin(time)
	};

	var p = {
	x: 0,
	y: 0
	};

	//create pixel array
	var image = ctx.createImageData(frameWidth, frameHeight);
	//iterate through the image
	for(var x = 0; x < frameWidth; x++) {
	for(var y = 0; y < frameHeight; y++) {
	p.x = x;
	p.y = y;
	//plot 100/distance as the brightness
	plot(image, x, y, estimateDistance(p, v, w));
	}
	}
	//push array to canvas
	ctx.putImageData(image, 0, 0);
	//update time, push a frame, call render() again
	time = window.requestAnimationFrame(render);
	};
	//first call
	render.call();
	}());
	</script>
	</body>
	</html>