-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy path06.html
More file actions
1271 lines (1124 loc) · 93 KB
/
06.html
File metadata and controls
1271 lines (1124 loc) · 93 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Composite Figures in Action — Geometry Playground</title>
<meta name="description" content="Chapter VI of Geometry Playground: composite figures in action. Combine functions, loops, and conditionals to build a complete suburban scene from geometric components." />
<meta name="keywords" content="Swift Playgrounds, composite figures, composition, decomposition, functions, loops, geometry chapter 6, IM1" />
<meta name="author" content="Daniel Budd" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://dbbudd.github.io/06.html" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Geometry Playground" />
<meta property="og:title" content="Composite Figures in Action — Geometry Playground" />
<meta property="og:description" content="Chapter VI: composite figures in action. Combine functions, loops, and conditionals to build a complete suburban scene from geometric components." />
<meta property="og:url" content="https://dbbudd.github.io/06.html" />
<meta property="og:image" content="https://dbbudd.github.io/images/og-card.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@DanielBBudd" />
<meta name="twitter:title" content="Composite Figures in Action — Geometry Playground" />
<meta name="twitter:description" content="Chapter VI: composite figures in action. Combine functions, loops, and conditionals to build a complete suburban scene from geometric components." />
<meta name="twitter:image" content="https://dbbudd.github.io/images/og-card.png" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LearningResource",
"name": "Composite Figures in Action — Geometry Playground Chapter VI",
"description": "Composite figures in action. Combine functions, loops, and conditionals to build a complete suburban scene from geometric components with Swift Playgrounds on iPad or Mac.",
"url": "https://dbbudd.github.io/06.html",
"isPartOf": { "@type": "Course", "name": "Geometry Playground", "url": "https://dbbudd.github.io/" },
"author": { "@type": "Person", "name": "Daniel Budd" },
"inLanguage": "en",
"educationalLevel": "High School",
"learningResourceType": "Interactive Tutorial",
"isAccessibleForFree": true,
"teaches": "Composite Figures, Composition, Decomposition, Real-World Modelling, Functions, Loops"
}
</script>
<link rel="stylesheet" href="course-ui/course-ui.css?v=4" />
<link rel="stylesheet" href="styles.css?v=5" />
<script>
window.CourseUI = {
brand: { name: 'Geometry Playground', accent: '#F2B13E' },
reading: { readingLine: true, readingPos: true, focusMode: true },
search: {
enabled: true,
scope: 'site',
pages: [
'index.html',
'01.html', '02.html', '03.html',
'04.html', '05.html', '06.html'
]
},
vocab: {
enabled: true,
autoWrap: true,
contentSelector: '.section-hero .lead, .article p, .article li'
},
mobile: {
drawer: {
sections: [
{ title: 'Chapters', clone: '#chapterPill .nav-dropdown' },
{ title: 'Sections', clone: '.sidebar nav' }
]
}
}
};
</script>
<script src="vocab/geometry.js?v=4"></script>
<script src="course-ui/course-ui.js?v=4" defer></script>
</head>
<body>
<a class="cu-skip-link" href="#chapter-top">Skip to main content</a>
<!-- ══════════════════════════════════════════════════════════
TOP BAR
══════════════════════════════════════════════════════════ -->
<header class="topbar" id="topbar">
<a href="index.html" class="topbar-logo">
<span>◆</span>Geometry Playground
</a>
<div class="topbar-divider"></div>
<!-- Chapter picker -->
<div class="nav-pill" id="chapterPill">
<button class="nav-pill-btn" onclick="togglePill('chapterPill')">
<span class="pill-label">Chapter</span>
VI
<svg width="10" height="6" viewBox="0 0 10 6" fill="none"><path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
</button>
<div class="nav-dropdown">
<div class="nav-dropdown-heading">Chapters</div>
<a href="01.html"><span class="dd-num">I</span> Coordinate Geometry</a>
<a href="02.html"><span class="dd-num">II</span> Shape Properties</a>
<a href="03.html"><span class="dd-num">III</span> Polygon Patterns</a>
<a href="04.html"><span class="dd-num">IV</span> Sorting Shapes</a>
<a href="05.html"><span class="dd-num">V</span> Similarity</a>
<a href="06.html" class="current"><span class="dd-num">VI</span> Composite Figures</a>
</div>
</div>
<!-- Section picker -->
<div class="nav-pill" id="sectionPill">
<button class="nav-pill-btn" onclick="togglePill('sectionPill')">
<span class="pill-label">Section</span>
<span id="currentSectionLabel">01 — A Square</span>
<svg width="10" height="6" viewBox="0 0 10 6" fill="none"><path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
</button>
<div class="nav-dropdown">
<div class="nav-dropdown-heading">Sections</div>
<a href="#s01" class="active"><span class="nav-num">01</span><span>A Square<br><span class="nav-badge badge-tutorial">Tutorial</span></span><span class="nav-done">✓</span></a>
<a href="#s02"><span class="nav-num">02</span><span>A Triangle<br><span class="nav-badge badge-exercise">Exercise</span></span><span class="nav-done">✓</span></a>
<a href="#s03"><span class="nav-num">03</span><span>A Cross<br><span class="nav-badge badge-exercise">Exercise</span></span><span class="nav-done">✓</span></a>
<a href="#s04"><span class="nav-num">04</span><span>A Church<br><span class="nav-badge badge-exercise">Exercise</span></span><span class="nav-done">✓</span></a>
<a href="#s05"><span class="nav-num">05</span><span>Row of Churches<br><span class="nav-badge badge-exercise">Exercise</span></span><span class="nav-done">✓</span></a>
<a href="#s06"><span class="nav-num">06</span><span>A Pretty House<br><span class="nav-badge badge-exercise">Exercise</span></span><span class="nav-done">✓</span></a>
<a href="#s07"><span class="nav-num">07</span><span>A Fence Post<br><span class="nav-badge badge-exercise">Exercise</span></span><span class="nav-done">✓</span></a>
<a href="#s08"><span class="nav-num">08</span><span>A Whole Fence<br><span class="nav-badge badge-exercise">Exercise</span></span><span class="nav-done">✓</span></a>
<a href="#s09"><span class="nav-num">09</span><span>Broom Broom<br><span class="nav-badge badge-exercise">Exercise</span></span><span class="nav-done">✓</span></a>
<a href="#s10"><span class="nav-num">10</span><span>Neighbourhood Scene<br><span class="nav-badge badge-exercise">Exercise</span></span><span class="nav-done">✓</span></a>
</div>
</div>
<!-- Chapter progress -->
<div class="topbar-progress">
<span class="progress-text" id="progressText">0 / 9</span>
<div class="progress-bar-wrap">
<div class="progress-bar-fill" id="progressBarFill"></div>
</div>
</div>
</header>
<!-- ══════════════════════════════════════════════════════════
LAYOUT
══════════════════════════════════════════════════════════ -->
<div class="page-wrap">
<!-- ── SIDEBAR ── -->
<aside class="sidebar" id="sidebar">
<div class="sidebar-chapter">Chapter VI</div>
<nav id="sidebarNav">
<a href="#s01" class="active"><span class="nav-num">01</span><span>A Square<br><span class="nav-badge badge-tutorial">Tutorial</span></span><span class="nav-done">✓</span></a>
<a href="#s02"><span class="nav-num">02</span><span>A Triangle<br><span class="nav-badge badge-exercise">Exercise</span></span><span class="nav-done">✓</span></a>
<a href="#s03"><span class="nav-num">03</span><span>A Cross<br><span class="nav-badge badge-exercise">Exercise</span></span><span class="nav-done">✓</span></a>
<a href="#s04"><span class="nav-num">04</span><span>A Church<br><span class="nav-badge badge-exercise">Exercise</span></span><span class="nav-done">✓</span></a>
<a href="#s05"><span class="nav-num">05</span><span>Row of Churches<br><span class="nav-badge badge-exercise">Exercise</span></span><span class="nav-done">✓</span></a>
<a href="#s06"><span class="nav-num">06</span><span>A Pretty House<br><span class="nav-badge badge-exercise">Exercise</span></span><span class="nav-done">✓</span></a>
<a href="#s07"><span class="nav-num">07</span><span>A Fence Post<br><span class="nav-badge badge-exercise">Exercise</span></span><span class="nav-done">✓</span></a>
<a href="#s08"><span class="nav-num">08</span><span>A Whole Fence<br><span class="nav-badge badge-exercise">Exercise</span></span><span class="nav-done">✓</span></a>
<a href="#s09"><span class="nav-num">09</span><span>Broom Broom<br><span class="nav-badge badge-exercise">Exercise</span></span><span class="nav-done">✓</span></a>
<a href="#s10"><span class="nav-num">10</span><span>Neighbourhood Scene<br><span class="nav-badge badge-exercise">Exercise</span></span><span class="nav-done">✓</span></a>
</nav>
</aside>
<!-- ── MAIN CONTENT ── -->
<main class="content" id="mainContent">
<!-- Chapter banner -->
<section class="section-hero chapter-banner" id="chapter-top">
<div class="ch-label">Chapter VI of VI</div>
<h1>Composite Figures in Action</h1>
<p class="lead">Bring everything together. Use functions, loops, and conditionals to build a house, a tree, a fence, a car — then combine them into a complete suburban neighbourhood. This is geometry in composition: taking simple shapes and assembling them into something richer than any of them alone.</p>
<div class="banner-meta">
<div class="banner-stat"><span class="stat-num">10</span><span class="stat-label">Sections</span></div>
<div class="banner-stat"><span class="stat-num">1</span><span class="stat-label">Tutorial</span></div>
<div class="banner-stat"><span class="stat-num">9</span><span class="stat-label">Exercises</span></div>
</div>
</section>
<!-- ════════════════════════════════════════
SECTION 01 — A Square (Tutorial)
════════════════════════════════════════ -->
<section id="s01">
<div class="section-hero">
<span class="section-tag tutorial">◆ Tutorial</span>
<h1>A Square</h1>
<p class="lead">You have been drawing squares since Chapter I. This final chapter brings every skill together to build a whole neighbourhood from reusable components — using the same helpers you already built in Chapter V.</p>
<button class="complete-btn" data-id="s01" onclick="toggleComplete(this)">
<span class="btn-icon">○</span> Mark as Complete
</button>
</div>
<div class="article">
<p>Remember <code>drawRectAt</code> from Section 17 of Chapter V? You already have a function that draws a filled rectangle at any position on the canvas. A square is just a rectangle with equal width and height — so we already have everything we need to draw squares at any point on the canvas.</p>
<div class="code-wrap">
<div class="code-header">
<span class="code-lang">Swift (from Chapter V)</span>
<button class="code-copy" onclick="copyCode(this)">Copy</button>
</div>
<pre><span class="kw">import</span> Foundation
<span class="kw">import</span> UIKit
<span class="cm">// Filled rectangle at an absolute position — defined in Chapter V §17.</span>
<span class="cm">// Keep this at the top of your playground file.</span>
<span class="kw">func</span> <span class="fn">drawRectAt</span>(at pos: <span class="tp">Point</span>,
w: <span class="tp">Double</span>, h: <span class="tp">Double</span>, color: <span class="tp">UIColor</span>) {
<span class="kw">var</span> <span class="vr">p</span> = <span class="tp">Pen</span>()
<span class="vr">p</span>.<span class="vr">penColor</span> = <span class="vr">color</span>
<span class="vr">p</span>.<span class="vr">fillColor</span> = <span class="vr">color</span>
<span class="vr">p</span>.<span class="fn">goto</span>(x: <span class="vr">pos</span>.<span class="vr">x</span>, y: <span class="vr">pos</span>.<span class="vr">y</span>)
<span class="kw">for</span> _ <span class="kw">in</span> <span class="num">1</span>...<span class="num">2</span> {
<span class="vr">p</span>.<span class="fn">addLine</span>(distance: <span class="vr">w</span>)
<span class="vr">p</span>.<span class="fn">turn</span>(degrees: <span class="num">90</span>)
<span class="vr">p</span>.<span class="fn">addLine</span>(distance: <span class="vr">h</span>)
<span class="vr">p</span>.<span class="fn">turn</span>(degrees: <span class="num">90</span>)
}
<span class="fn">addShape</span>(pen: <span class="vr">p</span>)
}</pre>
</div>
<p>A square is a rectangle where <code>w == h</code>, so we can write a tiny wrapper:</p>
<div class="code-wrap">
<div class="code-header">
<span class="code-lang">Swift</span>
<button class="code-copy" onclick="copyCode(this)">Copy</button>
</div>
<pre><span class="cm">// drawSquare is just drawRectAt with w == h</span>
<span class="kw">func</span> <span class="fn">drawSquare</span>(at pos: <span class="tp">Point</span>, size: <span class="tp">Double</span>, color: <span class="tp">UIColor</span>) {
<span class="fn">drawRectAt</span>(at: <span class="vr">pos</span>, w: <span class="vr">size</span>, h: <span class="vr">size</span>, color: <span class="vr">color</span>)
}
<span class="cm">// Draw a row of three squares at different positions</span>
<span class="fn">drawSquare</span>(at: <span class="tp">Point</span>(x: -<span class="num">150</span>, y: <span class="num">0</span>), size: <span class="num">60</span>, color: .<span class="vr">red</span>)
<span class="fn">drawSquare</span>(at: <span class="tp">Point</span>(x: -<span class="num">50</span>, y: <span class="num">0</span>), size: <span class="num">60</span>, color: .<span class="vr">green</span>)
<span class="fn">drawSquare</span>(at: <span class="tp">Point</span>(x: <span class="num">50</span>, y: <span class="num">0</span>), size: <span class="num">60</span>, color: .<span class="vr">blue</span>)</pre>
</div>
<blockquote><strong>The key pattern for Chapter VI.</strong> Every function you write should take an <code>at: Point</code> parameter (where to draw) and any size/colour parameters it needs. This lets you compose complex scenes by calling many <code>draw...</code> functions, each at a carefully computed point. No pen state to track, no <code>penUp</code>/<code>penDown</code> to remember — just "draw this shape at that position".</blockquote>
<blockquote><strong>Why this is easier than the Chapter V flag functions.</strong> Each of your flag solutions created its own pens inside the function. Chapter VI keeps that same pattern but composes many shapes into a scene. The secret: every function just needs to know its <em>anchor point</em> (usually the bottom-left corner) and draw everything relative to it. That's why <code>drawRectAt(at: pos, ...)</code> is the workhorse of this chapter.</blockquote>
<p>Throughout this chapter, each building-block function — <code>drawRoof</code>, <code>drawCross</code>, <code>drawChurch</code>, <code>drawHouse</code>, <code>drawFencePost</code>, <code>drawCar</code> — follows this same convention:</p>
<ul>
<li>It takes <code>at pos: Point</code> as its first parameter</li>
<li><code>pos</code> is the <strong>bottom-left corner</strong> of the shape's bounding box</li>
<li>It takes size/colour parameters after that</li>
<li>It doesn't move or modify any shared state — each call is independent</li>
</ul>
<p>This is the same pattern you used for flag functions in Chapter V. You've already done the hard work — Chapter VI just uses it to build scenes instead of flags.</p>
<div class="img-wrap">
<img src="images/06-01-a-square.png" alt="A square">
</div>
<div class="im-table-wrap">
<div class="im-table-header">Curriculum Connections</div>
<table class="im-table">
<thead><tr><th>Concept</th><th>Connection</th></tr></thead>
<tbody>
<tr><td>Functions & Abstraction</td><td>A square is the <em>special case</em> of a rectangle where width equals height. Writing <code>drawSquare</code> as a one-line wrapper around <code>drawRectAt</code> is a direct application of function specialisation — and mirrors how a square is defined as a special rectangle in the classification hierarchy of quadrilaterals.</td></tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- ════════════════════════════════════════
SECTION 02 — A Triangle
════════════════════════════════════════ -->
<section id="s02">
<div class="section-hero">
<span class="section-tag exercise">◆ Exercise</span>
<h1>A Triangle</h1>
<p class="lead">Every building in our scene needs a roof. Write a function <code>drawRoof(at:base:color:)</code> that draws a filled <strong>equilateral triangle</strong> — this gives a clean, symmetric roof shape. The triangle sits on top of a wall, with its base running from <code>pos</code> to <code>pos + (base, 0)</code>.</p>
<button class="complete-btn" data-id="s02" onclick="toggleComplete(this)">
<span class="btn-icon">○</span> Mark as Complete
</button>
</div>
<div class="article">
<p>In Puerto Rico (Chapter V §20) you met the <strong>Triangle geometry object</strong> and <code>addFilledTriangle</code>. Use the same tools here: compute the three vertices (bottom-left, bottom-right, apex), bundle them into a <code>Triangle</code>, and call <code>addFilledTriangle</code>.</p>
<blockquote><strong>Equilateral triangle height from Puerto Rico.</strong> For an equilateral triangle with side length <code>base</code>, the perpendicular height from the base to the apex is <code>base × √3 / 2 ≈ 0.866 × base</code>. This comes from Pythagoras on a bisected equilateral triangle: half-base is <code>base/2</code>, hypotenuse is <code>base</code>, and the height is <code>√(base² − (base/2)²) = base·√3/2</code>. <code>sin(60°) = √3/2</code> is the same constant.</blockquote>
<blockquote><strong>If you walked the triangle's perimeter.</strong> Starting at the bottom-left facing right, you'd walk <code>base</code> along the bottom edge, turn left 120° at the bottom-right corner (interior angle 60° + turn 120° = 180° straight line if you kept going), walk <code>base</code> up the right slope to the apex, turn left 120° at the apex, walk <code>base</code> down the left slope, and turn left 120° one last time — a total of 360° of turning, back where you started facing right. Exterior angle = <code>360° / 3 = 120°</code>, exactly the formula from Section 02 of Chapter V.</blockquote>
<div class="code-wrap">
<div class="code-header">
<span class="code-lang">Swift</span>
<button class="code-copy" onclick="copyCode(this)">Copy</button>
</div>
<pre><span class="cm">// Draw an equilateral triangle "roof" sitting on a base from (pos.x, pos.y)
// to (pos.x + base, pos.y). The apex is directly above the midpoint.</span>
<span class="kw">func</span> <span class="fn">drawRoof</span>(at pos: <span class="tp">Point</span>, base: <span class="tp">Double</span>, color: <span class="tp">UIColor</span>) {
<span class="cm">// 1. Compute the three vertices</span>
<span class="cm">// 2. Build a Triangle</span>
<span class="cm">// 3. Call addFilledTriangle(...)</span>
<span class="cm">// your code here</span>
}</pre>
</div>
<button class="solution-toggle" onclick="toggleSolution(this,'sol02')">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
Show Solution
</button>
<div class="solution-body" id="sol02">
<div class="code-wrap">
<div class="code-header">
<span class="code-lang">Solution</span>
<button class="code-copy" onclick="copyCode(this)">Copy</button>
</div>
<pre><span class="kw">import</span> Foundation
<span class="kw">import</span> UIKit
<span class="kw">func</span> <span class="fn">drawRoof</span>(at pos: <span class="tp">Point</span>, base: <span class="tp">Double</span>, color: <span class="tp">UIColor</span>) {
<span class="cm">// Equilateral triangle height = base × √3 / 2</span>
<span class="kw">let</span> <span class="vr">height</span> = <span class="vr">base</span> * <span class="fn">sqrt</span>(<span class="num">3</span>) / <span class="num">2</span>
<span class="cm">// Three vertices: bottom-left, bottom-right, apex (centred above)</span>
<span class="kw">let</span> <span class="vr">botLeft</span> = <span class="vr">pos</span>
<span class="kw">let</span> <span class="vr">botRight</span> = <span class="tp">Point</span>(x: <span class="vr">pos</span>.<span class="vr">x</span> + <span class="vr">base</span>, y: <span class="vr">pos</span>.<span class="vr">y</span>)
<span class="kw">let</span> <span class="vr">apex</span> = <span class="tp">Point</span>(x: <span class="vr">pos</span>.<span class="vr">x</span> + <span class="vr">base</span> / <span class="num">2</span>, y: <span class="vr">pos</span>.<span class="vr">y</span> + <span class="vr">height</span>)
<span class="kw">let</span> <span class="vr">tri</span> = <span class="tp">Triangle</span>(a: <span class="vr">botLeft</span>, b: <span class="vr">botRight</span>, c: <span class="vr">apex</span>)
<span class="fn">addFilledTriangle</span>(<span class="vr">tri</span>, fillColor: <span class="vr">color</span>, borderColor: <span class="vr">color</span>, lineWidth: <span class="num">1</span>)
}
<span class="cm">// Test: a red roof 100 units wide, bottom-left at the origin</span>
<span class="fn">drawRoof</span>(at: <span class="tp">Point</span>(x: -<span class="num">50</span>, y: <span class="num">0</span>), base: <span class="num">100</span>, color: .<span class="vr">red</span>)</pre>
</div>
<blockquote><strong>Why pass the bottom-left corner?</strong> By convention in Chapter VI, every shape's <code>pos</code> is its bottom-left corner. This means the shape grows up and to the right from <code>pos</code>. When you compose shapes (putting a roof on top of a house body), the roof's <code>pos</code> becomes the top-left of the body — just <code>(body.x, body.y + bodyHeight)</code>. No pen state to track; no surprises.</blockquote>
</div>
<div class="img-wrap">
<img src="images/06-02-a-triangle.png" alt="A triangle">
</div>
<div class="im-table-wrap">
<div class="im-table-header">Curriculum Connections</div>
<table class="im-table">
<thead><tr><th>Concept</th><th>Connection</th></tr></thead>
<tbody>
<tr><td>Geometry — Triangles</td><td>The height of an equilateral triangle with side <code>s</code> is <code>s·√3/2</code>, a direct consequence of Pythagoras on the 30-60-90 right triangle you get by bisecting it. This same constant <code>√3/2 = sin(60°)</code> appears in hexagonal tilings, honeycombs, and the Puerto Rico flag's blue canton.</td></tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- ════════════════════════════════════════
SECTION 03 — A Cross
════════════════════════════════════════ -->
<section id="s03">
<div class="section-hero">
<span class="section-tag exercise">◆ Exercise</span>
<h1>A Cross</h1>
<p class="lead">Churches need a cross! Write <code>drawCross(at:size:thickness:color:)</code> that draws a plus-sign cross at a given centre point. This is the same inclusion–exclusion pattern you used for the Swiss flag in Chapter V §18 — two perpendicular rectangles overlapping at the centre.</p>
<button class="complete-btn" data-id="s03" onclick="toggleComplete(this)">
<span class="btn-icon">○</span> Mark as Complete
</button>
</div>
<div class="article">
<p>Unlike other Chapter VI shapes, the cross is positioned by its <strong>centre</strong>, not its bottom-left corner — that makes it much easier to place at the apex of a roof. The <code>size</code> is the length of each arm (tip-to-tip), and the <code>thickness</code> is how fat each arm is.</p>
<blockquote><strong>Remember the Swiss flag.</strong> The Swiss cross is two overlapping rectangles that share a square patch at the centre. Cross area = <code>2 × (size × thickness) − thickness²</code> (inclusion–exclusion — subtract the double-counted middle). You don't need to compute the area to draw the shape, but understanding the overlap helps you see why the centring formulas work.</blockquote>
<blockquote><strong>Centring a rectangle on a point.</strong> To put a <code>w × h</code> rectangle with its <em>centre</em> at <code>(cx, cy)</code>, set its bottom-left to <code>(cx − w/2, cy − h/2)</code>. This is the key formula for this exercise — you'll use it twice, once for each arm of the cross.</blockquote>
<div class="code-wrap">
<div class="code-header">
<span class="code-lang">Swift</span>
<button class="code-copy" onclick="copyCode(this)">Copy</button>
</div>
<pre><span class="cm">// Draw a filled plus-sign cross centred at `center`.
// size = tip-to-tip length of each arm
// thickness = how fat each arm is (usually a small fraction of size)</span>
<span class="kw">func</span> <span class="fn">drawCross</span>(at center: <span class="tp">Point</span>, size: <span class="tp">Double</span>,
thickness: <span class="tp">Double</span>, color: <span class="tp">UIColor</span>) {
<span class="cm">// 1. Vertical bar: thickness wide, size tall, centred on (cx, cy)</span>
<span class="cm">// 2. Horizontal bar: size wide, thickness tall, centred on (cx, cy)</span>
<span class="cm">// Both drawn with drawRectAt — the overlap at the centre is painted twice, no problem.</span>
<span class="cm">// your code here</span>
}</pre>
</div>
<button class="solution-toggle" onclick="toggleSolution(this,'sol03')">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
Show Solution
</button>
<div class="solution-body" id="sol03">
<div class="code-wrap">
<div class="code-header">
<span class="code-lang">Solution</span>
<button class="code-copy" onclick="copyCode(this)">Copy</button>
</div>
<pre><span class="kw">import</span> Foundation
<span class="kw">import</span> UIKit
<span class="kw">func</span> <span class="fn">drawCross</span>(at center: <span class="tp">Point</span>, size: <span class="tp">Double</span>,
thickness: <span class="tp">Double</span>, color: <span class="tp">UIColor</span>) {
<span class="kw">let</span> <span class="vr">half</span> = <span class="vr">size</span> / <span class="num">2</span>
<span class="kw">let</span> <span class="vr">halfT</span> = <span class="vr">thickness</span> / <span class="num">2</span>
<span class="cm">// Vertical bar — thickness wide, size tall, centred on (center.x, center.y)</span>
<span class="fn">drawRectAt</span>(
at: <span class="tp">Point</span>(x: <span class="vr">center</span>.<span class="vr">x</span> - <span class="vr">halfT</span>, y: <span class="vr">center</span>.<span class="vr">y</span> - <span class="vr">half</span>),
w: <span class="vr">thickness</span>, h: <span class="vr">size</span>, color: <span class="vr">color</span>
)
<span class="cm">// Horizontal bar — size wide, thickness tall, centred on (center.x, center.y)</span>
<span class="fn">drawRectAt</span>(
at: <span class="tp">Point</span>(x: <span class="vr">center</span>.<span class="vr">x</span> - <span class="vr">half</span>, y: <span class="vr">center</span>.<span class="vr">y</span> - <span class="vr">halfT</span>),
w: <span class="vr">size</span>, h: <span class="vr">thickness</span>, color: <span class="vr">color</span>
)
}
<span class="cm">// Test: a white cross centred at the origin</span>
<span class="fn">drawCross</span>(at: <span class="tp">Point</span>(x: <span class="num">0</span>, y: <span class="num">0</span>), size: <span class="num">60</span>,
thickness: <span class="num">12</span>, color: .<span class="vr">white</span>)</pre>
</div>
<blockquote><strong>Two rectangles, no pen gymnastics.</strong> Compare this to how this exercise used to be solved — with <code>penUp</code>, <code>penDown</code>, four or five turns, and a careful "return the pen to its starting position" epilogue. With <code>drawRectAt</code> and a centre-based position, the whole function is just two <code>drawRectAt</code> calls. Each call is completely independent; they just happen to overlap at the middle.</blockquote>
</div>
<div class="img-wrap">
<img src="images/06-03-a-cross.png" alt="A cross">
</div>
<div class="im-table-wrap">
<div class="im-table-header">Curriculum Connections</div>
<table class="im-table">
<thead><tr><th>Concept</th><th>Connection</th></tr></thead>
<tbody>
<tr><td>Geometry — Perpendicular Lines & Inclusion–Exclusion</td><td>The two arms of the cross are perpendicular rectangles sharing a square centre. Using inclusion–exclusion, the cross's area is 2 × (size × thickness) − thickness². The <code>(center − half, center − halfT)</code> offset formula is the standard way to centre a <code>w × h</code> rectangle on a point.</td></tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- ════════════════════════════════════════
SECTION 04 — A Church
════════════════════════════════════════ -->
<section id="s04">
<div class="section-hero">
<span class="section-tag exercise">◆ Exercise</span>
<h1>A Church</h1>
<p class="lead">Now compose your three building-block functions into a complete church. Write <code>drawChurch(at:size:)</code> that draws:</p>
<button class="complete-btn" data-id="s04" onclick="toggleComplete(this)">
<span class="btn-icon">○</span> Mark as Complete
</button>
</div>
<div class="article">
<ul>
<li>A square <strong>body</strong> (colour: <code>.gray</code>)</li>
<li>A triangular <strong>roof</strong> sitting on top (colour: <code>.red</code>)</li>
<li>A small <strong>cross</strong> at the apex of the roof (colour: <code>.white</code>)</li>
</ul>
<p>This is where the <code>at: Point</code> convention pays off: to draw each sub-component you just compute <em>where its anchor point sits relative to the church's anchor point</em> and call the sub-function. No pen state, no navigation — just coordinate arithmetic.</p>
<blockquote><strong>Working out each component's anchor.</strong> If the church's <code>pos</code> is the bottom-left corner of the body:
<ul>
<li><strong>Body:</strong> bottom-left = <code>pos</code></li>
<li><strong>Roof:</strong> bottom-left sits on top of the body at <code>(pos.x, pos.y + size)</code></li>
<li><strong>Cross centre:</strong> horizontally at the midpoint <code>(pos.x + size/2, ...)</code>; vertically at the roof's apex <code>y = pos.y + size + size·√3/2</code>, plus a little more if you want the cross to stand above the apex like a spire.</li>
</ul>
</blockquote>
<blockquote><strong>Why this is cleaner than penUp/penDown.</strong> When you were tracking pen state, every sub-component required you to "navigate" from where the previous one left you — turn, move, turn, lift pen, turn again. With <code>at: Point</code>, each sub-component just needs a single <code>Point</code> argument computed from <code>pos</code> and <code>size</code>. You can add, remove, or reorder components without touching the others.</blockquote>
<div class="code-wrap">
<div class="code-header">
<span class="code-lang">Swift</span>
<button class="code-copy" onclick="copyCode(this)">Copy</button>
</div>
<pre><span class="kw">func</span> <span class="fn">drawChurch</span>(at pos: <span class="tp">Point</span>, size: <span class="tp">Double</span>) {
<span class="cm">// 1. Draw the grey body (square at pos)</span>
<span class="cm">// 2. Draw the red roof on top of the body</span>
<span class="cm">// 3. Draw the small white cross just above the roof apex</span>
<span class="cm">// your code here</span>
}</pre>
</div>
<button class="solution-toggle" onclick="toggleSolution(this,'sol04')">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
Show Solution
</button>
<div class="solution-body" id="sol04">
<div class="code-wrap">
<div class="code-header">
<span class="code-lang">Solution</span>
<button class="code-copy" onclick="copyCode(this)">Copy</button>
</div>
<pre><span class="kw">import</span> Foundation
<span class="kw">import</span> UIKit
<span class="kw">func</span> <span class="fn">drawChurch</span>(at pos: <span class="tp">Point</span>, size: <span class="tp">Double</span>) {
<span class="cm">// ── 1. Grey body (square) ───────────────────────────</span>
<span class="fn">drawSquare</span>(at: <span class="vr">pos</span>, size: <span class="vr">size</span>, color: .<span class="vr">gray</span>)
<span class="cm">// ── 2. Red roof on top of the body ──────────────────</span>
<span class="kw">let</span> <span class="vr">roofBase</span> = <span class="tp">Point</span>(x: <span class="vr">pos</span>.<span class="vr">x</span>, y: <span class="vr">pos</span>.<span class="vr">y</span> + <span class="vr">size</span>)
<span class="fn">drawRoof</span>(at: <span class="vr">roofBase</span>, base: <span class="vr">size</span>, color: .<span class="vr">red</span>)
<span class="cm">// ── 3. Small white cross above the roof apex ────────</span>
<span class="cm">// Apex is at (pos.x + size/2, pos.y + size + size·√3/2).</span>
<span class="cm">// Put the cross's centre a little above the apex so it "stands up".</span>
<span class="kw">let</span> <span class="vr">apexX</span> = <span class="vr">pos</span>.<span class="vr">x</span> + <span class="vr">size</span> / <span class="num">2</span>
<span class="kw">let</span> <span class="vr">apexY</span> = <span class="vr">pos</span>.<span class="vr">y</span> + <span class="vr">size</span> + <span class="vr">size</span> * <span class="fn">sqrt</span>(<span class="num">3</span>) / <span class="num">2</span>
<span class="kw">let</span> <span class="vr">crossSize</span> = <span class="vr">size</span> * <span class="num">0.25</span>
<span class="fn">drawCross</span>(
at: <span class="tp">Point</span>(x: <span class="vr">apexX</span>, y: <span class="vr">apexY</span> + <span class="vr">crossSize</span> / <span class="num">2</span>),
size: <span class="vr">crossSize</span>,
thickness: <span class="vr">crossSize</span> * <span class="num">0.25</span>,
color: .<span class="vr">white</span>
)
}
<span class="cm">// Test</span>
<span class="fn">drawChurch</span>(at: <span class="tp">Point</span>(x: -<span class="num">40</span>, y: -<span class="num">60</span>), size: <span class="num">80</span>)</pre>
</div>
<blockquote><strong>The "anchor arithmetic" pattern.</strong> For every sub-component, compute its anchor point as a simple offset from <code>pos</code>:
<ul>
<li>Body anchor = <code>pos</code> (no offset)</li>
<li>Roof anchor = <code>pos + (0, size)</code> (up by body height)</li>
<li>Cross centre = <code>pos + (size/2, size + size·√3/2)</code> (horizontal midpoint, plus body height, plus roof height)</li>
</ul>
This is the same coordinate arithmetic you did in every Chapter V flag function — it's just applied to a more elaborate scene here.</blockquote>
</div>
<div class="img-wrap">
<img src="images/06-04-a-church.png" alt="A church">
</div>
<div class="im-table-wrap">
<div class="im-table-header">Curriculum Connections</div>
<table class="im-table">
<thead><tr><th>Concept</th><th>Connection</th></tr></thead>
<tbody>
<tr><td>Geometry — Modelling with Shapes</td><td>A church is modelled as a composite of three primitive shapes. Each component occupies a specific region — identifying those regions and computing their relative positions using <code>pos + offset</code> is the coordinate-geometry skill that generalises to any scene.</td></tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- ════════════════════════════════════════
SECTION 05 — Row of Churches
════════════════════════════════════════ -->
<section id="s05">
<div class="section-hero">
<span class="section-tag exercise">◆ Exercise</span>
<h1>Row of Churches</h1>
<p class="lead">Draw a row of <strong>five churches</strong>, each <code>10</code> points larger than the last. The first church should have <code>size: 40</code>, the last <code>size: 80</code>. Leave a gap of <code>20</code> points between each church.</p>
<button class="complete-btn" data-id="s05" onclick="toggleComplete(this)">
<span class="btn-icon">○</span> Mark as Complete
</button>
</div>
<div class="article">
<p>Because each call to <code>drawChurch</code> is independent (no pen state to worry about), you just need to compute the <strong>x-coordinate of each church's bottom-left corner</strong> and call <code>drawChurch(at: Point(x: ..., y: ...), size: ...)</code>.</p>
<blockquote><strong>The accumulator pattern.</strong> Keep a running <code>x</code> variable that starts at your leftmost position and grows each iteration by <code>(size + gap)</code>. After drawing a church, advance <code>x += size + gap</code> so the next church starts right after the previous one plus a gap. This is the same pattern you'll use for the fence and the neighbourhood scene.</blockquote>
<blockquote><strong>Arithmetic sequence of sizes.</strong> The sizes 40, 50, 60, 70, 80 form an arithmetic progression with first term <code>a = 40</code> and common difference <code>d = 10</code>. The formula for the <em>i</em>-th term (starting from <em>i = 0</em>) is <code>a + i·d = 40 + 10i</code> — the same linear function you see in coordinate geometry and in the general <em>n</em>-th term formula for arithmetic sequences.</blockquote>
<blockquote><strong>Centring the row.</strong> The total width of the row is the sum of all five sizes plus four gaps: <code>40 + 50 + 60 + 70 + 80 + 4·20 = 380</code>. To centre the row around the canvas origin, start the first church's bottom-left at <code>x = −380/2 = −190</code>. (Or just set a fixed <code>startX</code> and move on — precision isn't critical for this exercise.)</blockquote>
<div class="code-wrap">
<div class="code-header">
<span class="code-lang">Swift</span>
<button class="code-copy" onclick="copyCode(this)">Copy</button>
</div>
<pre><span class="kw">let</span> <span class="vr">gap</span>: <span class="tp">Double</span> = <span class="num">20</span>
<span class="kw">let</span> <span class="vr">baseY</span>: <span class="tp">Double</span> = -<span class="num">50</span>
<span class="kw">var</span> <span class="vr">x</span>: <span class="tp">Double</span> = -<span class="num">190</span> <span class="cm">// starting x, roughly centred</span>
<span class="kw">for</span> <span class="vr">i</span> <span class="kw">in</span> <span class="num">0</span>...<span class="num">4</span> {
<span class="kw">let</span> <span class="vr">size</span> = <span class="num">40.0</span> + <span class="tp">Double</span>(<span class="vr">i</span>) * <span class="num">10</span>
<span class="cm">// draw one church then advance x by (size + gap)</span>
<span class="cm">// your code here</span>
}</pre>
</div>
<button class="solution-toggle" onclick="toggleSolution(this,'sol05')">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
Show Solution
</button>
<div class="solution-body" id="sol05">
<div class="code-wrap">
<div class="code-header">
<span class="code-lang">Solution</span>
<button class="code-copy" onclick="copyCode(this)">Copy</button>
</div>
<pre><span class="kw">let</span> <span class="vr">gap</span>: <span class="tp">Double</span> = <span class="num">20</span>
<span class="kw">let</span> <span class="vr">baseY</span>: <span class="tp">Double</span> = -<span class="num">50</span>
<span class="kw">var</span> <span class="vr">x</span>: <span class="tp">Double</span> = -<span class="num">190</span> <span class="cm">// starting x, roughly centred</span>
<span class="kw">for</span> <span class="vr">i</span> <span class="kw">in</span> <span class="num">0</span>...<span class="num">4</span> {
<span class="kw">let</span> <span class="vr">size</span> = <span class="num">40.0</span> + <span class="tp">Double</span>(<span class="vr">i</span>) * <span class="num">10</span>
<span class="fn">drawChurch</span>(at: <span class="tp">Point</span>(x: <span class="vr">x</span>, y: <span class="vr">baseY</span>), size: <span class="vr">size</span>)
<span class="vr">x</span> += <span class="vr">size</span> + <span class="vr">gap</span> <span class="cm">// advance to the start of the next church</span>
}</pre>
</div>
<blockquote><strong>Note on centring (optional).</strong> If you want the row perfectly centred regardless of sizes, compute the total width first, then set <code>startX = -totalWidth / 2</code>. For this exercise a fixed starting <code>x = −190</code> is good enough — the sizes are known in advance.</blockquote>
</div>
<div class="im-table-wrap">
<div class="im-table-header">Curriculum Connections</div>
<table class="im-table">
<thead><tr><th>Concept</th><th>Connection</th></tr></thead>
<tbody>
<tr><td>Functions & Sequences</td><td>The church sizes form an arithmetic sequence: 40, 50, 60, 70, 80 — first term 40, common difference 10. The <em>i</em>-th term is <code>a + i·d = 40 + 10i</code>. The total width of the row is the sum of the arithmetic series plus the gaps: <code>Σ(40 + 10i) + 4·20 = 300 + 80 = 380</code>.</td></tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- ════════════════════════════════════════
SECTION 06 — A Pretty House
════════════════════════════════════════ -->
<section id="s06">
<div class="section-hero">
<span class="section-tag exercise">◆ Exercise</span>
<h1>A Pretty House</h1>
<p class="lead">A house is more detailed than a church. Write <code>drawHouse(at:size:)</code> that includes:</p>
<button class="complete-btn" data-id="s06" onclick="toggleComplete(this)">
<span class="btn-icon">○</span> Mark as Complete
</button>
</div>
<div class="article">
<ul>
<li>A rectangular <strong>body</strong> (width = <code>size</code>, height = <code>size × 0.75</code>)</li>
<li>A triangular <strong>roof</strong> on top (call <code>drawRoof</code>)</li>
<li>A rectangular <strong>door</strong> centred at the bottom (width = <code>size × 0.25</code>, height = <code>size × 0.4</code>)</li>
<li>Two square <strong>windows</strong>, one on each side of the door (side = <code>size × 0.18</code>)</li>
</ul>
<p>Five components — and with <code>drawRectAt</code> and <code>drawRoof</code> already in your toolbox, each one is a single function call. The only real work is computing each component's anchor point.</p>
<blockquote><strong>Proportional design.</strong> Every dimension is a fraction of <code>size</code>: body height = <code>0.75 × size</code>, door = <code>0.25 × 0.40</code> of size, window side = <code>0.18 × size</code>. Changing <code>size</code> scales the entire house uniformly — no single number is "pinned". This is exactly how you scaled the Union Jack canton to half-size for the Australian flag in Chapter V §14.</blockquote>
<blockquote><strong>Centring the door.</strong> The door is narrower than the body (<code>doorW = 0.25 × size</code> vs body width <code>size</code>). To centre it horizontally, its bottom-left <code>x</code> should be <code>pos.x + (size − doorW) / 2</code>. Same <code>(w − shapeW) / 2</code> formula you used for the centred crosses in Switzerland and the Union Jack.</blockquote>
<blockquote><strong>Windows: inset from each side wall.</strong> Use a fixed inset from each side — e.g. <code>size × 0.08</code>. The left window's bottom-left <code>x</code> is <code>pos.x + inset</code>. The right window's bottom-left is <code>pos.x + size − inset − winSide</code> (inset from the right, then step back by the window's own width so its right edge lands at the inset).</blockquote>
<div class="code-wrap">
<div class="code-header">
<span class="code-lang">Swift</span>
<button class="code-copy" onclick="copyCode(this)">Copy</button>
</div>
<pre><span class="kw">func</span> <span class="fn">drawHouse</span>(at pos: <span class="tp">Point</span>, size: <span class="tp">Double</span>) {
<span class="kw">let</span> <span class="vr">bodyH</span> = <span class="vr">size</span> * <span class="num">0.75</span>
<span class="kw">let</span> <span class="vr">doorW</span> = <span class="vr">size</span> * <span class="num">0.25</span>
<span class="kw">let</span> <span class="vr">doorH</span> = <span class="vr">size</span> * <span class="num">0.4</span>
<span class="kw">let</span> <span class="vr">winSide</span> = <span class="vr">size</span> * <span class="num">0.18</span>
<span class="cm">// 1. Yellow body (rectangle, bottom-left at pos)</span>
<span class="cm">// 2. Red roof (on top of body)</span>
<span class="cm">// 3. Brown door (centred horizontally at the bottom)</span>
<span class="cm">// 4. Left window</span>
<span class="cm">// 5. Right window</span>
<span class="cm">// your code here</span>
}</pre>
</div>
<button class="solution-toggle" onclick="toggleSolution(this,'sol06')">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
Show Solution
</button>
<div class="solution-body" id="sol06">
<div class="code-wrap">
<div class="code-header">
<span class="code-lang">Solution</span>
<button class="code-copy" onclick="copyCode(this)">Copy</button>
</div>
<pre><span class="kw">import</span> Foundation
<span class="kw">import</span> UIKit
<span class="kw">func</span> <span class="fn">drawHouse</span>(at pos: <span class="tp">Point</span>, size: <span class="tp">Double</span>) {
<span class="kw">let</span> <span class="vr">bodyH</span> = <span class="vr">size</span> * <span class="num">0.75</span>
<span class="kw">let</span> <span class="vr">doorW</span> = <span class="vr">size</span> * <span class="num">0.25</span>
<span class="kw">let</span> <span class="vr">doorH</span> = <span class="vr">size</span> * <span class="num">0.4</span>
<span class="kw">let</span> <span class="vr">winSide</span> = <span class="vr">size</span> * <span class="num">0.18</span>
<span class="kw">let</span> <span class="vr">winInset</span> = <span class="vr">size</span> * <span class="num">0.08</span> <span class="cm">// inset from side walls</span>
<span class="kw">let</span> <span class="vr">winY</span> = <span class="vr">pos</span>.<span class="vr">y</span> + <span class="vr">bodyH</span> * <span class="num">0.45</span> <span class="cm">// window row y</span>
<span class="cm">// ── 1. Yellow body ────────────────────────────────────</span>
<span class="fn">drawRectAt</span>(at: <span class="vr">pos</span>, w: <span class="vr">size</span>, h: <span class="vr">bodyH</span>, color: .<span class="vr">yellow</span>)
<span class="cm">// ── 2. Red roof on top of body ────────────────────────</span>
<span class="fn">drawRoof</span>(
at: <span class="tp">Point</span>(x: <span class="vr">pos</span>.<span class="vr">x</span>, y: <span class="vr">pos</span>.<span class="vr">y</span> + <span class="vr">bodyH</span>),
base: <span class="vr">size</span>,
color: .<span class="vr">red</span>
)
<span class="cm">// ── 3. Brown door (centred at bottom of body) ─────────</span>
<span class="kw">let</span> <span class="vr">doorX</span> = <span class="vr">pos</span>.<span class="vr">x</span> + (<span class="vr">size</span> - <span class="vr">doorW</span>) / <span class="num">2</span>
<span class="fn">drawRectAt</span>(
at: <span class="tp">Point</span>(x: <span class="vr">doorX</span>, y: <span class="vr">pos</span>.<span class="vr">y</span>),
w: <span class="vr">doorW</span>, h: <span class="vr">doorH</span>, color: .<span class="vr">brown</span>
)
<span class="cm">// ── 4. Left window ────────────────────────────────────</span>
<span class="fn">drawRectAt</span>(
at: <span class="tp">Point</span>(x: <span class="vr">pos</span>.<span class="vr">x</span> + <span class="vr">winInset</span>, y: <span class="vr">winY</span>),
w: <span class="vr">winSide</span>, h: <span class="vr">winSide</span>, color: .<span class="vr">cyan</span>
)
<span class="cm">// ── 5. Right window ───────────────────────────────────</span>
<span class="fn">drawRectAt</span>(
at: <span class="tp">Point</span>(x: <span class="vr">pos</span>.<span class="vr">x</span> + <span class="vr">size</span> - <span class="vr">winInset</span> - <span class="vr">winSide</span>, y: <span class="vr">winY</span>),
w: <span class="vr">winSide</span>, h: <span class="vr">winSide</span>, color: .<span class="vr">cyan</span>
)
}
<span class="cm">// Test</span>
<span class="fn">drawHouse</span>(at: <span class="tp">Point</span>(x: -<span class="num">60</span>, y: -<span class="num">50</span>), size: <span class="num">120</span>)</pre>
</div>
<blockquote><strong>Five components, five function calls.</strong> Compare this with the old solution that required navigating the pen (turn, move, turn, lift pen, turn again) between each component. With <code>at: Point</code>, every call is self-contained. If you want to change the door position or add a chimney, you just edit or add a single <code>drawRectAt</code> call — nothing else moves.</blockquote>
</div>
<div class="im-table-wrap">
<div class="im-table-header">Curriculum Connections</div>
<table class="im-table">
<thead><tr><th>Concept</th><th>Connection</th></tr></thead>
<tbody>
<tr><td>Geometry — Proportional Reasoning</td><td>All sub-components are proportional to <code>size</code>: the door is 25% as wide, windows are 18%, the body is 75% as tall. Scaling the house means scaling every component uniformly — a real-world application of ratio and proportion. The centring formula <code>(size − doorW) / 2</code> is the same technique used for the Swiss cross and the Union Jack's centred St George cross.</td></tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- ════════════════════════════════════════
SECTION 07 — A Fence Post
════════════════════════════════════════ -->
<section id="s07">
<div class="section-hero">
<span class="section-tag exercise">◆ Exercise</span>
<h1>A Fence Post</h1>
<p class="lead">A classic picket fence post is a rectangle with a pointed top. Write <code>drawFencePost(at:width:height:)</code> that draws the rectangular body and then calls <code>drawRoof</code> to add the pointed top.</p>
<button class="complete-btn" data-id="s07" onclick="toggleComplete(this)">
<span class="btn-icon">○</span> Mark as Complete
</button>
</div>
<div class="article">
<p>This is the simplest composition in the chapter: one rectangle + one roof. You've already built both.</p>
<blockquote><strong>Composite shape: rectangle + triangle.</strong> The fence post's total visible height is <code>height</code> (the rectangular body) plus <code>width · √3 / 2</code> (the equilateral triangle's perpendicular height). Its total area is <code>width × height + (√3 / 4) × width²</code>. You don't need to compute any of this to draw it, but it's the same "composite figure" calculation you'd see in a typical geometry exam question.</blockquote>
<blockquote><strong>Triangle sits on top.</strong> The triangle's bottom-left corner is directly above the rectangle's top-left corner, at <code>(pos.x, pos.y + height)</code>. This is the same pattern as the church roof and the house roof — every "pointed top" in Chapter VI uses it.</blockquote>
<div class="code-wrap">
<div class="code-header">
<span class="code-lang">Swift</span>
<button class="code-copy" onclick="copyCode(this)">Copy</button>
</div>
<pre><span class="kw">func</span> <span class="fn">drawFencePost</span>(at pos: <span class="tp">Point</span>, width: <span class="tp">Double</span>, height: <span class="tp">Double</span>) {
<span class="cm">// 1. Draw rectangular body (white)</span>
<span class="cm">// 2. Draw equilateral triangle "cap" on top (also white)</span>
<span class="cm">// your code here</span>
}</pre>
</div>
<button class="solution-toggle" onclick="toggleSolution(this,'sol07')">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
Show Solution
</button>
<div class="solution-body" id="sol07">
<div class="code-wrap">
<div class="code-header">
<span class="code-lang">Solution</span>
<button class="code-copy" onclick="copyCode(this)">Copy</button>
</div>
<pre><span class="kw">import</span> Foundation
<span class="kw">import</span> UIKit
<span class="kw">func</span> <span class="fn">drawFencePost</span>(at pos: <span class="tp">Point</span>, width: <span class="tp">Double</span>, height: <span class="tp">Double</span>) {
<span class="cm">// 1. White rectangular body</span>
<span class="fn">drawRectAt</span>(at: <span class="vr">pos</span>, w: <span class="vr">width</span>, h: <span class="vr">height</span>, color: .<span class="vr">white</span>)
<span class="cm">// 2. White equilateral triangle on top</span>
<span class="fn">drawRoof</span>(
at: <span class="tp">Point</span>(x: <span class="vr">pos</span>.<span class="vr">x</span>, y: <span class="vr">pos</span>.<span class="vr">y</span> + <span class="vr">height</span>),
base: <span class="vr">width</span>,
color: .<span class="vr">white</span>
)
}
<span class="cm">// Test</span>
<span class="fn">drawFencePost</span>(at: <span class="tp">Point</span>(x: <span class="num">0</span>, y: -<span class="num">40</span>), width: <span class="num">18</span>, height: <span class="num">60</span>)</pre>
</div>
<blockquote><strong>Two lines, zero pen state.</strong> The whole function is one <code>drawRectAt</code> call and one <code>drawRoof</code> call. Because each helper knows how to draw itself from an anchor point, there's no "return the pen to its starting position" epilogue needed — composition is just coordinate arithmetic.</blockquote>
</div>
<div class="im-table-wrap">
<div class="im-table-header">Curriculum Connections</div>
<table class="im-table">
<thead><tr><th>Concept</th><th>Connection</th></tr></thead>
<tbody>
<tr><td>Geometry — Composite Figures</td><td>The total area of the fence post = <code>width × height + (√3 / 4) × width²</code> (rectangle area + equilateral triangle area). If width = 18 and height = 60, total area ≈ 18·60 + 0.433·324 ≈ 1080 + 140 ≈ 1220 square units. Combining rectangle and triangle area formulas is a classic "composite figure" geometry calculation.</td></tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- ════════════════════════════════════════
SECTION 08 — A Whole Fence
════════════════════════════════════════ -->
<section id="s08">
<div class="section-hero">
<span class="section-tag exercise">◆ Exercise</span>
<h1>A Whole Fence</h1>
<p class="lead">Use a loop to draw a fence of <strong>8 posts</strong>. The posts should be <code>18</code> wide and <code>60</code> tall, with a <code>12</code>-point gap between them.</p>
<button class="complete-btn" data-id="s08" onclick="toggleComplete(this)">
<span class="btn-icon">○</span> Mark as Complete
</button>
</div>
<div class="article">
<p>After drawing all the posts, go back and draw a <strong>horizontal rail</strong> across the middle of the posts (at half the post height) to complete the fence.</p>
<blockquote><strong>Total width formula.</strong> For <em>n</em> posts of width <code>w</code> with gaps of <code>g</code> between them, the total width is <code>n·w + (n−1)·g</code>. For 8 posts at width 18 with 12-point gaps: <code>8·18 + 7·12 = 144 + 84 = 228</code>. Notice it's <code>n − 1</code> gaps, not <code>n</code> — there's a gap only <em>between</em> posts, so with 8 posts you have 7 gaps.</blockquote>
<blockquote><strong>Centring the fence on the canvas.</strong> To centre the whole fence around the origin, start the first post at <code>startX = −totalWidth / 2</code>. Then each post <code>i</code> (for <code>i = 0, 1, ..., n − 1</code>) sits at <code>x = startX + i·(w + g)</code>. This is the same accumulator pattern you used for the row of churches, just with a more principled starting position.</blockquote>
<blockquote><strong>The rail is just a thin rectangle.</strong> You don't need any pen-navigation tricks — the rail is a <code>drawRectAt</code> call with a thin height (like 4 points) and width equal to the total fence width, positioned at <code>baseY + postH / 2 − railH / 2</code> so its centre sits at half post height.</blockquote>
<div class="code-wrap">
<div class="code-header">
<span class="code-lang">Swift</span>
<button class="code-copy" onclick="copyCode(this)">Copy</button>
</div>
<pre><span class="kw">let</span> <span class="vr">postW</span>: <span class="tp">Double</span> = <span class="num">18</span>
<span class="kw">let</span> <span class="vr">postH</span>: <span class="tp">Double</span> = <span class="num">60</span>
<span class="kw">let</span> <span class="vr">gap</span>: <span class="tp">Double</span> = <span class="num">12</span>
<span class="kw">let</span> <span class="vr">count</span> = <span class="num">8</span>
<span class="kw">let</span> <span class="vr">baseY</span>: <span class="tp">Double</span> = -<span class="num">40</span>
<span class="cm">// 1. Draw all posts in a row, centred around the origin</span>
<span class="cm">// 2. Draw a horizontal rail at half post height spanning all posts</span>
<span class="cm">// your code here</span></pre>
</div>
<button class="solution-toggle" onclick="toggleSolution(this,'sol08')">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
Show Solution
</button>
<div class="solution-body" id="sol08">
<div class="code-wrap">
<div class="code-header">
<span class="code-lang">Solution</span>
<button class="code-copy" onclick="copyCode(this)">Copy</button>
</div>
<pre><span class="kw">import</span> Foundation
<span class="kw">import</span> UIKit
<span class="kw">let</span> <span class="vr">postW</span>: <span class="tp">Double</span> = <span class="num">18</span>
<span class="kw">let</span> <span class="vr">postH</span>: <span class="tp">Double</span> = <span class="num">60</span>
<span class="kw">let</span> <span class="vr">gap</span>: <span class="tp">Double</span> = <span class="num">12</span>
<span class="kw">let</span> <span class="vr">count</span> = <span class="num">8</span>
<span class="kw">let</span> <span class="vr">baseY</span>: <span class="tp">Double</span> = -<span class="num">40</span>
<span class="cm">// Total width: n posts + (n-1) gaps</span>
<span class="kw">let</span> <span class="vr">totalWidth</span> = <span class="tp">Double</span>(<span class="vr">count</span>) * <span class="vr">postW</span> + <span class="tp">Double</span>(<span class="vr">count</span> - <span class="num">1</span>) * <span class="vr">gap</span>
<span class="kw">let</span> <span class="vr">startX</span> = -<span class="vr">totalWidth</span> / <span class="num">2</span> <span class="cm">// centre the fence on origin</span>
<span class="cm">// ── 1. Posts ─────────────────────────────────────────────</span>
<span class="kw">for</span> <span class="vr">i</span> <span class="kw">in</span> <span class="num">0</span>..<<span class="vr">count</span> {
<span class="kw">let</span> <span class="vr">x</span> = <span class="vr">startX</span> + <span class="tp">Double</span>(<span class="vr">i</span>) * (<span class="vr">postW</span> + <span class="vr">gap</span>)
<span class="fn">drawFencePost</span>(at: <span class="tp">Point</span>(x: <span class="vr">x</span>, y: <span class="vr">baseY</span>),
width: <span class="vr">postW</span>, height: <span class="vr">postH</span>)
}
<span class="cm">// ── 2. Horizontal rail at half post height ───────────────</span>
<span class="kw">let</span> <span class="vr">railH</span>: <span class="tp">Double</span> = <span class="num">4</span>
<span class="kw">let</span> <span class="vr">railY</span> = <span class="vr">baseY</span> + <span class="vr">postH</span> / <span class="num">2</span> - <span class="vr">railH</span> / <span class="num">2</span>
<span class="fn">drawRectAt</span>(
at: <span class="tp">Point</span>(x: <span class="vr">startX</span>, y: <span class="vr">railY</span>),
w: <span class="vr">totalWidth</span>, h: <span class="vr">railH</span>,
color: .<span class="vr">white</span>
)</pre>
</div>
<blockquote><strong>Order matters for the rail.</strong> The rail is drawn <em>after</em> the posts, so it paints over them. That's fine visually — the rail is white (same as the posts) so the overlap is invisible. If you wanted the posts to appear in front of the rail instead, you'd draw the rail first, then the posts.</blockquote>
</div>
<div class="im-table-wrap">
<div class="im-table-header">Curriculum Connections</div>
<table class="im-table">
<thead><tr><th>Concept</th><th>Connection</th></tr></thead>
<tbody>
<tr><td>Functions — Linear Expressions</td><td>Total fence width = <code>n·w + (n−1)·g</code>. For 8 posts at 18 wide with 12-point gaps: 8·18 + 7·12 = 144 + 84 = 228. The <code>n − 1</code> (not <code>n</code>) appears because there's one fewer gap than posts — the same "fencepost problem" that shows up in counting problems throughout discrete mathematics. Centring: <code>startX = −totalWidth / 2</code>.</td></tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- ════════════════════════════════════════
SECTION 09 — Broom Broom
════════════════════════════════════════ -->
<section id="s09">
<div class="section-hero">
<span class="section-tag exercise">◆ Exercise</span>
<h1>Broom Broom</h1>
<p class="lead">Every neighbourhood needs cars! Write <code>drawCar(at:size:)</code> that draws a simple side-on car using four parts:</p>
<button class="complete-btn" data-id="s09" onclick="toggleComplete(this)">
<span class="btn-icon">○</span> Mark as Complete
</button>
</div>
<div class="article">
<ul>
<li>Two square <strong>wheels</strong> at ground level (side = <code>size × 0.2</code>), positioned <code>size × 0.1</code> in from each end</li>
<li>A wide rectangular <strong>body</strong> (width = <code>size</code>, height = <code>size × 0.3</code>) sitting on top of the wheels</li>
<li>A narrower rectangular <strong>cabin</strong> on top of the body (width = <code>size × 0.55</code>, height = <code>size × 0.28</code>, inset <code>size × 0.18</code> from the left)</li>
</ul>
<p>The car's <code>pos</code> is the bottom-left corner of the <em>whole thing</em> — including the wheels. So the wheels sit at <code>y = pos.y</code>, the body sits at <code>y = pos.y + wheelSide</code>, and the cabin sits at <code>y = pos.y + wheelSide + bodyH</code>.</p>
<blockquote><strong>Stacked components — compute each layer's y.</strong> Think of the car as three layers stacked vertically:
<ul>
<li>Wheels: <code>y = pos.y</code> (ground level)</li>
<li>Body: <code>y = pos.y + wheelS</code> (above the wheels)</li>
<li>Cabin: <code>y = pos.y + wheelS + bodyH</code> (above the body)</li>
</ul>
Each layer's bottom edge = the previous layer's top edge. Compute each <code>y</code> once, use it wherever it's needed.
</blockquote>
<blockquote><strong>Right-wheel position — reasoning backwards.</strong> The right wheel's right edge should be <code>wheelIn</code> from the right edge of the body. So the wheel's <em>left</em> edge is at <code>pos.x + size − wheelIn − wheelS</code>. This "anchor from the right edge" pattern is the mirror of "anchor from the left edge" — you subtract the inset and then subtract the shape's own width to land the left corner in the right place.</blockquote>
<div class="code-wrap">
<div class="code-header">
<span class="code-lang">Swift</span>
<button class="code-copy" onclick="copyCode(this)">Copy</button>
</div>
<pre><span class="kw">func</span> <span class="fn">drawCar</span>(at pos: <span class="tp">Point</span>, size: <span class="tp">Double</span>) {
<span class="kw">let</span> <span class="vr">bodyH</span> = <span class="vr">size</span> * <span class="num">0.3</span>
<span class="kw">let</span> <span class="vr">cabinW</span> = <span class="vr">size</span> * <span class="num">0.55</span>
<span class="kw">let</span> <span class="vr">cabinH</span> = <span class="vr">size</span> * <span class="num">0.28</span>
<span class="kw">let</span> <span class="vr">cabinIn</span> = <span class="vr">size</span> * <span class="num">0.18</span> <span class="cm">// inset from left of body</span>
<span class="kw">let</span> <span class="vr">wheelS</span> = <span class="vr">size</span> * <span class="num">0.2</span>
<span class="kw">let</span> <span class="vr">wheelIn</span> = <span class="vr">size</span> * <span class="num">0.1</span> <span class="cm">// wheel inset from each end</span>
<span class="cm">// 1. Blue body (sitting on top of the wheels)</span>
<span class="cm">// 2. Cyan cabin (on top of the body, inset from left)</span>
<span class="cm">// 3. Black left wheel (at ground level, inset from left)</span>
<span class="cm">// 4. Black right wheel (at ground level, inset from right)</span>
<span class="cm">// your code here</span>
}</pre>
</div>
<button class="solution-toggle" onclick="toggleSolution(this,'sol09')">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
Show Solution
</button>
<div class="solution-body" id="sol09">
<div class="code-wrap">
<div class="code-header">
<span class="code-lang">Solution</span>
<button class="code-copy" onclick="copyCode(this)">Copy</button>
</div>
<pre><span class="kw">import</span> Foundation
<span class="kw">import</span> UIKit
<span class="kw">func</span> <span class="fn">drawCar</span>(at pos: <span class="tp">Point</span>, size: <span class="tp">Double</span>) {
<span class="kw">let</span> <span class="vr">bodyH</span> = <span class="vr">size</span> * <span class="num">0.3</span>
<span class="kw">let</span> <span class="vr">cabinW</span> = <span class="vr">size</span> * <span class="num">0.55</span>
<span class="kw">let</span> <span class="vr">cabinH</span> = <span class="vr">size</span> * <span class="num">0.28</span>
<span class="kw">let</span> <span class="vr">cabinIn</span> = <span class="vr">size</span> * <span class="num">0.18</span>
<span class="kw">let</span> <span class="vr">wheelS</span> = <span class="vr">size</span> * <span class="num">0.2</span>
<span class="kw">let</span> <span class="vr">wheelIn</span> = <span class="vr">size</span> * <span class="num">0.1</span>
<span class="cm">// Vertical layer anchors</span>
<span class="kw">let</span> <span class="vr">bodyY</span> = <span class="vr">pos</span>.<span class="vr">y</span> + <span class="vr">wheelS</span> <span class="cm">// above the wheels</span>
<span class="kw">let</span> <span class="vr">cabinY</span> = <span class="vr">bodyY</span> + <span class="vr">bodyH</span> <span class="cm">// above the body</span>
<span class="cm">// ── 1. Blue body ─────────────────────────────────────</span>
<span class="fn">drawRectAt</span>(
at: <span class="tp">Point</span>(x: <span class="vr">pos</span>.<span class="vr">x</span>, y: <span class="vr">bodyY</span>),
w: <span class="vr">size</span>, h: <span class="vr">bodyH</span>, color: .<span class="vr">blue</span>
)
<span class="cm">// ── 2. Cyan cabin on top of body, inset from left ────</span>
<span class="fn">drawRectAt</span>(
at: <span class="tp">Point</span>(x: <span class="vr">pos</span>.<span class="vr">x</span> + <span class="vr">cabinIn</span>, y: <span class="vr">cabinY</span>),
w: <span class="vr">cabinW</span>, h: <span class="vr">cabinH</span>, color: .<span class="vr">cyan</span>
)
<span class="cm">// ── 3. Black left wheel (square, ground level) ──────</span>
<span class="fn">drawRectAt</span>(
at: <span class="tp">Point</span>(x: <span class="vr">pos</span>.<span class="vr">x</span> + <span class="vr">wheelIn</span>, y: <span class="vr">pos</span>.<span class="vr">y</span>),
w: <span class="vr">wheelS</span>, h: <span class="vr">wheelS</span>, color: .<span class="vr">black</span>
)
<span class="cm">// ── 4. Black right wheel ─────────────────────────────</span>
<span class="fn">drawRectAt</span>(
at: <span class="tp">Point</span>(x: <span class="vr">pos</span>.<span class="vr">x</span> + <span class="vr">size</span> - <span class="vr">wheelIn</span> - <span class="vr">wheelS</span>, y: <span class="vr">pos</span>.<span class="vr">y</span>),
w: <span class="vr">wheelS</span>, h: <span class="vr">wheelS</span>, color: .<span class="vr">black</span>
)
}
<span class="cm">// Test</span>
<span class="fn">drawCar</span>(at: <span class="tp">Point</span>(x: -<span class="num">75</span>, y: -<span class="num">50</span>), size: <span class="num">150</span>)</pre>
</div>
<blockquote><strong>Why "wheels first in my head" is a useful trick.</strong> When a shape has parts at multiple heights (wheels → body → cabin), think from the ground up: what's at <code>pos.y</code>? What's at the next layer? And the next? This matches how you'd build a real car or a stack of blocks. Then write the code in any order — painter's algorithm (later calls paint over earlier ones) means the drawing order only matters when shapes overlap.</blockquote>
</div>
<div class="im-table-wrap">