An algorithm exists apart from any way of writing it down, and the same steps can be drawn as a diagram, written as structured text, or snapped together as blocks. What stays constant across these forms is the skeleton described in 0002.f: every algorithm is built from sequencing, selection, and iteration. A representation is simply a visual language for those three structures, and each one has its own way of showing a step, a decision, and a repetition. This section takes three common representations in turn, flowcharts, pseudocode, and block-based code, asking of each how it shows the three structures, and then puts them side by side to show how translating from one to another works.

Flowcharts#

A flowchart draws an algorithm as shapes joined by arrows, and each shape has a fixed meaning. Ovals mark the start and the end. Rectangles mark processes, the ordinary steps that do something, such as "Add 1 to count." Diamonds mark decisions, questions such as "Above 30?" whose answers send control down different paths, and arrows show the flow of control from one shape to the next. Sequencing is therefore a chain of rectangles joined by arrows. Selection is a diamond with two outgoing arrows, and those arrows must be labeled, usually "Yes" and "No," because a reader can't otherwise tell which path goes with which answer. An if/else becomes a diamond with two labeled arrows, each leading to its own rectangle. Because the shapes carry meaning, changing a shape changes the algorithm: redrawing a decision as a rectangle turns a question with branches into a plain step, and the chart no longer shows any choice at that point.

Iteration has no shape of its own. A loop appears as an arrow that returns to an earlier point in the chart, usually to a decision that determines whether the repetition continues. Consider a chart that runs Start → "Set count to 0" → "Count < 5?" and then, on Yes, "Print count" → "Add 1 to count" → back to the decision, while No leads to End. The returning arrow is what makes this a loop, and the order of the rectangles along it shows that the count is printed before it is increased. The same chart without the returning arrow would describe a single decision, an if.

Where the decision sits along the loop matters. If the decision comes before the repeated steps, as in the counting chart, the steps can run zero times, since the first answer might be No. If the decision comes after them, as in Start → "Read input" → "Process input" → "More input?", with Yes returning to "Read input," then the steps always run at least once before the first test. Where the returning arrow lands matters just as much. A chart whose Yes arrow from "Count < 10?" returns to "Set count to 0" resets the count on every pass, so the condition never becomes false and the loop runs forever. The fix is to send the arrow back to the decision itself, and to make sure some step on the loop changes the count. A loop whose No arrow from "Password correct?" returns to "Enter password" repeats until the condition is met, with no fixed number of tries, which is the behavior of a while loop.

Pseudocode#

Flowcharts make the flow of control visible, but they grow unwieldy for anything long, and most algorithms are written down as text. Pseudocode describes an algorithm in a structured, language-independent form. It is precise enough to trace, yet it doesn't belong to any one programming language, which makes it a good way to plan an algorithm before choosing a language and to share a plan with people who use different languages. Like any notation, a given pseudocode has conventions, and this guide uses the typed notation introduced under "From Python to typed pseudocode." In it, indentation defines blocks, just as in Python: the lines indented under an if or a loop header belong to it, and the first line back at the outer level is outside it. Comments are written between /* and */ and may span several lines.

01 int x = 4
02 if (x > 3)
03   output("big")
04   x = 0
05 output(x)

Lines 03 and 04 belong to the if block, because both are indented under it, and line 05 runs whatever the condition. This outputs >>> "big" and then >>> 0.

In pseudocode, the three structures are written with keywords. Sequencing is the order of the lines. Selection uses if (...), elseif (...), and else, with the condition in parentheses and no colon. Iteration uses while (x < 10), which repeats as long as its condition is true, and the counting loop for (int i = 1; i < 10; i = i + 1), whose header states where the counter starts, the condition for continuing, and the update after each pass. Python's for number in range(3): becomes for (int number = 0; number < 3; number = number + 1), since range(3) starts at 0 and stops before 3. Logical operators are written in capitals, as AND, OR, and NOT(...).

A for loop is a compact way of writing a particular while loop, and seeing the connection helps with translation in both directions. To rewrite a for loop as a while loop, move its first part above the loop, keep its condition as the while condition, and move its update to the end of the body:

01 for (int i = 5; i > 0; i = i - 1)
02   output(i)

01 int i = 5
02 while (i > 0)
03   output(i)
04   i = i - 1

Both output 5, 4, 3, 2, and 1. Putting the update at the end of the body matters, since moving it above output(i) would print 4 down to 0 instead.

Block-based code#

Pseudocode shows structure with indentation, and block-based code shows the same structure with shape. In a block-based environment such as Scratch, a program is built from interlocking blocks, and blocks that control others, such as "repeat 4" or "if," are shaped to hold other blocks inside them. A block's position inside another shows what that block controls, so nesting in blocks corresponds to indentation in text. A "turn" block nested inside a "repeat 4" block runs four times, and the same block attached below the "repeat 4" runs once, after the repetition is finished.¹ A program meant to move and turn four times, which instead moves four times and then turns once, has its turn block in the wrong place, and the fix is to move it inside the repeat block. Block programs can contain typed text, as in a C-shaped block headed for (int i = 0; i < 3; i = i + 1), and reading them means tracing what is nested inside what.

Seeing this correspondence helps students who move from blocks to text, because the two use the same control structures. A nested loop shows it clearly:

01 for (int i = 0; i < 2; i = i + 1)
02   for (int j = 0; j < 3; j = j + 1)
03     move()
04   beep()

In blocks, this is a "repeat 2" block containing a "repeat 3" block, with move() inside the inner block and beep() below the inner block but still inside the outer one. So move() runs six times and beep() runs twice.

Translating between representations#

Since all three forms express the same three structures, translating an algorithm from one to another means matching each sequence, decision, and loop in one form to the corresponding structure in the other. It isn't a word-for-word or line-for-line conversion.

Structure	Flowchart	Pseudocode	Blocks
Sequencing	Rectangles joined by arrows	Lines in order at the same indentation	Blocks stacked one below another
Selection	A diamond with labeled branches	if, elseif, else	An "if" block holding other blocks
Iteration	An arrow returning to an earlier decision	while, for	A "repeat" block holding other blocks

Two details make translations reliable. First, each while condition and each if condition becomes one diamond, so a while loop that contains an if needs two diamonds. Second, steps after a loop in text are those after the decision's exit branch in a flowchart. A chart that goes Start → s = 0 → "s < 6?", with Yes leading to s = s + 2 and back, and No leading to Output s → End, matches a while (s < 6) loop whose body is s = s + 2, followed by an unindented output(s). Putting the output inside the loop body would print on every pass, which the chart doesn't show.

Finally, a translation is faithful to its source, including its mistakes. If a flowchart's algorithm is wrong, a correct translation into pseudocode will produce the same wrong answer, so when translated code misbehaves, the original algorithm is one of the places to look. Representations differ in how they look, while the algorithm, and any error in it, is the same in each. The next section looks more closely at the smallest pieces inside those structures: the expressions in each condition and assignment.

• flowchart: a diagram of an algorithm, using shapes for steps and arrows for the flow of control
• oval: a flowchart's start or end
• rectangle: a flowchart's process step
• diamond: a flowchart's decision, with labeled branches
• pseudocode: a structured, language-independent description of an algorithm
• block-based code: a program built from interlocking blocks, in which nesting shows what each block controls

Practice: practice questions for 0002.i

1. LAI 516, Media: Scratch: constructionist design, low floor, events, and blocks. ↩