-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·90 lines (80 loc) · 3.43 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Ubuntu">
<title>bach_stress_test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js" type="text/javascript"></script>
<script src="bufferloader.js" type="text/javascript"></script>
<script src="snd.js" type="text/javascript"></script>
<script src="drawingRect.js" type="text/javascript"></script>
<script src="bach_stress_test.js" type="text/javascript"></script>
<style> body {padding: 20px; margin: auto;}
h1 {
font-family: Ubuntu, sans-serif;
font-size: 30px;
font-style: normal;
font-variant: normal;
font-weight: 800;
line-height: 26.4px;
}
h2 {
font-family: Ubuntu, sans-serif;
font-size: 18px;
font-style: bold;
font-variant: normal;
font-weight: 600;
line-height: 20.4px;
}
h3 {
font-family: Ubuntu, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 15.4px;
}
p {
font-family: Ubuntu, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;
}
#sketch-holder {
width: 90vw;
height: 51.4vw;
max-height: 90vh;
max-width: 157.58vh;
margin: auto;
display: block;
}
</style>
</head>
<body>
<H1>The Bach Stress Test</H1>
<div id="sketch-holder">
<!-- Our sketch will go here! -->
</div>
<H2>An experiment with p5.js and Web Audio API</H2>
<p>code: http://www.giovannibedetti.com/</br>
illustration: https://www.behance.net/monocolo</br>
README!</br>
This is a stress test for Processing and Web Audio API.
The canvas is drawn using Processing and the sound is made with Web Audio API.
At mouse click the image will be divided in 4 images.
Also the audio file is split in 4 parts and these are played together. Parts 1 and 3 are played forward, while parts 2 and 4 are played backwards.</br>
You'll see and hear 1, 4, 16, 64, 256, 1024 images and sounds together.</br></br>
The theme is the famous J.S. Bach canon 1 à 2 from the "Musical Offering" (1747).
This piece is a "crab canon", so it can be played at the same time forward and backward.
See here (www2.nau.edu/tas3/MOcancrizans.pdf) for the full story.
This test was made just to find out if it can be combined in other ways.</br></br>
Check out the magic of math.</br></br>
Desktop only:
for your pleasure you can stop the sounds using the 'p', and enable/disable the random image change pressing 's'.</br></br>
<b>Warning: as I said, this is a stress test. Try it at your own risk! (your browser can hang a little bit)</b></br>
If your browser supports Web Audio API, you will hear the full Bach theme on load. On iOS devices, this could not be true, because autoplay is disabled.</br>
02/2015</p>
</body>
</html>