-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
291 lines (257 loc) · 15.7 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
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
<!doctype html>
<html lang='en' data-version='1517590327349'>
<head>
<title>Magic Squares</title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<meta name='description' content='An exploration into magic squares.' />
<meta name='news_keywords' content='tk' />
<meta property='og:title' content='Magic Squares' />
<meta property='og:site_name' content='The Pudding' />
<meta property='og:url' content='https://pudding.cool/year/month/name/' />
<meta property='og:description' content='An exploration into magic squares.' />
<meta property='og:type' content='article' />
<meta property='og:locale' content='en_US' />
<meta property='og:image' content='https://pudding.cool/year/month/name/' />
<meta property='og:image:type' content='image/jpeg' />
<meta property='og:image:width' content='1200' />
<meta property='og:image:height' content='600' />
<meta name='twitter:card' content='summary_large_image' />
<meta name='twitter:site' content='https://pudding.cool' />
<meta name='twitter:creator' content='@nehaludyavar' />
<meta name='twitter:title' content='Magic Squares' />
<meta name='twitter:description' content='An exploration into magic squares.' />
<meta name='twitter:image:src' content='https://pudding.cool/year/month/name/' />
<link rel='canonical' href='https://pudding.cool/year/month/name/' />
<!-- smoosh -->
<!-- endsmoosh -->
<link rel="stylesheet" href="css/critical.css" />
<link rel="stylesheet" href="css/bundle.css" />
<link rel="stylesheet" href="css/styles.css" />
<style>
/*
This font software is the property of Commercial Type.
You may not modify the font software, use it on another website, or install it on a computer.
License information is available at http://commercialtype.com/eula
For more information please visit Commercial Type at http://commercialtype.com or email us at info[at]commercialtype.com
Copyright (C) 2017 Schwartzco Inc.
License: 1704-GNCLGK
*/
/* Canela */
@font-face {
font-family: 'Canela Web';
src: url('https://pudding.cool/assets/fonts/canela/Canela-Light-Web.woff2') format('woff2'),
url('https://pudding.cool/assets/fonts/canela/Canela-Light-Web.woff') format('woff');
font-weight: 300;
font-style: normal;
font-stretch: normal;
}
@font-face {
font-family: 'Canela Web';
src: url('https://pudding.cool/assets/fonts/canela/Canela-Bold-Web.woff2') format('woff2'),
url('https://pudding.cool/assets/fonts/canela/Canela-Bold-Web.woff') format('woff');
font-weight: 700;
font-style: normal;
font-stretch: normal;
}
/* Publico Text */
@font-face {
font-family: 'Publico Text Web';
src: url('https://pudding.cool/assets/fonts/publico/PublicoText-Roman-Web.woff2') format('woff2'),
url('https://pudding.cool/assets/fonts/publico/PublicoText-Roman-Web.woff') format('woff');
font-weight: 400;
font-style: normal;
font-stretch: normal;
}
@font-face {
font-family: 'Publico Text Web';
src: url('https://pudding.cool/assets/fonts/publico/PublicoText-Bold-Web.woff2') format('woff2'),
url('https://pudding.cool/assets/fonts/publico/PublicoText-Bold-Web.woff') format('woff');
font-weight: 700;
font-style: normal;
font-stretch: normal;
}
@font-face {
font-family: 'Publico Text Web';
src: url('https://pudding.cool/assets/fonts/publico/PublicoText-Italic-Web.woff2') format('woff2'),
url('https://pudding.cool/assets/fonts/publico/PublicoText-Italic-Web.woff') format('woff');
font-weight: 400;
font-style: italic;
font-stretch: normal;
}
/* Atlast Grotesk */
/*
@font-face {
font-family: 'Atlas Grotesk Web';
src: url('https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Light-Web.woff2') format('woff2'),
url('https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Light-Web.woff') format('woff');
font-weight: 300;
font-style: normal;
font-stretch: normal;
}
*/
@font-face {
font-family: 'Atlas Grotesk Web';
src: url('https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Regular-Web.woff2') format('woff2'),
url('https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Regular-Web.woff') format('woff');
font-weight: 400;
font-style: normal;
font-stretch: normal;
}
@font-face {
font-family: 'Atlas Grotesk Web';
src: url('https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Medium-Web.woff2') format('woff2'),
url('https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Medium-Web.woff') format('woff');
font-weight: 500;
font-style: normal;
font-stretch: normal;
}
@font-face {
font-family: 'Atlas Grotesk Web';
src: url('https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Bold-Web.woff2') format('woff2'),
url('https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Bold-Web.woff') format('woff');
font-weight: 600;
font-style: normal;
font-stretch: normal;
}
</style>
<!-- smoosh -->
<script src='js/critical.js'></script>
<!-- endsmoosh -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-90567923-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body class='tk-publico'>
<a href='#content' class='skip-to-main'>Skip to main content</a>
<header>
<!-- <a href='https://pudding.cool' target='_blank' class='logo'>
<svg xmlns="http://www.w3.org/2000/svg" width="296.91" height="47.52" viewBox="19.42 11.31 296.911 47.518" aria-labelledby="logo-title" role="img">
<title id="logo-title">The Pudding</title>
<path d="M47.77 56.8c-2.5-.2-15.5-.2-18 0v-.44l2.05-.3c1.8-.25 2.5-1.35 2.5-9.35V15.1h-1.9c-3.6 0-5.5 1.75-9.7 9.4l-2.8 5.25h-.5c.3-3.2 1-13.24 1.1-16.6l.1-.04c1.8.2 9.3.5 11.1.5h17.5c2.3 0 11.1-1.4 13.2-2.1l.1.1v15.8h.27l1-1.1c2.9-3.3 5.3-4.4 8-4.4 4.4 0 7 2.4 7 7.5v11.5c0 7.7.7 8.9 2.6 9.2l1.1.2v.5c-2.4-.2-12.4-.2-14.8 0v-.4l.5-.1c1.6-.4 2.3-1.3 2.3-9.2v-11c0-2.5-.9-3.4-3.1-3.4-.8 0-1.8.2-3.2.7l-1.8.6v12.9c0 7.9.6 8.8 2.2 9.3l.56.2v.5c-2.38-.2-12.4-.2-14.78 0v-.4l1.03-.2c1.97-.3 2.7-1.5 2.7-9.2V21c-2.43-4.6-5.13-5.75-8.63-5.75h-2.1v31.6c0 8 .6 9.07 2.4 9.37l1.9.3v.46l-.1-.18zm3.25-.64h55.7v.65H51v-.6zm45-5.1c-8.5 0-12.3-4.55-12.3-13.8v-1.7c0-8.86 4.3-13.76 13.28-13.76 7.66 0 11.1 3.26 11.1 12.36v1.8H92.97v3.2c0 7.1 1.9 9 6 9 2.45 0 5-1.25 7.4-2.9l2-1.35.1 1.4-1.6 1.5c-2.95 2.7-6.75 4.4-10.85 4.4v-.1zm-3-16.6h7.4v-2.7c0-6.75-1-7.95-3.7-7.95-2.6 0-3.7 1.2-3.7 9.3v1.4zm35.2 22.35c-2.5-.2-15.7-.2-18.2 0v-.4l1.9-.3c1.8-.3 2.4-1.3 2.4-9.3V23.5c0-8.04-.6-9.14-2.4-9.4l-1.8-.24v-.45c1.36.1 7.8.2 9 .2 1.46 0 8.06-.1 9.3-.1 10.36 0 14.96 5.1 14.96 12.8v1.5c0 7.8-4.55 12.8-14.9 12.8h-2.2V39c.55.04 1.1.04 1.5.04 3.8 0 5.35-2.9 5.35-10.44v-3.3c0-7.54-1.54-10.44-5.44-10.44-.4 0-2.6 0-4.1.05v31.8c0 8 .7 9.1 2.5 9.4l2.3.3v.5l-.3-.1zm3.3-.6H282.3v.7H131.5v-.7zm22.6-5c-4.4 0-7-2.4-7-7.5V33.2c0-7-.4-8.56-1.8-9l-.6-.2v-.4c1.8-.2 8.4-1.1 10.7-1.66v20.9c0 2.5.9 3.4 3.1 3.4.74 0 1.7-.24 3.1-.64l1.84-.5V33.2c0-6.9-.8-8.2-2.7-8.86l-1.1-.34v-.4c2.1-.2 9.7-1.1 12-1.66v17.9c0 6.86.75 8.2 2.65 8.8l1.1.36v.45c-2.1.16-9.2 1.06-11.5 1.66l-.3-5.4h-.2l-1 1.1c-2.9 3.3-5.3 4.4-8.1 4.4zm32 0c-5.4 0-9-4.4-9-13.6v-2.2c0-9.5 4.3-13.6 11.1-13.6 2.4 0 4.24.5 6.14 2.2l.8.7h.24v-2.6c0-6.5-.76-7.7-2.66-8.3l-1.1-.3v-.4c2.14-.2 9.44-1.1 11.74-1.6v28.2c0 7 .8 8.5 2.7 9.1l1.05.4v.5c-2.1.2-8.95 1.1-11.25 1.7l-.35-5.4h-.27l-1 1.1c-2.95 3.3-5.4 4.4-8.1 4.4l-.05-.2zm7.7-5.6l1.6-.5V33.9c0-6.96-1.36-8.8-4.6-8.8-3.3 0-4.66 2.6-4.66 9.54v3.7c0 6.2 1.44 7.9 4.5 7.9.84 0 1.84-.2 3.2-.64h-.05zm24.1 5.6c-5.46 0-9-4.4-9-13.6v-2.2c0-9.5 4.2-13.6 11-13.6 2.44 0 4.2.6 6.14 2.2l.84.7h.24v-2.6c0-6.5-.8-7.6-2.7-8.3l-1.06-.3v-.4c2.1-.2 9.45-1.1 11.75-1.6v28.2c0 7 .75 8.5 2.65 9.1l1.1.4v.5c-2.15.2-9 1.1-11.3 1.7l-.36-5.4h-.27l-1 1.1c-2.95 3.3-5.35 4.4-8.1 4.4l.06-.2zm7.64-5.6l1.6-.5V33.9c0-6.96-1.36-8.8-4.66-8.8-3.26 0-4.6 2.6-4.6 9.54v3.7c0 6.2 1.4 7.9 4.44 7.9.84 0 1.84-.2 3.2-.64h.02zm28.1 5.1c-2.16-.2-11.56-.2-13.76 0v-.4l.54-.1c1.6-.4 2.2-1.3 2.2-9.2v-7.7c0-6.9-.76-8.2-2.66-8.8l-1.1-.3v-.4c2.15-.2 9.7-1.1 12-1.6V41c0 7.9.7 8.8 2.24 9.27l.5.14v.5l.03-.1zm-12.1-35.3c0-2.6 1.6-4.1 5.1-4.1 3.54 0 5.1 1.5 5.1 4.1 0 2.6-1.56 4.1-5.1 4.1-3.5 0-5.1-1.5-5.1-4.1zm45.13 35.3c-2.4-.2-12.4-.2-14.8 0v-.4l.5-.1c1.5-.4 2.2-1.3 2.2-9.2V30.1c0-2.5-.9-3.4-3.1-3.4-.8 0-1.8.2-3.2.66l-1.8.55v12.9c0 7.9.6 8.8 2.2 9.3l.53.2v.5c-2.35-.2-12.4-.2-14.75 0v-.4l1.07-.2c1.92-.3 2.7-1.5 2.7-9.2v-7.7c0-6.9-.8-8.2-2.7-8.8l-1.1-.3v-.4c2.1-.2 9.2-1.1 11.5-1.6l.33 5.4h.28l1-1.1c2.94-3.2 5.4-4.4 8.1-4.4 4.44 0 7.04 2.4 7.04 7.5V41c0 7.7.77 8.9 2.67 9.2l1.1.2v.5l.1-.15zm15.6 7.9h-4.7c-10.5 0-12.3-1.3-12.3-3.4V55c0-1.85 2.5-4.35 7.3-4.35h.2V54c0 1.8 1 2.6 4.7 2.6h4.6c5.02 0 6.82-1.3 6.82-3.2V53c0-1.8-.85-3.2-3.5-3.2h-13.3c-2.75 0-4.2-1.3-4.2-3.7v-.16c0-1.94 1.2-3.54 4.75-5.4l3-1.54v-.5c-5.64-1-8.2-3.46-8.2-7.86v-.24c0-5.55 4.16-8.55 13.1-8.55 2.46 0 4.46.26 6.46.8l.16-.34c1.7-3.4 3.93-5 8-5h.9v5.4h-5.6c-.5 0-1.9.1-2.27.2l-.36.1v.5c3.8 1.1 5.76 3.6 5.76 7.1v.3c0 5.6-4.13 8.6-13.03 8.6-1.3 0-2.5-.1-3.7-.2l-.9 1.1c-.85 1-1.05 1.5-1.05 1.8 0 .4.2.5.6.5h11.62c5.8 0 8.9 3 8.9 7.4v.4c0 5.28-5.9 8.5-14 8.5l.1-.2zm2.5-27.7v-.7c0-4.7-.9-6.3-4.1-6.3-3.3 0-4.1 1.6-4.1 6.3v.8c0 4.7.9 6.3 4.1 6.3 3.2 0 4-1.6 4-6.3v-.1z"/>
</svg>
</a> -->
</header>
<main id='content'>
<div class='intro'>
<h1 class='intro__hed tk-canela'>The Mystery of Magic Squares</h1>
<p class='intro__dek tk-atlas'>An animated exploration of magic squares.</p>
<p class='intro__byline tk-atlas'>By <a href='https://twitter.com/nehaludyavar' target='_blank'><strong>Nehal Udyavar</strong></a></p>
</div>
<section id='introduction'>
<div id='intro-prose' class='prose'>
<p>A magic square is a <em>n</em> × <em>n</em> square grid (where <em>n</em> is the number of rows or columns) filled with
distinct, positive integers such that the sum of each row, column, and diagonal is equal.</p>
</div>
<div id='intro-magic-square'>
<div id='intro-ms-rules' class='prose'>
<p>Too much? Let's make a quick 3×3 magic square. It's quite simple: you have to pick 3 numbers below
— <strong>a</strong>, <strong>b</strong>, and <strong>c</strong> — while following these rules:</p>
<ul>
<li>1. <strong>a</strong> is an integer that must be greater than 0: <strong>(a > 0)</strong></li>
<li>2. <strong>b</strong> is an integer that must be greater than <strong>a</strong> (<strong>b > a</strong>),
but it cannot equal 2 times <strong>a</strong> (<strong>b ≠ 2a</strong>)</li>
<li>3. <strong>c</strong> is an integer such that <strong>(c − a) > b</strong></li>
</ul>
<p>This might seem a little complicated but I promise you'll get the hang of it in no time. A simple one has already
been drawn for you. Click on Animate to watch the rows, columns, and diagonals add up to equal sums. Or enter in other
numbers to draw your own magic square.</p>
</div>
<div id='intro-ms-input-field' class='input-field-container'>
<div class='input-group-prepend'>
<span class='input-group-text'>a</span>
</div>
<input id='intro-ms-a-input' class='input-field with-prepend' type='number' name='a' onkeyup="validateMagicSquareVariables()" oninput="validateMagicSquareVariables()" placeholder="1"/>
<div class='input-group-prepend'>
<span class='input-group-text'>b</span>
</div>
<input id='intro-ms-b-input' class='input-field with-prepend' type='number' name='b' onkeyup="validateMagicSquareVariables()" oninput="validateMagicSquareVariables()" placeholder="3"/>
<div class='input-group-prepend'>
<span class='input-group-text'>c</span>
</div>
<input id='intro-ms-c-input' class='input-field with-prepend' type='number' name='c' onkeyup="validateMagicSquareVariables()" oninput="validateMagicSquareVariables()" placeholder="5"/>
</div>
<!-- <div id='intro-alert-container' class='prose-container'>
<div id='intro-failure-alert' class='alert alert-failure alert-hidden'></div>
</div> -->
<div id='intro-ms-btn-container' class='btn-container'>
<button id='intro-ms-draw-btn' class='btn' onclick="redraw3x3MagicSquare()" disabled>Draw</button>
<button id='intro-ms-animate-btn' class='btn' onclick="animateMagicSquare()">Animate</button>
</div>
</div>
</section>
<section id='most-perfect'>
<div class='prose'>
<h3 class='prose-subtitle'>Most-Perfect Magic Square</h3>
<p>A scrolly that walks through an interactive explanation of the Parshavnath temple magic square, also known as
the <em>Chautisa Yantra.</em>
</p>
</div>
<div class='container line-scrolly'>
<div id='most-perfect-graphic-container' class='graphic-container'>
<div id='most-perfect-magic-square' class='graphic'>
</div>
</div>
<div id='most-perfect-prose-container' class='graphic-prose-container'>
<div id='most-perfect-prose' class='graphic-prose'>
<div class='spacer'></div>
<div class='slide-wrapper'>
<p id='most-perfect-slide-1' class='slide trigger'>A most-perfect magic square is just a magic square that
has a few more tricks up its sleeve. Like a normal magic square...</p>
</div>
<div class='slide-wrapper'>
<p id='most-perfect-slide-2' class='slide trigger'>...the rows, columns, and diagonals all add up to the magic
constant, which in this case is 34. But there's more...</p>
</div>
<div class='slide-wrapper'>
<p id='most-perfect-slide-3' class='slide trigger'>The broken diagonals, illustrated in colour, also add up to 34!
Magic squares with this property are called pan-diagonal magic squares, or panmagic for short.
<br>
<br>
Click on each coloured cell to sum them in the respective totals box below and see the magic for yourself.
</p>
</div>
<div class='slide-wrapper'>
<p id='most-perfect-slide-4' class='slide trigger'>But this is a most perfect magic square, so it doesn't end there.
You can split the 4×4 square into four 2×2 squares, and — yup, you guessed it — it'll add up to 34. Try it!</p>
</div>
<div class='slide-wrapper'>
<p id='most-perfect-slide-5' class='slide trigger'>You can even make funky alternating patterns, and it still refuses to not
add up to 34...</p>
</div>
<div class='slide-wrapper'>
<p id='most-perfect-slide-6' class='slide trigger'>After seeing all that this might seem a little boring... but, still 34.</p>
</div>
<div class='slide-wrapper'>
<p id='most-perfect-slide-7' class='slide trigger'>You can move the squares around, cut them in half, and somehow, it will
still add up to 36 — no, sorry — 34.</p>
</div>
<div class='slide-wrapper'>
<p id='most-perfect-slide-8' class='slide trigger'>34 34 34 34. (We're coming to the end, I promise.)</p>
</div>
<div class='slide-wrapper'>
<p id='most-perfect-slide-9' class='slide trigger'>Finally, last one (I think). Remember the four corners? This is the rest
of it.</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Pudding JS -->
<script src='https://pudding.cool/assets/scripts/d3.v4.10.2+jetpack.min.js'></script>
<script src='js/bundle.js?version=1517590327349' async></script>
<!-- <script src='https://pudding.cool/assets/scripts/pudding-footer.js' async></script> -->
<!-- ScrollMagic JS -->
<script src="assets/scripts/ScrollMagic.min.js"></script>
<!-- Custom JS -->
<script src='js/main.js'></script>
<script src='js/most-perfect.js'></script>
</body>
</html>