A simple computer program is called a script, because the computer performs it like reading lines like a play. Each command is followed, one at a time, from beginning to end.

Basic Movement

The scripts on this page use four basic functions to move a turtle:

• fd 100 moves the turtle forward 100 pixels.
• bk 100 goes backward.
• rt 90 turns right 90 degrees.
• lt 90 turns left.

In CoffeeScript, fd is different from FD (and FD is not defined), so all these function names should be typed in lowercase. It is important to put a space between the function name and the number. Do not indent the code for now, because indenting has special meaning in the language.

Notice that a small turn traces out an obtuse angle. An acute angle requires a turn more than 90. Turtles measure turns in exterior angles, so a complete circuit always adds to a multiple of 360.

On pencilcode.net, you can try single commands and ask for help in the console on the bottom of the right panel. It is a good way to experiment.

Drawing in Color

The turtle draws a line by selecting a pen.

• pen red traces out a line in red.

Common color names such as red, black, white, blue, green, yellow, orange, and purple all work. There are 140 standard color names that are listed at the end of this book.

Unselect the pen by using pen null. Use pen erase for an eraser.

Speed

The turtle takes about a second to trace out any movement, but its speed can be changed.

• speed 10 sets the speed to 10 moves per second.
• speed Infinity moves instantly.

Semicolons

The semicolon (;) that appears in the examples is just used for combining two commands on the same line. These programs would behave the same if all the commands separated by semicolons were written on separate lines.

Some new functions on this page:

• dot black, 20 draws a black dot of diameter 20 under the turtle.
• label 'GO' draws the text GO under the turtle.
• see x * 5 shows the value of x * 5 in the test console.
• ht() hides the turtle. Show it again with st().
• lt 120, 35 traces an arc of radius 35 while turning left 120 degrees.

Debugging

If you are lost in a long program, add dot red or label 'A' or see x to understand a specific point in the code.

These three functions are useful for debugging because they make a visible record of the current state of the program without otherwise changing things.

Variables and Strings

Most of the words in our programs (including fd, rt, speed and red) are predefined in Pencil Code, but you can define your own words using the = equals assignment symbol.

The assignment message = 'Hello You.' defines the word message to stand for the text "Hello You." inside the program Message.

Bullseye defines x = 18. After the definition, x means 18. For example, if we were to write see x or label x, it would not draw the letter x on the screen. It would write out the number 18. Words like x without quotes are are called variables. Variables can stand for numbers, functions, text, or other objects.

To literally write the letter "x" on the screen, put it in quotes: label 'x' will show the letter x, and see 'message' will write out the word "message". Quoted text in a program is called a string.

Arithmetic Operations

Mathematical operations are written as you would expect:

• x + y addition.
• x - y subtraction.
• x * y multiplication.
• x / y division.

Parentheses and order-of-operations work as taught in math class. When x is 18, see x + x * x / (7 + x) will do the computation and show 30.96.

To draw a rectangle, we could write the following.

fd 50; rt 90; fd 100; rt 90; fd 50; rt 90; fd 100; rt 90

But that is wordy and repetitive. The program Rectangle is clearer because it uses a for loop to repeat the fd and rt 90 commands.

The Parts of a Loop

Look closely at Rectangle. The for loop has three parts:

• The loop variable d.
• The loop list [50, 100, 50, 100].
• The loop body fd d; rt 90.

The prepositions for and in are special words in the language: they introduce a loop variable and its loop list.

Since the list contains four numbers, the loop repeats the body four times: once with d set to 50; then once with d as 100; then again as 50; then finally as 100 again.

Loop Lists and Ranges

A list is written by surrounding items with square brackets [ ].

If you write list items on a single line, separate them with commas. Longer lists like the list of colors in Rainbow can be written on multiple lines for clarity; commas are not needed at linebreaks.

A range of numbers can be listed by putting two dots .. between the lowest and highest numbers. If you use three dots ..., the effect is similar, but the last number will not be included in the list.

Indenting is Important

The commands in the loop are indented underneath the for line to show that they are inside the loop. It is important to indent lines inside the loop body evenly with each other.

List items should also be indented evenly with each other when written on separate lines.

Simple Loops and Stride

