Skip to content

Commit

Permalink
Updated documentation website
Browse files Browse the repository at this point in the history
  • Loading branch information
@alicechai16
alicechai16 committed May 27, 2024
1 parent 97c7013 commit 6469cf8
Show file tree
Hide file tree
Showing 3 changed files with 287 additions and 74 deletions.
155 changes: 108 additions & 47 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>Project Title</title>
<title>Lumen Project Description</title>
<link rel="stylesheet" href="style.css">
<script type="importmap">
{
"imports": {
Expand All @@ -11,54 +12,114 @@
}
}
</script>
<style>
* {
font-family: Arial, Helvetica, sans-serif;
}
</head>
<body>
<div id="nav">
<a class="logo" href="index.html">Lumen</a>
<div id="nav-list">
<a class="list-item" href="index.html">Overview</a>
<a class="list-item" href="paper.html">Paper</a>
<a class="list-item" href="https://xr.alicelab.world/">Project</a>
</div>
</div>

#overlay {
position: absolute;
bottom: 0px;
left: 0px;
z-index: 10;
width: 100%;
<!-- IMG SLIDESHOW -->
<div class="slideshow-container">
<div class="slides fade">
<img src="/img/IMG_1275.png" />
</div>

white-space: pre;
color: white;
background-color: rgba(0, 0, 0, 0.5);
/*font-size: 1.4rem;*/
text-rendering: optimizeLegibility;
font-family: monospace;
}
<div class="slides fade">
<img src="/img/IMG_1276.png" />
</div>

</style>
</head>
<body>
<h1 style="text-align: center;">Project Title</h1>
<p>[img]</p>

<h2>Project Description</h2>
<p>This project comprises a hypothetical world below the “sea”.
The world is as dark as the bottom of a deep sea with some ambient lighting just enough to observe the world closest to you.
In this world, there are agents (sea life agents) of varying sizes and or types.
Users can enter this world through a VR head-mounted headset or a desktop or mobile device such as a phone or tablet.
Multiple users across different platforms can access this world at the same time.
Users in this world take up the form of a light-emitting creature.
The user’s avatar across platforms including VR is a light source.
Users can throw light bulbs from their controller or pointer.
Users in VR can walk around, crouch, and jump in the world for navigation
Users on other platforms can navigate using “flyControls” and joysticks or WASD.
When users launch a glowing ball within the space, the ball drops slowly to the ground.
Users can release the control to retract the ball or the ball can retract automatically after a moment.
The agents (sealife agents) are constantly seeking out light sources.
Agents closer to the user will curiously flock around the user as a light source.
When the glowing balls are launched into the space, the agents closest to the ball actively seek out the light source as it falls to the ground.
As the ball falls to the ground, it releases a wave that makes the agents closest to it behave erratically hunting each other, and reducing in number.
When there are no lights in the space, the agents reproduce and grow in number until a certain maximum.
All interactions and reactions in this world will produce different feedback from vibrations to sound. (reproduction, death, wave, shock, launching and retracting of light balls, ambiance, navigation, etc)
</p>
<hr/>
<a href="paper.html">View paper</a>
<a href="https://xr.alicelab.world/">View project</a>
<div class="slides fade">
<img src="/img/IMG_1277.png" />
</div>

