-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
76 lines (66 loc) · 3.45 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
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>grid</title>
<!-- External Libraries -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
<script src="./js/dataTree.min.js"></script>
<script src="./js/Tone.js"></script>
<!-- My Files -->
<script src="./js/components.js"></script>
<script src="./js/synths.js"></script>
<script src="./js/logger.js"></script>
</head>
<body>
<main>
</main>
<div class="window">
<div class="window-contents">
<h2>What is this?</h2>
<p>This piece is the product of my final year project, <i>"Using
Generative Art Technique to Explore the Work of Darrell
Viner"</i></p>
<p>Darrell Viner (1946-2001) was an early computer artist,
though his work was primarily sculpture, he produced many pen
plotter works <a href="https://collections.vam.ac.uk/search/?images_exist=true&page=1&id_person=A40101&id_technique=x43893">available
to view at the V&A</a>.</p>
<p>This project seeks to allow you to explore some 'world'
which these images lived in, allowing you to modify parameters
to explore this landscape. There is also audio which is
generated based on these parameters.</p>
<p>All of this occurs in your browser, and is powered using <a
href="https://p5js.org/">p5.js</a> and <a
href="https://tonejs.github.io/">Tone.js</a>.
<h2>Controls</h2>
<img src="./images/blankkeyboard.png">
<div class="keylist">
<div><span class="key">W</span> - Move up </div>
<div><span class="key">S</span> - Move down </div>
<div><span class="key">A</span> - Move left </div>
<div><span class="key">D</span> - Move right </div>
<div><span class="key">E</span> - Move in </div>
<div><span class="key">C</span> - Move out</div>
<div><span class="key">Q</span> - Spacing up</div>
<div><span class="key">Z</span> - Spacing down</div>
<div><span class="key">I</span> - Randomness up</div>
<div><span class="key">K</span> - Randomness down</div>
</div>
<h3>History</h3>
<p> On the left side of the screen a tree is growing, click one
of the circles to recall a previous state, after that it will
branch. Clicking the down button allows you to save your
history, the up button allows you to upload the files you've
previously downloaded.</p>
<h3>Audio</h3>
<p>In the bottom right a volume slider and a mute button are provided.</p>
<p>If audio doesn't play try pressing the space bar or using Firefox</p>
</div>
</div>
<!-- Create a button for user help page -->
<button class="help button-style">?</button>
<!-- Load this here after DOM ready -->
<script src="js/script.js"></script>
</body>
</html>