DoDraw Guide

What is it?

DoDraw is a alternative way to draw images. Instead of using a mouse to point and click, the image is created from simple instructions in text. It turns out that, this way of drawing allow you to draw images impossible (or very tedious) to draw by hand.

It is also a fun way to get introduced to the basic concepts of computer programming.

Paper

To say that we want to draw a line that is 100 units long we would write.

L100

This translates to L for line with length 100.

But where on the paper is this line drawn?

Think of the paper as having two directions; horizontal and vertical.

A position on the paper can be described as two numbers, where first represent horizontal (left/right) position and vertical (up/down) position. Horizontal position is often called the x position and the vertical position the y position.

XY diagram

Center of the paper is e.g. at x = 0 and y = 0. Which often is written as.

(x,y) = (0,0)

Or just

(0,0)

This zero position is also called origo if you are a math guy.

In DoDraw we are controlling the pen to different locations by moving it on the paper and draw lines between different positions through simple instructions.

So the L100 command above actually draws a line from position (0,0) to (100,0) i.e. a horizontal line.

So, why does the line command draw in horizontal direction?

The pen in DoDraw does not only have a position, but also a direction. The direction of the pen is described as a single number which represent the angle from 0 to 360 degrees. Degrees are usually written using symbol °.

Pen angles

Note that angle number "wraps" when we are rotating a whole turn. This means that 0° is the same as 360°, 1° is the same as 361° and so on.

Pen direction can be any value from 0° to 360°.

pen direction

Pen commands

We draw images by describing how to move the pen and then draw from the current position of the pen in the direction of the pen.

To draw a square you can write the following.

L100 T90 L100 T90 L100 T90 L100 T90

This translates to:

square illustration

  1. Draw line of length 100 in initial pen direction which is 0° (pointing right)
  2. Turn pen direction by 90° (left turn) so that pen angle will end up at 90° (up)
  3. Draw line of length 100 in current pen direction (up)
  4. Turn pen direction by 90° to angle 180° (pointing left)
  5. Draw line of length 100 (left)
  6. Turn pen direction by 90° to angle 270° (pointing down)
  7. Draw line of length 100 (down)
  8. Turn pen direction by 90° to angle 360° (which is the same as 0°)

If we want to draw from another starting position than (0,0) we can move the pen before we start to draw.

This is done by the M (move) command. It works like (l)ine, except no line is drawn when pen is moved. Pen is moving above the paper.

You can move the pen to any location on the paper by combining (m)ove and (t)urn commands.

What will be drawn here?

T45 L100 T90 L100 T90 M50 L100 T90 L100 T45

You can see the resulting drawing here.

In the first square example above we repeated the same instruction for each side of the square.

(L100 T90) (L100 T90) (L100 T90) (L100 T90)

What if we could just give an instruction to repeat the same operation for each side of the square.

This can easily be done using the R (repeat) instruction. The square above can be written shorter as.

R4( L100 T90 )

Here we see that the instructions that shall be repeated are wrapped between parentheses.

The number after R command, tell how many times the wrapped instructions should be repeated.

So far we have used the following instructions:

Using only these four commands you could draw just about anything.

a sample drawing

R36( L100 T110 )

There are actually 8 more commands in total in DoDraw, but they are not all needed necessary to have quite some fun drawing.

More colourful commands

Pen is initially filled by black paint and draw using line thickness of 1.

Using two simple commands it is easy to choose between different pen colors and line widths.

Color is specified by a number shown in the following table

Line width is also specified by a single number

A thick red line is written as follows

P3 W10 L100

There are actually two additional similar instructions which are described later.

Even if anything can be drawn just from lines there is an additional instruction to draw circles.

A circle is drawn at current pen position. Pen position or direction is not changed when a circle is drawn.

The circle size is determined by a single number which is the distance from center of circle to its border, called circle radius.

If we color the previous square in green and also want to add red dots in the corners we could write.

R4( P12 F3 C10 L100 T90 )

Other useful instructions

After playing around with DoDraw for a while your drawings tend to get more interesting and complex.

There are a few additional commands that makes life easier in more advanced drawings.

The first is similar to R (repeat) instruction, which is able to repeat a group of commands.

The G (group) command also allow a group of instructions to be repeated, but from any point of your drawing.

Let's say you want to draw four squares with different colors at each corner of a larger square.

               P3 L100 T90 L100 T90 L100 T90 L100 T90
     M200      P4 L100 T90 L100 T90 L100 T90 L100 T90
T90  M200 T270 P5 L100 T90 L100 T90 L100 T90 L100 T90
T180 M200 T180 P6 L100 T90 L100 T90 L100 T90 L100 T90

The instructions for the square is the same, but the colouring and pen movement before each square is different.

