-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
117 lines (84 loc) · 2.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Patatap Clone</title>
<script src="assets/script/lib/paper-full.min.js"></script>
<script src="assets/script/lib/howler.min.js"></script>
<link rel="stylesheet" href="assets/style/style.css">
<script type="text/paperscript" canvas="myCanvas">
// will hold all appearing circles
var circles = []
// number of mp3 files in the sound directory
// for randomization purposes
var soundFileNumber = 26
function drawCircle(point,radius,color) {
// draws random circle
var output = new Path.Circle(point, radius)
output.fillColor = color
return output
}
function randomizeColor() {
// returns random value between 0-255
// for rgb or rgba color genereation
return Math.floor(Math.random() * 256)
}
function stringToColour(str) {
// changes input to hex color value
// from https://stackoverflow.com/questions/3426404/create-a-hexadecimal-colour-based-on-a-string-with-javascript
// prepare stuff
var hash = 0
str = String(str)
for (var i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash)
}
var colour = "#"
for (var i = 0; i < 3; i++) {
var value = (hash >> (i * 8)) & 0xFF;
colour += ('00' + value.toString(16)).substr(-2)
}
return colour
}
function onFrame(event) {
// animate color and size
// paperjs native event
for(var i = 0; i < circles.length; i++) {
circles[i].fillColor.hue += 1
circles[i].scale(0.9)
// remove circle if not visible
// to increase performance
if(circles[i].area < 4) {
circles[i].remove()
circles.splice(i,1)
i--
}
}
}
function onKeyDown(event) {
// react to keypresses
// paperjs native event
// get character code of key pressed
var keyPressed = event.key.charCodeAt()
// get color based on key pressed
var keyColor = stringToColour(keyPressed)
// select file to play based on character
// code and amount of files in directory
var fileToPlay = Math.floor(keyPressed % soundFileNumber)
// play the sound
var sound = new Howl({
src: ['assets/sound/' + fileToPlay + '.mp3']
});
sound.play();
// get random point on canvas to draw circle around
var maxPoint = new Point(view.size.width, view.size.height)
var randomize = Point.random()
var randomPoint = maxPoint * randomize
// create circle
circles.push(drawCircle(randomPoint,500,keyColor))
}
</script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
</body>
</html>