Langton's Ant written in Typescript

Found this on Wikipedia: http://en.wikipedia.org/wiki/Langton's_ant about Langton's Ant. Using this as a intro to typescript, would be great. It's a very simple algorithm:

At a white square, turn 90° right, flip the color of the square, move forward one unit

At a black square, turn 90° left, flip the color of the square, move forward one unit

Typescript:

Code Snippet

1. class Point {
2.     constructor(public X: number,public Y: number) {
3.     }
4. }
5.  
6. enum Color {
7.     WHITE,
8.     BLACK
9. }
10.  
11. enum Direction {
12.     NORTH,
13.     EAST,
14.     SOUTH,
15.     WEST
16. }
17.  
18. class Ant{
19.     orientation: Direction;
20.     precision: number;
21.  
22.     constructor(public location: Point, precision: number, orientation:Direction = Direction.NORTH) {
23.         this.orientation = orientation;
24.         this.precision = precision;
25.     }
26.  
27.     Move() {
28.         var canvas = <HTMLCanvasElement> document.getElementById("myCanvas");
29.         var ctx = canvas.getContext('2d');
30.         var imgData = ctx.getImageData(this.location.X, this.location.Y, this.precision, this.precision);
31.         var pix = imgData.data;
32.         var color: Color;
33.  
34.         if (pix[0] == 255 && pix[1] == 255 && pix[2] == 255) { //White
35.             color = Color.WHITE;
36.         }
37.         else {
38.             color = Color.BLACK;
39.         }
40.  
41.         if (color == 0) {
42.             //Change Color
43.             ctx.fillStyle = "Black";
44.             ctx.fillRect(this.location.X, this.location.Y, this.precision, this.precision);
45.  
46.             //rotate 90 to right
47.             if (this.orientation < 3) {
48.                 this.orientation = this.orientation + 1;
49.             }
50.             else {
51.                 this.orientation = 0;
52.             }
53.         }
54.         else {
55.             //Change Color
56.             ctx.fillStyle = "White";
57.             ctx.fillRect(this.location.X, this.location.Y, this.precision, this.precision);
58.  
59.             //rotate 90 to left
60.             if (this.orientation > 0) {
61.                 this.orientation = this.orientation - 1;
62.             }
63.             else {
64.                 this.orientation = 3;
65.             }
66.         }
67.  
68.         //move forward one unit
69.         switch (this.orientation) {
70.             case 0: //North
71.                 this.location = new Point(this.location.X, this.location.Y - this.precision);
72.                 break;
73.             case 1: //East
74.                 this.location = new Point(this.location.X + this.precision, this.location.Y);
75.                 break;
76.             case 2: //South
77.                 this.location = new Point(this.location.X, this.location.Y + this.precision);
78.                 break;
79.             case 3: //West
80.                 this.location = new Point(this.location.X - this.precision, this.location.Y);
81.                 break;
82.         }
83.     }
84. }
85.  
86.  
87. window.onload = () => {
88.     var ant = new Ant(new Point(100, 100), 2, Direction.NORTH);
89.  
90.     for (var i = 0; i < 11000; i++) {
91.         ant.Move();
92.     }
93. };

 How it's converted to JavaScript:

Code Snippet

1. var Point = (function () {
2.     function Point(X, Y) {
3.         this.X = X;
4.         this.Y = Y;
5.     }
6.     return Point;
7. })();
8. var Color;
9. (function (Color) {
10.     Color._map = [];
11.     Color._map[0] = "WHITE";
12.     Color.WHITE = 0;
13.     Color._map[1] = "BLACK";
14.     Color.BLACK = 1;
15. })(Color || (Color = {}));
16. var Direction;
17. (function (Direction) {
18.     Direction._map = [];
19.     Direction._map[0] = "NORTH";
20.     Direction.NORTH = 0;
21.     Direction._map[1] = "EAST";
22.     Direction.EAST = 1;
23.     Direction._map[2] = "SOUTH";
24.     Direction.SOUTH = 2;
25.     Direction._map[3] = "WEST";
26.     Direction.WEST = 3;
27. })(Direction || (Direction = {}));
28. var Ant = (function () {
29.     function Ant(location, precision, orientation) {
30.         if (typeof orientation === "undefined") { orientation = Direction.NORTH; }
31.         this.location = location;
32.         this.orientation = orientation;
33.         this.precision = precision;
34.     }
35.     Ant.prototype.Move = function () {
36.         var canvas = document.getElementById("myCanvas");
37.         var ctx = canvas.getContext('2d');
38.         var imgData = ctx.getImageData(this.location.X, this.location.Y, this.precision, this.precision);
39.         var pix = imgData.data;
40.         var color;
41.         if(pix[0] == 255 && pix[1] == 255 && pix[2] == 255) {
42.             //White
43.             color = Color.WHITE;
44.         } else {
45.             color = Color.BLACK;
46.         }
47.         if(color == 0) {
48.             //Change Color
49.             ctx.fillStyle = "Black";
50.             ctx.fillRect(this.location.X, this.location.Y, this.precision, this.precision);
51.             //rotate 90 to right
52.             if(this.orientation < 3) {
53.                 this.orientation = this.orientation + 1;
54.             } else {
55.                 this.orientation = 0;
56.             }
57.         } else {
58.             //Change Color
59.             ctx.fillStyle = "White";
60.             ctx.fillRect(this.location.X, this.location.Y, this.precision, this.precision);
61.             //rotate 90 to left
62.             if(this.orientation > 0) {
63.                 this.orientation = this.orientation - 1;
64.             } else {
65.                 this.orientation = 3;
66.             }
67.         }
68.         //move forward one unit
69.         switch(this.orientation) {
70.             case 0:
71.                 //North
72.                 this.location = new Point(this.location.X, this.location.Y - this.precision);
73.                 break;
74.             case 1:
75.                 //East
76.                 this.location = new Point(this.location.X + this.precision, this.location.Y);
77.                 break;
78.             case 2:
79.                 //South
80.                 this.location = new Point(this.location.X, this.location.Y + this.precision);
81.                 break;
82.             case 3:
83.                 //West
84.                 this.location = new Point(this.location.X - this.precision, this.location.Y);
85.                 break;
86.         }
87.     };
88.     return Ant;
89. })();
90. window.onload = function () {
91.     var ant = new Ant(new Point(100, 100), 2, Direction.NORTH);
92.     for(var i = 0; i < 11000; i++) {
93.         ant.Move();
94.     }
95. };

Resulting:

Looking at the wiki, it seems if I had a few more rules and colors I can up with different, and interesting patterns.


Edit: Some more pics I created by changing pattern and colors: