Here is a scaled up version of Tomaaz's elegant Javascript.
Easier for my eyes to track at this scale.
Takes about 68 seconds (12000 steps).
<!DOCTYPE html>
<html>
<head>
<title>Langton's Ant v04</title>
<meta charset="utf-8">
<style type="text/css">
body {background-color: black}
div {text-align: center}
</style>
<script>
var scaler = 4 //... **** NB IF YOU CHANGE SCALER MUST ALSO ADJUST CANVAS HEIGHT & WIDTH IN HTML AT END OF THIS PAGE
var x = 100 * scaler; //... initial x position
var y = 100 * scaler; //... initial y position
var Direction = 1;
var step = 12000;
function F_Setup()
{
Kanvas01 = document.getElementById("My_Kanvas");
Kontext01 = Kanvas01.getContext("2d");
Kontext01.fillStyle = "#ffffff"; //... we shall paint it white
Kontext01.fillRect(0, 0, (200 * scaler)-1, (200 * scaler)-1);
t = setTimeout("F_Looper()", 1); //...call F_Looper function
}
function F_Looper()
{
//Kanvas01 = document.getElementById("My_Kanvas");
//Kontext01 = Kanvas01.getContext("2d");
Imago = Kontext01.getImageData(x, y, 1, 1); //...gets the current x,y pixel canvas image into an imagedata pixel object (buffer/array).
if (Imago.data[0] == 255) { //... the Red component is 255 --> indicates that this pixel is white.
Kontext01.fillStyle = "#000000"; //...paint it black
Kontext01.fillRect(x, y, 1 * scaler, 1 * scaler); //...this (x,y) is the rectangle to paint (= a pixel is scaler ==1).
switch (Direction) {
case 1:
Direction = 4;
x=x+ scaler;
break;
case 2:
Direction = 1;
y=y+ scaler;
break;
case 3:
Direction = 2;
x=x- scaler;
break;
case 4:
Direction = 3;
y=y- scaler;
break;
}
}
else {
Kontext01.fillStyle = "#ffffff"; //... paint it white
Kontext01.fillRect(x, y, 1 * scaler, 1 * scaler);
switch(Direction) {
case 1:
Direction = 2;
x=x- scaler;
break;
case 2:
Direction = 3;
y=y- scaler;
break;
case 3:
Direction = 4;
x=x+ scaler;
break;
case 4:
Direction = 1;
y=y+ scaler;
break;
}
}
step--;
if (step) {
setTimeout("F_Looper()", 1); //...call self again
}
}
</script>
</head>
<!-- tell browser to run F_Setup script when loading the page -->
<body onload = "F_Setup()">
<!-- *** Define the canvas dimensions, e.g. if scaler =4 then W=H=600, if scaler = 2 then W=H=300. -->
<div>
<canvas id="My_Kanvas" width="600" height="600"></canvas>
</div>
</body>
</html>
