previous

page 6

next

Let's deal with one gotcha straightaway - the canvas doesn't resize when we we resize the browser window. Surprisingly easy to fix:

<body onResize='setup();'>

I imagine the robot as being on an 8x8 grid always starting at the circled position.

I also imagine the robot having a compass heading ranging from 0 to 360.

Which leads to the follow additions to my JavaScript:

function home() {
g_ctx.clearRect(0,0,g_side,g_side);
g_x=g_x0; g_y=g_y0; g_h=0;
}
function setup() {
g_side=45*vmin();
var canvas=document.getElementById('c');
canvas.width=g_side; canvas.height=g_side;
g_ctx=canvas.getContext('2d');
g_x0=g_side/2; g_y0=g_side*.75;
g_step=g_side/8;
home();
}

Note the clearRect command which is the simplest way to clear rhe canvas - rather like wiping down a whiteboard.

previous
next