Notice that the loop variable does not need to be used inside the body of the loop. In Square Loop and 360 Loop, the variable x is not used except to count the number of repetitions.

In Descending Loop, the word by after the list denotes a stride, which is how much to skip forward when looping through the list. Looping by 2 would skip every other number. Looping by -1 counts down.

Any code can be put in a loop, including another loop.

Nesting loops within loops can create beautiful effects. Violet arranges five triangles around a point by nesting a loop of 3 within a loop of 5. The single line fd 50 is repeated 15 times with perfect symmetry.

Inner and Outer Loops

When loops are nested, the inner loop is the one that repeats most quickly. Consider Combinations.

A single pass through a loop is called an iteration. On each iteration, the program draws a small dot within a big dot, then moves the turtle a bit. The color of the small dot comes from the variable inside, which is the loop variable of the inner loop. The large dot color comes from the outer loop variable outside.

Because the inner loop repeats most quickly, the small dot colors palegreen, orange, and red change on every iteration.

The outer loop repeats only after the inner loop has made a full set of iterations, so the outside dot colors change only after 3 inner iterations have been made.

Nesting Carefully

The level of indent indicates whether code is within an inner loop or an outer loop, or not within a loop at all.

In Decorated Nest, fd 50 is indented twice to be in the innermost loop. It runs 40 times in total. However, dot blue is only indented once, so it is in the outer loop and done only 10 times. Lines that are not indented, such as pen turquoise, are not looped, and they are done only once.

Loops can be nested as deeply as you like. Catalog shows a triply-nested loop. Its innermost loop repeats by a number that varies (sides) because the loop range comes from the second level loop variable.

Jumping and Path Filling

Some new functions:

• jump 40, -160 jumps right 40 and back 160.
• pen path traces with a special invisible path pen.
• fill color fills the invisible path with color.

Note that jump jumps right and up relative to the current direction and position of the turtle, and it does not draw with the pen or turn the turtle. To jump to an absolute Cartesian coordinate, use jumpto.

The most important idea in this book:

A function is a miniature program. In CoffeeScript, a function is written with an arrow -> typed as two symbols next to each other (the minus and the greater-than) like this:

(input) -> something to do

Writing and Naming Functions

A function that advances the turtle by ten times a distance is

(x) -> fd 10 * x

Name a function like any variable, using =.

scoot = (x) -> fd 10 * x

After the definition, we can write scoot 7 or scoot 5 + 2. In other words, scoot can be used just like predefined functions like fd or rt.

Parameters

The variable x in parentheses in the function definition is called a parameter. Parameters may use any name. When the function is run, the parameter takes on the value passed to the function.

When spike n * 10 is called, the code within the function binds parameter name x to the current value of n * 10, which is 10 during the first iteration of the loop.

Each time a function is called, its parameters can have different values. The last time spike is called, n * 10 has advanced to 60, so the value of x during the last function call is 60.

Indenting Functions

The level of indenting is important for determining the scope of a line. If a line is indented under an arrow, that line is inside the function.

If the function itself contains loops, those should be indented further. There is no limit to the depth of nested indenting, but indenting must be done neatly. Each level of indenting indicates a particular function, loop, or nested scope.

Functions with No Parameters

Functions like tee that have no parameters are written specially:

• The definition tee = -> ... omits the parentheses.
• Calling tee() requires empty parentheses.

Multiple parameters can be listed in a function definition with commas. The declaration polygon = (c, s, n) -> sets up three parameters: a color c, a side length s, and a number n.

Passing Arguments

The value passed to a parameter when using a function is called an argument. When calling a function with several parameters, the arguments are listed with commas. For clarity, you can put parentheses around the argument list, like polygon(orange, 25, 6).

When using parentheses around function arguments, do not put any space between the function name and the first parentheses, or else the parentheses will be interpreted as enclosing only the first argument.

Objects as Arguments

An argument may be a complex object such as a list. That is the approach taken in Rule.

The parameter named sizes is used as the loop list in a for loop. When rule is called, the whole list is passed as one argument.

Functions as Arguments

An argument may itself be another function. That is done in Starburst. The technique allows one mini-program to be attached to another.

The call to starburst 3, stick passes the function stick as the last argument. Inside starburst, n now stands for 3, and shape stands for the stick function. When shape() is written, stick() is called. In the end stick is called three times, drawing three symmetric sticks.

