-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
71 lines (62 loc) · 2.28 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
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Dawn In New York, an Interactive Poem</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
<script src="p51.js"></script>
<script src="p5add.js"></script>
<script src="ml5.js"></script>
</head>
<body class="body">
<!--
Please enable your microphone.
Please close any other tabs/windows containing speech API projects, even if only showing the preview window.
-->
<h2 class="title">
Welcome, to begin, say dawn
</h2>
<figure>
<canvas id="motion"></canvas>
<figcaption id="caption">
Movement<br>
<span id="score">?</span>
</figcaption>
</figure>
<div class="marquee mix-difference">
<!-- here we add the title in multiple repeating times using javascript huzzAH-->
<span class="still">Dawn In NY by Claude McKay</span>
</div>
<iframe id="roto" src="https://www.youtube.com/embed/dteGxAdkBpA?autoplay=1&controls=0" allow="autoplay" allowfullscreen>
</iframe>
<!-- <video id= "roto">
<source src="rotosound.mp4" type="video/mp4">
</video> -->
<audio id ="rotoaudio" style="width:0;">
<source src="dawn2.m4a" type="audio/mp4" />
</audio>
<div class="padlock">
<div class="keyhole"></div>
</div>
<h3 class="foot">
To End the poem, say: Dusk
</h2>
<p class="heard">Heard: <span class="heard-output">nothing</span></p>
<svg class="svg" xmlns="http://www.w3.org/2000/svg">
<filter id="filter">
<feTurbulence type="turbulence" baseFrequency="0" id="turbulence" numOctaves="1" result="turbulence" seed="5">
<animate id="noiseAnimate" attributeName="baseFrequency" values="0.02; 0.04; 0.02" calcMode="spline" keySplines="0.42 0.0 0.58 1.0;0.42 0.0 0.58 1.0" dur="15s" repeatCount="indefinite"></animate>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="turbulence" scale="10" xChannelSelector="R" yChannelSelector="B"></feDisplacementMap>
</filter>
</svg>
<!-- partial -->
<script src="adaptor.js"></script>
<script src="./diff-cam-engine.js"></script>
<script src="./video.js"></script>
<script src="./script.js"></script>
<script src="./title.js"></script>
<!-- <script src="bodypix.js"></script> -->
</body>
</html>