-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathgrid.html
95 lines (85 loc) · 3.58 KB
/
grid.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
<!DOCTYPE html>
<!-- Google Summer of Code 2012: Automagic Music Maker
Primarily written by Myles Borins
Strongly influenced by GSOC Mentor Colin Clark
Using the Infusion framework and Flocking Library
The Automagic Music Maker is distributed under the terms the MIT or GPL2 Licenses.
Choose the license that best suits your project. The text of the MIT and GPL
licenses are at the root of the Piano directory. -->
<html lang="en">
<head>
<!-- This is all so meta -->
<meta charset="utf-8">
<title>Automagic Music Maker</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="The Automagic Music Maker">
<meta name="author" content="Myles Borins">
<!-- Le styles -->
<link href="css/third_party/normalize.css" rel="stylesheet">
</head>
<body>
<div id="gridstrument"></div>
<script src="js/third_party/jquery-1.7.2.min.js"></script>
<script src="js/third_party/jquery.ui.core.js"></script>
<script src="js/third_party/infusion-framework.js"></script>
<script src="js/third_party/Flocking/flocking/flocking-core.js"></script>
<script src="js/third_party/Flocking/flocking/flocking-scheduler.js"></script>
<script src="js/third_party/Flocking/flocking/flocking-firefox.js"></script>
<script src="js/third_party/Flocking/flocking/flocking-webaudio.js"></script>
<script src="js/third_party/Flocking/flocking/flocking-parser.js"></script>
<script src="js/third_party/Flocking/flocking/flocking-ugens.js"></script>
<script src="js/third_party/d3/d3.v2.js"></script>
<script src="js/third_party/dat.gui.js"></script>
<script src="js/oscillator.js"></script>
<script src="js/arpeggiator.js"></script>
<script src="js/aria.js"></script>
<script src="js/piano.js"></script>
<script src="js/grid.js"></script>
<script src="js/highlighter.js"></script>
<script src="js/instrument.js"></script>
<script src="js/gui.js"></script>
<script src="js/eventBinder.js"></script>
<script type="text/javascript">
/*global jQuery, fluid*/
var automm = automm || {};
var gridstrument = gridstrument || {};
(function(){
"use strict";
// Draw a piano based on the below model (Subject to change)
// model: {
// firstNote: 60, // Middle C
// octaves: 1,
// octaveNotes: 12,
// afour: 69,
// afourFreq: 440,
// padding: 50,
// pattern: ['white','black','white','black','white','white','black','white','black','white','black','white'],
// keys: {
// white: {width: 50, height: 200, stroke: "black", fill: "white", highlight: "yellow", notes: []},
// black: {width: 30, height: 125, stroke: "black", fill: "black", highlight: "yellow", notes: []}
// }
//
gridstrument = automm.instrument("#gridstrument", {
model: {
autoGrid: true,
firstNote: 60,
octaves: 2,
padding: 0,
keys: {
white: {
fill: '#fff000',
stroke: '#000000',
highlight: '#ffffff'
},
black: {
fill: '#ffa400',
stroke: '#000000',
highlight: '#000000'
}
}
}
});
}());
</script>
</body>
</html>