cpdef/pie_viewer.html

## pie_viewer.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <table>
      <tr style="vertical-align:top">
        <td>
          <textarea id="input" name="input" rows="400" cols="100"></textarea>
        </td>
        <td>
          <canvas id="cnv" width="400" height="300"></canvas>
          <button onclick="reload_pie()">
            reload
          </button>
        </td>
      </tr>
    </table>
    <script>
function reload_pie() {
	var InputText = document.getElementById('input');
	result_text = ''
	text = InputText.value;
//	text = text.replace(/	/g, " ");

	//parse:
	var block="toplevel"
	var PIE = 3;
	var LEVELS = []
	var LEVEL = -1;
	var POINTS = -1;
	var point = -1;
	var POLYGONS = -1;
	var polygon = -1;
	lines = text.split("\n");
	for (var i=0; i < lines.length; i++)
	{
		cols = lines[i].split(" ")
		result_text += cols +";\n";
		if (cols.length < 2)
			continue;
		if (block === "toplevel")
		{
			block = cols[0];
			console.log(block);
		}
		if (block === "PIE")
		{
			PIE = Number(cols[1]);
			block = "toplevel";
		} else if (block === "TYPE")
		{
			block = "toplevel";
		} else if (block === "TEXTURE")
		{
			// TODO: load texture here
			block = "toplevel";
		} else if (block === "LEVELS")
		{
			LEVELS = new Array(Number(cols[1]));
			block = "toplevel";
		} else if (block === "LEVEL")
		{
			LEVEL = cols[1]-1;
			LEVELS[LEVEL] = {};
			block = "toplevel";
		} else if (block === "POINTS")
		{
			if (cols[0] === "POINTS")
			{
				POINTS = Number(cols[1]);
				point = 0;
				LEVELS[LEVEL].points = new Array();
			} else {
				LEVELS[LEVEL].points[point] = new Array(3);
				for (var j=0; j < 3; j++)
				{
					LEVELS[LEVEL].points[point][j] = Number(cols[j]);
				}
				point++;
				if (point >= POINTS)
					block = "toplevel";
			}
		} else if (block === "POLYGONS")
		{
			if (cols[0] === "POLYGONS")
			{
				POLYGONS = Number(cols[1]);
				polygon = 0;
				LEVELS[LEVEL].polygons = new Array();
			} else {
				LEVELS[LEVEL].polygons[polygon] = new Array(3);
				for (var j=0; j < 3; j++)
				{
					LEVELS[LEVEL].polygons[polygon][j] = Number(cols[j+2]);
				}
				polygon++;
				if (polygon >= POLYGONS)
					block = "toplevel";
			}
		}
	}
	console.log("PIE: "+PIE)
	console.log("LEVELS: "+JSON.stringify(LEVELS))
	window.LEVELS = LEVELS;
}
    </script>
    <script type="text/javascript">//<![CDATA[

var cnv = document.getElementById("cnv"), ctx = cnv.getContext("2d");
cnv.width = 400;  cnv.height = 300;

window.LEVELS = [{points:[], polygons: []}];

update();

function update() {
	var LEVELS = window.LEVELS;
	var t=Date.now(), ang=t/500, s=Math.sin(ang), c=Math.cos(ang);
  var mat = [c,0,-s,0,  0,1,0,100,  s,0,c,400+Math.sin(t/220)];
  ctx.clearRect(0,0,400,300);   //draw(points, trngls, mat);
  for (var level=0; level < LEVELS.length; level++)
  {
    draw(LEVELS[level].points, LEVELS[level].polygons, mat);
  }
  window.requestAnimationFrame(update);
}

function draw(ps, ts, m) {
  for(var i=0; i<ts.length; i++) {
    var p0 = ts[i][0], p1 = ts[i][1], p2=ts[i][2];
    var a = vertexShader(ps[p0][0], -ps[p0][1], ps[p0][2], m);
    var b = vertexShader(ps[p1][0], -ps[p1][1], ps[p1][2], m);
    var c = vertexShader(ps[p2][0], -ps[p2][1], ps[p2][2], m);
    fragmentShader(a,b,c);
  }
}

function vertexShader(x,y,z, m) {
	var x0 = m[0]*x+m[1]*y+m[ 2]*z+m[ 3];
  var y0 = m[4]*x+m[5]*y+m[ 6]*z+m[ 7];
  var z0 = m[8]*x+m[9]*y+m[10]*z+m[11];
	return [x0,y0,z0];
}

// you can make a Z-buffer, sampling from texture, phong shading...
function fragmentShader(a,b,c) {
	var x0=200+300*a[0]/a[2], y0=150+300*a[1]/a[2];
  var x1=200+300*b[0]/b[2], y1=150+300*b[1]/b[2];
  var x2=200+300*c[0]/c[2], y2=150+300*c[1]/c[2];
  // we should loop through all pixels of a 2D triangle ...
  // but we just stroke its outline
  ctx.beginPath();
	ctx.moveTo(x0,y0);  ctx.lineTo(x1,y1);  ctx.lineTo(x2,y2);  ctx.lineTo(x0,y0);
  ctx.stroke();  //ctx.fill();
}


  </script>