Calling starburst 30, stick calls stick 30 times, making a circular starburst of 30 sticks.

Unnamed Inline Functions

Calling starburst n, something means "Do something n times in a star." We can provide any code as something, even if unnamed.

The call starburst 10, -> fd 30; dot blue; bk 30 passes a lollipop-like function to starburst. The function has no name &endash; it is defined inline to draw line with a blue dot at the far end. The starburst function binds this unnamed function to its local parameter name shape and calls it 10 times. The result is a starburst with blue dots.

The last starburst call passes unnamed code that does another starburst. The result is a starburst made out of starbursts!

There are two techniques for organizing time in a program:

1. Queues: process lists of events over time in sequence.
2. Frames: process snapshots of the world at regular time intervals.

How speed Works with Queues

In Pencil Code, each turtle has its own animation queue that is used if you set speed to any number less than Infinity. (The default speed is one.)

Each movement command like fd 100 adds the motion to the turtle's animation queue. When the program is finished running, the turtle has the whole plan, and it runs through its animation queue after your program is done.

The animation queue works well for timed motions that your program can plan ahead of time. But if you are writing a game or simulation that needs to respond to events in real time, then you may find it more sensible to to draw frames.

How tick Works with Frames

The tick command is used for frames: it calls the passed function at a regular rate. The optional first argument is the frame rate (the default rate is one frame per second).

The Countdown example writes a number on each tick callback. It also shows how to clear the callback once you are done: call tick null.

The Move Draw example is a very simple interactive program that uses tick. 100 times per second, it runs a function that turns the turtle toward the position on the screen where the mouse last moved, then advances the turtle by one pixel. Because each frame should be drawn instantaneously, it sets speed Infinity.

New Functions and Variables

Several new built-in names are used in these examples.

• pause 2 adds a 2-second pause to the animation queue.
• tick 100, fn calls fn 100 times per second.
• write "Time's up" writes a message on the screen.
• moveto lastclick moves the turtle to the position of the last click.
• turnto lastmousemove turns the turtle toward the last mouse position.

The moveto can be used with any Cartesian coordinate or any object that has a position - it happens to be used here with the special variable lastclick. Similarly, turnto can be used with any absolute direction or coordinate. The special variable lastmousemove happens to keep the most recent mouse position.

A string written with double quotes "..." can interpolate values written as #{something}, which means the value of something is inserted into the string.

A multiline string can be written by tripling the quotes (either double or single) around the string, as is done in the last string of Imagery.

HTML Elements

Codes like <b> are called HTML tags. They set off text for special formatting: <b> and </b> mark bold text; <h1> and </h1> mark a first-level heading; the <hr> tag is a "horizontal rule".

A matching tag pair and its contents (or singleton tag, for tags like <hr> or <img> that are not paired) make up an HTML element.

Attributes

HTML Elements can have attributes with special meanings such as the href attribute on the <a> element, which sets the URL for a hyperlink.

The other attributes seen on this page are the src and width attributes on the <img> element, which specify the location from which to load the image data, and the scaling width to use.

jQuery Objects

Programs can use jQuery objects to alter HTML elements on the screen.

The code n = write "<h1>Notice</h1>" returns a jQuery object for the <h1> element, and stores it in the variable n. Then the jQuery function n.css is used to alter its CSS.

In Pencil Code, all the turtle methods such as fd and pen are available as jQuery methods. Any element can be moved like a turtle.

CSS Properties

CSS properties can alter many of the details of HTML formatting such as such as an element's background (set here to pink). The css function can set more than one property at once, and the property list under n.css should be indented.

Exploring More

HTML is a rich subject. There are more than 100 types of HTML elements, more than 100 HTML attributes, more than 100 jQuery methods, and more than 100 CSS properties. The best way to explore all these options is to search for and consult the many resources on the Internet about these technologies.

And experiment.

The examples on this page gather input using callbacks:

• button sets up a function to be called whenever a button is pressed.
• read calls a function once after the user answers a prompt.
• readnum is like read, but for numbers only.

Awaiting Callbacks

If a program needs to wait until a callback is received, the await keyword: inside the await, the defer statement stands for the callback. After this callback receives a value, the program continues on the line after the await

Randomness and Reassigning Variables

