Small Steps II — Making Things

Drawing with coordinates

Draw with coordinates.

What you will learn

Coordinates are numbers describing a screen position. The top-left corner is (0, 0); x increases to the right and y increases downwards.

Try it

void small_main()
{
    Window window;
    window.open(640, 480);

    window.clear(White);
    window.fill_circle(320, 240, 80, Yellow);
    window.draw_circle(290, 220, 10, Black);
    window.draw_circle(350, 220, 10, Black);
    window.draw_line(285, 275, 355, 275, Black);
    window.show();

    while (window.is_open())
        window.show();
}

Clear clears the background. fill_circle(320, 240, 80, Yellow) fills a yellow circle centered at (320, 240) with radius 80. draw_circle draws only its outline.

draw_line's four numbers are the starting x and y and the ending x and y. Later drawings cover earlier ones. When you see the yellow face, try changing a circle's position.

Braces can be omitted for a single statement, as with while at the end of the example. You may use braces when writing it yourself.

Exercise

Draw a traffic light with three vertically arranged Red, Yellow, and Green circles inside a black or Gray rectangle.

void small_main()
{
    Window window;
    window.open(300, 500);

    window.clear(White);

    // Draw a traffic light here.

    window.show();
    while (window.is_open())
        window.show();
}

Hint

First draw the body with fill_rectangle, then use fill_circle three times.

void small_main()
{
    Window window;
    window.open(300, 500);

    window.clear(White);
    window.fill_rectangle(75, 30, 150, 420, Gray);
    window.fill_circle(150, 110, 50, Red);
    window.fill_circle(150, 240, 50, Yellow);
    window.fill_circle(150, 370, 50, Green);
    window.show();

    while (window.is_open())
        window.show();
}