August 2011

Sunday, August 28, 2011

The Gods Themselves by Isaac Asimov

The Gods Themselves by Isaac Asimov

My rating: 5 of 5 stars

I started reading this book, when I found that it was a Hugo award winner and I was looking for some intellectually entertaining science fiction. It didn't disappoint me. OTOH it turned out to be one of the best scifi novels I've ever read.

It takes real imaginative power and also thorough knowledge of science and technology to weave a story around them. Asimov has tackled three extremely imaginative topics - Parallel Universes, Procreation that takes 3 individuals of a species instead of 2, Life on Moon - and he has done full justice to each one of them.

View all my reviews

Friday, August 26, 2011

Why OpenGL ES is so hard?

Because it takes minimum 76 lines of code to produce even the least meaningful output - A straight line. (And that too, only after doing unfair hard coding of matrix values)

Gist

	<html>
	<head>
	<title></title>
	<script type="text/javascript">
	var fragShaderSource = "\
	precision highp float;\
	uniform vec4 u_color;\
	void main(void) {\
	gl_FragColor = u_color;\
	}\
	";
	var vtxShaderSource = "\
	attribute vec3 a_position;\
	uniform vec4 u_color;\
	uniform mat4 u_mvMatrix;\
	uniform mat4 u_pMatrix;\
	void main(void) {\
	gl_Position = u_pMatrix * u_mvMatrix * vec4(a_position, 1.0);\
	}\
	";
	function get_shader(type, source) {
	var shader = gl.createShader(type);
	gl.shaderSource(shader, source);
	gl.compileShader(shader);
	return shader;
	}
	var gl, pMatrix, mvMatrix, nMatrix, vbuf, tbuf, nbuf, ibuf;
	function onready() {
	var canvas = document.getElementsByTagName('canvas')[0];
	gl = canvas.getContext("experimental-webgl", {antialias : true});
	gl.viewport(0, 0, canvas.width, canvas.height);
	var vertexShader = get_shader(gl.VERTEX_SHADER, (vtxShaderSource));
	var fragmentShader = get_shader(gl.FRAGMENT_SHADER, (fragShaderSource));
	shaderProgram = gl.createProgram();
	gl.attachShader(shaderProgram, vertexShader);
	gl.attachShader(shaderProgram, fragmentShader);
	gl.linkProgram(shaderProgram);
	gl.useProgram(shaderProgram);
	shaderProgram.aposAttrib = gl.getAttribLocation(shaderProgram, "a_position");
	gl.enableVertexAttribArray(shaderProgram.aposAttrib);
	shaderProgram.colorUniform = gl.getUniformLocation(shaderProgram, "u_color");
	shaderProgram.pMUniform = gl.getUniformLocation(shaderProgram, "u_pMatrix");
	shaderProgram.mvMUniform = gl.getUniformLocation(shaderProgram, "u_mvMatrix");
	gl.clearColor(1.0, 1.0, 1.0, 1.0);
	mvMatrix = [0.9701425001453319, -0.18712029714127995, 0.1543033499620919, 0, 0, 0.6362090102803518, 0.7715167498104596, 0, -0.24253562503633297, -0.7484811885651198, 0.6172133998483676, 0, 0, 0, -12.96148139681572, 1];
	pMatrix = [1.2990381056766582, 0, 0, 0, 0, 1.7320508075688776, 0, 0, 0, 0, -1.002002002002002, -1, 0, 0, -0.20020020020020018, 0];
	var vtx = new Float32Array([-5.0,-5.0,-5.0,5.0,5.0,5.0]);
	var idx = new Uint16Array([0, 1]);
	vbuf = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, vbuf);
	gl.bufferData(gl.ARRAY_BUFFER, vtx, gl.STATIC_DRAW);
	gl.bindBuffer(gl.ARRAY_BUFFER, null);
	ibuf = gl.createBuffer();
	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibuf);
	gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, idx, gl.STATIC_DRAW);
	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
	gl.clearColor(0.0, 0.0, 0.0, 0.0);
	gl.enable(gl.DEPTH_TEST);
	gl.clear(gl.COLOR_BUFFER_BIT \| gl.DEPTH_BUFFER_BIT);
	gl.lineWidth(3.0);
	gl.bindBuffer(gl.ARRAY_BUFFER, vbuf);
	gl.vertexAttribPointer(shaderProgram.aposAttrib, 3, gl.FLOAT, false, 0, 0);
	gl.uniform4f(shaderProgram.colorUniform, 0/255.0, 0/255.0, 0/255.0, 1.0);
	gl.uniformMatrix4fv(shaderProgram.pMUniform, false, new Float32Array(pMatrix));
	gl.uniformMatrix4fv(shaderProgram.mvMUniform, false, new Float32Array(mvMatrix));
	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibuf);
	gl.drawElements(gl.LINES, 2, gl.UNSIGNED_SHORT, 0);
	gl.bindBuffer(gl.ARRAY_BUFFER, null);
	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
	}
	</script>
	</head>
	<body onload="onready();">
	<canvas width="400" height="300"></canvas>
	</body>
	</html>