The Guess My Number example uses the random function to pick an unpredictable number from 1 to 100. (The argument to random is a list of numbers to choose from.)

The game allows five turns to guess the number, tracked in the variable turns. The assignment turns = turns - 1 means "set the value of turns to be one less than the old value of turns".

Booleans and Conditionals

A true or false value is called a boolean. The expression turns > 1 is a boolean that is true when turns exceeds 1. When used with conditional words if and else, booleans control program flow. Other examples:

• pick is secret, true when the two variables have the same value.
• pick isnt secret, true when the two variables are unequal.
• secret < pick <= 100, true when pick exceeds secret but not 100.
• secret < pick and pick <= 100, the same thing written using and.
• not (secret >= pick or pick > 100), again with not and or.

Statements to be be run conditionally should be indented underneath the if or else line that controls the condition.

Callbacks Versus Deferrals

It is worth thinking about how await and defer work. defer creates a callback function that, when called, continues the program after the await block. The defer function is called a continuation because it continues the program where it left off.

Chained callbacks to do multistep interactions can be done explicitly. Polygon Revisited does exactly the same thing as Polygon To Order: the nested function is called when readnum completes, and the innermost function is run after the second readnum is done. Think about how a loop such as in Guess could be done without await.

In CoffeeScript, numbers are unquoted. The language treats numbers and strings differently: 5 + 3 is 8, while '5' + '3' is "53".

Numerical Conversion

Strings can be parsed to numbers using the Number function; the String function does the opposite.

CoffeeScript allows numbers and strings to be mixed, but you should be careful when doing it. Adding a number to a string will convert the number to a string and attach it. Multiplying a number by a string will convert the string to a number and do the numerical product.

Three Ways to Change a Variable

There are three types of statements that change the value of a variable.

• ++counter the increment operator. Putting ++ before the variable name increments the value before it is used, and putting ++ after the variable increments it after it is used. The -- decrement is similar.
• counter += 1 the sum assignment operator, which changes a variable by adding a value. There are also -=, *=, and /= operators.
• counter = counter + 1 the ordinary assignment operator. Notice that the right hand side is computed before the left hand side is changed.

Floating Point Limits

CoffeeScript uses IEEE 754 "double-precision" floating-point numbers, which means numbers are stored using 64 bits. Scientific notation is written with an e+ or e- followed by a power of 10: 1e+6 is one million and 1e-9 is one billionth.

There are 15 digits of precision, and every integer up to 9,007,199,254,740,992 can be written exactly. There are also special Infinity and NaN ("Not a Number") values. However, not every real number can be represented exactly: the next number after zero is 5e-324 and the largest number is 1.79e+308.

The limits are expansive, so for most practical purposes, you can treat CoffeeScript numbers as if they were real numbers.

The Modulo Operator

The modulo operator x % y computes the remainder of x when divided by y. In other words, it removes the largest integer multiple of y from x and returns the remainder.

The modulo operator is useful for divisibility tests: x % y is zero if x is divisible by y. Euclid's famous algorithm uses the modulo operator to efficiently compute greatest common factors.

The Math object provides constants and functions you would find on a scientific calculator. A partial list:

• Math.E the natural logarithm base, 2.71828...
• Math.PI the circular ratio, 3.14159...
• Math.abs(x) absolute value of x.
• Math.round(x) round x to the nearest integer.
• Math.floor(x) round x down.
• Math.ceil(x) round x up.
• Math.max(x, y) the greater of x and y.
• Math.min(x, y) the lesser of x and y.
• Math.sqrt(x) the square root of x.
• Math.pow(x, y) x raised to the power y.
• Math.log(x) the natural logarithm of x.
• Math.sin(x) the sine of x (in radians).
• Math.cos(x) the cosine of x (in radians).
• Math.atan(x) the arctangent of x (in radians).

Returning Values, Recursion, and Base Cases

Other mathematical functions can be built yourself. The output, or return value, of a CoffeeScript function is the last value computed in the function. The statement return n ends a function with the return value n.

The functions fib and factorial are are recursive: they refer to themselves in their own definition. When writing a recursive function it is important that the recursion ends at a base case (such as where fib defines the value as 1 when n <= 2).

Recursion without a base case will loop forever and freeze up. There must be initial values for which the function does not depend on itself.

