-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
126 lines (118 loc) · 3.67 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
<!DOCTYPE html>
<html>
<head>
<title>Key Sound</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="paper-full.js"></script>
<script type="text/javascript" src="howler.js"></script>
<script type="text/paperscript" canvas="myCanvas">
var circles = []
var colors = ["rgb(134, 143, 152)", "rgb(0, 66, 54)", "rgb(159, 155, 116)", "rgb(105, 200, 205)", "rgb(87, 82, 126)", "rgb(0, 52, 77)", "rgb(122, 26, 87)", "rgb(137, 32, 52)", "rgb(133, 87, 35)", "rgb(96, 54, 24)", "rgb(80, 40, 18)", "rgb(201, 201, 201)", "rgb(178, 162, 150)", "rgb(103, 124, 138)", "rgb(149, 212, 122)", "rgb(82, 204, 206)", "rgb(0, 176, 178)", "rgb(159, 193, 211)", "rgb(104, 143, 173)", "rgb(63, 100, 126)", "rgb(160, 158, 214)", "rgb(111, 84, 149)", "rgb(75, 37, 109)", "rgb(246, 143, 160)", "rgb(242, 98, 121)", "rgb(239, 62, 91)"]
var sound = [new Howl({
src:['Sounds/bubbles.mp3']
}),
new Howl({
src:['Sounds/clay.mp3']
}),
new Howl({
src:['Sounds/confetti.mp3']
}),
new Howl({
src:['Sounds/corona.mp3']
}),
new Howl({
src:['Sounds/dotted-spiral.mp3']
}),
new Howl({
src:['Sounds/flash-1.mp3']
}),
new Howl({
src:['Sounds/flash-2.mp3']
}),
new Howl({
src:['Sounds/flash-3.mp3']
}),
new Howl({
src:['Sounds/glimmer.mp3']
}),
new Howl({
src:['Sounds/moon.mp3']
}),
new Howl({
src:['Sounds/pinwheel.mp3']
}),
new Howl({
src:['Sounds/piston-1.mp3']
}),
new Howl({
src:['Sounds/piston-2.mp3']
}),
new Howl({
src:['Sounds/piston-3.mp3']
}),
new Howl({
src:['Sounds/prism-1.mp3']
}),
new Howl({
src:['Sounds/prism-2.mp3']
}),
new Howl({
src:['Sounds/prism-3.mp3']
}),
new Howl({
src:['Sounds/splits.mp3']
}),
new Howl({
src:['Sounds/squiggle.mp3']
}),
new Howl({
src:['Sounds/strike.mp3']
}),
new Howl({
src:['Sounds/suspension.mp3']
}),
new Howl({
src:['Sounds/timer.mp3']
}),
new Howl({
src:['Sounds/ufo.mp3']
}),
new Howl({
src:['Sounds/veil.mp3']
}),
new Howl({
src:['Sounds/wipe.mp3']
}),
new Howl({
src:['Sounds/zig-zag.mp3']
})
]
document.querySelector("body").addEventListener("click", function(){
//document.querySelector("h1").classList.add("display")
var maxPoint = new Point(view.size.width, view.size.height)
var randomPoint = Point.random()
var point = maxPoint * randomPoint
var no = Math.floor(Math.random() * 26)
var myCircle = new Path.Circle(point, 90)
myCircle.fillColor = colors[no]
circles.push(myCircle)
sound[no].play()
})
function onFrame(event){
for(var i=0; i<circles.length; i++){
circles[i].fillColor.hue+=1
circles[i].scale(.97);
if(circles[i].area<1){
circles[i].remove()
//circles[i].splice(i, 1);
//console.log(circles);
}
}
}
</script>
</head>
<body>
<h1>Click anywhere on the screen to start playing with sound and animation :)</h1>
<canvas id="myCanvas" resize></canvas>
</body>
</html>