Shapes, Lines, and Text

From the simplest things grow the most magnificent creations

The rendering module can draw more than rectangles. In this lesson we meet the rest of the drawing functions, and we learn how colors work.

Rectangles

We already know DRAW_RECT. Here is its shape, written out. This block is only a reference, so it cannot be run.

DRAW_RECT(x, y, width, height, color)

The x and y are the top-left corner. The rectangle is always filled in. There is no outline option.

Circles

DRAW_CIRCLE takes the x and y of the circle’s center, then its radius, and then its color.

DRAW_CIRCLE(x, y, radius, color)

IMPORT_RENDERING_MODULE()

DRAW_CIRCLE(200, 200, 50, "#453465")
CLOCK_TICK(60)

This draws a circle with its center in the middle of the canvas. The radius is the distance from the center to the edge, so this circle is 100 pixels across.

A rectangle is positioned by its top-left corner, but a circle is positioned by its center. This is an easy thing to mix up.

The radius cannot be negative. A radius of 0 is allowed, and it draws nothing.

Lines

DRAW_LINE draws a line from one point to another. It takes the x and y of the start, the x and y of the end, and then a color.

DRAW_LINE(x1, y1, x2, y2, color)

IMPORT_RENDERING_MODULE()

DRAW_LINE(50, 50, 350, 350, "#453465")
DRAW_LINE(50, 350, 350, 50, "#453465")
CLOCK_TICK(60)

This draws an X across the canvas. Lines are always one pixel thick. When we want something thicker, we can draw a rectangle instead.

Text

DRAW_TEXT writes text onto the canvas. It takes the text, the x and y of the text’s top-left corner, the size of the text in pixels, and a color.

DRAW_TEXT(text, x, y, size, color)

IMPORT_RENDERING_MODULE()

DRAW_TEXT("Hello, canvas!", 100, 180, 24, "#453465")
CLOCK_TICK(60)

The text can be a string or a number. This is handy for showing something like a score.

IMPORT_RENDERING_MODULE()

score ← 120
DRAW_TEXT(score, 10, 10, 20, "#453465")
CLOCK_TICK(60)

DRAW_TEXT is different from DISPLAY. DISPLAY writes to the output of the program. DRAW_TEXT writes onto the canvas. Booleans and lists cannot be drawn as text.

Colors

Every drawing function ends with a color. A color is a string made of a # followed by exactly six characters, like "#453465".

Those six characters are three pairs. The first pair is how much red is in the color, the second is how much green, and the third is how much blue. Each pair is a number from 00 (none) to ff (the most). This kind of color code is called a hex color.

Hex numbers count with sixteen digits instead of ten. After 0 to 9 they continue with a, b, c, d, e, and f. That is why ff is the biggest two-digit value.

Mixing the three gives other colors. Full red plus full green makes yellow. Equal amounts of all three make a shade of gray, so "#808080" is a medium gray.

The color must be exactly # plus six hex digits. Short codes like "#fff", names like "red", and numbers are all errors.

Because a color is just a string, we can store it in a variable and reuse it.

IMPORT_RENDERING_MODULE()

sky ← "#bfe3ff"
grass ← "#6fbf5f"

DRAW_RECT(0, 0, 400, 400, sky)
DRAW_RECT(0, 300, 400, 100, grass)
CLOCK_TICK(60)

Putting It Together

Here is a small scene that uses everything from this lesson. Remember that later shapes are drawn on top of earlier ones, so we draw the background first.

IMPORT_RENDERING_MODULE()

// Sky and ground
DRAW_RECT(0, 0, 400, 400, "#bfe3ff")
DRAW_RECT(0, 300, 400, 100, "#6fbf5f")

// Sun
DRAW_CIRCLE(330, 70, 35, "#ffd84d")

// House
DRAW_RECT(120, 210, 120, 90, "#b5654a")
DRAW_RECT(165, 250, 30, 50, "#453465")
DRAW_LINE(110, 210, 180, 150, "#453465")
DRAW_LINE(180, 150, 250, 210, "#453465")

// Title
DRAW_TEXT("Home", 10, 10, 24, "#453465")

CLOCK_TICK(60)

Practice

• Add a second house, or a tree made from a rectangle and a circle.
• Draw a smiley face using circles for the head and eyes and a line for the mouth.
• Change the sky to a night sky, and add stars made from small circles.

Next: Animation