Javascript robot simulator

I have created a differential drive robots simulator in Javascript. See it in action here.

What is it?

A differential drive robot has two wheels, that can run independently. If the two wheels go at the same speed, the robot goes straight. If one wheel is going one way, and the other wheel is going the other way with the same speed, the robot will spin in place. If one wheel is stopped, while the other is going, the robot will make a turn around the wheel that is stopped.
R2D2 from Star Wars is an example of a differential drive robot.


Just take me to the code

You will find the code here.


The API has two objects; the Field, and the JSRobot. Many robots can share a field. The field is where the robots move.
The simplest example of using the API is to create one robot with default color in the middle of the field.

var field = Field(canvas);  
var robot = JSRobot();  

The Field constructor takes a Canvas object as argument, so the HTML page could look something like this:

        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="field.js" type="text/javascript" ></script>
        <script src="main.js" type="text/javascript" ></script>
        <script src="hello.js" type="text/javascript" ></script>
        <canvas id="robot-field" width="1000" height="1000" />

To get the canvas element, you can use querySelector like this:

var canvas = document.querySelector("#robot-field");  

The width and height attributes of the canvas element, indicates the resolution of the element, but not the size. For this API to work, always use 1000. To set the size of the canvas element, use CSS like this:

#robot-field {
    height: 100%;

Now the canvas element will always take up the entire hight of the page.

The JSRobot object constructor takes two arguments; the location, and the color. The location argument must be an object with x, and y properties.

To create a yellow robot, and place it at 100, 100:

      var robot = JSRobot({x:100, y:100}, "yellow");


To move the robot, you can use the methods start(), stop(), and setSpeeds(left, right). It is pretty obvious what start(), and stop() are for, so I am not going to explain that. The setSpeeds(left, right) methods sets the current speed in canvas units per second of the left, and right wheel.
If you set the speed of both wheels to 1000, it means that the robot will travel the entire width of the canvas in one second.

var robot = JSRobot({x:-500, y:0}, "yellow");  
robot.setSpeeds(1000, 1000);  

To make the robot spin in place, set the left wheel speed to a negative value, and the right wheel to the same positive value.

robot.setSpeeds(-200, 200);  

Reacting to events

The robot only has one event; move. Every time it has moved, it will call the function that was last passed to the onMove method.

robot.onMove(function(location) {  
    if(robot.isX(100)) {

The callback function has one argument location, which has two properties; previous, and current. Both previous, and current has three properties; x, y, and direction.
The direction property is the clockwise angle from horizontal in degrees. So if the direction is 0, it is horizontal heading to the right, if the direction is 270, it is heading up.

The JSRobot object has a couple of convenience methods to make it easier to determine where the robot is.

isX(x): Returns true if x is between previous, and current x value. isY(y): Returns true if y is between previous, and current y value. isDirection(direction): Returns true if direction is between previous, and current direction value.