By using (r)epeat we can simplify a bit

               P3 R4( L100 T90 )
     M200      P4 R4( L100 T90 )
T90  M200 T270 P5 R4( L100 T90 )
T180 M200 T180 P6 R4( L100 T90 )

We cant use (r)epeat to simplify this drawing more. Let's make use of (g)roup instead.

G groups a number of instructions and associate a number to the group, but does not perform the grouped instructions directly.

Instead the group of commands can be included at any (later) point of the drawing.

The example above can be simplified as follows.

G1( R4( L100 T90 ) )
               P3 G1
     M200      P4 G1
T90  M200 T270 P5 G1
T180 M200 T180 P6 G1

By using (r)epeat and (g)roup we don't have to repeat ourselves unnecessarily.

When we are starting to do more involved drawings it may be useful to annotate drawings with some notes to describe meaning of the code.

Text lines starting with # are just ignored and so you can write anything on them.

# this whole line is just a note

You may also include notes within a line of commands, if text is enclosed by parentheses.

If we would describe a square drawing we could write as follows.

# draw a square which does not change pen state
L100 T90 L100 T90 L100 T90 L100 #(rotate to original pen direction) T90 )

In the last example above we made sure that pen return to the same direction and location after square is drawn. This is often needed and not always as easy as in the example of a square drawing.

Therefore there is an additional instruction to return the pen (b)ack to original state at (0,0) position.

We could use this in previous example if we want.

# draw a square which does not change pen state
L100 T90 L100 T90 L100 T90 L100 B

Complex drawings may be useful to split up in smaller parts and draw them separately. The parts can then be combined as a large drawing.

One useful command when working on different parts of a drawing is the H (halt) command.

Halt command will stop drawing at the location of the halt command.

Halt inserted to the square example above will only draw the first square.

G1( R4( L100 T90 ) )
               P3 G1
H
     M200      P4 G1
T90  M200 T270 P5 G1
T180 M200 T180 P6 G1

Line fill and scale

We have already used fill command to fill circles. Fill will actually work for lines as well.

If you want to fill a square you can just set fill before drawing the square

F8 R4(L10 T90)

To remove fill you need to set fill to transparent i.e. color number 0

F8 R4(L10 T90)
M20 
F0 R4(L10 T90)

Fill works for any shape of lines as long as the lines are connected to each other i.e. lines are drawn after each other.

In the following example the pen color and fill is changed between line commands which splits the line in two different shapes.

P1 F8 L5 T90 L10 T270 L5 P0 F3 L5 T90 L10 T270 L5

Another useful command is (s)cale. It changes the scale of movement, lines and circles drawn.

Scale is set to 100% from start. The scale can be changed by a single number which change the scale of following drawing and movement.

In the following example a square is defined as a group. The square is first drawn whith default scale of 100%. Then scale is changed by 50% to 50% which makes drawing of next square half the size. Finally scale is increased again by 200% to the original 100% again. The third square have the same size as the first.

G1(R4(L10 T90))
G1
M20 S50 G1
S200 M15 G1

Resolution and quality

All numbers in DoDraw language is using whole numbers (no decimals). This means there may be some rounding of numbers to closest whole number during movement and drawing. If you notice that drawings become inaccurate you may use larger numbers to improve accuracy. You can also modify line width if you want to keep the line width after increasing the size of the whole drawing.

In general the whole drawing will be shown even if it's small or large. But to get best results you should try to make the size of the drawing somewhere between 100 and 1000 units.

Challenges

If you want some inpiration when starting out we have listed a few challenges to try.

Basic shapes

  1. Draw a square
  2. Draw a triangle
  3. Draw a circle
  4. Draw a circle without using (L)ine instead of (C)ircle command
  5. Draw a rectangle where width is twice the height
  6. Draw a 5 pointed star (pentagram)
  7. Draw a 6 pointed star (hexagram)
  8. Draw an octagon
  9. Draw a 3D cube

Combination of shapes

  1. Draw an 5 pointed star enclosed by a circle
  2. Draw 4 partly overlapping circles (see Car Logo)
  3. Draw 5 partly overlapping circles like the olympic rings
  4. Draw your initials or full name

Line and fill coloring

  1. Draw a smiley face ☺
  2. Draw a rainbow of 7 different colors
  3. Draw a landscape with grass, mountains, sun and clouds

Objects

  1. Draw a famous logo
  2. Draw your own design of logo
  3. Draw a flower
  4. Draw a car
  5. Draw a house
  6. Draw a bridge over a river
  7. Draw an ant
  8. Draw an caterpillar

Samples

Below are few finished samples to further trigger your imagination

Comments and feedback

DoDraw is developed by us at Uniply.

Please don't hesitate to contact us if you have any feedback, suggestions or comments ...

Resources