-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
182 lines (131 loc) · 8.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Periodic Table of Harmony</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">
<!-- GitHub icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Styles -->
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="modal.css">
<link rel="stylesheet" href="graph.css">
<script src="https://d3js.org/d3.v6.min.js"></script>
<!-- <script src="d3.js"></script> if editing offline-->
</head>
<body>
<header>
<div class="upper">
<div id="title">
<h1>Periodic Table of Harmony</h1>
</div>
</div>
<div class="lower">
<div id="info">
<a href="#">
<svg class="info" viewBox="0 0 330 330">
<g>
<path id="svg_1" d="m165,0c-90.981,0 -165,74.02 -165,165.001c0,90.981 74.019,164.999 165,164.999s165,-74.018 165,-164.999c0,-90.981 -74.019,-165.001 -165,-165.001zm0,300c-74.44,0 -135,-60.56 -135,-134.999c0,-74.439 60.56,-135.001 135,-135.001s135,60.562 135,135.001c0,74.439 -60.561,134.999 -135,134.999z"/>
<path id="svg_2" d="m164.998,70c-11.026,0 -19.996,8.976 -19.996,20.009c0,11.023 8.97,19.991 19.996,19.991c11.026,0 19.996,-8.968 19.996,-19.991c0,-11.033 -8.97,-20.009 -19.996,-20.009z"/>
<path id="svg_3" d="m165,140c-8.284,0 -15,6.716 -15,15l0,90c0,8.284 6.716,15 15,15c8.284,0 15,-6.716 15,-15l0,-90c0,-8.284 -6.716,-15 -15,-15z"/>
</g>
</svg>
</a>
</div>
</div>
</header>
<main>
<div id="diagram"></div>
<div id="info-modal" class="modal">
<div class="modal-content">
<span>
<a href="#" class="close">×</a>
</span>
<h1>Welcome to The Periodic Table of Harmony!</h1>
<h2>An interactive network diagram of all possible types of scales in 12-TET</h2>
<h2>By Justin Masayda</h2>
<p>Click and drag to navigate the graph. Zoom with the mousewheel or touch pad zoom gesture.</p>
<p>Each of the 351 nodes on this graph represent a type of musical scale defined by a unique cycle of intervals. Each slice of a node shows the size of an interval in half steps (or semitones). Rotations of a node correspond with modes of the node's scale type. The chart is organized vertically by cardinality (the number of intervals in a scale type), and horizontally by the "balance" of intervals in that row; Nodes on the left have large disparities between interval sizes which equalize towards the right of the graph.</p>
<p>Links show parent/child relationships between nodes. Inserting a note into a scale type will divide one of its intervals into two smaller intervals. The resulting scale type will appear on the row above. Such scale types are referred to as <em>parents</em>, while scale types derived by merging two adjacent intervals are referred to as <em>children</em>.</p>
<!-- Highlighting saturated nodes does not appear to have been implemented.
<p>Some scale types cannot accept additional intervals without becoming <em>cohemitonic</em> (containing contiguous half-steps). I call these scale types <em>"saturated"</em>. These scale types are the 7 scale types traditionally used to derive tonal harmony. Saturated nodes are indicated with an outline.</p>
-->
<!--
<p>The following assumptions are made:</p>
<ul>
<li>Multiple voices at the same pitch in any register do not change the quality of the chord</li>
<li>Contiguous half steps do not produce tonal structures</li>
</ul>
<p> It is primarily the combination of intervals which define a chord or scale's type or <em>quality</em>. However, <em>root perception</em> is important as well. The same set of intervals can be perceived as one of several chords depending on which note is perceived to be the root. Furthermore, intervals can be analyzed differently depending on context. For example, a tritone could be analyzed as an augmented fourth or as a diminished fifth, even though they are both the same frequency ratio, and the same number of half steps. Because chord <em>identity</em> is context-dependent, one should not think of each node as a chord or scale, but rather as a <em>family</em> of chords or scales. </p>
-->
<p>
Your feedback is appreciated! If you have any questions, comments, edit suggestions, bug reports, feature requests, etc., please post an issue here: <a href="https://github.com/keysmusician/Periodic-Table-of-Harmony/issues">https://github.com/keysmusician/Periodic-Table-of-Harmony/issues</a>
</p>
</div>
</div>
<ul class="buttons">
<li class="button">
<div class="dropup">
<a id="cohemitonic-btn" href="#">Cohemitonic</a>
<a id="unselected-btn" href="#">Selected</a>
</div>
<a class="button-title" href="#">👁</a>
<p class="button-description">Show / hide nodes</p>
</li>
<li id="link-btn" class="button">
<div class="dropup">
<a id="all-links-btn" href="#">All</a>
<a id="inactive-links-btn" href="#">Inactive</a>
</div>
<a class="button-title" href="#">🔗</a>
<p class="button-description">Show / hide links</p>
</li>
<li class="button">
<a id="clear-btn" class="button-title" href="#">0</a>
<p class="button-description">Clear selection</p>
</li>
<li class="button">
<div class="dropup">
<a id="tree-btn" href="#">Family Tree</a>
<a id="family-btn" href="#">Immediate Family</a>
<a id="parents-btn" href="#">Parents</a>
<a id="children-btn" href="#">Children</a>
</div>
<a class="button-title" href="#">ᗑ</a>
<p class="button-description">Select connected</p>
</li>
<li class="button">
<div class="dropup">
<a class="note-btn" href="#" value=0>A</a>
<a class="note-btn" href="#" value=1 >A♯ / B♭</a>
<a class="note-btn" href="#" value=2>B</a>
<a class="note-btn" href="#" value=3>C</a>
<a class="note-btn" href="#" value=4>C♯ / D♭</a>
<a class="note-btn" href="#" value=5>D</a>
<a class="note-btn" href="#" value=6>D♯ / E♭</a>
<a class="note-btn" href="#" value=7>E</a>
<a class="note-btn" href="#" value=8>F</a>
<a class="note-btn" href="#" value=9>F♯ / G♭</a>
<a class="note-btn" href="#" value=10>G</a>
<a class="note-btn" href="#" value=11>G♯ / A♭</a>
</div>
<a id="root-btn" class="button-title" href="#">
Root
</a>
<p class="button-description">Root</p>
</li>
</ul>
</main>
<footer>
<a id="github-icon" href="https://github.com/keysmusician/periodic_table_of_harmony" target="_blank">
<i class="fa fa-github" style="font-size:36px"></i>
</a>
</footer>
<script type="module" src="data.js"></script>
<script type="module" src="graph.js"></script>
<script type="text/javascript" src="modal.js"></script>
<script type="text/javascript" src="sidebar.js"></script>
</body>
</html>