-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
188 lines (179 loc) · 6.54 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
<html>
<head>
<script type="text/javascript" src="musis.js"></script>
<script type="text/javascript" src="adapters/play.js"></script>
<script type="text/javascript" src="adapters/play.percussion.js"></script>
<script type="text/javascript" src="adapters/play.string.js"></script>
<script type="text/javascript" src="adapters/play.phoneme_ah.js"></script>
<script type="text/javascript" src="adapters/play.celeste.js"></script>
<script type="text/javascript" src="adapters/play.piano.js"></script>
<script type="text/javascript" src="adapters/draw.js"></script>
<script type="text/javascript" src="adapters/draw.trigger.js"></script>
<script type="text/javascript" src="adapters/ui.info.js"></script>
<script type="text/javascript" src="adapters/ui.menu.js"></script>
<script type="text/javascript" src="music/key.js"></script>
<script type="text/javascript" src="music/tuning.js"></script>
<script type="text/javascript" src="music/note.js"></script>
<script type="text/javascript" src="music/voicing.js"></script>
<script type="text/javascript" src="music/compose.js"></script>
<script type="text/javascript" src="music/tension.js"></script>
<script type="text/javascript" src="music/music.js"></script>
<script type="text/javascript" src="music/metronome.js"></script>
<script type="text/javascript" src="music/harmony.js"></script>
<script type="text/javascript" src="music/cadence.js"></script>
<script type="text/javascript" src="triggers.js"></script>
<script type="text/javascript" src="perform.js"></script>
<script type="text/javascript" src="freeplay.js"></script>
<style>
.fullscreen {
position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
}
.menu-item {
width: 400px;
margin: 16px 64px;
border: 2px solid #c0c0c0;
border-radius: 8px;
background: #404040;
padding: 6px;
text-align: center;
font-size: 1.4em;
}
.menu-item:hover {
background: #606060;
}
.home-item {
width: 24px;
position:absolute;
top: 0px;
right: 0px;
margin: 16px;
}
</style>
</head>
<body style="margin:0px; background-color: black;">
<canvas id="canvas" class="fullscreen" style="width:100%; height:100%;"></canvas>
<div id="info" class="fullscreen" style="color:#e0e0e0; font-family:helvetica,arial;">
<h1 id="title"></h1>
<h5 id="hint"></h5>
<div id="menu"></div>
<div class="menu-item home-item" onclick="javascript:musis.menus.goHome();">⌂</div>
</div>
<script type="text/javascript">
/*
x Remove menus and tutorials
x Remove terrain and stars
x Change colours: suggest blue tonic, green dom, red sub
x Triggers
x Remove trigger disabling
x Remove trigger sizing
x Create a grid of triggers
x Select triggers only if they are neighbouring thirds
x Select triggers only if they are physical neighbours two triggers
x Can only select triggers if they have a different value to any in the list
x Allow neighbouring third of ANY trigger in the list
x Only switch if there are at least two triggers selected
* After selecting next harmony
* dont regenerate entire grid
* instead remove selected triggers
* drop the rest
* fill holes from the top
* Score
* Low score for repeating current harmony
* Low score for not making a triad
* Bonus score for changing function
* After first bar of a harmony, tempo slows until game over, unless a new harmony is selected
* Visual feedback
* Pick a random rhythm on each game start
* Bass player
* Rythm with arpeggios
* Trigger visual feedback
* Show linked selection
* Feedback about needing at least a triad
* Show function of selected harmonies
* Lead..?
* voicing
* property based tests
! simplify: proximity is always good; voices keeping same note is good; contrary motion against the bass is good
* voice leading goes a bit mad on T-D-S-T...
* score against parallel fifths/octaves
* score to encourage tritone resolution
* explore functional just intonation
* tune notes by function in current harmony
* eg D in GBD is 2 fifths up from C. But D in DFA is 2 fifths down and then 1 third up..!
* better feedback when you do good stuff
* Modulation
* detect modulations
* indicate key with a small border around the triggers: blue if in tonic key, red for dominant etc
** Rhythm
* ux for defining tempo and rhythm
** Melody
* use harmony notes on downbeats
* ensure the bass changes on a downbeat
* when queuing up notes to play later, should queue up starbursts etc too
* extra notes and melody kick in if make good progressions
* grow interesting visual objects when doing well
* ux for arpeggio/block chord/voice leading etc
** ?? Scale
* Allow choosing mode from supermode
* And this informs scale for melody and available notes for harmony
** Other
* Try getting motion blur by using alpha rect instead of clearing the back buffer (still need to clear z)
* Instruments from FFTs: http://www.sitepoint.com/using-fourier-transforms-web-audio-api/
! loadVertexAttrib sucks; DONT create and discard a new vertex buffer every frame unless you need to!!
*/
try { if (!AudioContext) { throw 1; } } catch(e) { document.getElementById('info').innerHTML = 'Web Audio not supported!'; }
musis.begin();
var canvas = document.getElementById("canvas");
function onResize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};
window.addEventListener('resize', onResize, false);
onResize();
var ctxGl = canvas.getContext("webgl");
if (!ctxGl) { ctxGl = canvas.getContext("experimental-webgl"); }
if (!ctxGl) { document.getElementById('info').innerHTML = 'WebGL not supported!'; }
var tLast;
var frame = function (t) {
if (tLast) {
musis.frame(t, (t - tLast)/1000, ctxGl, canvas.width, canvas.height);
}
tLast = t;
window.requestAnimationFrame(frame);
};
window.requestAnimationFrame(frame);
var touched = false;
var mousedown = false;
window.onmousedown = function (evt) {
if (touched) { return; }
mousedown = true;
musis.touchstart(evt.clientX, evt.clientY);
};
window.onmousemove = function (evt) {
if (touched) { return; }
if (mousedown) {
musis.touchmove(evt.clientX, evt.clientY);
}
};
window.onmouseup = function (evt) {
if (touched) { return; }
musis.touchend();
mousedown = false;
};
window.addEventListener("touchstart", function (evt) {
touched = true;
musis.touchstart(evt.changedTouches[0].clientX, evt.changedTouches[0].clientY);
});
window.addEventListener("touchmove", function (evt) {
musis.touchmove(evt.changedTouches[0].clientX, evt.changedTouches[0].clientY);
});
window.addEventListener("touchend", function (evt) {
musis.touchend();
});
</script>
</body>
</html>