8 Fixing code you didn’t write
This time you won’t write the program from scratch. You get one that someone else already wrote, where the five Olympic rings don’t quite link up, and your job is to spot why and repair it, until each ring weaves over one neighbor and under the other the way it does on the real symbol.
So far, every program in this course started with you (or your AI) writing the code. This exercise turns the situation around: you get a program that someone else wrote. It almost works, but not quite, and your job is to find the problem and fix it.
Don’t underestimate this exercise. Professional programmers spend most of their time exactly like this: reading code they didn’t write, understanding it, and carefully changing it. Whoever wrote the original, a colleague, an AI, or you-three-weeks-ago, the skill is the same.
8.1 AI tutor
Reading a program somebody else wrote is a skill of its own, and asking questions about it is part of that skill. The AI tutor of this part explains what a piece of the given code does, without handing you the repaired program.
Hints and questions instead of finished programs, in English or German.
8.2 The puzzle: weaving the rings
In the Olympic Rings exercise you drew five overlapping rings and ignored how they overlap. Now look closely at the real symbol: the rings are woven together. Follow the blue ring with your eyes: where it crosses the yellow ring, it passes over it in one crossing and under it in the other.
Here’s the catch: you can’t draw that with five full circles. The computer paints shapes in order, so a later circle always lies completely on top of an earlier one. A full circle can be over or under a neighbor, but never both at once.
The trick is to stop thinking of a ring as one shape. Split it into arcs: draw most of the ring early, and paint the small missing piece after the neighbor ring, right where it has to pass over. The eye sees a woven ring; the code sees a few arcs in a well-chosen order. The layering rule you know, later statements paint over earlier ones, is exactly what makes this work.
8.3 Read before you change
The starter code of the exercise already solves most of this puzzle. Before you change anything, spend time understanding it:
- Run the program and put its output next to the target image. Compare crossing by crossing: where do the rings weave correctly, and where not? Finding the difference between “what it should do” and “what it does” is always the first step of fixing a program.
- Read the code from top to bottom. You know every command in it, including
arcandangleMode(DEGREES)from the smiley exercise. The comments tell you which statement belongs to which ring. - Study how the finished rings do it. The blue and black rings are already woven correctly, and they show the pattern: a ring appears several times in the code, as arcs, with other rings drawn in between. Work out which piece of the ring each arc paints. The angle diagram from the arcs chapter helps: 0° points right, and angles grow clockwise.
Reading code this way takes patience, and that’s normal. Understanding a program you didn’t write is slower than writing your own, even for professionals.
8.4 Fix the red ring
The broken part is the red ring: it’s still drawn as one full circle, so it can’t weave with its neighbor. That’s your repair job:
- Look at the target image and decide where the red ring must pass over and where it must pass under the ring it crosses.
- Replace the red
circlewith arcs, following the same pattern that the blue and black rings use. Think about the angles each arc needs, and about where in the code each arc has to stand: before or after the neighbor it crosses. - Change a little, run, compare with the image, and repeat. If a change makes things worse,
Ctrl+Ztakes you back.
Be careful to change only what’s broken. The other four rings are correct, and a fix that breaks something else is not a fix. Comparing the picture with the target after every run is your safety net.
When the five rings finally weave like the original, take a moment: you’ve just read a program you didn’t write, understood a genuinely tricky idea in it, and repaired it without breaking the rest.
8.5 Check your understanding
When you’ve finished the exercise, take the short quiz below. You answer five questions about this chapter in your own words, and an AI reads your answers and tells you what you already understand and what you should read again. The quiz is anonymous, and answering in German is fine too.