view raw minimum-opengles-code.html hosted with ❤ by GitHub

[Do not confuse OpenGL ES with OpenGL. It might be possible to write a shorter program to do this task in OpenGL, but in OpenGL ES you need to use shaders even for the shortest of programs]

Saturday, August 20, 2011

How to print stack trace anywhere in Javascript

It's well know how to print a stack trace after catching an exception/error in Javascript. But what if you are not catching anything? You see something happening at a particular line in code, but you want to know what's the code path through which the control flow reached that line when that interesting thing happened. In other words, you want to know what's the stack trace (series of function calls, starting from beginning of the program), at that particular line of code.

It's quite easy. If you don't have an exception, create one. Then you can print the stack trace off of it. Like this (gist) ...

	function foo(args) {
	var i, j, k;
	// ...
	// j acquires some interesting value
	// Who called foo when j took this interesting value?
	//

	var e = new Error('dummy');
	var stack = e.stack.replace(/^[^\(]+?[\n$]/gm, '')
	.replace(/^\s+at\s+/gm, '')
	.replace(/^Object.<anonymous>\s*\(/gm, '{anonymous}()@')
	.split('\n');
	console.log(stack);

	// ...
	// rest of the code
	}

view raw stack-trace-without-exception.js hosted with ❤ by GitHub

Tuesday, August 16, 2011

How to debug WebWorker threads?

WebWorkers offer your Web app a way to do multithreading. If your advanced web app does some number crunching keeping the CPU busy for a while, then it makes sense to do it in a separate thread instead of doing it in the main thread, which may lead to blocking the browser tab (Chrome) or the entire browser (Firefox and others). One of the troubles of writing programs in WebWorkers is, they are hard to debug. Two key mechanisms required for debugging a program are not available in WebWorkers - print statements (console.log is not available) and breakpoints (even if you manage to place breakpoints in the code running in WebWorker, they won't be hit).

During my work on 3DTin, I have learnt couple of techniques that help me debug my WebWorker code.

1. Use postMessage as replacement for console.log

postMessage is how you send some data from the WebWorker thread to the main thread. This is the primary way of returning the result of the computation you perform in WebWorker. But we can use it for other purposes too. Here is how you can use the postMessage mechanism for communicating both the successful response as well as debug messages.


	//
	// In the Main thread
	//
	var worker = new Worker('/path/of/webworker/code.js')
	worker.onmessage = function (e) {
	var result = JSON.parse(e.data);
	if(result.type == 'debug') {
	console.log(result.msg);
	} else if(result.type == 'response') {
	// ... use result.answer ...
	}
	}


	//
	// In the WebWorker
	//
	function debug(msg) {
	postMessage(JSON.stringify({type:'debug',msg:msg}));
	}

	onmessage = function (e) {
	var inputData = e.data;
	// work on input data
	debug('Working OK');
	// work some more
	// ...
	postMessage(JSON.stringify({type:'response', answer:42}));
	};

view raw webworker-debug.js hosted with ❤ by GitHub

2. Catch exceptions and send their stack trace over postMessage

When an exception occurs in the code running in WebWorker, the debugger will print the line at which exception occurred, but not the entire stack trace. In most cases the whole stack trace can help you find the root cause quickly. To achieve that, place most of your code that runs in the WebWorker inside a try-catch statement. Then in the catch clause extract the stack trace of the exception, format it nicely and send it to the main thread using postMessage, as discussed in the first technique above. Here is the exception handling code that helps you extract stack trace at least on Google Chrome and other Webkit browsers. I have cherry-picked it from the stacktrace.js library. If you need a browser agnostic solution, paste the stacktrace.js library at the beginning of your WebWorker code.

	//
	// In the WebWorker
	//
	function debug(msg) {
	postMessage(JSON.stringify({type:'debug',msg:msg}));
	}

	onmessage = function (e) {
	try {

	var inputData = e.data;
	// work on input data
	// ...
	// Calculate answer to the ultimate question
	postMessage(JSON.stringify({type:'response', answer:42}));

	} catch(e) {
	var stack = e.stack.replace(/^[^\(]+?[\n$]/gm, '')
	.replace(/^\s+at\s+/gm, '')
	.replace(/^Object.<anonymous>\s*\(/gm, '{anonymous}()@')
	.split('\n');
	debug(e+'\n'+stack);
	}
	};

view raw webworker-stacktrace.js hosted with ❤ by GitHub

I hope this makes your life easy while debugging WebWorker code.

Code Overtones