Generalizing

Although the built-in numbers represent reals, complex numbers can be represented as pairs of numbers. In Mandelbrot, the parameters c and z are complex numbers represented by objects that each contain an r and i property.

That example uses scale 150 to grow the turtle by 150-fold. The hsl function generates colors based on hue, saturation, and lightness.

Mathematical algorithms have a long and fascinating history. It is worth researching how Mandelbrot's remarkable fractal works; how Gauss's Gamma function generalizes factorials to all numbers; and how the Fibonacci sequence relates to sunflower seeds and the golden mean.

An object is a value that has its own properties. Each property of an object associates a name with a value. The object startpos has two properties: pageX, which has value 80, and pageY, which is 10.

The moveto function understands objects with a pageX and pageY property as a "page coordinate." (Page coordinates measure distances from the top-left corner of the page instead of from the center.)

Object Literals

In the Page Coordinate example, we can see that there are two styles for writing object literals in CoffeeScript. Each property can be put on separate lines, indented (YAML style); or the properties can be enclosed in curly braces and separated by commas (JSON style). The two styles are equivalent, and the program uses both.

Dot Notation

The properties of an object are referenced using a dot: line.x refers to the value of the property named "x" in the object named "line".

The most common use of objects is as a way of encapsulating a packet of related data together: in Figure, each object bundles the data needed for one line: a color and an x, y displacement.

Associative Array Notation

A property name can be any string, so an object can be used as an associative array that defines a map from strings to values.

In Scoring, points maps letters to point values. The square bracket notation points[letter] means "look up the value of the property whose name is the value of letter."

Mutation and Methods

Properties of an object may be changed by assigning a value using the normal = or += or ++ variable-setting operators. (Changing a property of an object is sometimes called mutation.)

Properties of an object that happen to be functions are called methods. Methods are particularly useful, because they can use the word this or the symbol @ to refer to the object on which the method was called.

(Note that the line memo.add for n in [40..50] puts the for at the end of the statement in order to repeat it.)

It is common to write methods like memo.add that mutate several properties of the object at once, or methods like memo.stats that do computation summarizing the properties of the object.

Arrays are objects that contain a sequence of values. Throughout this book we have used arrays for iteration in for loops; arrays are used wherever a program needs to organize sequential data.

Referencing and Joining Array Elements

The ith element of an array story is story[i], and the number of elements is story.length. Indexing is zero-based, so the first element is story[0] and the last is story[story.length - 1].

All the elements of an array can be joined together in one big string by story.join ''. The argument is the "glue" put between the elements.

Await and Defer

The statement await read prompt, defer answer pauses the program until the read is done. defer answer is a continuation function that resumes the program after putting the result in answer.

Building Arrays with Push

A program can use push to add elements to the end of an array.

Primes starts with primes = [] as an empty array, and then it calls primes.push candidate to add each discovered prime to the array of divisors to check. This ancient algorithm is the Sieve of Eratosthenes.

Stacks of Objects

Arrays have a pop method that reverses of push by removing and returning the last value. An array used by pushing and popping is called a stack.

It is common to use a stack of objects to undo a sequence. In Push and Pop, stack is an array where every element is a turtle position. Each element is itself a two-element array containing an [x, y] (itself another array) and a numerical direction.

Destructuring

• getxy() returns the turtle's current [x, y] as an array of two numbers.
• direction() returns the current direction of the turtle in degrees.
• stack.push [getxy(), direction()] reads the turtle's current xy coordinates and its current direction, forms an array with the results, and pushes it on the stack.
• [xy, b] = stack.pop removes the last element from the stack (the element is itself an array), and assigns the first item within of the element to the variable xy and the second item in element to b.

The form [xy, b] = value is called a destructuring assignment. It is a concise way to give local variable names to the elements of a short array.

Recursive functions refer to themselves, and they can achieve powerful effects. Recursion is at the core of fractals, language, and reasoning.

Recursion as a Stack

Operationally, recursion works by stepping through a stack of work. Consider the sequence as Spiral draws a shape and retraces it back.

