http://cssdeck.com/labs/learning-the-jade-templating-engine-syntax
http://cssdeck.com/labs/jade-templating-tutorial-codecast-part-2
Play with Jade in realtime
Coding
node.js backward compatibility with node-sqlite3
Node.js is so radically evolving that there’s many compatibility issues such that packages that used to work now simply fail. E.g. node-sqlite3 stopped working (the sample code on its homepage says ‘segfault’ under node 0.10.x). Fortunately after complaining on its github I saw it got fixed quickly: https://github.com/developmentseed/node-sqlite3/commit/25db957806ae651dcd31292c6b932c379cfd2662 . I don’t use boost so I am not sure how that is related.
An alternative is to use node 0.8.x.
How to draw a circle – 2
Since we know what a circle looks like, why don’t we directly plot each point since we know x must span from [x-x0,x+x0]?
y = y0 +/- sqrt(r*r-(x-x0)(x-x0))
<!DOCTYPE html>
<html>
<head>
<script>
function plotPoint(ctx,x,y) {
ctx.fillRect(x,y,1,1);
}
function getRandomInt (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function drawRandom() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
drawCircle(getRandomInt(100,800),getRandomInt(100,400),getRandomInt(50,100),ctx);
}
function drawCircle(x0,y0,r,ctx) {
var r2=r*r;
var step=.1;
var y;
for(var x=x0-r;x<=x0+r;x+=step) {
var dx2 = (x-x0)*(x-x0);
y = y0 + Math.sqrt(r2-dx2);
plotPoint(ctx,x,y);
y = y0 - Math.sqrt(r2-dx2);
plotPoint(ctx,x,y);
}
}
function draw() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
try {
var x0 = parseInt(document.getElementById('x0').value);
var y0 = parseInt(document.getElementById('y0').value);
var r = parseInt(document.getElementById('r').value);
if ('NaN' == x0||'NaN'==y0||'NaN'==r) return;
drawCircle(x0,y0,r,ctx);
} catch(err) {
alert(err);
}
}
</script>
</head>
<body>
X0: <input type=text id=x0 value=300 size=3 />
Y0: <input type=text id=y0 value=300 size=3 />
R: <input type=text id=r value=100 size=3 />
<input type=button value="draw a circle" onclick="javascript:draw()"/>
<input type=button value="draw a random circle" onclick="javascript:drawRandom()"/>
<p>
<canvas id="myCanvas" width="800" height="600" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
</p>
</body>
</html>
How to draw a circle
update: turns out this is really a dumb idea.
Here’s the code to draw a circle in relatively OK time (apparently not the optimal solution but I don’t have enough graphics background to come up with one).
We know the equation for circles are:
(x-x0)(x-x0) + (y-y0)(y-yo) = r*r
(x0,y0) being the center and r being the radius.
<!DOCTYPE html>
<html>
<head>
<script>
function plotPoint(ctx,x,y) {
ctx.fillRect(x,y,1,1);
}
function onCircle(x,y,x0,y0,r) {
var dx=x-x0;
var dy=y-y0;
var eps=20;
if( Math.abs(r*r-dx*dx-dy*dy)<=eps) return true;
return false;
}
function getRandomInt (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function drawRandom() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
drawCircle(getRandomInt(100,800),getRandomInt(100,400),getRandomInt(50,100),ctx);
}
function drawCircle(x0,y0,r,ctx) {
var r2=r/Math.sqrt(2);
var step=.2;
for(var x=x0-r;x<=x0-r2;x+=step) {
for(var y=y0-r;y<=y0+r;y+=step) {
if(onCircle(x,y,x0,y0,r))
plotPoint(ctx,x,y);
}
}
for(var x=x0+r2;x<=x0+r;x+=step) {
for(var y=y0-r;y<=y0+r;y+=step) {
if(onCircle(x,y,x0,y0,r))
plotPoint(ctx,x,y);
}
}
for(var x=x0-r;x<=x0+r;x+=step) {
for(var y=y0-r;y<=y0-r2;y+=step) {
if(onCircle(x,y,x0,y0,r))
plotPoint(ctx,x,y);
}
}
for(var x=x0-r;x<=x0+r;x+=step) {
for(var y=y0+r2;y<=y0+r;y+=step) {
if(onCircle(x,y,x0,y0,r))
plotPoint(ctx,x,y);
}
}
}
function draw() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
try {
var x0 = parseInt(document.getElementById('x0').value);
var y0 = parseInt(document.getElementById('y0').value);
var r = parseInt(document.getElementById('r').value);
if ('NaN' == x0||'NaN'==y0||'NaN'==r) return;
drawCircle(x0,y0,r,ctx);
} catch(err) {
alert(err);
}
}
</script>
</head>
<body>
X0: <input type=text id=x0 value=300 size=3 />
Y0: <input type=text id=y0 value=300 size=3 />
R: <input type=text id=r value=100 size=3 />
<input type=button value="draw a circle" onclick="javascript:draw()"/>
<input type=button value="draw a random circle" onclick="javascript:drawRandom()"/>
<p>
<canvas id="myCanvas" width="800" height="600" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
</script>
</p>
</body>
</html>
Constants in programming languages
Representation of negative numbers
In modern computer architecture negative numbers are represented in its two’s complement format. For positive number N, to get -N:
1) invert its bits
2) add 1 to the inverted bits
E.g. for 1 (0….01), to get -1:
1) 1….10 (invert bits)
2) 1….11 (add 1)
So two’s complement representation of -1 is 1111…1 (all ones). One benefit of this is +0 and -0 now have unified representation.
so for 32-bit C compiler, to get INT_MAX (011…..1), we do following:
INT_MAX: 1U<<31-1
To get INT_MIN (100….0), we do:
INT_MIN: 1U<<31
Constants in C
Use following code to produce some constants in C:
void foo() {
unsigned int i=1;
printf("INT_MIN:%d\n", INT_MIN);
printf("INT_MAX:%d\n", INT_MAX);
printf("LONG_MAX:%ld\n", LONG_MAX);
printf("LONG_MAX:%ld\n", LONG_MAX);
printf("INT_MAX (1U<<31)-1:%d\n", (1U<<31)-1);
printf("INT_MIN (1U<<31):%d\n", 1U<<31);
printf("(1UL<<63)-1:%lld\n", (1ULL<<63)-1);
printf("(1UL<<63):%lld\n", (1ULL<<63));
}
Here’s the output:
INT_MIN:-2147483648 INT_MAX:2147483647 LONG_MAX:2147483647 LONG_MAX:2147483647 INT_MAX (1U<<31)-1:2147483647 INT_MIN (1U<<31):-2147483648 (1UL<<63)-1:9223372036854775807 (1UL<<63):-9223372036854775808
Apparently I am uing a 32-bit compiler and int and long are identical.
Node, Javascript, Linux and thoughts 