<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- pagination -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<!-- slideshow script -->
<script>
let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
let i;
let slides = document.getElementsByClassName("slides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
</script>

<!-- If we want a header image with the project title overlayed on top instead of a slideshow of images, use this:
<div id="header">
<h1 style="text-align: center;">Project Title</h1>
</div>
-->

<div id="main">
<h1 style="font-size: 64px; text-align: center;">Lumen</h1>
<h2>Project Description</h2>
<p><span style="font-style: italic;">Lumen</span> is a hypothetical world below the “sea”.
The world is as dark as the bottom of a deep sea with some ambient lighting just enough to observe the world
closest to you.
In this world, there are agents (sea life agents) of varying sizes and or types.
Users can enter this world through a VR head-mounted headset or a desktop or mobile device such as a phone
or tablet.
Multiple users across different platforms can access this world at the same time.
Users in this world take up the form of a light-emitting creature.
The user’s avatar across platforms including VR is a light source.
Users can throw light bulbs from their controller or pointer.
Users in VR can walk around, crouch, and jump in the world for navigation
Users on other platforms can navigate using “flyControls” and joysticks or WASD.
When users launch a glowing ball within the space, the ball drops slowly to the ground.
Users can release the control to retract the ball or the ball can retract automatically after a moment.
The agents (sealife agents) are constantly seeking out light sources.
Agents closer to the user will curiously flock around the user as a light source.
When the glowing balls are launched into the space, the agents closest to the ball actively seek out the
light source as it falls to the ground.
As the ball falls to the ground, it releases a wave that makes the agents closest to it behave erratically
hunting each other, and reducing in number.
When there are no lights in the space, the agents reproduce and grow in number until a certain maximum.
All interactions and reactions in this world will produce different feedback from vibrations to sound.
(reproduction, death, wave, shock, launching and retracting of light balls, ambiance, navigation, etc)
</p>

<h3>Avatars</h3>
<p></p>

<h3>Agents</h3>
<p></p>

<h3>Sound</h3>
<p></p>

</div>
</body>
</html>
71 changes: 44 additions & 27 deletions paper.html
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en">
<head>
<meta charset="utf-8">
<title>Lumen Final Paper</title>
<link rel="stylesheet" href="style.css">
</head>


<body>
<h1>Project Title</h1>
<p>Add your names here.</p>
<p>Prepared for York University course DIGM5520, 2024-05-31.</p>
<!-- header -->
<div id="nav">
<a class="logo" href="index.html">Lumen</a>
<div id="nav-list">
<a class="list-item" href="index.html">Overview</a>
<a class="list-item" href="report.html">Paper</a>
<a class="list-item" href="https://xr.alicelab.world/">Project</a>
</div>
</div>

<h1>Project Title</h1>
<p>Add your names here.</p>
<p>Prepared for York University course DIGM5520, 2024-05-31.</p>

<h2>Contents</h2>
<p>Table of contents</p>
<h2>Contents</h2>
<p>Table of contents</p>

<h2>Overview</h2>
<p>Project desciption</p>
<h2>Overview</h2>
<p>Project desciption</p>

<h2>Related Work</h2>
<p>Related work</p>
<h2>Related Work</h2>
<p>Related work</p>

<h2>Development</h2>
<h3>Sound Synthesis</h3>
<p></p>
<h2>Development</h2>
<h3>Sound Synthesis</h3>
<p></p>

<h3>Agent Design and Interaction</h3>
<p></p>
<h3>Agent Design and Interaction</h3>
<p></p>

<h3>Player Avatar Design, Interaction, and Navigation</h3>
<p></p>
<h3>Player Avatar Design, Interaction, and Navigation</h3>
<p></p>

<h3>Databasing and User Persistence</h3>
<p></p>
<h3>Databasing and User Persistence</h3>
<p></p>

<h3>Challenges and Solutions</h3>
<p></p>
<h3>Challenges and Solutions</h3>
<p></p>

<h2>Results</h2>
<p></p>
<h2>Results</h2>
<p></p>

<h2>Future Work</h2>
<p></p>
<h2>Future Work</h2>
<p></p>

<h2>References</h2>
<h2>References</h2>
</body>
</html>
</html>
135 changes: 135 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
* {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

#main {
margin: 4% 6%;
}

p {
font-size: 16px;
line-height: 1.25em;
}

a {
color: #e31837;
}

#nav {
display: flex;
flex-direction: row;
align-items: center;
padding: 1em 0.5em;
}

#nav > .logo {
color: red;
font-size: 24px;
text-decoration: none;
line-height: 0;
flex: 85%;
}

#nav-list {
display: flex;
flex: 15%;
flex-direction: row;
align-items: center;
}

.list-item {
width: 4.5em;
margin: 2px;
text-align: center;
text-decoration: none;
}

.list-item:hover {
text-decoration: underline;
}

/* If we want a header image with the project title overlayed on top instead of a slideshow of images */
/* #header {
height: 500px;
background: url("/img/IMG_1281.png") #eee center;
background-size: cover;
position: relative;
text-align: center;
} */

/* Centered text */
/* #header > h1 {
color: white;
font-size: 72px;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
} */

/* SLIDESHOW */
/* Slideshow container */
.slideshow-container {
width: 100%;
position: relative;
}

.slides > img {
width: 100%;
height: 560px;
object-fit: cover;
}

/* Controls */
/* Next & previous buttons */
.prev, .next {
color: white;
font-weight: bold;
font-size: 18px;
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}

/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background: rgba(0, 0, 0, 0.8);
}

/* Pagination */
.dot {
height: 15px;
width: 15px;
background: #bbb;
border-radius: 60px;
margin: 0 2px;
display: inline-block;
transition: background-color 0.6s ease;
}

.active, .dot:hover {
background: #717171;
}

/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}

@keyframes fade {
from {opacity: 0.4;}
to {opacity: 1;}
}

0 comments on commit 6469cf8

Please sign in to comment.