-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
262 lines (259 loc) · 16.4 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'>
<link href='compiled/matrix.css' rel='stylesheet' type='text/css'>
<link rel="icon" href="favicon/favicon.ico" />
<title>Invitation to Another Dimension</title>
</head>
<body>
<svg class="header"></svg>
<div style='height:100px;'></div>
<div class='essay'>
<h1>Invitation to Another Dimension</h1>
<h2>from Max Goldstein</h2>
<p>
So much of math seems to be unrelated bits and pieces. Learn this for the test, then forget it to make room for
the next thing. But this is an illusion fostered by the frequently atrocious high school curriculum. Mathematics
has structure, ideas that start simple and then are extended and combined. Here, we're focusing on two of them.
</p>
<p>
First, functions transform inputs into outputs. You can group similar functions by how many inputs and outputs
they take. For our purposes, each input or output is just a number. We'll call the inputs <span
class='x1'>x</span> and the outputs <span class='y1'>y</span>, adding subscript numbers once we get more
than one. Each input or output is called a <i>dimension</i>.
</p>
<p>
Second, we're looking at functions that use addition and multiplication only to turn inputs into outputs. These
are known as <i>linear equations</i> because when graphed, they're just lines. Curves like polynomials,
exponentials, and sine waves will wait for another day. We'll see that geometrically, addition is
<i>translation</i> and multiplication is <i>scaling</i>.
</p>
<p>
As we explore these ideas, we'll come across many ways of seeing, writing, and interacting. The diagrams that
follow are highly dynamic; <b>mouseover and grab everything</b>.
</p>
<p>
<svg class="heading" data-x=1 data-y=1></svg>
A linear function for an input, called <span class='x1'>x</span>, will scale the input by multiplying it by a
scale factor called m. Then it translates the result by adding another value, called b. The output we
call <span class='y1'>y</span>.
</p>
<p>
You can adjust these values in the equations, in the text below, or on the graph itself directly. Hover over a
red circle to see the exact value.
</p>
</div>
<div class='bg'>
<svg class='first'></svg>
</div>
<div class='essay'>
<p class='first'></p>
<p>
This is the classic linear function from middle school, and it has one input and one output. You learned that
m is the slope, but you may not have made the connection to scaling up the identity by some factor. Also, when
<span class=x1>x</span> is 0, there's no scaling, so b is the y-intercept.
</p>
<svg class="heading" data-x=1 data-y=2></svg>
<p>
It's natural to ask, what happens if we put two of these functions together, side-by-side? The simplest
approach is to have two outputs – <span class=y1>y<small>1</small></span> and <span
class=y2>y<small>2</small></span> – depend on a single input, still called <span class=x1>x</span>. We can
double-down on linear equations, treating this new function as two copies of what we just saw. Or, we can
think of these outputs as forming a <i>vector</i>, which basically pairs up all the operations.
</p>
<p>
Similarly, we could just plot two linear functions on the same graph, but instead, we're going to lay out
three number lines side-by-side-by-size, and show the transformations from one to the next. Once again, change
the numbers by dragging them:
</p>
</div>
<div class='bg'>
<svg class='second'></svg>
</div>
<div class='essay'>
<p class='second'></p>
<p>
The vector equation uses the two fundamental operations of linear algebra: scalar multiplication and vector
addition. Scalar multiplication (a <i>scalar</i> is just a single number, instead of a vector) multiplies each
component of the vector by the scalar. Vector addition adds two vectors (of equal length) by component: the
first component of the new vector is the sum of the first components of the two vectors being added, and so on
down the line.
</p>
<p>
This diagram only shows certain values that have been transformed. Unlike the traditional Cartesian
coordinates, we're confined to <i>samples</i> (i.e. examples) of the input and outputs. Although sampling
isn't considered part of linear algebra, depictions of higher dimensions benefit from using it, opting to show
samples of many dimensions rather than a continuous surface in fewer.
</p>
<p>
Which brings us to how the <span class=x1>x</span> number line is distorted to become <span
class=y1>y<small>1</small></span> and <span class=y2>y<small>2</small></span>. Our samples of <span
class=x1>x</span> are equally spaced, and the samples of the output are as well. Although scaling changes
the spacing, it affects all samples equally. Linear transformations stretch the number line in consistent
ways, as we'll continue to see.
</p>
<p>
In most cases every point in <span class=x1>x</span> goes to a different point in <span
class=y1>y<small>1</small></span>. If you could sample <span class=y1>y<small>1</small></span> as you
please, you could get back to any point in <span class=x1>x</span>. The one exception is when <a href=""
id="setMto0" style="font-weight: bold">m = 0</a>; in that case, the function is not invertible. Although we won't go into
it further, there's a deep connection between these topics.
</p>
<p>
That wraps up functions with one input and two outputs, which are known as a <i>parametric</i> equations.
</p>
<svg class="heading" data-x=2 data-y=1></svg>
<p>
This will require a change of perspective. We're used to plotting the x-axis horizontally and the y-axis
vertically. Now that we want to consider two inputs, we have to use the vertical axis for <span
class="x2">x<small>2</small></span>. The output we encode as the area of circles, either <span
class=y1 style="font-weight:bold">positive</span> or <span class=negative style="font-weight:bold">negative</span>. This type of diagram is known as a
<i>scalar field</i>.
</p>
</div>
<div class='bg'>
<svg class='third'></svg>
</div>
<div class='essay'>
<p class='third'></p>
<p>
Bear in mind that this is a sample; the true scalar field is a continuous surface "above" and "below" the
plane of the screen, a tilted flat plane. If you ignore the color of the circles, you're effectively looking
at the absolute value, two half-planes meeting at a V-shaped rift. You might see this rift as a "wave" of
whiteness moving across the field as you change the additive constant (<span class='third param'
style='font-weight: bold'></span>). It's tempting to see the wave moving perpendicular to itself, but this
is an illusion – it's always moving vertically.
</p>
<p>
The vector equation on the right uses the dot product of two vectors to concisely represent the repeated
multiplication and addition operations on the left. The dot product multiplies each pair of components
together, and then adds them all up, taking two vectors to a single scalar.
</p>
<svg class="heading" data-x=2 data-y=2></svg>
<p>
It's time to put things together and have two of both outputs and inputs. We will finally abandon systems of
equations and instead use a <i>matrix</i> to compactly store all the parameters. A matrix is really just a
description of a function; terse, but useful once you know how to think of it. The scale factors go down the
main diagonal, top left to bottom right. The translations are on the right side. The bottom row is always
zero-zero-one.
</p>
<p>
It's the remaining numbers where things get interesting: they control the "crosstalk" between the first and
second function. The first input can influence the second output, and vice versa, a phenomenon known as
<i>shear</i>. Despite carefully examining all the ingredients in isolation, we couldn't have predicted this
would happen when we put them together.
</p>
<p>
Graphically, a matrix's function is a <i>vector field</i>. Instead of having one number at every point in the
plane, we now have two. Like a scalar field, a vector field starts with samples of the 2D <span class=x1
style="font-weight:bold">input</span> <span class=x2 style="font-weight:bold">space</span>. For each of
those samples, we draw a vector whose horizontal component is proportional to <span
class=y1>y<small>1</small></span> and whose vertical component is proportional to <span
class=y2>y<small>2</small></span>. By "proportional", we mean that the vectors are shrunken down so they
don't overlap when repeated. (You can isolate one output by hovering over the output vector.) If you think of
the vectors showing the velocity of a particle at a point, we can see patterns of swirls, attraction, and
repulsion. Each arrow is a weather vane, and the matrix controls the wind.
</p>
</div>
<div class='bg'>
<svg class='fourth'></svg>
</div>
<div class='essay'>
<p>
You may have been taught to write the input vector to the right of the matrix, but it's shown above it here.
This intentional break from pencil-and-paper notation is meant to emphasize how matrices work. To compute the
output vector (i.e. to apply the function), multiply each column of the matrix by the input above it, and then
add up the columns (think of squishing them together horizontally).
</p>
<p>
In pure mathematics, you'll typically only see the top-left two-by-two of our three-by-three matrix. The right
column allows us to add constants (one in each output dimension) in addition (literally) to what we get by
multiplying the inputs. However, in computer graphics we want to distinguish between <a class=point
style="font-weight: bold" id="setPoint" href="">points</a>, which can be scaled and translated, and <a
class=vector style="font-weight: bold" id="setVector" href="">vectors</a>, which can only be scaled.
Points are padded with a 1, causing one copy of the last column, the translation, to be added to the output.
Vectors are padded with a 0, which causes the translation to be zeros as well. This means we can use the same
matrix on points and vectors, which is particularly handy if the matrix took a long time to compute.
</p>
<p>
If you focus on the lengths of the vectors, you'll see that they get longer as they move away from the origin.
This makes sense, since you're multiplying by larger numbers. But this appearance of growth is deceptive.
Pick any of the straight lines of gray points, and then focus on the arrowheads (not the shafts) that come from it.
You'll find that they still form a straight line, just at an odd angle. Do this with two parallel gray-dot-lines and
the blue-arrowhead-lines are still parallel. Do it with three and they will be evenly spaced. It works for vertical
and horizontal lines (indeed lines at any starting angle if we were to draw them. If you look at four arrowheads
that started as a square, they still form a parallelogram, and this parallelogram is tiled repeatedly across
every former square. The matrix, then, converts to another coordinate system (or grid): scaled, translated, and
stretched, but consistent. It's like a superpower: the ability to bend and distort space, and in a useful, orderly way.
</p>
<p>
It's worth noting that a vector field is not the only way to think about this function; two overlapping scalar
fields would also work. Nicky Case has <a href=http://ncase.me/matrix/>a demo</a> where the two dimensions of
input double up to also show the two dimensions of output. In other words, the vectors aren't shrunken down
like they are here. You can see where a point starts and where it ends relative to the same pair of axes, and
a vector showing the change in position. The bad news is that you can't see as much of the overall structure.
All of these are valid tradeoffs, given the inherently tricky problem of trying to depict four-dimensional
functions using only a 2D plane.
</p>
<p>
However, once you've gotten your head around that, it's relatively simple to understand six dimensions
depicted in a 3D volume (which is then projected into the two dimensional space of your screen).
</p>
<svg class="heading" data-x=3 data-y=3></svg>
</div>
<div class='bg'>
<div class='mathbox'></div>
<svg class='fifth'></svg>
</div>
<div class='essay'>
<p>
A 3D vector field might look like a forest of blue arrows, but it's actually easier to see when you adjust the
matrix and see how the arrows change – predictably, in lines and at right angles. There is symmetry in the
motion, each left counterbalanced by a right wherever the sign is flipped. Down the main diagonal, two
half-volumes attract or repel; shearing looks like tectonic plates sliding past each other.
</p>
<p>
By modifying the matrix, you're getting a glimpse into the space of all possible matrices, a <i>twelve</i>
dimensional space. Do we need fifteen inputs to specify three outputs? Not for a single function, no, but
breaking things apart allows us to see adjacent functions in many dimensions. If something isn't right, we
have a lot of knobs to fix it.
</p>
<p>
Perhaps more importantly, you should have some idea of what each of those knobs <i>do</i> thanks to the
presentation. Color, notation, and interactivity have been chosen very carefully to give a consistent design.
More importantly, each stage incrementally built on <span class=y1>y</span> = m<span class=x1>x</span> + b.
There, we saw that looking at zero showed us the addition only, and that's true even in the 3D vector field,
for the very simple reason that scaling zero by anything is always zero.
</p>
<p>
We've added more numbers, and seen the surprising effect of shear between them, but the fundamental concepts
have stayed the same. Addition and multiplication, translation and scaling, served as guideposts as we hoisted
ourselves ever higher.
</p>
<svg class="footer"></svg>
</div>
<footer>
<p>
Thank you to <a href=http://bost.ocks.org/mike/>Mike Bostock</a> for creating <a
href="http://d3js.org/">D3.js</a>, which powered the diagrams, and to <a href=http://acko.net/>Steven
Wittens</a> for creating <a href=http://acko.net/blog/mathbox2/>Mathbox²</a>, which made a cameo as
the 3D vector field.
</p>
<p>
Thank you to my reviewers <a href=https://twitter.com/ncasenmare>Nicky Case</a> and <a href=https://twitter.com/enjalotr>Ian Johnson</a>.
</p>
<p>
More interactive essays and explorable explanations can be found <a href=http://conceptviz.github.io/#/e30=>here</a>.
</p>
<p>
Text licensed CC-BY-SA 4.0 by Max Goldstein. Code licensed GPL v2.0. <a href="https://github.com/mgold/Invitation-to-Another-Dimension">Open source</a>.
</p>
<p>
Back to <a href=http://maxgoldste.in/>my website</a>. Find me <a href=https://twitter.com/maxgoldst>on Twitter</a>.
</p>
</footer>
</body>
<script src='compiled/bundle.js'></script>
<script src="assets/mathbox-bundle.min.js"></script>
</html>