</body></html>
	<!DOCTYPE html>
	<html>
	<head>
	</head>
	<body>
	<table>
	<tr style="vertical-align:top">
	<td>
	<textarea id="input" name="input" rows="400" cols="100"></textarea>
	</td>
	<td>
	<canvas id="cnv" width="400" height="300"></canvas>
	<button onclick="reload_pie()">
	reload
	</button>
	</td>
	</tr>
	</table>
	<script>
	function reload_pie() {
	var InputText = document.getElementById('input');
	result_text = ''
	text = InputText.value;
	// text = text.replace(/ /g, " ");

	//parse:
	var block="toplevel"
	var PIE = 3;
	var LEVELS = []
	var LEVEL = -1;
	var POINTS = -1;
	var point = -1;
	var POLYGONS = -1;
	var polygon = -1;
	lines = text.split("\n");
	for (var i=0; i < lines.length; i++)
	{
	cols = lines[i].split(" ")
	result_text += cols +";\n";
	if (cols.length < 2)
	continue;
	if (block === "toplevel")
	{
	block = cols[0];
	console.log(block);
	}
	if (block === "PIE")
	{
	PIE = Number(cols[1]);
	block = "toplevel";
	} else if (block === "TYPE")
	{
	block = "toplevel";
	} else if (block === "TEXTURE")
	{
	// TODO: load texture here
	block = "toplevel";
	} else if (block === "LEVELS")
	{
	LEVELS = new Array(Number(cols[1]));
	block = "toplevel";
	} else if (block === "LEVEL")
	{
	LEVEL = cols[1]-1;
	LEVELS[LEVEL] = {};
	block = "toplevel";
	} else if (block === "POINTS")
	{
	if (cols[0] === "POINTS")
	{
	POINTS = Number(cols[1]);
	point = 0;
	LEVELS[LEVEL].points = new Array();
	} else {
	LEVELS[LEVEL].points[point] = new Array(3);
	for (var j=0; j < 3; j++)
	{
	LEVELS[LEVEL].points[point][j] = Number(cols[j]);
	}
	point++;
	if (point >= POINTS)
	block = "toplevel";
	}
	} else if (block === "POLYGONS")
	{
	if (cols[0] === "POLYGONS")
	{
	POLYGONS = Number(cols[1]);
	polygon = 0;
	LEVELS[LEVEL].polygons = new Array();
	} else {
	LEVELS[LEVEL].polygons[polygon] = new Array(3);
	for (var j=0; j < 3; j++)
	{
	LEVELS[LEVEL].polygons[polygon][j] = Number(cols[j+2]);
	}
	polygon++;
	if (polygon >= POLYGONS)
	block = "toplevel";
	}
	}
	}
	console.log("PIE: "+PIE)
	console.log("LEVELS: "+JSON.stringify(LEVELS))
	window.LEVELS = LEVELS;
	}
	</script>
	<script type="text/javascript">//<![CDATA[

	var cnv = document.getElementById("cnv"), ctx = cnv.getContext("2d");
	cnv.width = 400; cnv.height = 300;

	window.LEVELS = [{points:[], polygons: []}];

	update();

	function update() {
	var LEVELS = window.LEVELS;
	var t=Date.now(), ang=t/500, s=Math.sin(ang), c=Math.cos(ang);
	var mat = [c,0,-s,0, 0,1,0,100, s,0,c,400+Math.sin(t/220)];
	ctx.clearRect(0,0,400,300); //draw(points, trngls, mat);
	for (var level=0; level < LEVELS.length; level++)
	{
	draw(LEVELS[level].points, LEVELS[level].polygons, mat);
	}
	window.requestAnimationFrame(update);
	}

	function draw(ps, ts, m) {
	for(var i=0; i<ts.length; i++) {
	var p0 = ts[i][0], p1 = ts[i][1], p2=ts[i][2];
	var a = vertexShader(ps[p0][0], -ps[p0][1], ps[p0][2], m);
	var b = vertexShader(ps[p1][0], -ps[p1][1], ps[p1][2], m);
	var c = vertexShader(ps[p2][0], -ps[p2][1], ps[p2][2], m);
	fragmentShader(a,b,c);
	}
	}

	function vertexShader(x,y,z, m) {
	var x0 = m[0]x+m[1]y+m[ 2]*z+m[ 3];
	var y0 = m[4]x+m[5]y+m[ 6]*z+m[ 7];
	var z0 = m[8]x+m[9]y+m[10]*z+m[11];
	return [x0,y0,z0];
	}

	// you can make a Z-buffer, sampling from texture, phong shading...
	function fragmentShader(a,b,c) {
	var x0=200+300a[0]/a[2], y0=150+300a[1]/a[2];
	var x1=200+300b[0]/b[2], y1=150+300b[1]/b[2];
	var x2=200+300c[0]/c[2], y2=150+300c[1]/c[2];
	// we should loop through all pixels of a 2D triangle ...
	// but we just stroke its outline
	ctx.beginPath();
	ctx.moveTo(x0,y0); ctx.lineTo(x1,y1); ctx.lineTo(x2,y2); ctx.lineTo(x0,y0);
	ctx.stroke(); //ctx.fill();
	}


	</script>
	</body></html>