-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcoords.html
More file actions
1279 lines (1238 loc) · 59.3 KB
/
coords.html
File metadata and controls
1279 lines (1238 loc) · 59.3 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" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rulers and Graph Paper</title>
<meta name="description"
content="Why complex numbers are interesting.">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>MathJax = {tex: { inlineMath: [["$", "$"], ["\\(", "\\)"]] }};
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"
id="MathJax-script">
</script>
<style>
div {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.textcolumn {
padding-left: 1em;
padding-right: 1em;
min-width: 22em;
max-width: 52em;
margin: 0 auto;
}
.halfwide {
width: 60%;
float: right;
}
.clickable {
cursor: pointer;
}
.backlit {
background-color: #d8d8d8;
}
svg {
background-color: #ffffff;
stroke-linecap: round;
stroke-linejoin: round;
width: 100%;
height: 100%;
}
.belowsvg {
font: italic bold large serif;
padding-top: 0px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.svgtxt {
font: bold 0.45px sans-serif;
}
@media only screen and (max-width: 620px) {
.halfwide {
width: 100%;
}
}
</style>
</head>
<body>
<div class="textcolumn">
<h1 style="text-align: center;">
<a href="index.html">Rulers and Graph Paper</a></h1>
<h2>Adding and multiplying with rulers</h2>
<p>A number line is an idealized infinite ruler, a coordinate system
for the points on the line. The point associated with the number
zero is called the origin, and the distance from the origin to the
point associated with the number one is the unit of the ruler.
Both origin and unit are arbitrary. We draw a circle at the
origin and draw a square at the point corresponding to the number
one; the thick segment connecting them is one unit long.</p>
<p>To add two numbers we use two rulers, here blue and orange, with the
same units but different origins: Drag the origin of the orange
ruler to the first addend on the blue scale, then drag the gray slider
to the second addend on the orange scale. Read the sum as the position
of the slider on the blue scale.</p>
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="-6 -0.5 12 1.0" onload="add1d_interactions(evt)"
stroke-width="0.03">
<path fill="none" stroke="#0080ff"
d="M -5.8,0 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.2 v .4 m .2,-.4 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.2 v .4 m .2,-.4 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.2 v .4 m .2,-.4 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.2 v .4 m .2,-.4 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.2 v .4 m .2,-.4 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.2 v .4 m .2,-.4 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.2 v .4 m .2,-.4 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.2 v .4 m .2,-.4 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.2 v .4 m .2,-.4 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.2 v .4 m .2,-.4 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.2 v .4 m .2,-.4 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2"/>
<path id="add1t" fill="none" stroke="#ff8000" transform="translate(0.00,0)"
d="M -12.8,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2"/>
<line stroke="black" stroke-width="0.04" x1="-6" y1="0" x2="6" y2="0" />
<line stroke="#0080ff" stroke-width="0.08" x1="0" y1="0" x2="1" y2="0" />
<circle fill="#0080ff" stroke="#0080ff"
cx="0" cy="0" r="0.1" />
<rect fill="#0080ff" stroke="#0080ff"
x="0.9" y="-0.1" width="0.2" height="0.2" />
<g id="add1ug" transform="translate(0.00,0)">
<line stroke="#ff8000" stroke-width="0.08" x1="0" y1="0" x2="1" y2="0" />
<circle id="add1uc" fill="#ff8000" stroke="#ff8000"
cx="0" cy="0" r="0.1" />
<rect fill="#ff8000" stroke="#ff8000"
x="0.9" y="-0.1" width="0.2" height="0.2" />
</g>
<polygon id="add1s" fill="black" stroke="black" opacity="0.5"
transform="translate(1.8,0)"
points="-0.14142,0, 0,-0.14142, 0.14142,0, 0,0.14142"/>
</svg>
<p class="belowsvg">
<span id="add1x" class="" style="color: #0080ff;">0.00</span> +
<span id="add1y" class="" style="color: #ff8000;">1.80</span> =
<span id="add1z" class="" style="color: #0080ff;">1.80</span></p>
<p>Similarly, to multiply two numbers we can use two rulers with the
same origins but different units: Drag the square marker of the
orange ruler to the first multiplicand on the blue scale (which is
the new unit of the stretched orange ruler), then drag the gray
slider to the second multiplicand on the orange scale. Read the
product as the position of the slider on the blue scale. Be sure
to notice what happens when you drag the orange square to the left
of the common origin - a negative unit sometimes makes sense.</p>
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="-6 -0.5 12 1.0" onload="mul1d_interactions(evt)"
stroke-width="0.03">
<path fill="none" stroke="#0080ff"
d="M -5.8,0 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.2 v .4 m .2,-.4 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.2 v .4 m .2,-.4 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.2 v .4 m .2,-.4 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.2 v .4 m .2,-.4 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.2 v .4 m .2,-.4 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.2 v .4 m .2,-.4 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.2 v .4 m .2,-.4 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.2 v .4 m .2,-.4 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.2 v .4 m .2,-.4 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.2 v .4 m .2,-.4 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.2 v .4 m .2,-.4 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2"/>
<path id="mul1t" fill="none" stroke="#ff8000" stroke-width="0.03"
transform="scale(1.00,1)"
d="M -32.8,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2
m .2,-.4 v .4 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2 m .2,-.2 v .2"/>
<line stroke="black" x1="-6" y1="0" x2="6" y2="0" />
<line stroke="#0080ff" stroke-width="0.08" x1="0" y1="0" x2="1" y2="0" />
<circle fill="#0080ff" stroke="#0080ff"
cx="0" cy="0" r="0.1" />
<rect fill="#0080ff" stroke="#0080ff"
x="0.9" y="-0.1" width="0.2" height="0.2" />
<line id="mul1ul" stroke="#ff8000" stroke-width="0.08"
x1="0" y1="0" x2="1.00" y2="0" />
<circle fill="#ff8000" stroke="#ff8000"
cx="0" cy="0" r="0.1" />
<rect id="mul1ur" fill="#ff8000" stroke="#ff8000"
x="0.90" y="-0.1" width="0.2" height="0.2" />
<polygon id="mul1s" fill="black" stroke="black" opacity="0.5"
transform="translate(1.8,0)"
points="-0.14142,0, 0,-0.14142, 0.14142,0, 0,0.14142"/>
</svg>
<p class="belowsvg">
<span id="mul1x" class="" style="color: #0080ff;">1.00</span> ×
<span id="mul1y" class="" style="color: #ff8000;">1.80</span> =
<span id="mul1z" class="" style="color: #0080ff;">1.8000</span></p>
<p>Addition of numbers corresponds to displacing the coordinate
origin. Multiplication of numbers corresponds to changing the
coordinate unit. Thus, a number may play several different roles:
As a coordinate, a number represents a position. As an addend, a
number represents a displacement. And as a multiplier, a number
represents a change of scale.</p>
<h2>Adding and multiplying with graph paper</h2>
<p>Graph paper provides a coordinate system for the points in a
plane. Our unit on the plane is a square instead of a segment;
one corner goes at an arbitrary origin point, then we tile the
remainder of the plane into a grid of our unit squares. Two
coordinate numbers are associated with each point of the plane,
the row and column numbers of the point in our grid. Generally we
write the coordinates as the pair $(x, y)$, the horizontal number
followed by the vertical number. However, here we write $x + iy$,
although we have not yet defined either the $+$ sign or the symbol
$i$ that multiplies $y$. This notation will turn out to be
consistent with our upcoming definitions of "addition" and
"multiplication"; until then you may regard $x + iy$ as simply an
eccentric way to write $(x, y)$.</p>
<p>By analogy with our definitions in one dimension, we will define
two dimensional "addition" as changing the origin with a fixed
unit square, and "multiplication" as changing the unit square with
a fixed origin.</p>
<div class="halfwide">
<svg xmlns="http://www.w3.org/2000/svg" style="padding-left: 0.5em"
viewBox="-4.1 -4.1 8.2 8.2" onload="add2d_interactions(evt)"
stroke-width="0.03">
<defs>
<marker id="arrow-gray" orient="auto" viewBox="0 -3 6 6"
refX="6" markerWidth="6" markerHeight="6">
<polygon fill="#808080" stroke="#808080" stroke-width="1"
points="0,-3, 6,0, 0,3"/>
</marker>
<marker id="arrow-blue" orient="auto" viewBox="0 -3 6 6"
refX="6" markerWidth="6" markerHeight="6">
<polygon fill="#0080ff" stroke="#0080ff" stroke-width="1"
points="0,-3, 6,0, 0,3"/>
</marker>
<marker id="arrow-orange" orient="auto" viewBox="0 -3 6 6"
refX="6" markerWidth="6" markerHeight="6">
<polygon fill="#ff8000" stroke="#ff8000" stroke-width="1"
points="0,-3, 6,0, 0,3"/>
</marker>
</defs>
<path fill="none" stroke="#0080ff" opacity="0.33"
d="M -5,-6 v 12
m 1,-12 v 12 m 1,-12 v 12 m 1,-12 v 12 m 1,-12 v 12 m 1,-12 v 12
m 1,-12 v 12 m 1,-12 v 12 m 1,-12 v 12 m 1,-12 v 12 m 1,-12 v 12
M -6,-5 h 12
m -12,1 h 12 m -12,1 h 12 m -12,1 h 12 m -12,1 h 12 m -12,1 h 12
m -12,1 h 12 m -12,1 h 12 m -12,1 h 12 m -12,1 h 12 m -12,1 h 12"/>
<path id="add2t" fill="none" stroke="#ff8000" opacity="0.33"
stroke-width="0.03" transform="translate(0.00,0.00)"
d="M -12,-13 v 26
m 1,-26 v 26 m 1,-26 v 26 m 1,-26 v 26 m 1,-26 v 26 m 1,-26 v 26
m 1,-26 v 26 m 1,-26 v 26 m 1,-26 v 26 m 1,-26 v 26 m 1,-26 v 26
m 1,-26 v 26 m 1,-26 v 26 m 1,-26 v 26 m 1,-26 v 26 m 1,-26 v 26
m 1,-26 v 26 m 1,-26 v 26 m 1,-26 v 26 m 1,-26 v 26 m 1,-26 v 26
m 1,-26 v 26 m 1,-26 v 26 m 1,-26 v 26 m 1,-26 v 26
M -13,-12 h 26
m -26,1 h 26 m -26,1 h 26 m -26,1 h 26 m -26,1 h 26 m -26,1 h 26
m -26,1 h 26 m -26,1 h 26 m -26,1 h 26 m -26,1 h 26 m -26,1 h 26
m -26,1 h 26 m -26,1 h 26 m -26,1 h 26 m -26,1 h 26 m -26,1 h 26
m -26,1 h 26 m -26,1 h 26 m -26,1 h 26 m -26,1 h 26 m -26,1 h 26
m -26,1 h 26 m -26,1 h 26 m -26,1 h 26 m -26,1 h 26"/>
<polygon stroke="#0080ff" fill="none" stroke-width="0.1"
points="0,0, 1,0, 1,-1, 0,-1" />
<circle fill="#0080ff" stroke="#0080ff"
cx="0" cy="0" r="0.125" />
<rect fill="#0080ff" stroke="#0080ff" stroke-width="0.05"
x="0.9" y="-0.1" width="0.25" height="0.25" />
<polygon id="add2gg" fill="none" stroke="#808080" stroke-width="0.05"
points="0.0,0.0, 1.8,0.0, 1.8,-0.8, 0.0,-0.8" />
<polygon id="add2gb" fill="none" stroke="#0080ff" stroke-width="0.05"
points="0.0,0.0, 0.0,0.0, 0.0,0.0, 0.0,0.0" />
<polygon id="add2go" fill="none" stroke="#ff8000" stroke-width="0.05"
points="0.0,0.0, 1.8,0.0, 1.8,-0.8, 0.0,-0.8" />
<g id="add2ug" transform="translate(0.00,0)">
<polygon stroke="#ff8000" fill="none" stroke-width="0.1"
points="0,0, 1,0, 1,-1, 0,-1"/>
<circle id="add2uc" fill="#ff8000" stroke="#ff8000"
cx="0" cy="0" r="0.125" />
<rect fill="#ff8000" stroke="#ff8000"
x="0.90" y="-0.1" width="0.25" height="0.25" />
</g>
<line id="add2vo" fill="#ff8000" stroke="#ff8000" stroke-width="0.05"
marker-end="none" x1="0" y1="0" x2="0" y2="0"/>
<line id="add2vb" fill="#0080ff" stroke="#0080ff" stroke-width="0.05"
marker-end="none" x1="0" y1="0" x2="0" y2="0"/>
<line id="add2vg" fill="#808080" stroke="#808080" stroke-width="0.05"
marker-end="url(#arrow-gray)" x1="0" y1="0" x2="1.8" y2="-0.8"/>
<circle id="add2ucx" fill="#ff8000" stroke="#ff8000" opacity="0.0"
transform="translate(0.00,0)" cx="0" cy="0" r="0.125" />
<polygon id="add2s" fill="black" stroke="black" opacity="0.5"
transform="translate(1.8,-0.8)"
points="-0.1768,0, 0,-0.1768, 0.1768,0, 0,0.1768"/>
</svg>
<p class="belowsvg">
(<span id="add2x" class="" style="color: #0080ff;">1.00 + i0.00</span>) +
(<span id="add2y" class="" style="color: #ff8000;">1.80 + i0.80</span>) =
<span id="add2z" class="" style="color: #808080;">1.80 + i0.80</span></p>
</div>
<p>To explore this idea, we need two overlapping sheets of graph
paper which initially overlay each other. We choose the lower left
corner of our unit square to be the origin, drawn with a circular
marker here. We also need to specify which edge of our unit square
corresponds to the $x$ axis (our first coordinate); here drawn with
a square marker.</p>
<p>To add two points in the plane, we drag the origin of the orange
sheet to first addend on the blue sheet, then drag the gray diamond
marker to the second addend on the orange sheet. Read the sum as the
position of the gray diamond on the blue sheet. We've drawn arrows
corresponding to the first and second addends (blue and orange) and
to their sum (gray). Note that you are to read the gray coordinates
on the blue plane, not on the orange plane.</p>
<p>Please convince yourself that this definition of "addition"
of planar coordinate pairs amounts to simply adding each of the
two components separately:
$$(a+ib) + (x+iy) = (a+x) + i(b+y).$$
</p>
</div><div class="textcolumn" style="clear: right; margin-top: 0.3em;">
<div class="halfwide">
<svg xmlns="http://www.w3.org/2000/svg" style="padding-left: 0.5em"
viewBox="-4.1 -4.1 8.2 8.2" onload="mul2d_interactions(evt)"
stroke-width="0.03">
<path fill="none" stroke="#0080ff" opacity="0.33"
d="M -5,-6 v 12
m 1,-12 v 12 m 1,-12 v 12 m 1,-12 v 12 m 1,-12 v 12 m 1,-12 v 12
m 1,-12 v 12 m 1,-12 v 12 m 1,-12 v 12 m 1,-12 v 12 m 1,-12 v 12
M -6,-5 h 12
m -12,1 h 12 m -12,1 h 12 m -12,1 h 12 m -12,1 h 12 m -12,1 h 12
m -12,1 h 12 m -12,1 h 12 m -12,1 h 12 m -12,1 h 12 m -12,1 h 12"/>
<path id="mul2t" fill="none" stroke="#ff8000" opacity="0.33"
stroke-width="0.03" transform="scale(1.00,1.00)"
d="M -32,-33 v 66
m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66
m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66
m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66
m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66
m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66
m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66
m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66
m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66
m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66
m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66
m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66
m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66
m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66 m 1,-66 v 66
M -33,-32 h 66
m -66,1 h 66 m -66,1 h 66 m -66,1 h 66 m -66,1 h 66 m -66,1 h 66
m -66,1 h 66 m -66,1 h 66 m -66,1 h 66 m -66,1 h 66 m -66,1 h 66
m -66,1 h 66 m -66,1 h 66 m -66,1 h 66 m -66,1 h 66 m -66,1 h 66
m -66,1 h 66 m -66,1 h 66 m -66,1 h 66 m -66,1 h 66 m -66,1 h 66
m -66,1 h 66 m -66,1 h 66 m -66,1 h 66 m -66,1 h 66 m -66,1 h 66
m -66,1 h 66 m -66,1 h 66 m -66,1 h 66 m -66,1 h 66 m -66,1 h 66
m -66,1 h 66 m -66,1 h 66 m -66,1 h 66 m -66,1 h 66 m -66,1 h 66
m -66,1 h 66 m -66,1 h 66 m -66,1 h 66 m -66,1 h 66 m -66,1 h 66
m -66,1 h 66 m -66,1 h 66 m -66,1 h 66 m -66,1 h 66 m -66,1 h 66
m -66,1 h 66 m -66,1 h 66 m -66,1 h 66 m -66,1 h 66 m -66,1 h 66
m -66,1 h 66 m -66,1 h 66 m -66,1 h 66 m -66,1 h 66 m -66,1 h 66
m -66,1 h 66 m -66,1 h 66 m -66,1 h 66 m -66,1 h 66 m -66,1 h 66
m -66,1 h 66 m -66,1 h 66 m -66,1 h 66 m -66,1 h 66"/>
<polygon stroke="#0080ff" fill="none" stroke-width="0.1"
points="0,0, 1,0, 1,-1, 0,-1" />
<circle fill="#0080ff" stroke="#0080ff"
cx="0" cy="0" r="0.125" />
<rect fill="#0080ff" stroke="#0080ff" stroke-width="0.05"
x="0.9" y="-0.1" width="0.25" height="0.25" />
<polygon id="mul2gg" fill="none" stroke="#808080" stroke-width="0.05"
points="0.0,0.0, 1.8,0.0, 1.8,-0.8, 0.0,-0.8" />
<polygon id="mul2gb" fill="none" stroke="#0080ff" stroke-width="0.05"
points="0.0,0.0, 0.0,0.0, 0.0,0.0, 0.0,0.0" />
<polygon id="mul2go" fill="none" stroke="#ff8000" stroke-width="0.05"
points="0.0,0.0, 1.8,0.0, 1.8,-0.8, 0.0,-0.8" />
<polygon id="mul2ul" stroke="#ff8000" fill="none" stroke-width="0.1"
points="0,0, 1,0, 1,-1, 0,-1"/>
<circle fill="#ff8000" stroke="#ff8000" cx="0" cy="0" r="0.125" />
<polygon id="mul2ur" fill="#ff8000" stroke="#ff8000"
transform="matrix(1.0, 0.0, 0.0, 1.0, 1.0, 0.0)"
points="-0.125,-0.125, 0.125,-0.125, 0.125,0.125, -0.125,0.125" />
<line id="mul2vb" fill="#0080ff" stroke="#0080ff" stroke-width="0.05"
marker-end="url(#arrow-blue)" x1="0" y1="0" x2="1.0" y2="0.0"/>
<line id="mul2vec" fill="#808080" stroke="#808080" stroke-width="0.05"
marker-end="url(#arrow-gray)" x1="0" y1="0" x2="1.8" y2="-0.8"/>
<polygon id="mul2urx" fill="#ff8000" stroke="#ff8000" opacity="0.0"
transform="matrix(1.0, 0.0, 0.0, 1.0, 1.0, 0.0)"
points="-0.125,-0.125, 0.125,-0.125, 0.125,0.125, -0.125,0.125" />
<polygon id="mul2s" fill="black" stroke="black" opacity="0.5"
transform="translate(1.8,-0.8)"
points="-0.1768,0, 0,-0.1768, 0.1768,0, 0,0.1768" />
</svg>
<p class="belowsvg">
(<span id="mul2x" class="" style="color: #0080ff;">1.00 + i0.00</span>)
×
(<span id="mul2y" class="" style="color: #ff8000;">1.80 + i0.80</span>) =
<span id="mul2z" class="" style="color: #808080;">1.8000 + i0.8000</span>
</p>
</div>
<p>Multiplication is far more interesting. We can scale our unit
square by dragging its lower right corner, the one we marked with
a square at the point $1+i0$, to the first multiplicand on the
blue sheet. Then drag the gray diamond marker to the second
multiplicand on the orange sheet. Read the product as the
position of the gray diamond on the blue sheet. We've drawn
arrows as for addition, but this time the orange arrow always
coincides with the gray arrow, so you only see the gray arrow.
The orange and gray guideline rectangles from the arrow tip back
to their respective coordinate axes are more useful for reading
the orange and blue coordinates, respectively.</p>
<p>If we drag the orange square marker directly to the left or right
along the $x$-axis (to points $x+i0$ where $y=0$), we change only
the scale of the unit square, and this definition of
multiplication exactly matches our one dimensional interpretation
of multiplication with rulers when both multiplicands have $y=0$.
But our orange unit square can be tilted as well as rescaled, and
dragging the orange square marker off the $x$-axis does exactly
that. In other words, changing unit squares in two dimensions may
rotate our coordinate system in addition to merely rescaling it --
we can orient our graph paper however we like as well as making
the unit square any size we like.</p>
<div style="width: 175px; float: left;">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="-1.0 -3.2 3.5 3.8" stroke-width="0.03">
<polygon stroke="#0080ff" fill="none" stroke-width="0.1"
points="0,0, 1,0, 1,-1, 0,-1" />
<circle fill="#0080ff" stroke="#0080ff"
cx="0" cy="0" r="0.125" />
<rect fill="#0080ff" stroke="#0080ff"
x="0.9" y="-0.1" width="0.25" height="0.25" />
<polygon fill="none" stroke="#808080"
points="0.0,0.0, 0.61,0.0, 0.61,-2.75, 0.0,-2.75" />
<polygon fill="none" stroke="#0080ff"
points="0.0,0.0, 0.0,0.0, 0.0,0.0, 0.0,0.0" />
<polygon fill="none" stroke="#ff8000"
points="0.0,0.0, 1.53,-0.68, 0.61,-2.75, -0.92,-2.07" />
<polygon stroke="#ff8000" fill="none" stroke-width="0.1"
points="0,0, 1.8,-0.8, 1,-2.6, -0.8,-1.8"/>
<circle fill="#ff8000" stroke="#ff8000" cx="0" cy="0" r="0.125" />
<polygon fill="#ff8000" stroke="#ff8000"
transform="matrix(0.91381, -0.40614, 0.40614, 0.91381, 1.8, -0.8)"
points="-0.125,-0.125, 0.125,-0.125, 0.125,0.125, -0.125,0.125" />
<line fill="#0080ff" stroke="#0080ff" stroke-width="0.05"
marker-end="url(#arrow-blue)" x1="0" y1="0" x2="1.8" y2="-0.8"/>
<line fill="#808080" stroke="#808080" stroke-width="0.05"
marker-end="url(#arrow-gray)" x1="0" y1="0" x2="0.61" y2="-2.75"/>
<text class="svgtxt" x="0.0" y="0.5" style="text-anchor: end;">O</text>
<text class="svgtxt" x="1.0" y="0.5">U</text>
<text class="svgtxt" fill="#0080ff" x="1.8" y="-0.3">V</text>
<text class="svgtxt" fill="#808080" x="0.61" y="-2.75">W</text>
</svg></div>
<p>Consider this labeled snapshot of the interactive picture: The
the distance of point V from the origin O measured in blue units
represents the ratio of the distance between any two points in
blue units to the distance between the same two points in orange
units, because OV has length one in orange units. Hence, OW in
blue units is OW in orange units times OV in blue units: The
distance of the two dimensional product from O is the ordinary
product of the distances of the multiplicands from O.
Furthermore, the first multiplicand, OV, is at an angle UOV up
from the blue $x$-axis (OU), while the second multiplicand, OW
represented by orange coordinates, is at an angle VOW up from the
orange $x$-axis (OV). The product OW represented by blue
coordinates is at an angle UOW up from the blue $x$-axis. Since
the sum of angles OUV and VOW equals angle UOW, the angle of a two
dimensional product from the $x$-axis is the sum of the angles of
the multiplicands.</p>
<p>To summarize, our two dimensional multiplication rule is that
angles from the $x$-axis add and the distances from the origin
multiply.</p>
<p>Finally, we can justify our eccentric coordinate notation $x +
iy$, by interpreting all the symbols as points and operations
using our two dimensional definitions of addition and
multiplication: First, interpreting the two dimensional product
$iy$ as $(0 + i1)(y + i0)$, the first multiplicand $i$ rotates the
point at $y$ on the $x$-axis ninety degrees, so that $iy = 0 +
iy$. And under two dimensional addition, interpreting $x$ as $x +
i0$ means that the sum produces exactly $x + iy$. Hence, the
eccentric notation turns out to exactly match the behavior of our
two dimensional arithmetic operations.</p>
<h2>Complex numbers</h2>
<p>Our two dimensional numbers $x + iy$, the coordinates of points
in a plane in a slightly eccentric notation, are called complex
numbers. Addition corresponds to changing the coordinate origin
with a fixed unit square, while multiplication corresponds to
changing the unit square with a fixed origin. This is a direct
generalization of ordinary arithmetic, simply replacing the unit
segment of a ruler with the unit square of a sheet of graph paper.
You can verify these definitions of addition and multiplication
satisfy the same three properties as ordinary arithmetic, namely
both operations are commutative and associative, and the
distributive law of multiplication over addition applies. The
ordinary numbers are embedded within the complex numbers as the
line where $y = 0$, the $x$-axis.</p>
<p>The complex number $i = 0 + i1$ is called the imaginary unit, a
terrible name which came about because it has the curious property
that $i^2 = -1$, which is famously impossible for any ordinary
number -- hence imaginary. For us, $i$ is just the corner of the
unit square diagonally opposite the corner we labeled $1$. The
$x$ coordinate is called the real part of a complex number, while
the $y$ coordinate is called its imaginary part. The $x$ and $y$
axes are called the real and imaginary axes, respectively. The
angle from the real axis is called the argument of a complex
number, while the distance from the origin is called its modulus.
Hence, to add complex numbers, we separately add their real and
imaginary parts, and to multiply complex numbers, we add their
arguments and multiply their moduli.</p>
<div style="width: 160px; float: right;">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="-1.5 -2.8 3.0 3.9" stroke-width="0.03">
<g transform="translate(0,-1.5)">
<polygon stroke="#0080ff" fill="none" stroke-width="0.1"
points="0,0, 1,0, 1,-1, 0,-1" />
<circle fill="#0080ff" stroke="#0080ff"
cx="0" cy="0" r="0.125" />
<rect fill="#0080ff" stroke="#0080ff"
x="0.9" y="-0.1" width="0.25" height="0.25" />
<polygon stroke="#ff8000" fill="none" stroke-width="0.1"
points="0,0, 0,-1, -1,-1, -1,0"/>
<circle fill="#ff8000" stroke="#ff8000" cx="0" cy="0" r="0.125" />
<rect fill="#ff8000" stroke="#ff8000"
x="-0.1" y="-1.1" width="0.25" height="0.25" />
<line fill="#0080ff" stroke="#0080ff" stroke-width="0.05"
marker-end="url(#arrow-blue)" x1="0" y1="0" x2="0" y2="-1"/>
</g>
<polygon stroke="#0080ff" fill="none" stroke-width="0.1"
points="0,0, 1,0, 1,-1, 0,-1" />
<circle fill="#0080ff" stroke="#0080ff"
cx="0" cy="0" r="0.125" />
<rect fill="#0080ff" stroke="#0080ff"
x="0.9" y="-0.1" width="0.25" height="0.25" />
<polygon stroke="#ff8000" fill="none" stroke-width="0.1"
points="0,0, -1,0, -1,1, 0,1"/>
<circle fill="#ff8000" stroke="#ff8000" cx="0" cy="0" r="0.125" />
<rect fill="#ff8000" stroke="#ff8000"
x="-1.1" y="-0.1" width="0.25" height="0.25" />
<line fill="#0080ff" stroke="#0080ff" stroke-width="0.05"
marker-end="url(#arrow-blue)" x1="0" y1="0" x2="-1" y2="0"/>
</svg></div>
<p>Complex multiplication by $i$ represents a ninety degree rotation
of the unit square (upper sketch), while multiplication by $-1$
represents a hundred eighty degree rotation of the unit square
(lower sketch). Since two ninety degree rotations produce a
hundred eighty degree rotation, $i^2 = -1$ is perfectly natural in
two dimensions, not imaginary at all.</p>
<p>With this property of $i$, we can use the distributive law to
find the general formula for complex multiplication:
$$(a + ib)(x + iy) = ax + iay + ibx + i^2by = (ax-by) + i(ay+bx)$$
Note that we need four ordinary multiplies and two ordinary adds
to carry out one complex multiply; multiplication is more
complicated than addition, because rotation mixes the $x$ and $y$
coordinates.</p>
<div style="width: 96px; float: left;">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="-0.4 -1.3 1.8 2.6" stroke-width="0.03">
<polygon stroke="#0080ff" fill="none" stroke-width="0.1"
points="0,0, 1,0, 1,-1, 0,-1" />
<circle fill="#0080ff" stroke="#0080ff"
cx="0" cy="0" r="0.125" />
<rect fill="#0080ff" stroke="#0080ff"
x="0.9" y="-0.1" width="0.25" height="0.25" />
<polygon stroke="#ff8000" fill="none" stroke-width="0.1"
points="0,0, 0,1, 1,1, 1,0"/>
<circle fill="#ff8000" stroke="#ff8000" cx="0" cy="0" r="0.125" />
<rect fill="#ff8000" stroke="#ff8000"
x="0.9" y="-0.1" width="0.25" height="0.25" />
</svg></div>
<p>We have defined complex addition and multiplication to correspond
to physical operations of translation, rotation, and scaling.
That omits one important physical operation: reflection.
Reflection does not correspond to any number of add or multiply
operations in two dimensions. (In one dimension, multiplying by
-1 does correspond to reflection, but in two dimensions,
multiplying by -1 is a hundred eighty degree rotation.) Addition
and multiplication can only produce the effects of sliding the
graph paper around on the plane or of scaling its unit to a
different size. Reflection corresponds to flipping the graph
paper over, for example by switching the order of the $x$ and $y$
coordinates, or by multiplying just one of the coordinates by -1.
In complex arithmetic, the operation of reflection through the
$x$-axis, that is, of changing the sign of the $y$ coordinate, is
called taking the complex conjugate. In terms of our unit
squares, complex conjugation flips the unit square vertically, as
shown in the sketch to the left.</p>
<p>The product of any complex number with its conjugate gives the
square of its modulus (according to the Pythagorean theorem):
$(a+ib)(a-ib) = a^2 - (ib)^2 = a^2+b^2$. Note that this relation
also provides the formula for the reciprocal of a complex number,
$1/(a+ib) = (a-ib)/(a^2+b^2)$. In general, the quotient of two
complex numbers has the quotient of their moduli and the
difference of their arguments, so this reciprocal formula produces
very interesting algorithms for computing differences in
angle.</p>
<h2>Complex mappings</h2>
<p>The key feature of complex numbers and their arithmetic is that a
complex number may represent a position (coordinates in a plane),
a displacement (addend), or a change of unit (multiplicand).
Complex addition and multiplication are interesting because they
model the physical operations of translation, rotation, and
scaling in the plane. The situation is exactly analogous to the
case of real numbers, which may be coordinates, displacements, or
scalings on a line. Just as you think of a number line, complex
arithmetic lets you think about a number plane. As the name
suggests, it gets more complicated, but you won't get bored with
a number plane nearly as quickly as with a number line.</p>
<div class="halfwide">
<svg xmlns="http://www.w3.org/2000/svg" style="padding-left: 0.5em"
viewBox="-2 -5 6.1 6.1" onload="orion_interactions(evt)"
stroke-width="0.04">
<defs>
<circle id="graycirc"
fill="#d0e0ff" stroke="none" cx="0" cy="0" r="0.05" />
<circle id="orangecirc"
fill="#ff8000" stroke="none" cx="0" cy="0" r="0.05" />
</defs>
<use href="#graycirc" x="0.0532" y="-3.3702"/>
<use href="#graycirc" x="1.3419" y="-2.8980"/>
<use href="#graycirc" x="1.2648" y="-0.2000"/>
<use href="#graycirc" x="-0.2648" y="-0.2489"/>
<use href="#graycirc" x="0.3354" y="-1.5678"/>
<use href="#graycirc" x="0.5668" y="-1.6581"/>
<use href="#graycirc" x="0.7888" y="-1.7785"/>
<use href="#graycirc" x="0.4238" y="-0.8096"/>
<use href="#graycirc" x="0.4520" y="-0.9018"/>
<use href="#graycirc" x="0.4633" y="-1.0053"/>
<line fill="none" stroke="#d0e0ff" x1="0" y1="0" x2="1" y2="0"/>
<circle fill="#d0e0ff" stroke="none" cx="0" cy="0" r="0.1"/>
<rect fill="#d0e0ff" stroke="none"
x="0.9" y="-0.1" width="0.2" height="0.2"/>
<g id="oriong" transform="matrix(1,0,0,1,0,0)"> <!-- orion -->
<use href="#orangecirc" x="0.0532" y="-3.3702"/>
<use href="#orangecirc" x="1.3419" y="-2.8980"/>
<use href="#orangecirc" x="1.2648" y="-0.2000"/>
<use href="#orangecirc" x="-0.2648" y="-0.2489"/>
<use href="#orangecirc" x="0.3354" y="-1.5678"/>
<use href="#orangecirc" x="0.5668" y="-1.6581"/>
<use href="#orangecirc" x="0.7888" y="-1.7785"/>
<use href="#orangecirc" x="0.4238" y="-0.8096"/>
<use href="#orangecirc" x="0.4520" y="-0.9018"/>
<use href="#orangecirc" x="0.4633" y="-1.0053"/>
<line id="oline" fill="none" stroke="#ff8000" stroke-width="0.04"
x1="0" y1="0" x2="1" y2="0"/>
</g>
<circle id="orion0" fill="#ff8000" stroke="none" cx="0" cy="0" r="0.1"
transform="translate(0,0)"/>
<rect id="orion1" fill="#ff8000" stroke="none"
x="-0.1" y="-0.1" width="0.2" height="0.2"
transform="matrix(1,0,0,1,1,0)"/>
</svg>
<p class="belowsvg">
w =
(<span id="oriona" class="" style="color: black;">1.00 + i0.00</span>)z +
(<span id="orionb" class="" style="color: black;">0.00 + i0.00</span>)
</p>
</div>
<p>Here we plot ten complex numbers whose coordinates match the
pattern of the constellation Orion. The unit segment, one edge of
the unit square we chose, is drawn below them. You can drag the
circle origin marker to translate Orion, or the square unit marker
to scale and rotate him.</p>
<p>We can label the original coordinate complex numbers $z_k$ for
$k=0$ through $9$. (Say Rigel, Orion's right foot, is $z_0$, and
Betelgeuse, his left shoulder, is $z_1$, and so on in order of
decreasing brightness, ending with $z_9$ for one of the nebulae in
his sword.) When we select a unit, we are selecting a complex
multiplicand, say $a$, and when we select an origin, we are
selecting a complex addend, say $b$. In the original coordinate
system, we write $w_k$ for the coordinates of the translated,
scaled, and rotated points of Orion. For each point, $w_k=az_k +
b.$ We could add as many points as we please to the pattern, and
accomplish the common translation of all of them with the single
rule, $w=az+b.$</p>
<p>This complex function $w = f(z) = az + b$ maps any point in the
complex $z$ plane to a new point $f(z)$ in the complex $w$ plane.
We call it a linear mapping. The complex constants $a$ and $b$
represent the rotation and scaling ($a$) and translation ($b$) of
the mapping. Other smooth complex functions, like $w=z^2$,
distort figures in the plane, but only by causing the amount of
displacement, rotation, and scaling to vary smoothly from place to
place -- in small regions around nearly every point every mapping
is linear. Mappings which leave small shapes unchanged except for
rotation and scaling are called conformal, and their study is the
theory of analytic functions. Analytic function theory remains a
very active and fruitful branch of mathematics.</p>
<p>And all of this boils down to how well we understand graph paper
and rulers.</p>
</div>
<!--
colors: orangered #ff4500 gold #ffd700
dodgerblue #1e90ff
blue: #0080ff orange: #ff8000
-->
<script>
var tracking = null;
function add_trackers(svg, targets, start, track, stop) {
// svg = svg element
// targets = array of elements in svg to listen for mouse down events
// start(index, coords) --> tracking (or null to abort)
// index = index into targets
// coords = event coordinates in svg coordinate system
// track(tracking, coords) --> tracking (or null to abort)
// tracking = returned by start
// coords = event coordinates in svg coordinate system
// stop(tracking)
// tracking = returned by start
function svgcoords(evt) { // return event coordinates
var CTM = svg.getScreenCTM();
if (evt.touches) {
evt = evt.touches[0];
}
return {
x: (evt.clientX - CTM.e) / CTM.a,
y: (evt.clientY - CTM.f) / CTM.d
};
}
function wrapstart(evt) {
if (tracking !== null) {
wrapstop(evt);
}
var t = evt.target;
var index = targets.indexOf(t);
if (index < 0) {
return;
}
evt.stopPropagation();
evt.preventDefault(); // make usable for touch events
tracking = start(index, svgcoords(evt));
}
function wraptrack(evt) {
if (tracking === null) {
return;
}
evt.stopPropagation();
evt.preventDefault(); // make usable for touch events
tracking = track(tracking, svgcoords(evt));
}
function wrapstop(evt) {
if (tracking === null) {
return;
}
evt.stopPropagation();
evt.preventDefault(); // make usable for touch events
stop(tracking);
tracking = null;
}
svg.addEventListener("mousedown", wrapstart);
svg.addEventListener("mousemove", wraptrack);
svg.addEventListener("mouseup", wrapstop);
svg.addEventListener("mouseleave", wrapstop);
svg.addEventListener("touchstart", wrapstart);
svg.addEventListener("touchmove", wraptrack);
svg.addEventListener("touchend", wrapstop);
svg.addEventListener("touchcancel", wrapstop);
}
function get_element(id) {
return document.getElementById(id);
}
var round = Math.round;
var abs = Math.abs;
var sqrt = Math.sqrt;
function add1d_interactions(evt) {
var add1d = evt.target;
var a1handle = ["add1uc", "add1s"].map(get_element);
var xyz = ["add1x", "add1y", "add1z"].map(get_element);
var cl_xyz = xyz.map(function(e)
{return e.getAttributeNodeNS(null, "class");});
// xyz[0].textContent = value; (old way xyz[0].innerHTML = value;)
// textContent not supported by IE8 and lower, but neither is SVG
var xnow = 0.0;
var ynow = 1.8;
var xf_tick = get_element("add1t").getAttributeNodeNS(null, "transform");
var xf_unit = get_element("add1ug").getAttributeNodeNS(null, "transform");
var xf_slid = get_element("add1s").getAttributeNodeNS(null, "transform");
function start(index, coords) {
cl_xyz[index].value = "backlit";
return [index, coords.x - (index? ynow : xnow)];
}
function track(tracking, coords) {
var index = tracking[0];
var x = round(20.*(coords.x - tracking[1])) * 0.05;
if (x > 5.8 || x < -5.8) {
x = index? 1.8 : 0.0;
cl_xyz[index].value = "";
tracking = null;
}
var xform = "translate(" + x + ",0.0)";
if (index === 0) {
xf_tick.value = xform;
xf_unit.value = xform;
xnow = x;
xyz[0].textContent = xnow.toFixed(2);
xyz[1].textContent = (ynow - xnow).toFixed(2);
} else {
xf_slid.value = xform;
ynow = x;
xyz[1].textContent = (ynow - xnow).toFixed(2);
}
xyz[2].textContent = ynow.toFixed(2);
return tracking;
}
function stop(tracking) {
if (tracking !== null) {
cl_xyz[tracking[0]].value = "";
}
return;
}
add_trackers(add1d, a1handle, start, track, stop);
}
function mul1d_interactions(evt) {
var mul1d = evt.target;
var m1handle = ["mul1ur", "mul1s"].map(get_element);
var xyz = ["mul1x", "mul1y", "mul1z"].map(get_element);
var cl_xyz = xyz.map(function(e)
{return e.getAttributeNodeNS(null, "class");});
var xf_tick = get_element("mul1t").getAttributeNodeNS(null, "transform");
var xf_slid = get_element("mul1s").getAttributeNodeNS(null, "transform");
var xnow = 1.0;
var ynow = 1.8;
var xul = get_element("mul1ul").getAttributeNodeNS(null, "x2");
var xur = get_element("mul1ur").getAttributeNodeNS(null, "x");
var twidth = get_element("mul1t").getAttributeNodeNS(null, "stroke-width");
function start(index, coords) {
cl_xyz[index].value = "backlit";
var z = xnow * ynow;
return [index, coords.x - (index? z : xnow), z];
}
function track(tracking, coords) {
var index = tracking[0];
var x = coords.x - tracking[1];
var z = tracking[2];
if (x > 5.8 || x < -5.8) {
x = index? 1.8 : 1.0;
cl_xyz[index].value = "";
tracking = null;
}
if (index === 0) {
if (abs(x) > 0.05) {
x = round(20.*x) * 0.05;
} else {
x = 0.05;
}
xf_tick.value = "scale(" + x + ",1.0)";
twidth.value = "" + (0.03 / abs(x));
ynow = round(20.*(z / x)) * 0.05; // in orange coordinates
xnow = x;
xul.value = "" + xnow;
xur.value = "" + (xnow - 0.1);
xyz[0].textContent = xnow.toFixed(2);
} else {
ynow = round(20.*(x / xnow)) * 0.05; // in orange coordinates
}
xf_slid.value = "translate(" + (xnow * ynow) + ",0.0)";
xyz[1].textContent = ynow.toFixed(2);
xyz[2].textContent = (xnow * ynow).toFixed(4);
return tracking;
}
function stop(tracking) {
if (tracking !== null) {
cl_xyz[tracking[0]].value = "";
}
return;
}
add_trackers(mul1d, m1handle, start, track, stop);
}
function str_complex(spanel, ndig, xy, xy0) {
var x = xy[0];
var y = xy[1];
if (xy0 !== null) {
x -= xy0[0];
y -= xy0[1];
}
y = -y;
var sgn = " + i";
if (y < 0) {
y = -y;
sgn = " − i";
}
spanel.innerHTML = x.toFixed(ndig) + sgn + y.toFixed(ndig);
}
function setvector(vecs, i, xy, color, xy0) {
var x = xy[0];
var y = xy[1];
vecs[0][i].value = "" + x;
vecs[1][i].value = "" + y;
if (xy0 !== null) {
x -= xy0[0];
y -= xy0[1];
}
if (abs(x) + abs(y) < 0.3) {
vecs[2][i].value = "none";
} else {
vecs[2][i].value = "url(#arrow-" + color + ")";
}
}
function add2d_interactions(evt) {
var add2d = evt.target;
var a2handle = ["add2ucx", "add2s"].map(get_element);
var xyz = ["add2x", "add2y", "add2z"].map(get_element);
var cl_xyz = xyz.map(function(e)
{return e.getAttributeNodeNS(null, "class");});
// xyz[0].textContent = value; (old way xyz[0].innerHTML = value;)
// textContent not supported by IE8 and lower, but neither is SVG
var xnow = [0.0, 0.0];
var ynow = [1.8, -0.8];
var xf_tick = get_element("add2t").getAttributeNodeNS(null, "transform");
var xf_unit = get_element("add2ug").getAttributeNodeNS(null, "transform");
var xfux = a2handle[0].getAttributeNodeNS(null, "transform");
var xf_slid = get_element("add2s").getAttributeNodeNS(null, "transform");
var add2gg = get_element("add2gg").getAttributeNodeNS(null, "points");
var add2gb = get_element("add2gb").getAttributeNodeNS(null, "points");
var add2go = get_element("add2go").getAttributeNodeNS(null, "points");
var v = ["add2vb", "add2vo", "add2vg"].map(get_element);
vecs = [v.map(function(e) {return e.getAttributeNodeNS(null, "x2");}),
v.map(function(e) {return e.getAttributeNodeNS(null, "y2");}),
v.map(function(e)
{return e.getAttributeNodeNS(null, "marker-end");})];
var vox1 = v[1].getAttributeNodeNS(null, "x1");
var voy1 = v[1].getAttributeNodeNS(null, "y1");
function start(index, coords) {
cl_xyz[index].value = "backlit";