There is an invisible turtle on the canvas, that moves based on commands written in the code editor. When the turtle moves, it usually leaves a colorful trace on the canvas – except when instructed otherwise. The beauty and power of this technique comes from repeating the same movements over and over, resulting in complex, emergent visual patterns. It can feel unpredictable at times – however, this is indeed the essence of generative art, and nothing to be afraid of. Just like the best movie directors let go of micro-managing the actors, a great code artist knows when to let go of analysing why something happens, and instead just play with the unknown.
First things first, everything in the code art world is based on structure and numbers. This can feel a bit counter-intuitive at first – how could structure and numbers have anything to do with creative expression? Once you get a hang of it though, code is just another material to craft artworks from. In fact, just as a piano music composer only has certain notes available, the endless possible sequences of the notes allow vivid expressive power. The ”notes” of the turtle framework are called ”commands”.
Each command is written on its own line, and many of them have a numeric parameter associated with them. For example, the most simple program simply moves the turtle forward, leaving a trace on the canvas:
forward 200
Try it out in the editor! This introduction is meant to be read while having the editor open, since coding is a type of craft – you learn best by doing yourself. You can also try changing the numbers, if you like.
Anyway, the turtle moves so fast that the movement isn’t visible to the naked eye. What matters, is not the turtle itself, but the traces.
The distances are scaled such that the shorter side of the canvas is always 1000 units long. Don’t worry if that sounds complicated – just try some numbers and see what looks good.
There are usually different ways to make a program do the same thing. For the above program, we could have just as well written this:
forward 100
forward 100
Or:
forward 50
forward 150
Sadly, a single straight line can only get us so far in our artistic career. To make things a bit more interesting, we can make multiple straight lines:
forward 100
turn-left 90
forward 200
Again, we could write this code instead, and the same image is drawn:
forward 100
turn-right 270
forward 200
Or:
forward 100
turn-right -90
forward 200
Or:
forward 100
turn-left 450
forward 200
All of these do the exact same thing. Whenever you have multiple options for writing the same logic, use the one that makes most sense for you. The computer can understand all of them just as well. Sometimes less elegant code has better performance, but for now, it doesn’t matter.
Moving on, we can tell the turtle to repeat certain parts of the code multiple times. So far all the examples probably would have been easier to do with pen and paper. Repeats give code art its first unique advantage.
repeat 30
forward 300
turn-left 129
end-repeat
The indentations (4 spaces) are optional, but recommended, since they make the code easier to read. The end-repeat command is also optional in this case, as there is no other code after it – the program will work without it. You can decide yourself whether adding the explicit end-repeat to the very end makes the code easier to read or not.
Here’s another example with some more commands in the repeat block:
repeat 20
forward 400
turn-left 160
forward 300
turn-right 90
end-repeat
You can also put repeats inside repeats:
repeat 7
repeat 30
forward 300
turn-left 129
end-repeat
turn-right 10
forward 500
end-repeat
Another example:
repeat 5
repeat 15
forward 30
turn-left 90
forward 30
turn-right 90
end-repeat
turn-left 144
end-repeat
At this point you can explore different variations and combinations of the commands thus far!
Here are a few more commands you can play around before continuing to the next chapter:
backward – moves to the opposite direction, and never draws a trace.pen-up – makes upcoming forward commands move without a trace.pen-down – makes upcoming forward commands draw a trace again.Example:
backward 200
repeat 30
repeat 10
forward 20
pen-up
forward 30
pen-down
end-repeat
turn-left 149
end-repeat
In this chapter we learned how to draw lines on the canvas using various commands, and how to make more complex, emergent patterns by using the repeat structure. Commands can be thought of like notes in a musical composition, where combining simple choises can lead to something artistic. We also discussed how the same program can often be written in different ways.
In the next chapter we will talk about animations. Continue to the next chapter