Sprout


Drawing name:

Sprout

Click the box next to "Automatically".

This makes Sprout run your program every time you change it, so it's easy to see what you're doing. The blue arrowhead shows you where you're ready to draw next, and in what direction.

Click anywhere in this balloon to continue.

Click the selector, and then click "Draw".

See that you've drawn a line in the drawing area. Also notice that a new instruction selector appears under the one you clicked: you always get another blank instruction at the bottom of your program, so you can just keep picking new instructions.

Now, click the second selector, and this time choose "Turn right".

See that the arrowhead turns to the right.

Now add a third instruction: "Draw" once again ...

"Draw" one more time.

So you have an "L" shape, but on its side, because your program starts drawing upwards, turns right, and draws some more. Let's say you now want the whole "L" to stand up, instead. You need to insert an instruction at the beginning, to turn left.

Click anywhere in this balloon to continue.

You may have noticed that, as you move your mouse over the instructions, green bars light up between the instructions.

Move your mouse over the area just above your first instruction (right below this text) until that "insert bar" lights up, and when it does, click it.

See how you get a new instruction at the top? You can insert instructions at any point in your program in this way.

Click this new selector, and pick "Turn left".

Now the "L" looks more like an "L". Do you see how your program works, and why that initial left turn changed the orientation of the whole drawing? As your program gets more complicated, you may want to be able to watch it work. We'll try a couple of ways to do this.

Click anywhere in this balloon to continue.

Click the box next to "Animate".

This slider lets you control the speed of the animation: left for slow, right for fast.

For now, click the slider button and drag it all the way to the left.

Click the "Run program" button.

See how your program runs, one step at a time? As each instruction runs, you see it happen in the canvas, and the instruction itself flashes for a second.

Wait for the drawing to complete, and then click anywhere in this balloon to continue.

Move the slider back to the right -- about a fourth of the way over.

Click "Run program" again.

Now the animation runs a little faster. For a very short program, the fastest animations will happen so quickly you almost won't see them.

You can also adjust the speed while the program is running.

Click anywhere in this balloon to continue.

So you know how to build a program by adding instructions at the end, and by inserting before or in-between existing instructions. The last thing we'll try is removing an instruction. What do you think would happen to the drawing if you removed the third instruction, where you say "Turn Right?"

Click on the X to remove the instruction ...

Whoops! There it went, and without that turn you have a straight line going off to the left.

Are you getting the hang of it? Okay -- next steps:

Click this balloon or the "Stop Tutorial" button now.

Make sure you're drawing automatically, so you can see all of your work as you go through the tutorial.

Start by selecting the "Repeat" as your first instruction.

Now you see a new, empty instruction at the bottom of the program, as usual. But you also see a new, empty instruction "inside the loop." All the instructions you place inside the loop can be repeated several times.

Select "Draw" as the first instruction in your loop.

"Draw" a second time.

Now choose "Turn".

Notice that you have more options for turning now, too. You have to say which way you want to turn, and also how much. We also start to describe turns in "degrees:" for example your left and right turns from the last level are all 90-degree turns.

Choose to turn "Right", and you'll leave the amount of the turn at "Normal."

So far your drawing is behaving just the way your previous ones have done, even though you're using a Repeat. That's because, so far, you're only repeating one time.

Click in the box and replace the number 1 with the number 2.

Aha! See how your three instructions are run twice, in sequence? Draw, draw, turn; draw, draw, turn.

Try setting the repeat count to 4.

Loops can get tricky to control. But, the good news is, just about anything repeated in a drawing winds up looking cool!

Try inserting an instruction here ...

Select "Turn".

Now choose to turn "Left".

Well, that sure changed things! Do you see how that happened? When your repeated instructions start pointing one way and end pointing another way, you get a drawing that closes up, or curls around itself. When you end each pass pointing in the same direction, the drawing "diverges" -- it heads off in a consistent direction.

Click anywhere in this balloon to continue.

Now, you'll get as many steps in your staircase as you want, based on the repeat count.

Change the repeat count to 20.

Notice that the steps get smaller. Sprout always "scales" your drawing to fit in the visible area. The lines get thinner in the process -- as if you were looking at the drawing from farther away.

Put the repeat count back to 4.

