Skip to content

Instantly share code, notes, and snippets.

@ex0self ex0self/8.html
Created Oct 30, 2016

Embed
What would you like to do?
Project 2: Oblivion - A non-linear multi-screen narration based on the function of the memories in the human brain using a hyperlink structure.
<html>
<head>
<title> OBLIVION </title>
<link href="../css/style.css" type="text/css" rel="stylesheet"/>
<script src="../clock/libraries/p5.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.dom.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.sound.js" type="text/javascript"></script>
<script src="../script.js" type ="text/javascript"></script>
<script src="../clock/sketch.js" type="text/javascript"></script>
<style type="text/css">
body {
min-width: 90%;
}
#defaultCanvas0{
display: inline-block;
float: left;
width: 30%;
}
#contentFrame{
display: inline-block;
width: 60%;
}
</style>
</head>
<body>
<div id='contentFrame'>
<h1> 8:00 PM </h1>
<p> It was the slowest day at work. It was as if all the clocks in the world had remained still, Lily thought to herself as a student approached to print something. She couldnt wait to see him again.</p>
<p>Student: 11x17 semi gloss text please.</p>
<p> Would he make tea again? Get a hold of yourself Lily, you do not even like tea.</p>
<p> Lily: That would be 1.45 out of your print account. </p>
<p> There is something about the way he makes <a href="../3/Sep23.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Sep23');"> tea </a>. He is so demanding about what kind of tea I should drink, What kind of tea do you want today? I will make you Jasmine and no sugar. </p>
<p> Student: I am here to pick up an online order </p>
<p> Yet he is so gentle with the way he smiles and moves around me. </p>
</p> Student: UM MY ONLINE ORDER? </p>
<p> Lily: er.. yes sorry, what is your user id again? </p>
</div>
</body>
</html>
<html>
</head>
<Title> OBLIVION </Title>
<link href="../css/style.css" type="text/css" rel="stylesheet"/>
<script src="../clock/libraries/p5.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.dom.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.sound.js" type="text/javascript"></script>
<script src="../script.js" type ="text/javascript"></script>
<script src="../clock/sketch.js" type="text/javascript"></script>
<style type="text/css">
body {
min-width: 90%;
}
#defaultCanvas0{
display: inline-block;
float: left;
width: 30%;
}
#contentFrame{
display: inline-block;
width: 60%;
}
</style>
</head>
<body>
<div id='contentFrame'>
<h1> Ariana </h1>
<p>She was the first friend Lily had made. People barely ever asked Lily to hang out. So, she was really surprised when Ariana <a href="../4/Sep26.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Sep26');"> shouted </a> if she wanted to join her for a snack from across the road.</p>
</div>
</body>
</html>
<html>
<head>
<Title> Title </title>
<link href="../css/style.css" type="text/css" rel="stylesheet"/>
<script src="../clock/libraries/p5.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.dom.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.sound.js" type="text/javascript"></script>
<script src="../script.js" type ="text/javascript"></script>
<script src="../clock/sketch.js" type="text/javascript"></script>
<style type="text/css">
body {
min-width: 90%;
}
#defaultCanvas0{
display: inline-block;
float: left;
width: 30%;
}
#contentFrame{
display: inline-block;
width: 60%;
}
</style>
</head>
<body>
<div id='contentFrame'>
<h1> Dennis </h1>
<p> From time to time, Lily wonders about Dennis. Where he has come from, or if he has any siblings. She knows that she knows nothing about him, yet it feels as if she has known him her whole life. Somehow, he is always there making her feel better whenever she is in <a href="../6/Place.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Place');"> that place </a> she doesnt want to be. Always, offering to play <a href="../5/Pingpong.html" onmouseover="clockwise(-1);" onmouseout="clockOut();" onclick="parent.register('Pingpong');"> ping pong </a>, with his funny accents. Lily wonders, if Dennis is the only one who sees through her. Perhaps more than anyone else on this planet. </p>
</div>
</body>
</html>
<html>
<head>
<title> OBLIVION </title>
<link href="../css/style.css" type="text/css" rel="stylesheet"/>
<script src="../clock/libraries/p5.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.dom.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.sound.js" type="text/javascript"></script>
<script src="../script.js" type ="text/javascript"></script>
<script src="../clock/sketch.js" type="text/javascript"></script>
<script src="../script/script.js" type ="text/javascript"></script>
<style type="text/css">
li{
list-style: circle;
}
body {
min-width: 90%;
}
#defaultCanvas0{
display: inline-block;
float: left;
width: 30%;
}
#contentFrame{
display: inline-block;
width: 60%;
}
</style>
</head>
<body>
<div id='contentFrame'>
<h1> Email </h1>
<p><li><a href="../1/Sep14.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Sep14');"> Sep 14, 2016 </a></li></p>
<p> I was thinking the same. As I said previously, I have worked on a project similar. Perhaps, I can dig up some samples I created. For now I like the way you are spinning the whole thing.</p>
<p>From thinker Krum</p>
<p><li><a href="./Sep21.html" onmouseover="clockwise(-1);" onmouseout="clockOut();" onclick="parent.register('Sep21');"> Sep 21, 2016 </a></li></p>
<p>Dear Lily, I was thinking about when I was little trying to learn how to ride a bike. The thought of balancing of two wheels just seemed illogical. I got upset with myself and frustrated. Then I thought, hold on, I have been riding on two wheels all the time but on my scooter. There was no difference to the principle of riding a bike.</p>
<p>So, this made me think of you, when you asked about confidence in public. You are already doing it. You can do it as you have been doing it. There is little difference between public speaking from your desk from public speaking at front of class. So, next time you are presented with that challenge remember my words, and know that you can do it. Hope you are no longer <a href="../6/Sad.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Sad');"> sad </a>. That would break my heart.</p>
<p> From worried Krum </p>
</div>
</body>
</html>
<html>
<head>
<title> OBLIVION </title>
<link href="../css/style.css" type="text/css" rel="stylesheet"/>
<script src="../clock/libraries/p5.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.dom.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.sound.js" type="text/javascript"></script>
<script src="../script.js" type ="text/javascript"></script>
<script src="../clock/sketch.js" type="text/javascript"></script>
<style type="text/css">
body {
min-width: 90%;
}
#defaultCanvas0{
display: inline-block;
float: left;
width: 30%;
}
#contentFrame{
display: inline-block;
width: 60%;
}
</style>
</head>
<body>
<div id='contentFrame'>
<h1> Henry </h1>
<p> If there were a writer writing a story about an enchanted old garden with big black gates that no one could pass through, he would write Henry as the gatekeeper. The first time Lily met Henry, he was sleeping on an old couch in one of the rooms at the lounge were everybody hung out. She looked at him with envy of how comfortable he was napping, and when she was about to walk away he woke up and said, Hey there! Looking for a place to sleep?</p>
<p>er.. mm yea sort of, said lily laughing uncomfortably.</p>
<p> The name is Henry and the couch is all yours, he replied as he jumped up while fixing his hair.</p>
<p>Lily: Thanks, but I wont be able to fall <a href="../2/Sep21.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Sep21');">asleep</a> that easily Im sure of it. You can go back to sleep.</p>
<p>Henry: Nah, I need to work on my project. Want some candy?</p>
<p>mm.. sure, Replied Lily with a kind smile.</p>
<p>Henry: First year huh? Well let me show you around.</p>
<p>And then he switched to this <a href="./Oct4.html" onmouseover="clockwise(-1);" onmouseout="clockOut();" onclick="parent.register('Oct4');">British accent</a>, and took Lily everywhere, and showed her every corner and every passage in and out of the lounge.</p>
</div>
</body>
</html>
<html>
<head>
<title> OBLIVION </title>
<link href="../css/style.css" type="text/css" rel="stylesheet"/>
<script src="../clock/libraries/p5.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.dom.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.sound.js" type="text/javascript"></script>
<script src="../script.js" type ="text/javascript"></script>
<script src="../clock/sketch.js" type="text/javascript"></script>
<style type="text/css">
body {
min-width: 90%;
}
#defaultCanvas0{
display: inline-block;
float: left;
width: 30%;
}
#contentFrame{
display: inline-block;
width: 60%;
}
</style>
</head>
<body>
<div id='contentFrame'>
<h1> Igor </h1>
<p> When Lily was 9, she created an imaginary character, and named him Igor. He is not a friend really. But he appears whenever Lily is day dreaming. You see Igor is one of those characters that push the story <a href="./Sep26.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Sep26');">forward </a>. Lately, Igor has been appearing a lot. Perhaps, this world is not real if Igor is here. Lily tells herself. Maybe no one is real, except Igor. Not <a href="../1/Ariana.html" onmouseover="clockwise(-1);" onmouseout="clockOut();" onclick="parent.register('Ariana');"> Ariana </a>, not<a href="./Dennis.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Dennis');"> Dennis </a>, and perhaps, not even <a href="../3/Professor.html" onmouseover="clockwise(-1);" onmouseout="clockOut();" onclick="parent.register('Professor');">Professor Krum </a>.
</div>
</body>
</html>
<html>
<head>
<Title> OBLIVION </Title>
<script src="script.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#frame {
background-color: white;
border-style: solid;
}
p{
font-family: 'Open Sans', sans-serif;
font-size: 22;
color: white;
font-weight: bolder;
line-height: 2em;
}
body{
text-align: center;
background: black;
font-family: sans-serif;
font-weight: 100;
height:auto;
overflow: hidden;
}
h1{
font-family: 'Open Sans', sans-serif;
font-weight: bolder;
color: white;
font-weight: 100;
font-size: 30px;
margin: 20px 0px 20px;
}
#clockdiv{
font-family: 'Open Sans', sans-serif;
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#clockdiv > div{
padding: 10px;
border-radius: 3px;
margin-top: 0.2px;
background: darkred;
display: inline-block;
}
#clockdiv div > span{
padding: 15px;
border-radius: 3px;
margin-top: 0.2px;
background: black;
display: inline-block;
}
.smalltext{
padding-top: 5px;
font-size: 16px;
}
</style>
</head>
<body onload="clockAnimation()">
<audio autoplay loop>
<source src="audio.mp3" type="audio/mpeg" >
</audio>
<h1>Countdown Clock</h1>
<div id="clockdiv">
<div> <span class="minutes">15</span>
<div class="smalltext">Minutes</div>
</div>
<div> <span class="seconds">00</span>
<div class="smalltext">Seconds</div>
</div>
</div>
<div id="currenti">...</div>
<div id="frame">
<iframe id="storyframe" src="clocks2/Title.html" height= 100% width=100% scrolling="yes">
</iframe>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>clocks2</title>
<script src="libraries/p5.js" type="text/javascript"></script>
<script src="libraries/p5.dom.js" type="text/javascript"></script>
<script src="libraries/p5.sound.js" type="text/javascript"></script>
<script src="sketch.js" type="text/javascript"></script>
<style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>clocks2</title>
<script src="libraries/p5.js" type="text/javascript"></script>
<script src="libraries/p5.dom.js" type="text/javascript"></script>
<script src="libraries/p5.sound.js" type="text/javascript"></script>
<script src="sketch.js" type="text/javascript"></script>
<style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
</head>
<body>
</body>
</html>
<html>
<head>
<Title> OBLIVION </Title>
<link href="../css/style.css" type="text/css" rel="stylesheet"/>
<script src="../clock/libraries/p5.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.dom.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.sound.js" type="text/javascript"></script>
<script src="../script.js" type ="text/javascript"></script>
<script src="../clock/sketch.js" type="text/javascript"></script>
<style type="text/css">
li{
list-style: circle;
}
body {
min-width: 90%;
}
#defaultCanvas0{
display: inline-block;
float: left;
width: 30%;
}
#contentFrame{
display: inline-block;
width: 60%;
}
</style>
</head>
<body>
<div id='contentFrame'>
<h1> Lily </h1>
<li><a href="./Sep14.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Sep14');"> Lost in the details </a></li>
<li><a href="../2/Sep21.html" onmouseover="clockwise(-1);" onmouseout="clockOut();" onclick="parent.register('Sep21');"> Lost in the details </a></li>
<li><a href="../3/Sep23.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Sep23');"> Lost in the details </a></li>
<li><a href="../4/Sep26.html" onmouseover="clockwise(-1);" onmouseout="clockOut();" onclick="parent.register('Sep26');"> Lost in the details </a></li>
<li><a href="../5/Oct4.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Oct4');"> Lost in the details </a></li>
<li><a href="../6/Oct5.html" onmouseover="clockwise(-1);" onmouseout="clockOut();" onclick="parent.register('Oct5');"> Lost in the details </a></li>
<li><a href="../7/Oct6.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Oct6');"> Lost in the details </a></li>
</div>
</body>
</html>
<html>
<head>
<title> OBLIVION </title>
<link href="../css/style.css" type="text/css" rel="stylesheet"/>
<script src="../clock/libraries/p5.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.dom.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.sound.js" type="text/javascript"></script>
<script src="../script.js" type ="text/javascript"></script>
<script src="../clock/sketch.js" type="text/javascript"></script>
<script src="../script/script.js" type ="text/javascript"></script>
<style type="text/css">
body {
min-width: 90%;
}
#defaultCanvas0{
display: inline-block;
float: left;
width: 30%;
}
#contentFrame{
display: inline-block;
width: 60%;
}
</style>
</head>
<body>
<div id='contentFrame'>
<h1> Oct 04, 2016 </h1>
<p> Dennis: How about a round of <a href="./Pingpong.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Pingpong');"> ping pong</a>?</p>
<p>Lily: mmm, I have to mmm. Ok. Just one hand.</p>
<p><i>Lily looks puzzled as Dennis gives her a questionable look. </i></p>
<p>Dennis: Are you ready?</p>
<p>Lily: yes.</p>
<p>Dennis: Really ready madam?</p>
<p><i>Lily giggles</i></p>
<p>Dennis: Because you are going down.</p>
<p>Lily: We will see about that.</p>
<p><i>Dennis and Lily start the match as <a href="./Henry.html" onmouseover="clockwise(-1);" onmouseout="clockOut();" onclick="parent.register('Henry');"> Henry </a> starts to act as a British sports caster.</i></p>
<p>Lily: Hey go easy, I am not as good as you.</p>
<p>Dennis: says the girl who won me last time.</p>
<p><i>Lily giggles.</i></p>
<p>Henry: oooooh that was close.</p>
<p>Dennis: You almost had me.</p>
<p><i>Lilys stomach drops as she sees a familiar slender figure walk towards the middle of the ping-pong table. It is too hot in here, I can barely breath. Why am I so nervous? Just stay calm, keep playing. Dont pay any attention to him. Lily thinks to herself. </i></p>
<p>Dennis: Wanna join in professor?</p>
<p>Professor Krum: er.. Perhaps.. I am too good you know.</p>
<p><i>He gives a smirk to his students as he walks away.</i></p>
</div>
</body>
</html>
<html>
<head>
<title> OBLIVION </title>
<link href="../css/style.css" type="text/css" rel="stylesheet"/>
<script src="../clock/libraries/p5.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.dom.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.sound.js" type="text/javascript"></script>
<script src="../script.js" type ="text/javascript"></script>
<script src="../clock/sketch.js" type="text/javascript"></script>
<script src="../script/script.js" type ="text/javascript"></script>
<style type="text/css">
body {
min-width: 90%;
}
#defaultCanvas0{
display: inline-block;
float: left;
width: 30%;
}
#contentFrame{
display: inline-block;
width: 60%;
}
</style>
</head>
<body>
<div id='contentFrame'>
<h1> Oct 05, 2016 </h1>
<p>Lily: I dont feel good today.</p>
<p><i>Rita gives Lily a deep stare and looks away.</i></P>
<p><a href="./Rita.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Rita');"> Rita </a> : Having a bad day? </p>
<p>Lily: yeah. I think Im tired. </p>
<p><i>And also <a href="./Sad.html" onmouseover="clockwise(-1);" onmouseout="clockOut();" onclick="parent.register('Sad');"> sad </a>. Lily thinks to herself.</i></P>
<p>Rita: You think you are ok to continue with the project?</p>
<p>Lily: yeah of course.</p>
<p>Rita: ok, here have a listen. This is how it will sound like.</p>
<p><i>Rita hands over a breadboard with almost 10 wires coming in and out from every direction to Lily.</i></p>
<p>Be careful! Rita shouts.</p>
<p>Lily: ok, ok, got it. </p>
<p><i>As Lily puts the headset on, her heart rate starts to increase, and she goes back to <a href="./Place.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Place');"> that place </a> she is afraid of the most. </i></p>
</div>
</body>
</html>
<html>
<head>
<title> OBLIVION </title>
<link href="../css/style.css" type="text/css" rel="stylesheet"/>
<script src="../clock/libraries/p5.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.dom.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.sound.js" type="text/javascript"></script>
<script src="../script.js" type ="text/javascript"></script>
<script src="../clock/sketch.js" type="text/javascript"></script>
<style type="text/css">
body {
min-width: 90%;
}
#defaultCanvas0{
display: inline-block;
float: left;
width: 30%;
}
#contentFrame{
display: inline-block;
width: 60%;
}
</style>
</head>
<body>
<div id='contentFrame'>
<h1> Oct 06, 2016 </h1>
<p><a href="./Smiling.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Smiling');"> "Good to see you smiling so much."</a></p>
<p><i>As Lily goes over the <a href="../3/Text.html" onmouseover="clockwise(-1);" onmouseout="clockOut();" onclick="parent.register('Text');">messages </a> in her phone while listening to the same song over and over again, she starts to count the rain drops on the window of the train as her <a href="../6/Rita.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Rita');">tears </a> begin to fall. </i></p>
</div>
</body>
</html>
<html>
<head>
<title> OBLIVION </title>
<link href="../css/style.css" type="text/css" rel="stylesheet"/>
<script src="../clock/libraries/p5.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.dom.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.sound.js" type="text/javascript"></script>
<script src="../script.js" type ="text/javascript"></script>
<script src="../clock/sketch.js" type="text/javascript"></script>
<style type="text/css">
body {
min-width: 90%;
}
#defaultCanvas0{
display: inline-block;
float: left;
width: 30%;
}
#contentFrame{
display: inline-block;
width: 60%;
}
</style>
</head>
<body>
<div id='contentFrame'>
<h1> Office </h1>
<p> Professor Krum: You should be an actress. </p>
<p>Lily: How do you mean?</p>
<p><i>Lily looked at him with awe.</i></p>
<p>Professor Krum: Sometimes I become an actor. I like to fool people into believing that Im from somewhere else when Im not, and they always believe me.</p>
<p>"What am I acting now?" Lily asked while taking a sip of the tea she had unwillingly become addicted to.</p>
<p> Professor Krum: You are acting like a student leaning against the desk drinking <a href="./8.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('8');">tea</a>. </p>
<p> Lily: Is that all? </p>
<p>Professor Krum: You tell me.</p>
<p><i>There were a million things Lily wanted to say, but she kept silent. She approached the chair he was sitting on slowly, and bent down to his eye level. She looked at him from the corner of her eyes and whispered.</i></p>
<p> Lily: Tell me professor if 20 years from now, we were both actors in someone elses <a href="./Igor.html" onmouseover="clockwise(-1);" onmouseout="clockOut();" onclick="parent.register('Igor');">story</a>, would we be together? </p>
</div>
</body>
</html>
<html>
<head>
<title> OBLIVION </title>
<link href="../css/style.css" type="text/css" rel="stylesheet"/>
<script src="../clock/libraries/p5.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.dom.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.sound.js" type="text/javascript"></script>
<script src="../script.js" type ="text/javascript"></script>
<script src="../clock/sketch.js" type="text/javascript"></script>
<style type="text/css">
body {
min-width: 90%;
}
#defaultCanvas0{
display: inline-block;
float: left;
width: 30%;
}
#contentFrame{
display: inline-block;
width: 60%;
}
</style>
</head>
<body>
<div id='contentFrame'>
<h1> Ping-Pong </h1>
<p> Everything started at the <a href="./Oct4.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Oct4');">Ping Pong</a> table. You can walk around the room and sit wherever you like, but the ping-pong table will stare at you until you give in and dive back in time to that <a href="../3/Sep23.html" onmouseover="clockwise(-1);" onmouseout="clockOut();" onclick="parent.register('Sep23');">night</a>. That was the only night he played. He knew Lily was sitting there watching, and Lily knew she couldnt break free from gazing at him. The lounge was filled with laughter and the noise from students cheering on the game, but there was a special kind of silence present. The kind that was only between Lily and the beautiful <a href="../6/Sad.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Sad');">sad</a> slender figure playing in front of her.</p>
</div>
</body>
</html>
<html>
<head>
<title> OBLIVION </title>
<link href="../css/style.css" type="text/css" rel="stylesheet"/>
<script src="../clock/libraries/p5.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.dom.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.sound.js" type="text/javascript"></script>
<script src="../script.js" type ="text/javascript"></script>
<script src="../clock/sketch.js" type="text/javascript"></script>
<style type="text/css">
body {
min-width: 90%;
}
#defaultCanvas0{
display: inline-block;
float: left;
width: 30%;
}
#contentFrame{
display: inline-block;
width: 60%;
}
</style>
</head>
<body>
<div id='contentFrame'>
<h1> Place </h1>
<p> You know that feeling when you dive deep into a swimming pool and your ears start to sting and your chest feels like is going to collapse inwards from all the pressure? You know that feeling when you fantasize about a loved one dying and when the fantasy gets too real you shake your head to get rid of the thought of ever having to deal with such a thing?</p>
<p>Imagine the worst physical pain you have ever been put through. You were perhaps scared. So scared that you thought you were gonna die, and you were not even embarrassed of <a href="../2/Sep21.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Sep21');">crying </a> about it. Have you ever been so intoxicated that you were afraid you would never go back to being you? That feeling of complete disconnect with everything around you. Have you ever tried running up the stairs of a 6 floor building? By the time you make it to the 6th floor you can no longer manage to get your heartbeat and breathing in sync. Your <a href="./Oct5.html" onmouseover="clockwise(-1);" onmouseout="clockOut();" onclick="parent.register('Oct5');">heart beats </a> so fast from inside of your ears that it could pop at any moment.</p>
<p>If all of these feelings could be turned into walls, they would eventually make up a place. A place worst than death. A place Lily feared the most.</p>
</div>
</body>
</html>
<html>
<head>
<title> OBLIVION </title>
<link href="../css/style.css" type="text/css" rel="stylesheet"/>
<script src="../clock/libraries/p5.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.dom.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.sound.js" type="text/javascript"></script>
<script src="../script.js" type ="text/javascript"></script>
<script src="../clock/sketch.js" type="text/javascript"></script>
<style type="text/css">
body {
min-width: 90%;
}
#defaultCanvas0{
display: inline-block;
float: left;
width: 30%;
}
#contentFrame{
display: inline-block;
width: 60%;
}
</style>
</head>
<body>
<div id='contentFrame'>
<h1> Professor Krum </h1>
<p>He was slender and tall, cheeky and charming. But below the surface remained a caged <a href="../6/Sad.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Sad');"> sad </a> soul. Lily recognized his <a href="../6/Rita.html" onmouseover="clockwise(-1);" onmouseout="clockOut();" onclick="parent.register('Rita');">fears</a>, and he recognized lilys. He was forbidden, and so was she.</p>
</div>
</body>
</html>
<html>
<head>
<title> OBLIVION </title>
<link href="../css/style.css" type="text/css" rel="stylesheet"/>
<style type="text/css">
h1 {
font-family: 'Open Sans', sans-serif;
font-size: 20;
color: black;
font-weight: bolder;
text-decoration: none;
text-decoration: line-through;
}
h2 {
font-family: 'Open Sans', sans-serif;
font-size: 16;
color: black;
line-height: 0.8em;
font-weight:normal;
}
p {
font-family: 'Open Sans', sans-serif;
font-size: 14;
font-weight: normal;
color: red;
line-height: 2em;
}
</style>
</head>
<body>
<h1> How far did you read? </h1>
<h2> Oblivion consists of 22 pages. </h2>
<p id="result"> </p>
<script type="text/javascript">
document.getElementById("result").innerHTML="You have completed " +parent.checkResults()+" pages.";
</script>
</body>
</html>
<html>
<head>
<title> OBLIVION </title>
<link href="../css/style.css" type="text/css" rel="stylesheet"/>
<script src="../clock/libraries/p5.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.dom.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.sound.js" type="text/javascript"></script>
<script src="../script.js" type ="text/javascript"></script>
<script src="../clock/sketch.js" type="text/javascript"></script>
<style type="text/css">
body {
min-width: 90%;
}
#defaultCanvas0{
display: inline-block;
float: left;
width: 30%;
}
#contentFrame{
display: inline-block;
width: 60%;
}
</style>
</head>
<body>
<div id='contentFrame'>
<h1> Rita </h1>
<p>Rita: How do you feel right now? </p>
<p>Lily: I..</p>
<p>Lily: I dont know what Im feeling.</p>
<p>Rita: You need a rest.</p>
<p>Lily: Yeah I do need to take a nap.</p>
<p>Rita: Sure, but that is not the kind of rest I meant.</p>
<p><i>Lily looks up from her laptop and turns to face Rita. Rita had never looked so kind.</i></p>
<p>Lily: What kind of rest will help? </p>
<p>Rita: The kind that does not have him in it. </p>
<p><i> Suddenly, Lily felt ashamed and with tearful eyes looked down at her shoes.</i></p>
<p> Rita: You should have known better. </p>
<p> Lily: I know.. <i> while trying to control her sobbing. </i><p>
<p> Rita: What are you gonna do now? </p>
<p> Lily: I dont know. <p>
<p><i> After a second or two Lily looked up at Rita with a fragile voice she whispers, </i></p>
<p>Lily: I am so helplessly in love with <a href="../3/Professor.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Professor');">him </a>. </p>
<p><i> Rita just stares at Lily silently. At that moment she felt exactly what he felt for her. Lily was absolutely beautiful, even at her <a href="../7/Oct6.html" onmouseover="clockwise(-1);" onmouseout="clockOut();" onclick="parent.register('Oct6');">worst</a>. </i></p>
</div>
</body>
</html>
<html>
<head>
<title> OBLIVION </title>
<link href="../css/style.css" type="text/css" rel="stylesheet"/>
<script src="../clock/libraries/p5.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.dom.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.sound.js" type="text/javascript"></script>
<script src="../script.js" type ="text/javascript"></script>
<script src="../clock/sketch.js" type="text/javascript"></script>
<style type="text/css">
body {
min-width: 90%;
}
#defaultCanvas0{
display: inline-block;
float: left;
width: 30%;
}
#contentFrame{
display: inline-block;
width: 60%;
}
</style>
</head>
<body>
<div id='contentFrame'>
<h1> Sad </h1>
<p>They were people whose lives were slow, who did not see themselves growing old, or falling sick, or dying, but who disappeared little by little in their own time, turning into <a href="../1/Lily.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Lily');">memories</a>, mists from other days, until they were absorbed into oblivion.</p>
</div>
</body>
</html>
var history = ["false", "false", "false", "false", "false", "false", "false", "false", "false", "false", "false", "false", "false", "false", "false", "false", "false", "false", "false", "false", "false", "false", "false"];
function pageToIndex(_page){
switch(_page){
case "Ariana":
return 0;
case "Lily":
return 1;
case "Sep14":
return 2;
case "Email":
return 3;
case "Sep21":
return 4;
case "Professor":
return 5;
case "Sep23":
return 6;
case "Text":
return 7;
case "8":
return 8;
case "Dennis":
return 9;
case "Igor":
return 10;
case "Office":
return 11;
case "Sep26":
return 12;
case "Henry":
return 13;
case "Oct4":
return 14;
case "Pingpong":
return 15;
case "Oct5":
return 16;
case "Place":
return 17;
case "Rita":
return 18;
case "Sad":
return 19;
case "Oct6":
return 20;
case "Smiling":
return 21;
}
}
function checkResults(){
var count = 0;
for (var i = 0; i < history.length; i++) {
if (history[i]==true){
count++;
}
}
return count;
}
function register(page){
history[pageToIndex(page)]=true;
checkResults();
}
function countdownTimer(){
function getTimeRemaining(endtime) {
// document.getElementById("currenti").innerHTML = document.getElementById('storyframe').src;
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
if (minutes==0 && seconds==0){
document.getElementById('storyframe').src = "result/result.html";
}
return {
'total': t
, 'minutes': minutes
, 'seconds': seconds
}
};
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = new Date(Date.parse(new Date()) + 15 * 60 * 1000);
initializeClock('clockdiv', deadline);
}
<html>
<head>
<title> OBLIVION </title>
<link href="../css/style.css" type="text/css" rel="stylesheet"/>
<script src="../clock/libraries/p5.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.dom.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.sound.js" type="text/javascript"></script>
<script src="../script.js" type ="text/javascript"></script>
<script src="../clock/sketch.js" type="text/javascript"></script>
<style type="text/css">
body {
min-width: 90%;
}
#defaultCanvas0{
display: inline-block;
float: left;
width: 30%;
}
#contentFrame{
display: inline-block;
width: 60%;
}
</style>
</head>
<body>
<div id='contentFrame'>
<h1> Sep 14, 2016 </h1>
<p> <a href="./Lily.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Lily');"> Lily </a> : I just got his email, he answered every question.</p>
<p> <a href="./Ariana.html" onmouseover="clockwise(-1);" onmouseout="clockOut();" onclick="parent.register('Ariana');"> Ariana </a> : <i> Giggles. </i> He is so hot. </p>
<p> Lily stays silent. </p>
<p> Ariana: Dont you think he is hot? </p>
<p> Lily: er.. mmm He is very smart, and well friendly. </p>
<p> Ariana: Smart and friendly??? You mean to say, he is ridiculously hot. </p>
</div>
</body>
</html>
<html>
<head>
<title> OBLIVION </title>
<link href="../css/style.css" type="text/css" rel="stylesheet"/>
<script src="../clock/libraries/p5.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.dom.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.sound.js" type="text/javascript"></script>
<script src="../script.js" type ="text/javascript"></script>
<script src="../clock/sketch.js" type="text/javascript"></script>
<style type="text/css">
body {
min-width: 90%;
}
#defaultCanvas0{
display: inline-block;
float: left;
width: 30%;
}
#contentFrame{
display: inline-block;
width: 60%;
}
</style>
</head>
<body>
<div id='contentFrame'>
<h1> Sep 21, 2016 </h1>
<p> The sound of <a href="./Email.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Email');"> an email </a> notification wakes up Lily. She had cried herself to <a href="../5/Henry.html" onmouseover="clockwise(-1);" onmouseout="clockOut();" onclick="parent.register('Henry');">sleep</a> and her pillow was still wet from her tears.</p>
</div>
</body>
</html>
<html>
<head>
<title> OBLIVION </title>
<link href="../css/style.css" type="text/css" rel="stylesheet"/>
<script src="../clock/libraries/p5.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.dom.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.sound.js" type="text/javascript"></script>
<script src="../script.js" type ="text/javascript"></script>
<script src="../clock/sketch.js" type="text/javascript"></script>
<style type="text/css">
body {
min-width: 90%;
}
#defaultCanvas0{
display: inline-block;
float: left;
width: 30%;
}
#contentFrame{
display: inline-block;
width: 60%;
}
</style>
</head>
<body>
<div id='contentFrame'>
<h1> Sep 23, 2016 </h1>
<p> <i> Lily enters the lounge, and sees Professor Krum staring blankly at the wall. </i></p>
<p> Lily: I just saw your <a href="./Text.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Text');"> text </a>. </p>
<p><a href="./Professor.html" onmouseover="clockwise(-1);" onmouseout="clockOut();" onclick="parent.register('Professor');"> Professor Krum </a>: Good, crucial piece of information I forgot to tell you before.</p>
<p><i> Professor Krum walks towards Lily and stops in front of her. Close enough for her to see her own reflection in his blue eyes. Lily looks down at her shoes not knowing what to do with herself.</i></p>
<p> Lily: Arent you forgetting something?</p>
<p> Professor Krum: er? Yes you are right. I forgot to put the kettle on and make tea. </p>
<p> Lily: You had asked to see me. </p>
<p> Professor Krum: Now that I have seen you, would like a cup of tea? </p>
</div>
</body>
</html>
<html>
<head>
<title> OBLIVION </title>
<link href="../css/style.css" type="text/css" rel="stylesheet"/>
<script src="../clock/libraries/p5.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.dom.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.sound.js" type="text/javascript"></script>
<script src="../script.js" type ="text/javascript"></script>
<script src="../clock/sketch.js" type="text/javascript"></script>
<style type="text/css">
body {
min-width: 90%;
}
#defaultCanvas0{
display: inline-block;
float: left;
width: 30%;
}
#contentFrame{
display: inline-block;
width: 60%;
}
</style>
</head>
<body>
<div id='contentFrame'>
<h1> Sep 26, 2016 </h1>
<p> Lily:I am off to work now.</p>
<p> <a href="Dennis.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Dennis');"> Dennis </a> and Ariana both shouted: bye loser </p>
<p><i>As Lily walks out the lounge Igor approaches her.</i></p>
<p><a href="Igor.html" onmouseover="clockwise(-1);" onmouseout="clockOut();" onclick="parent.register('Igor');"> Igor </a>: Off to work?</p>
<p>Lily: er.. mmm yeah. </p>
<p>Igor: What time do you finish?</p>
<p>Lily: At <a href="8.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('8');"> 8:00 </a>.</p>
<p>Igor: I will be around till you finish. Wanna grab pizza after?</p>
<p>Lily: er.. mm I have to ..</p>
<p>Professor Krum: Lily I need to speak with you. Are you on your way to work? Can you please meet me at my <a href="Office.html" onmouseover="clockwise(-1);" onmouseout="clockOut();" onclick="parent.register('Office');"> office </a> after?</p>
<p>Lily: er.. mm Yes, ok</p>
<p><i>Professor Krum gives Igor an intimidating look while nodding his head in a form of hello, and walks away.</i></p>
<p>Igor: What was that all about?</p>
<p>Lily: err. Our group is having trouble. I think he wants to speak in regards to the project. Mmm Im gonna be late. Maybe pizza another time? Bye</p>
</div>
</body>
</html>
var _clockwise = -1;
var posX, posY;
var bg;
var selectClock = 0;
var NUMSINES = 1; // how many of these things can we do at once?
var sines = new Array(NUMSINES); // an array to hold all the current angles
var rad; // an initial radius value for the central sine
var i; // a counter variable
// play with these to get a sense of what's going on:
var fund = 0.005; // the speed of the central sine
var ratio = 2; // what multiplier for speed is each additional sine?
var alpha = 50; // how opaque is the tracing system
var trace = false; // are we tracing?
var clockWays = [1,1,1];
var clockPositions = [0,0,0];
function setup() {
createCanvas(300,900);
posX1 = 100;
posY1 = 100;
posX2 = 100;
posY2 = 270;
posX3 = 450;
posY3 = 300;
rad = 100; // compute radius for central circle
background(255); // clear the screen
for (var i = 0; i < sines.length; i++) {
sines[i] = PI; // start EVERYBODY facing NORTH
}
clockwiseRandom();
}
var rolledover = false;
var secondclockmod = -1;
function clockOut(){
clockwiseRandom();
rolledover = false;
}
/*function mousePressed(){
if(rolledover){
clockOut();
}else{
clockwise();
}
}*/
function clockwise(direction) {
clockWays[0]= direction;
clockWays[1]= direction;
clockWays[2]= direction;
rolledover = true;
//currentPos = TWO_PI - currentPos;
_clockwise = 1;
}
function clockwiseTogether() {
var rw = RandomWay();
clockWays[0]= rw;
clockWays[1]= rw;
clockWays[2]= rw;
}
function clockwiseRandom() {
clockWays[0]= RandomWay();
clockWays[1]= RandomWay();
clockWays[2]= RandomWay();
}
function RandomWay(){
var rrr = int(random(2));
if(rrr==0){
return -1;
}else{
return 1;
}
}
function clock1() {
push();
strokeWeight(1);
fill(255, 255, 255);
ellipse(posX1, posY1, 130, 130);
fill(0, 0, 0);
ellipse(posX1, posY1, 10, 10);
translate(100, 100);
//small circle
rotate(radians(clockPositions[0]*2));
strokeWeight(2);
line(0, 0, 35, 0);
translate(-posX1, -posY1);
pop();
}
function clock2() {
push();
strokeWeight(1);
fill(255, 255, 255);
ellipse(posX2, posY2, 130, 130);
fill(0, 0, 0);
ellipse(posX2, posY2, 10, 10);
translate(posX2, posY2);
//large circle
rotate(radians(clockPositions[1]));
strokeWeight(2);
line(0, 0, 85, 0);
translate(-posX2, -posY2);
pop();
}
var framesC = 0;
var oldframe = 0;
var currentPos = 0;
function draw() {
if(mouseX != pmouseX || rolledover){
framesC = frameCount - oldframe;
oldframe = frameCount;
currentPos += framesC;
clockPositions[0]+= framesC*clockWays[0];
clockPositions[1]+= framesC*clockWays[1];
clockPositions[2]+= framesC*clockWays[2];
// fund = currentPos/100;
} else {
oldframe = frameCount;
}
thirdClock();
clock1();
clock2();
}
function thirdClock() {
if (!trace) {
background(255); // clear screen if showing geometry
stroke(0, 255); // black pen
noFill(); // don't fill
}
// MAIN ACTION
push(); // start a transformation matrix
translate(100, 440); // move to middle of screen
for (var i = 0; i < sines.length; i++) {
var erad = 0; // radius for small "point" within circle... this is the 'pen' when tracing
// setup for tracing
if (trace) {
stroke(0, 0, 255 * (float(i) / sines.length), alpha); // blue
fill(0, 0, 255, alpha / 2); // also, um, blue
erad = 5.0 * (1.0 - float(i) / sines.length); // pen width will be related to which sine
}
var radius = rad / (i + 1.5); // radius for circle itself
rotate(sines[i]); // rotate circle
if (!trace) ellipse(0, 0, radius * 2, radius * 2); // if we're simulating, draw the sine
push(); // go up one level
translate(0, radius); // move to sine edge
fill(0, 0, 0)
if (!trace) ellipse(0, 0, 10, 10); // draw a little circle
if (trace) ellipse(0, 0, erad, erad); // draw with erad if tracing
pop(); // go down one level
//translate(0, radius); // move into position for next sine
sines[i] = (clockPositions[2]/50) % TWO_PI; // update angle based on fundamental
}
pop(); // pop down final transformation
}
var NUMSINES = 5; // how many of these things can we do at once?
var sines = new Array(NUMSINES); // an array to hold all the current angles
var rad; // an initial radius value for the central sine
var i; // a counter variable
var fund = 0.005; // the speed of the central sine
var ratio = 1; // what multiplier for speed is each additional sine?
var alpha = 50; // how opaque is the tracing system
var trace = false; // are we tracing?
function setup() {
createCanvas(710, 400);
rad = height/3; // compute radius for central circle
background(255); // clear the screen
for (var i = 0; i<sines.length; i++) {
sines[i] = PI; // start EVERYBODY facing NORTH
}
}
function draw() {
if (!trace) {
background(255); // clear screen if showing geometry
stroke(0, 255); // black pen
noFill(); // don't fill
}
// MAIN ACTION
push(); // start a transformation matrix
translate(width/2, height/2); // move to middle of screen
for (var i = 0; i<sines.length; i++) {
var erad = 0; // radius for small "point" within circle... this is the 'pen' when tracing
// setup for tracing
if (trace) {
stroke(0, 0, 255*(float(i)/sines.length), alpha); // blue
fill(0, 0, 255, alpha/2); // also, um, blue
erad = 5.0*(1.0-float(i)/sines.length); // pen width will be related to which sine
}
var radius = rad/(i+1); // radius for circle itself
rotate(sines[i]); // rotate circle
if (!trace) ellipse(0, 0, radius*2, radius*2); // if we're simulating, draw the sine
push(); // go up one level
translate(0, radius); // move to sine edge
if (!trace) ellipse(0, 0, 5, 5); // draw a little circle
if (trace) ellipse(0, 0, erad, erad); // draw with erad if tracing
pop(); // go down one level
//translate(0, radius); // move into position for next sine
sines[i] = (sines[i]+(fund+(fund*i*ratio)))%TWO_PI; // update angle based on fundamental
}
pop(); // pop down final transformation
}
function keyReleased() {
if (key==' ') {
trace = !trace;
background(255);
}
}
<html>
<head>
<title> OBLIVION </title>
<link href="../css/style.css" type="text/css" rel="stylesheet"/>
<script src="../clock/libraries/p5.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.dom.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.sound.js" type="text/javascript"></script>
<script src="../script.js" type ="text/javascript"></script>
<script src="../clock/sketch.js" type="text/javascript"></script>
<style type="text/css">
body {
min-width: 90%;
}
#defaultCanvas0{
display: inline-block;
float: left;
width: 30%;
}
#contentFrame{
display: inline-block;
width: 60%;
}
</style>
</head>
<body>
<div id='contentFrame'>
<h1> "Good to see you smiling so much." </h1>
<p> K: so is that what you do when I’m not around?</p>
<p>L: what?! </p>
<p>K: sing and dance around the lounge?</p>
<p>L: how did you..?</p>
<p>K: well, it was good to see you smiling so much.</p>
<p>L: er.. thank you.</p>
<p>K: Lily</p>
<p>L: yes?</p>
<p>K: I cant see you anymore.</p>
<p>L: is that why you have been <a href="../6/Sad.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Sad');">distant</a> lately?</p>
<p>K: ..</p>
<p>L: I understand</p>
<p>K: You make me nervous. Im not confident of myself when Im around you.</p>
<p>L: I know</p>
<p>K: Tell me Lily, if 20 years from now, we were both actors in someone elses <a href="../4/Igor.html" onmouseover="clockwise(-1);" onmouseout="clockOut();" onclick="parent.register('Igor');">story</a>, would we be together?</p>
<p>L: Yes, we would</p>
</div>
</body>
</html>
body {
left: 0;
line-height: 200px;
margin: auto;
margin-top: 35px;
margin-bottom: 60px;
position: absolute;
left: 20%;
min-width: 350px;
max-width: 650px;
right: 20%;
font-family: 'Open Sans', sans-serif;
font-size: 16;
line-height: 1.4em;
text-align: left;
min-height: 1000px;
}
h1{
font-family: 'Open Sans', sans-serif;
font-size: 22;
color: black;
font-weight: bolder;
line-height: 2em;
text-align: left;
text-decoration: line-through;
}
a {
font-family: 'Open Sans', sans-serif;
font-size: 16;
color: darkred;
text-decoration: none;
text-align: left;
}
a:hover{
text-decoration:underline;
}
a:visited{
color: darkred;
}
p {
font-family: 'Open Sans', sans-serif;
line-height: 1.5em;
}
<html>
<head>
<title> OBLIVION </title>
<link href="../css/style.css" type="text/css" rel="stylesheet"/>
<script src="../clock/libraries/p5.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.dom.js" type="text/javascript"></script>
<script src="../clock/libraries/p5.sound.js" type="text/javascript"></script>
<script src="../script.js" type ="text/javascript"></script>
<script src="../clock/sketch.js" type="text/javascript"></script>
<style type="text/css">
body {
min-width: 90%;
}
#defaultCanvas0{
display: inline-block;
float: left;
width: 30%;
}
#contentFrame{
display: inline-block;
width: 60%;
}
</style>
</head>
<body>
<div id='contentFrame'>
<h1> Text </h1>
<p> K: I am sorry if I was a little too brutal in my feedback.</p>
<p>L: I enjoyed your honest feedback. I know it will help the project to go forward.</p>
<p> K: phew.. I am happy to talk more if you need it. </P>
<p>L: The project is going ok now. I think I am just stressed.</p>
<p> K: Where are you? </p>
<p> L: The library. </p>
<p> K: I need to speak with you in person. </p>
<p> K: Can you meet me at my <a href="../4/Office.html" onmouseover="clockwise(1);" onmouseout="clockOut();" onclick="parent.register('Office');"> office </a> ? </p>
<p> L: mm yes. When should I meet you? </p>
<p> K: NOW </P>
</div>
</body>
</html>
<html>
<head>
<title> OBLIVION </title>
<link href="../css/style.css" type="text/css" rel="stylesheet"/>
<script src="libraries/p5.js" type="text/javascript"></script>
<script src="libraries/p5.dom.js" type="text/javascript"></script>
<script src="libraries/p5.sound.js" type="text/javascript"></script>
<script src="sketch.js" type="text/javascript"></script>
<style type="text/css">
li {
font-family: 'Open Sans', sans-serif;
font-size: 14;
list-style: circle;
}
h1 {
font-family: 'Open Sans', sans-serif;
font-size: 20;
color: black;
font-weight: bolder;
text-decoration: none;
}
h2 {
font-family: 'Open Sans', sans-serif;
font-size: 16;
color: black;
line-height: 0.8em;
font-weight: bold;
}
h3 {
font-family: 'Open Sans', sans-serif;
font-size: 16;
font-weight: lighter;
color: black;
line-height: 0.3em;
}
a {
font-size: 20;
color: red;
text-decoration: none;
}
</style>
</head>
<body>
<h1 onclick="parent.countdownTimer()"> <a href="../1/Lily.html"> OBLIVION </a> </h1>
<h2> Creation and Computation </h2>
<h3> Project 02 </h3>
<li> Narration by Nana </li>
<li> Creation of the experience by Natasha and Nana </li>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.