spiral 10 sets x to 10
  rt 90; fd x * 10; spiral x - 1 ⇓                lt 90; bk x * 10 ⇑
  spiral 9 sets x to 9
    rt 90; fd x * 10; spiral x - 1 ⇓            lt 90; bk x * 10 ⇑
    spiral 8 sets x to 8
      rt 90; fd x * 10; spiral x - 1 ⇓        lt 90; bk x * 10 ⇑
                    ... etc, until the base case spiral 0 ⇑

Each time spiral is called, it puts the previous call on hold and does the smaller spiral. After the smaller spiral is done, it returns to finish work on the bigger one. spiral 0 does nothing: that is called the base case.

The x at different levels are local variables that do not interfere with each other. Each red box is a stack frame with its own "copy" of x.

Recursion as a Reduction

Conceptually, recursion reduces a problem to smaller cases. Consider how Fern draws a large fern by assuming it can draw smaller ferns:

slide 60, -5
label '⇒'
jump -110, -110
fern = (x, depth, boxd) ->
  if x > 1
    fd x
    rt 95
    fern x * .4, depth + 1, boxd
    lt 190
    fern x * .4, depth + 1, boxd
    rt 100
    fern x * .8, depth + 1, boxd
    lt 5
    bk x
  if depth is boxd
    pen red
    rt 90
    fd 1.7 * x
    lt 90
    fd 4.5 * x
    lt 90
    fd 3.5 * x
    lt 90
    fd 4.5 * x
    lt 90
    fd 1.8 * x
    lt 90
    pen green
pen green
fern 50, 0, 1
hatch().moveto(turtle)
jump 220, 0
fern 50, 0, 0

All fern does is draw a stem with three smaller ferns at the end. The main caveat is that the reduction has a limit: it ends when x ≤ 1.

Both Spiral and Fern return the turtle to exactly the same position and direction at the end of a function call. Maintaining an invariant like this can make recursion much easier to understand.

Most functions and programs are designed to be deterministic, which means they run exactly the same way given the same input.

The random function is different. Each time it runs, it produces random results that are unpredictable. Here are several ways of using random:

• random [1..6] chooses a random member of a list.
• random 70 chooses a random integer from 0 to 69.
• random position picks a random screen position.
• random color picks a random color.
• random normal picks a normally distributed number.

All of these are built using the lower-level function:

• Math.random() returns a random number between 0.0 and 1.0.

Expect The Unexpected

Randomness is a subtle concept. Think about flipping a coin five times:

However, we should not be too surprised: there are 32 possible sequences of heads and tails, and each of those sequences is just as likely as any others. An output of five heads is just as "random" as any other sequence of heads and tails.

If we repeated five coin flips five hundred times, we expect to see "all heads" about 500/32=15.625 times. Five Flips illustrates this effect.

Yet the principle of unpredictability holds even when repeating a random process 500 times: we should not be too surprised if we obtain "all heads" much more or less often than 15 or 16 times. With random, rare coincidences will happen if you try often enough.

Average is Normal

Another remarkable fact about randomness is the Central Limit Theorem: if you average enough random events - regardless of bias - the distribution of the average will be guaranteed to form a precise bell curve, called a Gaussian, or Normal distribution. random normal directly generates random numbers according to this bell curve: it produces random numbers from the normal distribution with a mean of zero and a variance of one.

The reliable unpredictability of random makes it indispensable for games, simulations, and cryptography.

Turtles are jQuery sets. Although most sets we have worked with contain a single turtle, a set can contain any number of elements. hatch 15 makes a set of 15 new turtles, and $('.turtle') is the set of all turtles.

JQuery Set Methods

Methods operating on a jQuery set s can:

• Generate a related set: s.nearest [0, 0] is the subset nearest 0, 0.
• Manipulate the elements: s.fd 100 advances the elements by 100.
• Test the elements: s.touches red tests pixels under the first element.

Generally a manipulation method like s.fd 100 will do the same thing to every element of the set. However, the method s.plan applies a function that can run a distinct operation on each element.

Giving Turtles Individualized Plans

When s.plan (j) -> action runs, The action is done for each element with the following parameters:

• this (aka @) is a jQuery set with the single element.
• j is the element index, ranging from 0 to crowd.length - 1.

For example, Scatter uses plan to direct each turtle to turn and move a different random amount. The function call random normal returns a normally distributed random number with mean 0 and variance 1.

