42 Parallel arrays: the starting eleven
A local TV station hires you. Before the match, they want to show the starting lineup on a drawn soccer field. This is the first real job for arrays. Eleven players means eleven numbers, eleven first names, eleven last names, and nobody wants 33 variables. Three arrays carry all of it, and one loop paints the whole list. Along the way, the soccer field itself brings back an old friend: the part 1 practice project drew this very field with a magic recipe, and you now own every word of it.
42.1 AI tutor
The field has many small parts, and real-world measurements make every number mean something. If your penalty box sits in the wrong spot or your names refuse to line up, describe to the tutor what you measured and what the canvas shows.
Hints and questions instead of finished programs, in English or German.
42.2 Three arrays, one team
The starter code hands you the team as data:
const playerNumbers: number[] = [1, 17, 22, 23, 20, 6, 15, 5, 11, 7, 9];
const firstNames: string[] = ["Thibaut", "Lucas", "Antonio", /* ... */];
const lastNames: string[] = ["Courtois", "Vázquez", "Rüdiger", /* ... */];number[] is the second array type promised earlier, a row of numbers, here the shirt numbers. And reading an element works exactly like reading a character of a string, with square brackets and a zero-based index: firstNames[1] is "Lucas", playerNumbers[1] is 17.
The three arrays are a team in a second sense: the same index belongs to the same player. Index 1 means Lucas Vázquez with shirt number 17; three arrays, one person per column. Arrays used this way are called parallel arrays, and they only work while you keep the promise that all of them have the same length and the same order. Swap two names in lastNames without swapping the first names, and player 1 becomes Lucas Rüdiger on live TV.
42.3 The loop over an array
Drawing the list is the letter loop of the criss-cross chapter, applied to an array. From 0, while less than length, one step at a time:
fill("yellow");
textAlign(LEFT);
for (let i: number = 0; i < firstNames.length; i++) {
text(`${firstNames[i]} ${lastNames[i]}`, 33, 12 + i * 5);
}Three details matter here. First, firstNames.length is 11, so the loop visits each player once; add a twelfth player to all three arrays and the loop follows without a change. Second, the template string glues the two name parts of the same index together; that is a parallel-array read. Third, the y position 12 + i * 5 computes the row from the index, exactly like the zebra stripes computed their y from the loop variable: index 0 draws at 12, index 1 at 17, each player 5 units lower.
The numbers will work the same way in a second loop that you write in the exercise, with textAlign(RIGHT) so the digits line up like a table, orange fill and bold textStyle(BOLD), and text(playerNumbers[i], 30, 12 + i * 5). Two loops, same row formula, and the columns will meet neatly at the gap between x = 30 and x = 33.
42.4 Meters as pixels
A real soccer field is 100 by 70 meters, and the starter code draws it with those exact numbers:
createCanvas((100 + MARGIN * 2) * SCALE, (70 + MARGIN * 2) * SCALE);
// ...
push();
scale(SCALE);
translate(MARGIN, MARGIN);
rect(0, 0, 100, 70); // the field, in metersThis is the part 1 soccer recipe, and after the last chapter you can read every line of it: scale(SCALE) multiplies everything drawn afterwards by 5, so one “meter” becomes 5 pixels; translate shifts the field by the margin, in meters, because the translate happens after the scale. From then on, every measurement from the real world goes into the code unchanged; the penalty box is 16.5 deep because it really is 16.5 meters deep. Even strokeWeight(0.5) speaks meters, with lines half a meter wide, like real field markings. The canvas size does the same computation in reverse, so the window always fits the field plus its margins.
42.5 Field details worth stealing
Two drawing tricks in this exercise deserve a place in your toolbox:
- The penalty arc without arc math. The curve at the penalty box is officially a circle of radius 9.15 meters around the penalty spot, but only the part outside the box is drawn. The trick is to draw the full circle and then paint the penalty area over it with an opaque green rectangle, so only the arc survives. Painting over is a legal move; you have known that since the very first chapter.
- See-through color. The name plate is
fill("#008000d0"): a hex color with eight digits. The first six are the RGB color you know from the Variables part; the extra two are the alpha value, the transparency.d0is 208 of 255, about 80 percent opaque, so the field shimmers through the plate. Alphaffis fully opaque,00fully invisible.
The corners are little quarter circles, drawn with arc and degree angles, the same arc you learned in part 1. The goal areas, the center circle, and the penalty spots are plain rects, circles, and points measured off the official diagram.
42.6 Your exercise: Soccer Field
- Real units first. Look up the field measurements linked in the exercise (goal area 5.5 by 18.32, penalty area 16.5 by 40.32, center circle radius 9.15) and keep the official diagram with its numbers next to you while you code. The code just reads that diagram aloud.
- Task 1: the field. The starter draws the outer rectangle; you add the center line, center circle, goal and penalty areas, penalty spots, penalty arcs (full circle, then paint over), and the corner arcs. Change
SCALEto 2 and 3 between runs; the whole field must follow. - Task 2: the lineup. Two loops over the arrays, numbers right-aligned in orange and bold, names left-aligned in yellow (Section 42.3). One heads-up: the exercise’s screenshot shows the row numbers 1 to 11, but your program must print the real shirt numbers from
playerNumbers, so your plate will show 1, 17, 22, and so on. Print the numbers, not the index. - Your team. Replace the eleven with your favorite lineup. All three arrays must change together; that is the parallel- array promise.
42.7 Check your understanding
When your field survives a SCALE change and your own team stands on the plate, take the short quiz below. You answer six 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.