Drawing with Forth

In this tutorial, you'll learn basic Forth by drawing graphics with a turtle.

💡 Click the Run button next to the examples to run the code, or click the Run button at the top to run all the code on this page.

❕ This is not a real tutorial, but a demo of a WAForth notebook, and perhaps a glimpse of what an interactive Forth tutorial using notebooks could look like.

The stack

Forth is a stack-based language. Numbers are put on the stack, and words pop them off the stack (and put new ones on the stack) again. For example, to take the sum of 8 and 14, put both numbers on the stack, and call +. To pop the result of the stack and print it out, use .:

8 14 + .

Drawing lines

Instead of printing numbers to output, we can also draw lines.

The FORWARD word pops the number of the stack, and moves a turtle forward while drawing a line:

200 FORWARD

Let's now also turn the turtle 90 degrees, and create a complete square:

200 FORWARD 90 RIGHT 200 FORWARD 90 RIGHT 200 FORWARD 90 RIGHT 200 FORWARD 90 RIGHT

Creating your own words

We can create our own parameterized word that draws a square of the given size:

: SQUARE ( n -- ) DUP FORWARD 90 RIGHT DUP FORWARD 90 RIGHT DUP FORWARD 90 RIGHT DUP FORWARD 90 RIGHT ; 500 SQUARE

Loops

Forth also has loops using DO and LOOP:

: SQUARE ( n -- ) 4 0 DO DUP FORWARD 90 RIGHT LOOP DROP ; 250 SQUARE

Combining words

We can create more complex figures by using the SQUARE word from above, and repeating it.

💡 Play with the numbers in FLOWER to create variations of the flower

: SQUARE ( n -- ) 4 0 DO DUP FORWARD 90 RIGHT LOOP DROP ; : FLOWER ( n -- ) 24 0 DO DUP SQUARE 15 RIGHT LOOP DROP ; 250 FLOWER

Recursion

Words can also call themselves:

: SPIRAL ( n -- ) DUP 1 < IF DROP EXIT THEN DUP FORWARD 15 RIGHT 98 100 */ RECURSE ; 140 SPIRAL

We can make a small variation of the above recursive program, where the lines become longer instead of shorter. To avoid hard-coding some constants in the code, we use the word CONSTANT to define a new constant (ANGLE) to turn.

💡 Change the constant ANGLE to 91 and see what happens.

90 CONSTANT ANGLE : SPIRAL ( n -- ) DUP 800 > IF DROP EXIT THEN DUP FORWARD ANGLE RIGHT 10 + RECURSE ; 1 SPIRAL

Fractals

You can create more complex recursive drawings, called fractals.

A famous fractal is the Koch snowflake.

💡 Change the DEPTH constant to make a coarser or finer grained snowflake

730 CONSTANT LENGTH 3 CONSTANT DEPTH : SIDE ( length depth -- ) DUP 0= IF DROP FORWARD EXIT THEN SWAP 3 / SWAP 1- 2DUP RECURSE 60 LEFT 2DUP RECURSE 120 RIGHT 2DUP RECURSE 60 LEFT RECURSE ; : SNOWFLAKE ( -- ) 3 0 DO LENGTH DEPTH SIDE 120 RIGHT LOOP ; 1 SETPENSIZE SNOWFLAKE

You can also draw plants and trees using fractals:

450 CONSTANT SIZE 7 CONSTANT BRANCHES 160 CONSTANT SPREAD VARIABLE RND HERE RND ! : RANDOM ( -- n ) RND @ 75 * 74 + 65537 MOD DUP RND ! ; : CHOOSE ( n1 -- n2 ) RANDOM 65537 */MOD SWAP DROP ; : PLANT ( size angle -- ) OVER 10 < IF 2DROP EXIT THEN DUP RIGHT OVER FORWARD BRANCHES 0 DO OVER 2/ SPREAD CHOOSE SPREAD 2/ - RECURSE LOOP PENUP SWAP BACKWARD PENDOWN LEFT ; 1 SETPENSIZE SIZE 0 PLANT

Creating your own language

Forth also provides all the tools necessary to create your own language.

For example, if we want the Thurtle language to be more like Logo, we can define the TO and END keywords to replace the standard Forth words for starting and ending compilation:

: TO : ; : END POSTPONE ; ; IMMEDIATE TO SQUARE 4 0 DO 200 FORWARD 90 RIGHT LOOP END SQUARE

You can even create a graphical language based on emoji:

\ Define our graphical language : 🚜 : ; : 🚧 POSTPONE ; ; IMMEDIATE : ⤵️ RIGHT ; : ➡️ FORWARD ; : ▶️ POSTPONE DO ; IMMEDIATE : 🔁 POSTPONE LOOP ; IMMEDIATE \ Build the definition of a pentagram 🚜 ⛤ 18 ⤵️ 5 0 ▶️ 450 ➡️ 144 ⤵️ 🔁 🚧 \ Draw a pentagram ⛤