TLC.js Reference

This is a reference for how to use the "tlc.js" JavaScript library.

print()

Requires one argument, which can be anything.

Writes or draws on the screen.

print(10);

circle()

circle(): Takes two arguments, a radius and a color, which should be a number and a string.

Returns a circle of that size and color.

circle(100, 'red');

rectangle()

Requires three arguments, a width, a height, and a color. The first two should be numbers, the last a string.

Returns a rectangle of that size and color.

rectangle(100, 50, 'black');

line()

Requires four arguments, all numbers —  StartX, StartY, EndX, EndY. Line draws a line from one point to another. The first two arguments are the X,Y coordinates of the starting point. The last two arguments are the X,Y coordinates of the eding point.

Returns a line.

line(0,0, 100, 200);

width()

Requires one argument, an image.

Returns the image’s width.

width(circle(20, 'red'));

height()

Requires one argument, an image.

Returns the image’s height.

height(circle(20, 'red'));

stringLength()

Requires one argument, a string.

Returns the number of characters in the string.

stringLength('Hello world');

text()

Requires two arguments, text to place in the graphic and a number, the size of the text in pixels.

Returns an image of some text.

text('Hello', 20);

emptyScene()

Requires two arguments, a width and a height, both numbers.

Returns an image with a white background and a black border.

emptyScene(300, 200);

overlay()

Requires two arguments, a foreground and a background image.

Returns the foreground image centered horizontally and vertically over the background image.

overlay(circle(10, 'red'), emptyScene(100, 100));

placeImage()

Requires four arguments: a forgeground image, a background image, and x and y coordinates (both numbers).

Returns an image with the upper-left corner of the foreground image at the x and y coordinates of the background image.

placeImage(rectangle(10,10,'red'), rectangle(100,100,'black'), 40, 40);

animate()

Requires one argument, a function that takes a number and produces a image.

Calls that function and prints the image, with the input of a number increasing each "tick" of the clock.

animate(function(n) {
          return overlay(circle(n, 'red'), emptyScene(100,100));
          });

bigBang()

Requires four arguments. The first argument is the initial state of the world. The second argument is a function that takes one argument, a world, and returns an image. The third argument is a function that takes one argument, a world, and returns another world. The last argument takes a world and string.

Calls those three functions every tick. (For more detail, see Chapter 4.)

bigBang(0, function(n) {
                       return text(String(n), 16);
           },
           function(n) {
                       return n + 1;
           },
           function(n, key) {
                       return n - 10;
           });