CodeMotion Manual

This page describes a very old version of CodeMotion (1.0).

The latest version (2.0) can be found here.

Table of Contents

1. Tutorial

1.1. Using the Code Pad

First of all, download CodeMotion.zip and extract it using WinZip. Your work for this class should be saved on your h: drive, if you want to be able to use it from other computers in the school, or on your flash drive if you'd rather be able to take it home and you're fairly sure you won't let your flash drive be stolen. So, choose either one as the destination to extract to.

Inside of the CodeMotion directory that you just unzipped is a program called CodeMotion.jar. Double-click on it to open it. You should see a window arranged somewhat like the picture to the right, but without anything in the three sections in the corners yet.

These three parts of the CodeMotion interface are what you need to learn about first. Let's start with the code pad, the text area in the top left. This is where you type any instructions that you want to have the computer execute.

Click in the code pad and start typing in the first line of text shown the picture to the right, but stop just before you get to the first semicolon. Make sure that you type exactly what is in the picture. This first line is an instruction to the computer to make a "turtle", a little creature that can move around and draw things on the screen. The turtle is then assigned a name - t - so that you can have a way to talk to it.

When you type the semicolon, one of two things will happen. Either the cursor will disappear and the text of the line will change color in places - meaning that the computer liked what you wrote and is ready to do it - or some part of the line will be highlighted and a message will appear in the console below the code pad telling you that you did something wrong. If an error like this pops up, check to make sure that you typed exactly what you see in the picture - even some of the spaces have to be there exactly.

Once you have that line ready to run, press enter to run it. The computer will first work on the part of the line that looks like new Turtle(), which it refers to as a constructor for a Turtle, and then will assign this turtle to the name t that you created.

Once that line is done, just type another semicolon to get back into evaluation mode, but don't hit enter. You should now be able to see a little green box at the top of the code pad representing the turtle "t" that you just created. You can now send instructions to this turtle in later lines.

Several other things happened when you created t. In the area in the upper right of the CodeMotion interface, called the memory view, two boxes appeared - one with the name "Turtle" and one with the name "Color". This means that we have created two objects, a Color (which, as you can see, is black), and a Turtle. They are now living somewhere in the computer's memory.

Now, why was a Color created, when all I did was make a Turtle? To figure this out, click on the Turtle (either the box in the memory view, or t in the code pad) to see what data in memory makes up that Turtle object. You will see that it is defined by various numbers that you might expect, and that it also has a piece of data that is its color. If you click on that color box, it will select the black Color object that you saw appear in memory.

When you created t, you also saw a turtle-shaped object appear in the canvas, the section of the screen in the bottom left. The canvas is a special part of the screen that just displays very specific parts of your program: anything drawn by Turtles, plus any Point objects that you make. You make want to drag the dividers to make the canvas bigger so that you can see what you are drawing as you go further.

Now it's time to make t do some more interesting things. You can see how I gave him instructions: I write t.move() to make him go forward, t.rt() to take a 90° turn to the right, t.lt(60) to take a 60° turn to the left, and so on. Try typing in some instructions like this. Remember, as you type each semicolon, wait to make sure that the computer accepted what you typed before you hit enter.

1.2. Using methods in the Sandbox

Suppose that you really like the shape you just drew, and you want to be able to draw it again without having to remember and type in all those lines over again. To store it in a more permanent place, you could move that code into the Sandbox, a file in which you can write and store pieces of code that you want to be able to use over and over. Go up to the CodePad menu and select the option "Make Sandbox method".

This will suddenly place your code at the bottom of a longer text file that contains a lot of other code as well. Most of it will be confusing to you at this point, but the basic idea is that your code has been wrapped up in a method, a sequence of operations that is given a particular name so that you can just tell the computer to "do newMethod()" and it will do that whole process. I renamed my method myMethod(), as you can see below:

public void myMethod() {
    Turtle t = new Turtle();
    t.move();
    t.rt();
    t.move();
    t.lt(60);
    t.move();
}

It's usually a good idea to give more descriptive names to your methods - if it draws a particular thing, name it after that. I just didn't have any good idea of what my little squiggle ought to be called.

Now I want to try running this method. To do this, I need to be back in the code pad. Take a look at the last section of the interface that we haven't talked about yet, the list of names between the memory view and the canvas. Right now "Sandbox" is selected; click back on "Code Pad".