Now try changing that new "Turn" instruction to a "Skip".

Surprised? You just did two things at once:

Click anywhere in this balloon to continue.

Now let's look at a new feature of Sprout itself. One thing that happens a lot when you're writing a program is that you realize that some instructions should be in different places -- earlier or later in the program, or inside a loop when they weren't before.

When you move your mouse over the body of one of your instructions, the mouse cursor stops being an arrow and shows instead as a cross of arrows, pointing up, down, right and left. This tells you that you can click on the instruction, hold down the mouse button to "drag" the instruction somewhere else, and "drop" it in the new location. This takes a little practice ...

Try this now: click on the first of your Draw instructions, drag it toward the top of your program, and let go of the mouse button when you see the green insert bar above the Repeat instruction.

Now, the first draw instruction happens only once, and then you draw a sort of patchy square above it.

Drag the "Skip" instruction and drop it in between the Draw and the Repeat at the top.

Now the skip is gone from the square, so it's solid, and smaller than it was; and the skip happens after the first line is drawn and the square itself.

One other feature of Sprout might be worth a look now ...

Click the Show as code button.

Click OK in the dialog, and click this balloon to continue.

This wraps up the Level-2 tutorial. Next steps:

Click this balloon or the "Stop Tutorial" button now.

For this instruction you have to be more specific: which way to turn?
Click the selector that has appeared next to "Turn" and choose "Right".

Click the "Step-by-step" checkbox.

Click "Run program".

Nothing happens ... but see that one button has become two, Step and Cancel.

Click "Step", and watch for the first instruction to flash:

You don't see any drawing yet, but see that the arrowhead has turned left as instructed.
Notice also the indicator arrow in the upper right has turned as well.
Click "Step" again ...

The second instruction flashes, and it is run, which draws your first line.
Click the "Cancel" at the left to get out of this step-by-step mode.

Level 1 Challenge: A Square

The drawing you need to create is shown in light grey. Write a program that makes the same drawing, in black, tracing over the existing one.

You can hide this balloon by clicking the in the upper-right corner, and show it again by clicking the "Notes" button.

Level 1 Challenge: Steps

The drawing you need to create is shown in light grey. Write a program that makes the same drawing, in black, tracing over the existing one.

You can hide this balloon by clicking the in the upper-right corner, and show it again by clicking the "Notes" button.

Level 1 Challenge: Two Squares

The drawing you need to create is shown in light grey. Write a program that makes the same drawing, in black, tracing over the existing one.

For this challenge, you'll need to Skip in order to create two separate shapes.

You can hide this balloon by clicking the in the upper-right corner, and show it again by clicking the "Notes" button.

Level 1 Challenge: Steps

The drawing you need to create is shown in light grey. Write a program that makes the same drawing, in black, tracing over the existing one.

For this challenge, you'll need to Skip in order to create two separate shapes. Also, think about the most efficient way to move your drawing arrow around, so that you don't have to spent a lot of time back-tracking.

You can hide this balloon by clicking the in the upper-right corner, and show it again by clicking the "Notes" button.

Level 2 Challenge: Octagon

You could make this drawing with a long series of alternating steps: move, turn a little, move, etc. Or, you could make it very simply with a single loop.

Level 2 Challenge: Decorative Border

This is another drawing that all happens inside one big Repeat instruction. Start by repeating just one time, and draw out the shape until you see that you're in the right starting position and will be doing the same steps again. Then try increasing the number of repeats ...

Level 2 Challenge: Saw Blade

This is another drawing that all happens inside one big Repeat instruction -- but now, the tricky part is to see what piece of the drawing is the repeating pattern. Experiment with it, and you can try turning the number of repeats up and down to get a sense of what you'll get.

Level 2 Challenge: Three Diamonds

You will want to use repeats to make the diamond shapes. But then you will need to turn a little, then skip, then turn back, to do another Repeat for the next diamond.

Level 2 Challenge: Diamond Chain

Have one Repeat that runs three times, and inside it put a second repeat that draws the diamond and then does the turning and skipping to set up for the next one.

Too Many Instructions

This challenge can be solved in fewer instructions. Think about it: could you be doing this more simply ... maybe with a Repeat instruction?

You must remove at least one instruction before you can add any new ones.