Drawing Many Things

A single object can rarely outshine the masses

Real programs rarely draw only one shape. A game might have dozens of platforms, coins, and enemies. Writing a DRAW_RECT line for each would be slow and hard to change. Lists and loops let us describe many shapes as data, and draw them all with a few lines of code.

Drawing with a Loop

Suppose we want a row of ten squares. Using REPEAT TIMES and a counter, we only need to write the drawing code once.

IMPORT_RENDERING_MODULE()

i ← 0

REPEAT 10 TIMES {
    DRAW_RECT(10 + i * 38, 180, 30, 30, "#453465")
    i ← i + 1
}

CLOCK_TICK(60)

On each pass i goes up by one, so each square lands 38 pixels to the right of the last. Changing the 10 to a 30 gives a row of thirty squares, with no extra code.

Storing Shapes in a List

When shapes are not evenly spaced, we describe each one in a list. A good way to do this is to make a list of lists, where each inner list holds the numbers for one shape.

rects ← [[20, 300, 100, 20], [150, 240, 100, 20], [280, 180, 100, 20]]

Each inner list is [x, y, width, height]. To draw them all, we use a FOR EACH loop. Each time through the loop, r is one of the inner lists, and we read its parts by index. Remember that indices start at 1.

IMPORT_RENDERING_MODULE()

rects ← [[20, 300, 100, 20], [150, 240, 100, 20], [280, 180, 100, 20]]

FOR EACH r IN rects {
    DRAW_RECT(r[1], r[2], r[3], r[4], "#453465")
}

CLOCK_TICK(60)

To add another shape, we only add another inner list. The drawing code does not change.

It is easy to forget what each number in the inner lists means. A comment above the list, such as // [x, y, width, height], saves a lot of confusion later.

Parallel Lists

Another approach is to use one list for each property, and keep them lined up so that index 1 of every list describes the first shape.

IMPORT_RENDERING_MODULE()

starX ← [50, 120, 200, 310, 360]
starY ← [40, 90, 30, 70, 140]

i ← 1
REPEAT LENGTH(starX) TIMES {
    DRAW_CIRCLE(starX[i], starY[i], 4, "#ffd84d")
    i ← i + 1
}

CLOCK_TICK(60)

Here we need the index i, because we have to look in two lists at once. LENGTH tells the loop how many times to run, so adding a star to both lists is all it takes.

Either style works. A list of lists keeps everything about one shape together. Parallel lists are simpler when each property is a single number.

Random Shapes

The RANDOM function picks a random whole number. RANDOM(1, 400) gives a number between 1 and 400, and both ends are allowed. Both arguments must be whole numbers, with the first no bigger than the second.

We can use it to fill a list with a random star field.

IMPORT_RENDERING_MODULE()

starX ← []
starY ← []

REPEAT 40 TIMES {
    APPEND(starX, RANDOM(1, 400))
    APPEND(starY, RANDOM(1, 400))
}

i ← 1
REPEAT UNTIL false {
    CLEAR_SCREEN()
    DRAW_RECT(0, 0, 400, 400, "#1d1533")

    i ← 1
    REPEAT LENGTH(starX) TIMES {
        DRAW_CIRCLE(starX[i], starY[i], 2, "#ffffff")
        i ← i + 1
    }

    CLOCK_TICK(60)
}

Notice that the random positions are made once, before the animation loop. If we called RANDOM inside the loop, the stars would jump to new places every frame and flicker. The positions are state, which means data that must be remembered from frame to frame.

Moving Many Things

Since the positions are in a list, we can move every shape by changing the list. We assign to an index, as we learned in the lists chapter.

IMPORT_RENDERING_MODULE()

starX ← []
starY ← []

REPEAT 40 TIMES {
    APPEND(starX, RANDOM(1, 400))
    APPEND(starY, RANDOM(1, 400))
}

i ← 1

REPEAT UNTIL false {
    // Update every star
    i ← 1
    REPEAT LENGTH(starY) TIMES {
        starY[i] ← starY[i] + 1
        IF (starY[i] > 400) {
            starY[i] ← 0
        }
        i ← i + 1
    }

    // Draw every star
    CLEAR_SCREEN()
    DRAW_RECT(0, 0, 400, 400, "#1d1533")
    i ← 1
    REPEAT LENGTH(starX) TIMES {
        DRAW_CIRCLE(starX[i], starY[i], 2, "#ffffff")
        i ← i + 1
    }

    CLOCK_TICK(60)
}

Each frame has two parts. First we update the data by moving the stars, and when one falls off the bottom, we wrap it back to the top. Then we draw the data. Keeping those two parts separate keeps programs easy to read, and every game in the next lessons is built this way.

Practice

• Make some stars fall faster than others by adding a list of speeds.
• Draw a bar chart. Store some numbers in a list, and draw a rectangle for each, with the height set by the number.
• Make a row of circles that blink one after the other, using a frame counter and MOD.

Next: Keyboard Input