The code you typed in the code pad before is now gone. Every time that you modify the Sandbox, the Code Pad is wiped clean, on the assumption that you have a new thing you want to try out fresh. If you want to redo what you had done before, you can press the up arrow on your keyboard while in the code pad to recall previous lines of code you had typed.

We want to tell the computer to do that method myMethod() that we just put into the Sandbox. To do this, just type myMethod(); (or whatever you named it), and press enter. You will see the myMethod() expand out into a box containing all the code you put in that method; the computer will then run through that code one line at a time.

If you want to speed up the rate at which the computer runs through your code, adjust the slider right below the memory view. Left is slower, right is faster. If you put the slider ll the way to the left, it will pause, and if you put it all the way to the right, it will run without animating anything - useful once you know what you're doing and just want to execute code without watching it go.

If your code ever gets stuck, you can hit the "Stop" button to stop it from running. Let's see an example of where this would be needed. Click back in the Sandbox, and add a new line to myMethod() that says to call |myMethod() again, like this:

public void myMethod() {
    Turtle t = new Turtle();
    t.move();
    t.rt();
    t.move();
    t.lt(60);
    t.move();
    myMethod();
}

What am I telling the computer to do now? Well, it says that one of the steps involved in doing myMethod() is to do the whole of myMethod() over again. But that, in turn, means calling myMethod() again! If I run this in the code pad, the computer will just keep opening up more and more calls to myMethod() until the screen is quite full of them. I can either wait for it to crash - it will give you an error message called a StackOverflowException - or, once I see what is happening, I can hit the "Stop" button to stop it.

1.3. Experimenting with the other method in the Sandbox

The last thing to do is to try out some of the code that came with CodeMotion to see more of what you can do in Java. Try typing polygons(8); in the code pad and pressing enter. This method looks very short, but it draws a whole complicated shape. Somehow, it does this by repeating the same code over and over.

You will learn more about how this works in a few weeks, but you should be able to see that the method is working with two different numbers - i and j - that are counting up and down as it runs. The i variable stands for the number of sides it wants to draw in the polygon it is currently working on, so i starts at 8 and counts down to 3. Meanwhile, as it is actually drawing that polygon, it uses j to count how many sides it has drawn so far. The for instruction in the code is a special type of instruction that will take care of repeating some code over and over. Once you learn how to use loops like this, programming really starts to get exciting.

You can also see that this program uses many different variables - the little green boxes, like your t, that hold a value. Variables in programming are a lot like in math, but they can do a lot more, because they can refer to objects, like Turtles or Colors, instead of just numbers.

You will also notice that those variables, and the objects that they refer to, disappear once the method is done running. Variables only exist inside of the part of the code that created them, so that the code outside of that won't suddenly have more variables defined that it didn't want. In fact, if you look carefully you will notice that, for example, the c variable in polygons() lives inside the for loop, and is lost and recreated each time through the loop.

Another, more complicated example can be seen by typing decagon() in the code pad. This is an example of the correct way to have methods call other methods, without creating an infinite loop by having a method call itself. There is one main method here that just creates a new Turtle, then uses that Turtle to draw shapes defined by other methods.

As each new method is called, that Turtle is "passed" into the new method by enclosing it in the parentheses of the method call. The receiving method then stores that Turtle in its own variable. So, even though you can see several Turtle variables in the code pad, there is only one Turtle object in memory - all those variables are just different names for the same Turtle.

We will see this example again, and learn to understand it in more detail, when we get to talking about Methods as Abstractions.

One final example. Java need not be used just to draw things; more often computer programs are written just to make some sort of calculation. The mathematical nature of computer code makes it very easy to express a mathematical relationship, function, or sequence in Java. So, for example, suppose that I want to write a program to calculate the famous fibonacci sequence:

1, 1, 2, 3, 5, 8, 13, 21, 34...

This sequence is defined by two rules:
  1. The first and second numbers are 1 and 1.
  2. Every later number is found by adding the two before it.
I can translate this definition almost directly into Java code, using the method below:

public int fib(int n) {
    if(n <= 2) {
        return 1;
    } else {
        return fib(n - 1) + fib(n - 2);
    }
}

This method is doing something special - it is returning a value. It calculates a number, and then it gives that number back to whatever code was calling it. This is why I can add together the two calls to fib() - I am adding, not the methods, but the integer values they return. Again, return values are something you will learn about in the coming weeks; this is just to give you a preview of what this Java stuff is about.

When you are done working on anything in CodeMotion, you can simply quit the program - all you work is automatically saved.