-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
80 lines (71 loc) · 3.77 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
<!DOCTYPE html>
<html>
<head>
<title>Algorithmic Composition</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="script.js"></script>
<link href="https://fonts.googleapis.com/css?family=PT+Serif|Raleway" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Header/Home -->
<header class="banner-container" id="home">
<iframe src="sketches/title/index.html" class="banner-iframe"></iframe>
<div class="banner-text">
<h1><a href=".">Algorithmic Music Composition</a></h1>
<p>An interactive and explorable tutorial on algorithmic music composition with JavaScript and p5.js-sound.</p>
</div>
</header>
<div class="part-div" style="background-color: #042A2B">
<iframe src="sketches/part1/index.html" class="banner-iframe"></iframe>
<div class="banner-text">
<h2><a href="part1.html">Part 1: Algorithmic Composition</a></h2>
<p>How do computers compose music?</p>
</div>
</div>
<div class="part-div" style="background-color: #5EB1BF">
<iframe src="sketches/part2/index.html" class="banner-iframe"></iframe>
<div class="banner-text">
<h2><a href="part2.html">Part 2: Notes On Time</a></h2>
<p>Learn to implement real-time interactive music applications!</p>
</div>
</div>
<div class="content">
<h2>Contents</h2>
<ol>
<li><a href="part1.html">Part 1: Algorithmic Composition</a>
<ol>
<li><a href="part1.html#composition_building_blocks">The Building Blocks of Music</a></li>
<li><a href="part1.html#composition_dice">Dice Music</a></li>
<li><a href="part1.html#composition_fractal">Fractal Music</a></li>
<li><a href="part1.html#composition_genetic">Genetic Music</a></li>
<li><a href="part1.html#composition_markov">Markov Music</a></li>
<li><a href="part1.html#composition_whats_next">What's Next?</a></li>
</ol>
</li>
<li><a href="part2.html">Part 2: Notes On Time</a>
<ol>
<li><a href="part2.html#time_background">Background</a></li>
<li><a href="part2.html#time_solution">The Solution</a></li>
<li><a href="part2.html#time_best_practices">Best Practices for Musical Timing</a>
<ol>
<li><a href="part2.html#time_instantaneous">Instantaneous Reaction</a></li>
<li><a href="part2.html#time_static">Playing A Sequence of Notes (Static Scheduling)</a></li>
<li><a href="part2.html#time_dynamic">Playing A Sequence of Notes (Dynamic Scheduling)</a></li>
<li><a href="part2.html#time_audio_and_visuals">Synchronizing Audio and Visuals</a></li>
<li><a href="part2.html#time_sequencer">Extra Credit: Step Sequencer</a></li>
</ol>
</li>
<li><a href="part2.html#time_whats_next">What's Next?</a></li>
</ol>
</li>
</ol>
</div>
<!-- Footer -->
<footer class="content">
<p>Created by <a href="https://github.com/JunShern/">junshern</a> as a 2018 <a href="https://summerofcode.withgoogle.com/">Google Summer of Code</a> project for the <a href="https://processingfoundation.org/">Processing Foundation</a>, using <a href="https://p5js.org/">p5.js</a> and the <a href="https://p5js.org/reference/#/libraries/p5.sound">p5.sound</a> add-on library. Special thanks to <a href="http://www.jasonsigal.cc/">Jason Sigal</a> for feedback and guidance on the development of this tutorial and its accompanying examples.</p>
<p>Found a bug? File an issue on <a href="https://github.com/JunShern/explorable-algcomp">GitHub</a>.</p>
</footer>
</body>
</html>