-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
175 lines (171 loc) · 5.89 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pachelballs</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#CSCanvas {
width: 100vw; height: 95vh;
}
#toggle {
width: 100vw; height: 5vh;
background-color: rgb(48,48,48);
color: white;
border: none;
font-size: 16px;
}
</style>
<link rel="stylesheet" href="https://cindyjs.org/dist/latest/CindyJS.css">
<script type="text/javascript" src="https://cindyjs.org/dist/latest/Cindy.js"></script>
<script id="csinit" type="text/x-cindyscript">
t = 0;
critters = [];
playtone(60, channel->1);
FREQ = 120;
chords = [
[63, 68, 72, 75, 80, 84], // Ab
[63, 67, 70, 75, 79, 82], // Eb
[60, 65, 68, 72, 77, 80], // Fm
[60, 63, 67, 72, 75, 79], // Cm
[56, 61, 65, 68, 73, 77], // Db
[56, 60, 63, 68, 72, 75], // Ab
[56, 61, 65, 68, 73, 77], // Db
[58, 63, 67, 70, 75, 79] // Eb
];
notes = [
["E♭", "A♭", "C" , "E♭", "A♭", "C" ],
["E♭", "G" , "B♭", "E♭", "G" , "B♭"],
["C" , "F" , "A♭", "C" , "F" , "A♭"],
["C" , "E♭", "G" , "C" , "E♭", "G" ],
["A♭", "D♭", "F" , "A♭", "D♭", "F" ],
["A♭", "C" , "E♭", "A♭", "C" , "E♭"],
["A♭", "D♭", "F" , "A♭", "D♭", "F" ],
["B♭", "E♭", "G" , "B♭", "E♭", "G" ]
];
colors = [
[0, 1, 0], // Green
[1, 0, 0], // Red
[0, 0, 1], // Blue
[1, 1, 0], // Yellow
[0, 1, 1], // Cyan
[0, 1, 0], // Green
[0, 1, 1], // Cyan
[1, 0, 0] // Red
];
sound = true;
notedisplay = false;
c = 1;
chordmarks = [];
</script>
<script id="csdraw" type="text/x-cindyscript">
t = t + 1;
if(mod(t, FREQ/2) == 1,
critters = critters :> [[B.x, B.y], [(B-A).x, (B-A).y], 25];
c = 1 + mod(floor(t / FREQ), 8);
A.color = colors_c;
B.color = colors_c;
a.color = colors_c;
);
// For checking the chord progression
// if(mod(t, FREQ) == 0,
// c = 1 + mod(floor(t / FREQ), 8);
// apply(chords_c, playtone(#, channel->1));
// );
lines = [
[C,D,chords_c_1,notes_c_1],
[E,F,chords_c_2,notes_c_2],
[G,H,chords_c_3,notes_c_3],
[K,L,chords_c_4,notes_c_4],
[M,N,chords_c_5,notes_c_5],
[O,P,chords_c_6,notes_c_6]
];
critters = apply(critters,
x = #_1;
v = #_2;
bounces = #_3;
newv = v + 0.2 * [0,-0.05];
newx = x + 0.2 * newv;
if(newv.y < 0,
apply(lines,
p1 = [(#_1).x, (#_1).y, 1];
p2 = [(#_2).x, (#_2).y, 1];
tone = #_3;
if(det(x, p1, p2) * det(newx, p1, p2) <= 0, // Line crossed
if(det(p1, x, newx) * det(p2, x, newx) <= 0, // Intersection
playtone(tone, channel->2, duration->0.2, velocity->if(sound,3*|newv|,0));
print(tone);
n = [p1.y - p2.y, p2.x - p1.x];
n = n / |n|;
newx = newx - 0.2 * newv;
newv = 0.75 * (newv - 2 * (n * newv) * n);
bounces = bounces - 1;
draw(#_1, #_2, size->10, color->[1,1,1]);
chordmarks = chordmarks :> [newx, #_4, colors_c, 0];
)
);
);
);
[newx, newv, bounces];
);
critters = select(critters, #_1_2 > -1 & #_3 > 0);
apply(critters, draw(#_1, color->colors_c, size->6));
chordmarks = apply(chordmarks,
pos = #_1 + [0,0.003];
age = #_4 + 1;
if(notedisplay,
drawtext(pos, #_2, color->[1,1,1], alpha->exp(-(age/10 - 2)), align->"mid");
);
[pos, #_2, #_3, age]
);
chordmarks = select(chordmarks, #_4 < 30);
</script>
<script type="text/javascript">
var cdy = CindyJS({
scripts: "cs*",
angleUnit: "°",
exclusive: false,
geometry: [
{color: [0, 1, 0], labeled: false, name: "A", size: 10, type: "Free", pos: [-0.90, 0.80, 1]},
{color: [0, 1, 0], labeled: false, name: "B", size: 3.64, type: "Free", pos: [-0.73, 0.85, 1]},
{args: ["A", "B"], color: [0, 1, 0], labeled: false, name: "a", size: 4.9, type: "Segment"},
{color: [1, 1, 1], labeled: false, name: "C", size: 3.13, type: "Free", pos: [0.1, 0.4, 1]},
{color: [1, 1, 1], labeled: false, name: "D", size: 3.13, type: "Free", pos: [0.6, 0.8, 1]},
{args: ["C", "D"], color: [1, 1, 1], labeled: false, name: "b", size: 3.13, type: "Segment"},
{color: [1, 1, 1], labeled: false, name: "E", size: 3.13, type: "Free", pos: [-0.1, 0.2, 1]},
{color: [1, 1, 1], labeled: false, name: "F", size: 3.13, type: "Free", pos: [-0.8, 0.4, 1]},
{args: ["E", "F"], color: [1, 1, 1], labeled: false, name: "c", size: 3.13, type: "Segment"},
{color: [1, 1, 1], labeled: false, name: "G", size: 3.13, type: "Free", pos: [0.1, 0.0, 1]},
{color: [1, 1, 1], labeled: false, name: "H", size: 3.13, type: "Free", pos: [0.7, 0.3, 1]},
{args: ["G", "H"], color: [1, 1, 1], labeled: false, name: "d", size: 3.13, type: "Segment"},
{color: [1, 1, 1], labeled: false, name: "K", size: 3.13, type: "Free", pos: [-0.1, -0.2, 1]},
{color: [1, 1, 1], labeled: false, name: "L", size: 3.13, type: "Free", pos: [-0.6, 0.1, 1]},
{args: ["K", "L"], color: [1, 1, 1], labeled: false, name: "e", size: 3.13, type: "Segment"},
{color: [1, 1, 1], labeled: false, name: "M", size: 3.13, type: "Free", pos: [0.1, -0.4, 1]},
{color: [1, 1, 1], labeled: false, name: "N", size: 3.13, type: "Free", pos: [0.5, -0.2, 1]},
{args: ["M", "N"], color: [1, 1, 1], labeled: false, name: "f", size: 3.13, type: "Segment"},
{color: [1, 1, 1], labeled: false, name: "O", size: 3.13, type: "Free", pos: [-0.1, -0.6, 1]},
{color: [1, 1, 1], labeled: false, name: "P", size: 3.13, type: "Free", pos: [-0.4, -0.4, 1]},
{args: ["O", "P"], color: [1, 1, 1], labeled: false, name: "g", size: 3.13, type: "Segment"}
],
ports: [
{id: "CSCanvas", transform: [{visibleRect: [-1, 1, 1, -1]}], background: "rgb(48, 48, 48)"}
],
csconsole: false,
use: [
"CindyGL"
],
autoplay: true,
behavior: [
]
});
</script>
</head>
<body>
<button id="toggle" onclick="cdy.evokeCS('notedisplay = !notedisplay;');">Toggle Note Display</button>
<div id="CSCanvas"></div>
</body>
</html>