The program Turtle Race is similar, but it also uses an await loop to run the seven turtles in a parallel race. On each iteration, the turtles individually check if they have crossed the red line. The shared variable finished tracks the order in which the turtles finish.

Using and Selecting Classes

The loop in Rescue Class finds the nearest kid to each hero and removes that kid if the hero touches it. Otherwise the hero turns and moves towards the nearest kid and repeats the process.

At the beginning of that program, all the kids are marked with a class using this.addClass('kid'). On the hero thread, the jQuery selector $('.kid') obtains the set of all current elements in the kid class that have not yet been removed.

jQuery methods that return sets can be chained. For example, $('.kid').nearest(hero).eq(0) filters the set of kids to the subset nearest hero, and then filters that subset to its first element, if any.

There are a wide range of jQuery methods for finding and manipulating sets: much about jQuery has been written on the web.

String algorithms to locate patterns in text are a fundamental tool for understanding written language.

Characters

Strings are arrays of characters. The Unicode character set supports textual communication around the world, so it includes characters for every international alphabet, every Asian pictographic word, and every common mathematical symbol.

Unicode assigns a number to every character. String.fromCharCode gets the character for the number, and text.charCodeAt gets the number for a character. Numbers up to 127 are ASCII codes that cover American English: 65 is uppercase A, 122 is lowercase z, 48 is the 0 digit, 32 is the space, and 36 is the $ dollar symbol.

Locating Substrings in Text

The simplest way to match text is to find an exact substring: text.indexOf returns the location of the first occurrence of the given substring in text, or -1 if none was found. Conversely, if you have an index of interest, text.substr x, len returns the len characters starting at index x.

Matching Patterns

Regular expressions, are flexible and precise text patterns written between pairs of slash /.../ delimiters. Regular expression syntax is a whole language that is the topic of several good books and websites. Here are a few basics:

• (abc)* matches zero or more repetitions of abc.
• [abc] matches either an a or b or c.
• a..c matches a followed by two characters then c.
• ab+c matches a, then one or more b's, then c.
• [a-z]{3} matches three lowercase letters.
• \d* matches zero or more digits.
• x\s+ matches x followed by one or more spaces.
• z\b matches a z followed by a word boundary.

The text.match method returns matching substrings. Normally, the first match is found, but if the letter g (for "global") follows the pattern then all matching substrings are returned. There are other useful suffixes: i makes the match case-insensitive.

The pattern.exec method extracts of submatches within parentheses in the pattern, and the text.replace method replaces matches with a new string.

The thee examples on this page demonstrate how to simulate motion: a bouncing turtle, a game of tag, and an orbiting planet.

Newtonian Simulations

When Newton worked out his famous laws of motion, he discovered that the speed and direction of an object - its velocity - remains unchanged as long as no forces act on the object. And he discovered that forces do not directly change the position of an object: forces alter an object's velocity.

When simulating motion, the velocity of an object can be represented by a small change in position for each tick in time. An undisturbed object moves the same distance and direction on each tick, and a forced object will alter its velocity on each tick.

In Bounce, the two variables vx and vy are the x and y components of velocity. The gentle acceleration due to gravity is simulated by a slight change in velocity on each tick: vy -= 1. The sudden acceleration of a bounce off the floor (with some loss in energy) is represented by a sign change in velocity: vy = Math.abs(vy) * 0.9.

In Tag, velocity is simulated by moving each turtle forward 5 or 6 on each tick. The physics of this game are designed for fun: the main turtle picks its direction by pointing at the last position of the mouse. The blue turtle runs away by adding 45 degrees to the direction from the main turtle to itself.

Orbit is a representation of Newton's most profound discovery: that the gravity makes objects fall to the ground is the same force that governs the motions of the planets. In the orbital simulator, the x and y components of velocity are in the array v, and the velocity is accelerated on each tick using the formula v[i] += G * (s[i] - p[i]) / d3, where s is the position of the sun, p is the position of the planet, and d3 is the cube of the distance between them.

Click to move the sun. Experiment with elliptical and hyperbolic orbits. Notice the planet moves more quickly when it is near the sun.

Motion and Hit Testing Functions

