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
|
<!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 controls">
<div class="control control--preset">
<label for="pattern-preset">preset</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>
</label>
</div>
<div class="control">
<label for="pattern-len">(semi)tones</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>
</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>
<div class="controls">
<div class="control control--preset">
<label for="layout-preset">preset</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>
</label>
</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>
</div>
</aside>
<script type="module" src="main.js"></script>
</body>
</html>
|
