Tip:
Highlight text to annotate it
X
Hi! Welcome to Pencil Code. We're going to learn how to make our first
program that draws with the turtle, and we're going to learn how to make a website that
saves our programs.
To use Pencil Code, use a modern browser like Chrome, or Firefox, or IE10 or newer, and
visit the website pencilcode.net. Click on "Let's Play" and you'll be in the Pencil Code
editor.
Let's take a little tour of the editor. In the upper left hand corner, we see the name
of the program we're editing, and right below that we see the code of the program. This
is an example program that Pencil Code starts us off with.
In the lower right hand corner, we have a command window that we can use to enter commands
that run right away, and there's a sandbox right above that that shows the turtle as
it's moving and drawing. In the upper right hand corner there is a Save button.
So let's make our first program. It's going to look like this. It has two lines, and when
we run it, it moves like this.
We can change the program, and it'll do slightly different things.
What happened here?
We have two lines in our program. Each line starts with a function name. The first function
is "pen", and the second function is "fd".
Pen selects a color that the turtle is going to use for drawing, and fd moves the turtle
forward by some number of pixels. Each one of the grid squares over here is 25 pixels,
so when we move forward by 50 pixels, it moves by two grid squares.
Now let's play with the command window. We can type "help" down here, and it will list
a bunch of possible commands.
Let's take a look at one of these commands, "lt". That command stands for Left Turn, and
it will turn the turtle left.
Notice that when I type "lt 90", it actually moved the turtle left right away. Now the
turtle didn't actually change position. It just pivoted where it is. Let's move it so
that you can see that the turtle's direction is a little different than it was before.
The other kind of turn that we can make is "rt" for Right Turn. "rt 120" will turn the
turtle more than 90 degrees, which will make a sharp turn and form an acute angle. I'm
going to move the turtle forward by 80 here so that you can see the direction that it's
going.
If I make a turn less than 90 degrees, it will turn the turtle a little bit less.
Another move that we can make is we can move the turtle backwards, by using "bk".
So let's review! We've learned four commands the move the turtle.
"lt" turns the turtle left. "fd" moves the turtle forward.
"rt" turns the turtle right. and "bk" slides the turtle back.
Together these move the turtle forward, left, right, and back, and we can use these commands
to create any type of drawing.
Now this shape that we've made here is pretty nice. So what I'm going to do is take all
the commands that we've typed here, and make them into a program.
I can do that by using the mouse to click and drag and select all the commands I've
typed, and then use the mouse to drag them over here into the editor.
If I press "play" now, it will run all the commands like a script. A simple program is
called a "script", because it performs each line like lines in a play, performing each
one, one at a time, from top to bottom.
Let's create our own website for saving our programs. Click the "save" button in the upper-right
hand corner, and pick a memorable username. It doesn't need to be your real name, just
a clever name or a memorable name.
I've selected the name "newbie". You can optionally choose a password. When you click OK, it will
create a new website with your username dot pencilcode dot net. Mine will be called "newbie.pencilcode.net".
You can see that the URL has changed to "newbie.pencilcode.net" and I can run the program on my new website.
The program is saved here, so I can come back to newbie.pencilcode.net any time I like,
and continue working on my program. Or I can go to the directory, and create new programs.
That's it! Have fun!