• slide x, y slides right by x and forward by y.
• getxy() returns the absolute [x, y] position of the turtle.
• b.touches(turtle) true if b touches the main turtle.
• inside(window) true if the main turtle is fully inside the window.
• direction(b) the direction from the turtle to b.
• distance(sun) the distance from the turtle to sun.

A thread is a sequence in a program that runs in parallel to other code. Iced CoffeeScript has cooperative threads, which means that:

• Only one thread runs at once.
• Concurrency is done by switching between threads.
• Switching is only done at await statements.

Some new idioms that appear in these examples:

• b = hatch blue hatches a new turtle, wearing blue.
• b.lt 90 tells the turtle b to turn.
• await done defer() waits until turtles stop moving.
• send 'go' sends a message 'go'.
• await recv 'go', defer() waits until 'go' is received.
• while true repeats the enclosed code forever.
• touches orange tests if the turtle touches any orange.
• do -> runs the enclosed code as a function.

Multiple Turtles

In Race Condition, the second turtle to arrive will draw a dot that covers the first dot. The turtles run concurrently, and it is is not possible to predict which parallel turtle will arrive first.

If order is important, insert await b.done defer() before calling r. The program will wait for b to finish before moving the red turtle.

An await only pauses the current function, not its caller. That is why the last two examples run threads in parallel.

Synchronization

It is important to let a turtle finish moving before reading its state. If Line Follower did not await done defer() to let the turtle finish moving forward before checking the touched color, the turtle would still be in its start position when check is done.

Even if not reading turtle state, an infinite while true loop should contain an await done defer() so that other threads get a turn.

Communicating Between Threads

Threads can communicate using shared memory (sharing a common variable) or message passing (sending a value from one to the other). If a shared variable changes very quickly or slowly, the thread that reads the variable can skip a value or read the same value twice. On the other hand, a thread that uses await recv will wait to receive each message sent by send exactly once without duplication or omission.

About styles. TBD.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This page gives shows how to use CSS, which is a set-oriented language. The fundamental operations in CSS operate on sets: every CSS selector represents a set of HTML elements, and every selection operator transforms one set of elements to another set. With CSS selectors, it is easy to select any useful set of elements without writing a loop.

Element Names and Hierarchy

A typical HTML document contains a tree structure like this:

<body>
  <h1>...</h1>
  <p>...</p>
  <p>...<i>..</i>..<i>..</i>...</p>
  <p>...<i>..</i>...</p>
  <h2>...<i>..</i>...</h2>
</body>

The <body> element contains five children: one <h1>, three <p>, and one <h2>. Some of those children in turn have further children: this example has four <i> descendants.

CSS selectors name a tag to select all elements with that tag. The selector p selects the three <p> elements in the document, and the selector i selects all four <i> elements. In CSS, curly braces following a selector contain CSS styles to apply to the selected elements. To color the text within every <i> element, we could write i { color: blue }.

The result of a selector is always a set, and there is nothing wrong with selecting a singleton or empty set: h2 selects a single element, and h3 selects the empty set. Some more techniques:

Filtering by Ancestry - CSS selectors composed in sequence narrow sets according to ancestry. For example p i selects only those <i> elements that are contained within <p>.

CSS Classes - Elements with class attributes can be selected using match dot selectors such as .a.

Advanced Operators such as :nth-of-type can select elements according to their ordinal position or other properties.

jQuery's $ Function The jQuery function $(...) is a bridge between set-oriented selectors and object-oriented code. $('p') creates a single CoffeeScript object that represents the whole set elements selected by p. jQuery provides a bridge between the set-oriented CSS language and the the object-oriented CoffeeScript language.

The jQuery library provides a set of methods for all set objects, including functions for changing and animating CSS properties interactively.

About events. TBD.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

About slicing. TBD.

The concat method creates an array that joins the elements of two arrays together. [2...10].concat ['J', 'Q', 'K', 'A'] forms an array starting with the numbers 2 through 10 followed by the strings "J", "Q", "K", and "A".

The parenthesized loop (v + s for s in suits) is a list comprehension that creates an array using a for loop. The array consists of each value computed by the loop, in sequence.

Shuffle applies the Fisher-Yates algorithm for shuffling a deck of cards. The algorithm is called a "perfect shuffle" because every permutation of the deck is equally likely.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

About sorting. TBD.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

About search. TBD.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

About intelligence. TBD.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.