Getting Started with Rendering

What would life be without art

So far our programs have only produced text. CSP also has a rendering module that lets a program draw shapes on a canvas, which is the first step toward making animations and games.

Every runnable example in these lessons is complete on its own. Each one starts with its own import and creates its own variables, so you can run any of them without running the others first.

Importing the Module

The drawing functions are not available by default. To turn them on, we call IMPORT_RENDERING_MODULE once, at the top of the program.

Module

A reusable self contained collection of procedures dedicated to a specific functionality

A collection of procedures imported from outside the current scope

IMPORT_RENDERING_MODULE()

When this runs, a canvas appears. The canvas is always 400 pixels wide and 400 pixels tall, and everything we draw goes onto it.

The drawing functions only exist after the import. Calling DRAW_RECT without IMPORT_RENDERING_MODULE() above it is an error.

Coordinates

To place something on the canvas, we need a way to say where. We use two numbers, x and y. The x value is how far from the left edge, and the y value is how far from the top edge. Both are measured in pixels.

The origin, (0, 0), is the top-left corner of the canvas. This is different from the graphs in a math class. In CSP, x increases as we go right, and y increases as we go down.

Remember that a bigger y means lower on the screen. This feels backwards at first, but it matters in every lesson that follows.

Your First Drawing

Let us draw a rectangle. DRAW_RECT takes five arguments: the x and y of its top-left corner, its width, its height, and its color.

IMPORT_RENDERING_MODULE()

DRAW_RECT(50, 50, 100, 80, "#453465")
CLOCK_TICK(60)

This draws a purple rectangle that is 100 pixels wide and 80 pixels tall, with its top-left corner at (50, 50).

The color is a string that starts with #. We will look at colors more closely in the next lesson. For now, copy the one above.

Why CLOCK_TICK?

You may be wondering about the last line. Try running the program without CLOCK_TICK(60). Nothing appears.

The rendering module does not draw straight onto the visible canvas. Instead, every DRAW_ function draws onto a hidden copy. Nothing is shown until we call CLOCK_TICK, which copies the hidden drawing onto the screen.

You can think of it as painting behind a curtain. We paint as much as we like, and then CLOCK_TICK opens the curtain. Because the audience only ever sees finished pictures, the drawing never flickers halfway through.

The number we give to CLOCK_TICK is a number of frames per second. We will see what that does in the lesson on animation. For now, 60 is a good value to use.

Layering

Shapes are drawn in the order we write them, and later shapes are drawn on top of earlier ones.

IMPORT_RENDERING_MODULE()

DRAW_RECT(50, 50, 150, 150, "#453465")
DRAW_RECT(120, 120, 150, 150, "#8a6bbf")
CLOCK_TICK(60)

The lighter square covers part of the darker one because it was drawn second. If we swap the two lines, the darker square ends up on top.

Practice

• Draw four rectangles of size 50 by 50, one in each corner of the canvas. The bottom-right one starts at (350, 350).
• Draw a rectangle that fills the whole canvas, and then a smaller one in the middle.
• Try drawing a rectangle that goes past the edge, such as one at (350, 350) with a width of 100. What do you see?

Next: Shapes, Lines, and Text