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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>isomorphic keyboard explorer</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main>
<canvas id="canvas-bg"></canvas>
<canvas id="canvas-fg"></canvas>
</main>
<aside class="pattern panel">
<section id="pattern" class="controls">
<div class="control control--preset">
<label for="pattern-preset">pattern</label>
<select id="pattern-preset">
<option value="custom">(custom)</option>
<optgroup label="scales">
<option value="major-7" >major</option>
<option value="minor-7" >minor</option>
<option value="minor-harm-7">harmonic minor</option>
<option value="minor-mel-7" >melodic minor</option>
<option value="minor-hung-7">hungarian minor</option>
<option value="penta" >pentatonic</option>
</optgroup>
<optgroup label="triads">
<option value="major-3" >major</option>
<option value="major-3+">augmented</option>
<option value="minor-3" >minor</option>
<option value="minor-3-">diminished</option>
</optgroup>
</select>
</div>
<div class="control">
<label for="pattern-len">octave size</label>
<input id="pattern-len" type="number" min="4" value="12" />
</div>
<div class="steps">
<input type="checkbox" checked disabled />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
</section>
<section id="synth" class="controls">
<div class="control control--toggle">
<label for="synth-enabled">synth</label>
<input id="synth-enabled" type="checkbox" checked />
</div>
<div class="control">
<label for="synth-freq">center freq</label>
<input id="synth-freq" type="number" min="0" value="110" />
</div>
<div class="control">
<label for="synth-voices">voices</label>
<input id="synth-voices" type="number" min="1" max="32" value="8" />
</div>
<div class="control control--toggle">
<label><a href="synth.html" target="_blank">options</a></label>
<button id="synth-opts-paste">paste</button>
<button id="synth-opts-reset">reset</button>
</div>
</section>
</aside>
<aside class="layout">
<svg
id="diagram"
viewBox="-120 -145 240 260"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
width="240"
height="260">
<path class="bg" d="M-120 115 V-80 L-60 -145 H120 L120 115 z" " dd="-22.248372,-145 -30.733236,53.233561 -37.52946,-0.0021 -34.218102,59.268067 L -125,-32.352376 V 115 h 260 v -260 z" />
<g class="inner">
<path class="hex" style="--rotation: 0deg" d="m 10,0 -5,8.660254 -10,0 L -10,0 l 5,-8.660254 10,0 z" />
<path class="hex" style="--rotation: 60deg" d="m 10,0 -5,8.660254 -10,0 L -10,0 l 5,-8.660254 10,0 z" />
<path class="hex" style="--rotation: 120deg" d="m 10,0 -5,8.660254 -10,0 L -10,0 l 5,-8.660254 10,0 z" />
<path class="hex" style="--rotation: 180deg" d="m 10,0 -5,8.660254 -10,0 L -10,0 l 5,-8.660254 10,0 z" />
<path class="hex" style="--rotation: 240deg" d="m 10,0 -5,8.660254 -10,0 L -10,0 l 5,-8.660254 10,0 z" />
<path class="hex" style="--rotation: 300deg" d="m 10,0 -5,8.660254 -10,0 L -10,0 l 5,-8.660254 10,0 z" />
<g class="arrow" style="--rotation: 0deg">
<path d="M 11.301555,-19.479665 V -72.737621 H 25.655016 L -0.38852309,-108.33304 -26.432062,-72.737621 h 14.35346 v 53.257956" />
<g transform="translate(0,-85)"><text>1</text></g>
</g>
<g class="arrow" style="--rotation: 60deg">
<path d="M 11.301555,-19.479665 V -72.737621 H 25.655016 L -0.38852309,-108.33304 -26.432062,-72.737621 h 14.35346 v 53.257956" />
<g transform="translate(0,-85)"><text>1</text></g>
</g>
<g class="arrow" style="--rotation: 120deg">
<path d="M 11.301555,-19.479665 V -72.737621 H 25.655016 L -0.38852309,-108.33304 -26.432062,-72.737621 h 14.35346 v 53.257956" />
<g transform="translate(0,-85)"><text >1</text></g>
</g>
<g class="arrow" style="--rotation: 180deg">
<path d="M 11.301555,-19.479665 V -72.737621 H 25.655016 L -0.38852309,-108.33304 -26.432062,-72.737621 h 14.35346 v 53.257956" />
<g transform="translate(0,-85)"><text>1</text></g>
</g>
<g class="arrow" style="--rotation: 240deg">
<path d="M 11.301555,-19.479665 V -72.737621 H 25.655016 L -0.38852309,-108.33304 -26.432062,-72.737621 h 14.35346 v 53.257956" />
<g transform="translate(0,-85)"><text>1</text></g>
</g>
<g class="arrow" style="--rotation: 300deg">
<path d="M 11.301555,-19.479665 V -72.737621 H 25.655016 L -0.38852309,-108.33304 -26.432062,-72.737621 h 14.35346 v 53.257956" />
<g transform="translate(0,-85)"><text>1</text></g>
</g>
<path
class="center"
d="m 100,0 c 0,10 -41.339746,81.60254 -50,86.60254 -8.660254,5 -91.339746,5 -100,0 C -58.660254,81.60254 -100,10 -100,0 c 0,-10 41.339746,-81.60254 50,-86.60254 8.660254,-5 91.339746,-5 100,0 8.660254,5 50,76.60254 50,86.60254 z"
transform="matrix(0.38835,0,0,0.38835,0,0)" />
</g>
<path
id="turn-ccw" class="turn" transform="rotate(-1.5)"
d="M 41.378906 -130.05664 L 18.986328 -124.38086 L 20.494141 -122.82812 L 35.080078 -107.81055 L 36.865234 -114.11914 C 47.8065 -110.98982 48.638017 -110.40787 58.876953 -104.19141 L 64.066406 -112.74023 C 53.749341 -119.00415 51.210362 -120.32954 39.585938 -123.72461 L 41.378906 -130.05664 z " />
<path
id="turn-cw" class="turn" transform="rotate(1.5)"
d="M 63.875 -112.84961 L 59.068359 -104.08203 C 69.570355 -98.323686 70.491716 -97.891327 78.669922 -89.982422 L 74.099609 -85.28125 L 96.498047 -79.628906 L 95.910156 -81.712891 L 90.216797 -101.85938 L 85.628906 -97.140625 C 76.875667 -105.51066 74.458477 -107.04659 63.875 -112.84961 z " />
</svg>
<section id="layout" class="panel controls">
<div class="control control--preset">
<label for="layout-preset">layout</label>
<select id="layout-preset">
<option value="wicki-hayden">Wicki/Hayden</option>
<option value="janko">Jankó</option>
<option value="harmonic">Harmonic Table</option>
<option value="gerhard">Gerhard</option>
<option value="custom">(custom)</option>
</select>
</div>
<div class="control control--axis">
<label for="step-1">up</label>
<input id="step-1" type="number" min="1" />
<label class="dir">
<input type="checkbox" />
invert
</label>
</div>
<div class="control control--axis">
<label for="step-2">hi right</label>
<input id="step-2" type="number" min="1" />
<label class="dir">
<input type="checkbox" />
invert
</label>
</div>
<div class="control control--axis">
<label for="step-3">low right</label>
<input id="step-3" type="number" min="1" />
<label class="dir">
<input type="checkbox" />
invert
</label>
</div>
</section>
</aside>
<script type="module" src="main.js"></script>
</body>
</html>
|
