Your First Program

A C++ program is text. A second program, the compiler, reads that text and turns it into something the computer can run. This lesson shows what the text is made of, how to read it, and what happens when the compiler does not accept it.

You need no experience. Everything here runs in your browser.

A program is a list of statements

Here is a complete program. It draws a robot's head.

#include "scimigo.h"
using namespace scimigo;

int main() {
    canvas(600, 400);
    rectangle(200, 100, 200, 180, "orange");
    circle(260, 170, 15, "green");
    circle(340, 170, 15, "green");
}

Look at the four lines between the braces { and }. Each one is a statement: one instruction. Each statement ends with a semicolon ;.

The computer carries out the statements in order, one at a time, from the top. First it makes a canvas. Then it draws an orange rectangle. Then one green circle, then another.

Order matters, because a later shape is drawn over an earlier one. If the two circle statements came before the rectangle statement, the rectangle would cover both eyes and you would see an orange block.

The lines above int main() { are not statements of yours. They are explained in The frame around your statements. For now, read only what is between the braces.

One call, taken apart

Each of those statements is a call: it asks for a job to be done. Here is one of them with its parts named.

circle(260, 170, 15, "green");

The values have a fixed order, and each position has a meaning. For circle the order is: how far right the centre is, how far down the centre is, the radius, the colour. Swap two values and you get a different circle, or no program at all.

This course gives you four drawing jobs.

These four belong to this course. They are not part of C++ itself. The C++ you learn around them (statements, values, and everything in later modules) is the same C++ used everywhere.

Where is (x, y)?

Every drawing call takes a position as two numbers, x and then y.

• x is the distance from the left edge. A larger x is further right.
• y is the distance from the top edge. A larger y is further down.

The point (0, 0) is the top-left corner. On a canvas 600 wide and 400 high, the bottom-right corner is (600, 400).

This is not the way graphs are drawn in a mathematics class, where y grows upward. On a screen, y grows downward. Nearly every graphics system works this way.

#include "scimigo.h"
using namespace scimigo;

int main() {
    canvas(600, 400);
    circle(100, 100, 20, "red");
    text(130, 108, "(100, 100)", 18);
    circle(500, 100, 20, "blue");
    text(380, 108, "(500, 100)", 18);
    circle(100, 300, 20, "green");
    text(130, 308, "(100, 300)", 18);
}

The red and blue circles have the same y, so they are level. The red and green circles have the same x, so one is directly below the other. The green one has the larger y, and it is the lower one.

Numbers, and text in quotes

The values in a call are of two kinds so far.

• A number is written as digits: 260, 15.
• Text is written between double quotes: "green", "My Robot".

The quotes are how the compiler tells the two apart, and they change the meaning.

A call that expects a number will not accept text in that position, and a call that expects text will not accept a number. The compiler checks this before the program runs.

Printing with std::cout

A program can also produce text. The statement below sends five characters to the output panel.

#include <iostream>

int main() {
    std::cout << "Hello";
}

Hello

Read std::cout << "Hello"; as "send Hello to the output". std::cout is the output, and << points in the direction the text travels.

A second statement continues exactly where the first one stopped. Nothing is added between them: no space and no new line.

#include <iostream>

int main() {
    std::cout << "Hello";
    std::cout << "World";
}

HelloWorld

To end a line, put \n inside the quotes. Those two characters together mean "new line". They are not printed as a backslash and an n.

#include <iostream>

int main() {
    std::cout << "Hello\n";
    std::cout << "World\n";
}

Hello
World

The frame around your statements

Every program in this lesson has the same lines around its statements. Here they are, with the one statement you already understand.

#include <iostream>

int main() {
    std::cout << "Hello\n";
}

Hello

• #include <iostream> makes std::cout available. A program that draws has #include "scimigo.h" as well, which makes the four drawing calls available, followed by using namespace scimigo;. Module 3 says more about #include.
• int main() { and the final } mark where the program starts and ends. Your statements go between them. Module 6 explains every word of that line.

You can also write notes for yourself. Everything from // to the end of a line is a comment, which the compiler skips.

circle(260, 170, 15, "green");   // the left eye

Until those modules, treat the frame as fixed. Type your statements between the braces and leave the rest as it is.

When the compiler says no

Before any statement runs, the compiler reads the whole program. If it finds one thing it cannot accept, anywhere, it stops and reports it. Then nothing runs: not the statements after the mistake, and not the ones before it either.

This program has one mistake, in its last statement.

#include "scimigo.h"
using namespace scimigo;

int main() {
    canvas(600, 400);
    circle(300, 200, 80, "red");
    circle(300, 200, 40, "white")
}

The semicolon after the last call is missing. The compiler answers with a message like this one.

your_program.cpp:7:34: error: expected ';' after expression

Read it in three parts.

• your_program.cpp:7:34 is the place: line 7, and 34 characters along that line.
• error means the program was not accepted.
• expected ';' after expression is what the compiler wanted to find there.

No red circle appears, although the statement that draws it is correct. The program as a whole was rejected.

Three mistakes account for most of the messages you will see in your first week.

A compiler message is information. It names a line. Go to that line, read the message again, and look at that line and the one before it.