nearespoint2.html

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">

var canvas;
var ctx;

//
// Ejemplo de nearest point sampling
//


var diff_map = [];

function CreateTexture()
{
	var dt = 32;
	for(var  i=0;i<dt;++i)
	for(var j=0;j<dt;++j)
	{
		var x = i-16;
		var y = j-16;
		var fx = Math.sqrt(x*x + y*y);
		if( Math.abs(fx - 6)<1)
			diff_map[i+dt*j] = {r:255 , g:255, b:255};
		else
			diff_map[i+dt*j] = {r:(i/dt*255)|0 , g:(j/dt*255)|0, b:0};
	}
}

function tex2d(u, v)
{
	var du = 32;
	var dv = 32;
	var i = u*du|0;
	var j = v*dv|0;
	if(i>=du)
		i = 0;
	if(j>=dv)
		j = 0;
	var clr =  diff_map[i+dv*j];
	return 'rgba(' + clr.r.toString() + ',' + clr.g.toString() + ',' + clr.b.toString() + ',255)';	
}



function draw() 
{
	if (canvas.getContext)
	{
		ctx.fillStyle = 'rgba(240,240,240,255)';
		ctx.fillRect(0,0,1000,800);

		var dt = 42;
		var k = 5;
		for(var i=0;i<=dt;++i)
		for(var j=0;j<=dt;++j)
		{
			ctx.fillStyle = tex2d(i/dt,j/dt);
			ctx.fillRect(10+i*k,10+j*k,k,k);
		}
	}
}

function animate()
{   
	canvas = document.getElementById('mycanvas');
	ctx = canvas.getContext('2d');
	CreateTexture();
	draw();
} 




</script>
</head>
<body onload="animate();">
	<canvas id="mycanvas" width="1000" height="700"></canvas>

</body>
</html>
 