/
index.html
318 lines (288 loc) · 21 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>The Dream State</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme-freelancer.css" />
<link rel="stylesheet" href="css/jqmath-0.4.3.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/fonts.min.css" />
<link rel="stylesheet" href="css/animate.min.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="icon" href="img/favicon.png">
</head>
<body id="page-top" class="index">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable_navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#page-top">The Dream State</a><img src="img/weather.png" alt="" id="cloud-head"/>
</div>
<div class="collapse navbar-collapse" id="collapsable_navbar">
<ul class="nav navbar-nav navbar-right">
<li class="hidden"><a href="#page-top"></a></li>
<li class="page-scroll"><a href="#section_what" class="nav-link">What</a></li>
<li class="page-scroll"><a href="#section_where" class="nav-link">Where</a></li>
<li class="page-scroll"><a href="#section_when" class="nav-link">When</a></li>
<li class="page-scroll"><a href="#section_how" class="nav-link">How</a></li>
</ul>
</div>
</div>
</nav>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-text">
<span class="name">The Dream State</span>
<span class="skills">Where, when, and how we dream.</span>
</div>
</div>
</div>
</div>
</header>
<section id="section_what">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>What</h2>
<hr class="star-primary" />
</div>
</div>
<div class="row">
<div class="col-lg-8 bg_disassembled wow fadeInDown">
<h3>Definition of a Dream:</h3>
<p>A series of thoughts, images, and sensations occurring in a person's mind during sleep.</p>
<h3>So...</h3>
<p>Dreaming is a cognitive experience that every person has had at some point in their life. However, it is perhaps the most misunderstood state of cognition that exists despite the extensive research that has been performed. Due to neuroscientific research, it is believed that dreaming occurs during REM (Rapid Eye Movement), the fourth stage in the sleep cycle. It is this sleep stage that is involved in the process of storing memories and stimulating the part of the brain that is responsible for learning. Therefore, dreams are formed when your brain is the most active. Now, let’s learn more about the different parts of the brain that are used in dream formation. </p>
</div>
<div class="col-lg-4 hidden-xs" style="vertical-align: middle; margin-top: 100px;">
<div><img src="img/bluebrain.jpg" class="img-responsive wow" alt="bluebrain"/></div>
</div>
</div>
<div class="row">
<div class="col-lg-12 bg_disassembled wow fadeInUp">
<h3>Brief History Lesson:</h3>
<br />
<div><img src="img/sigmund_freud.jpg" class="img-responsive wow" id="sigmundfreud"/></div>
<p>When understanding the nature of dreams, we first must go back to the early 1900s and understand <b>Sigmund Freud</b>, who is considered the father of psychoanalysis and <em>The Dream Theory</em>. Freud began as a well-known psychologist, then began to analyze dreams in order to better understand personality traits that relate to pathology. His belief was that every action and thought is driven by your subconscious at some level. Typically, we have a tendency to hold back our urges and impulses. However, people with pathological tendencies must release these urges in some way, and Freud believed that one way is through dreams. He felt that when the content of the subconscious is disturbing or harmful, the subconscious expresses itself in a <b>symbolic language</b> called dreaming.</p>
<br />
<p>While Freud's work is considered revolutionary and the beginning of dream analysis, it was not until 1953 that researchers began to conduct studies on people and when they dream. They noticed that when subjects were woken from sleep during the phase of sleep characterized by "rapid, jerky, and binocularly symmetrical eye movements" they recalled the most vivid and elaborate dreams. However, when subjects were awoken from non-REM sleep, there were less reports that were also less intense. From here, the <b>REM (Rapid Eye Movement)</b> state emerged, and has been associated with dreaming ever since.
</p>
</div>
</div>
</div>
</section>
<section id="section_where" class="success">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Where</h2>
<hr class="star-light" />
</div>
</div>
<div class="row">
<div class="col-lg-12 question wow bounceIn text-center page-scroll">
<p>Hover over the brain to see the different regions where dreams occur.</p>
<br />
<br />
<map name="map">
<area shape="poly" class="btn-info tooltips img-responsive wow" id="brainimage_blue" data-title="Ventromedial Area: Plays a part in emotional responses and decision making" data-placement="top" style="position:absolute; left:100px; top: 250px;" coords="294,206,179,226,108,301,21,235,47,90,216,10,334,9,285,1,275,126,336,16,273,121,307,39,288,16,284,22,270,114" >
<area shape="poly" class="btn-info tooltips img-responsive wow" id="brainimage_green" data-title="Inferior Parietal Lobes: Responsible for the perception of emotions in facial stimuli and interpretation of sensory information" data-placement="top" style="position:absolute; left:100px; top:250px;" coords="296,206,271,116,356,14,476,55,543,137,546,203">
<area shape="poly" class="btn-info tooltips img-responsive wow" id="brainimage_yellow" data-title="Temporal-limbic Area: Processes sensory input into meanings for visual memory retention, language comprehension and emotion association" data-placement="top" style="position:absolute; left:100px; top:250px;" coords="466,378,296,366,197,380,112,283,256,224,463,212">
<area shape="poly" class="btn-info tooltips img-responsive wow" id="brainimage_red" data-title="Occipito-temporal Area: Helps in identifying colors, movements and communication via writing" data-placement="top" style="position:absolute; left:100px; top:250px;" coords="472,378,445,252,470,213,570,196,590,335,561,383">
<area shape="poly" class="btn-info tooltips img-responsive wow" id="brainimage_pink" data-title="Medial-limbic Area: Critical in detecting odors, sensing fear and retaining declarative memories" data-placement="top" style="position:absolute; left:100px; top:250px;" coords="470,454,390,460,324,404,307,369,506,382,511,422" alt="pink">
<area shape="poly" class="btn-info tooltips img-responsive wow" id="brainimage_teal" data-title="Brain Stem (Pontine Region): Controls sensory roles, motor roles and eye movement (REM)" data-placement="top" style="position:absolute; left:100px; top:250px;" coords="384,510,371,456,323,420,302,366,267,377,353,510">
</map>
<div id="img1">
<img src="img/brainimage.png" usemap="#map" id="brainimage">
</div>
</div>
</div>
</div>
<div class="process">
<div class="bg_disassembled wow fadeInUp">
<h3>How dreams flow through the brain</h3>
<h4>1. Pontine Region of the Brain Stem</h4>
<p>A dream begins here. This part of the brain controls sensory roles in hearing, equilibrium,
and taste, as well as motor roles in eye movementsment, facial expressions, and the secretion of saliva and tears.</p>
<h4>2. Temporal Limbic Area</h4>
<p>It processes sensory input into meanings for visual memory retention, language comprehension,
and emotion association.</p>
<h4>3. Ventromedial Area</h4>
<p>This part of the brain plays a part in emotional responses and decision making.</p>
<h4>4. Medial Limbic Area</h4>
<p>This is the next part of the brain that becomes active in dream formation. It is responsible for detecting odors,
sensing fear, and retaining declarative memories. A declarative memory is a long-term memory composed of facts, figures, and names that a person has learned.</p>
<h4>5. Inferior Parietal Lobes</h4>
<p>They perceive emotions in facial stimuli and interpret sensory information, playing a huge role in how senses are incorporated into dreams.</p>
<h4>6. Occipito-Temporal Area</h4>
<p>The final part of the brain used in dream formation is the Occipito-Temporal area, which helps in identifying things such as colors, movements,
and written communication.</p>
</div>
</div>
</div>
</section>
<section id="section_when">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>When</h2>
<hr class="star-primary" />
</div3
</div>
<br />
<div class="col-lg-12" style="text-align: left;">
<div class="alert alert-info wow fadeInRight">
<h3>The Sleep Cycle</h3>
<p>There are four main stages of a person's sleep cycle: <em>Wake, Light, Deep and REM.</em></p>
<p>12 out of 13 dreams occur during the <b>REM</b> stage, although this is typically one of the shorter stages, with an average of 29.6 minutes total during a 7 hour sleep cycle. Adversely, the majority of time is spent in <b>Light</b> sleep (an average of 306.5 minutes or ~5.12 hours).</p>
<p>
<em>Note: This data is pulled from one person and will vary for each individual.</em>
</p>
<br />
<div class="container">
<div class="row">
<div class="col-sm-6" style="text-align: center;">
<canvas id="sleep_stages_pie" width="300" height="300" class="alert alert-info img-responsive wow fadeInRight" style="text-align: center; padding-top: 30px;" /></canvas>
</div>
<div class="col-sm-6" style="text-align: center;">
<canvas id="sleep_stages_radar" width="390" height="400" class="alert alert-info img-responsive wow fadeInRi3ht" style="text-align: center; padding-right:50px; padding-bottom: 30px; margin:0;"/></canvas>
</div>
</div>
</div>
</div>
</div>
<br />
<br />
<div class="row">
<div class="col-lg-12 wow slideInUp" style="text-align: left;">
<h3>
Interactive Timeline
</h3>
<p>
Hover over a cloud to view its respective location and duration in an average 7-hour period of sleep, as well as more information about that specific stage.
</p>
<br />
<br />
<img src="img/timeline.png" class="img-responsive wow" usemap="#timeline_map" id="timeline">
<map name="timeline_map">
<area shape="poly" class="btn-info tooltips" id="cloud1" data-title="LIGHT (~74%): In this stage, one drifts in and out of sleep and can be awakened easily. The eyes move slowly and muscle activity slows. Many people experience a falling sensation then sudden muscle contractions." data-placement="top" style="position:absolute; left:50px; top:160px;" coords="24,0,8,18,4,34,11,43,58,44,66,34,63,21" />
<area shape="poly" class="btn-info tooltips" id="cloud2" data-title="DEEP (~16%): During deep sleep, slow brain waves called delta waves are interspersed with smaller, faster waves. There is no eye movement or muscle activity, and it is difficult to wake someone. This is when most experience bedwetting, sleepwalking or night terrors." data-placement="bottom" style="position:absolute; left:860px; top:420px;" coords="835,202,818,221,812,234,821,246,867,246,876,235,863,213" />
<area shape="poly" class="btn-info tooltips" id="cloud3" data-title="REM (~0.07%): In the REM stage, breathing becomes more rapid and irregular, eyes jerk and limbs are temporarily paralyzed. Brain waves increase to similar levels when a person is awake. Also, heart rate increases, blood pressure rises and the body loses some ability to regulate temperature. This is the time when most dreams occur and if awoken during REM sleep, a person can remember the dreams." data-placement="top" style="position:absolute; left:1010px; top:160px;" coords="993,0,978,17,972,31,982,43,1027,43,1034,35,1022,8" />
<area shape="poly" class="btn-info tooltips" id="cloud4" data-title="WAKE (~0.03%): In the wake stage, eyes are open, one is responsive to external stimuli and can hold an intelligible conversation." data-placement="bottom" style="position:absolute; left:1100px; top:420px;" coords="1078,202,1062,220,1057,235,1066,245,1112,246,1121,234,1105,212" />
</map>
</div>
</div>
</div>
</section>
<section id="section_how" class="success">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>How</h2>
<hr class="star-light" />
</div>
</div>
<div class="row">
<div class="col-lg-12 wow bounceIn">
<p>
While it is not a proven fact, studies indicate that simple dream imagery is formed in the brain stem and is then sent to the sensory cortex, which translates the dream into a longer, more complex story. We do know, however, that dreams are created naturally by the subconscious mind. Your subconscious creates dreams from <b>Schemata</b> you have built up from your experience and understanding of the world. A Schema is an abstract mental structure, like a set of rules, which organizes our knowledge and understanding of the world. It is your expectations of what things are and what things should be.
</p>
<br />
<p>
This process begins with a single idea or image coming to mind and is typically linked to whatever thought was in your mind as you were falling asleep. In this example, let’s say this image was a <b>pencil</b>.
</p>
<br />
<div><img src="img/girldreaming.png" class="img-responsive wow slideInRight" id="girldreaming"/></div>
<p>
Now your mind will begin to build a dream using the set of schemata that you unconsciously associate with a pencil:
</p>
<p>
<ol>
<li>When you think of a pencil your schema says you most commonly use a pencil when sitting at a desk, so this detail is added into the dream.</li>
<li>When you think of sitting at a desk you think of being at school.</li>
<li>When you think of being at school, you think of being in an exam and feeling anxious.</li>
</ol>
</p>
<br />
<p>
Using the schemata above and starting from that one idea of a pencil, your mind has created a dream (or a nightmare), where you are back in school, feeling anxious and possibly running around the building trying to escape.
<br />
<br />
This is how all dreams are created and how they evolve and progress. Your mind simply adds in the content of rich visual images and a storyline to your internal expectations of what should occur.
</p>
</div>
</div>
</div> -->
</section>
<footer class="text-center">
<div class="footer-above">
<div class="container">
<div class="row">
<div class="footer-col col-md-4 wow slideInUp">
</div>
<div class="footer-col col-md-4 wow slideInUp">
<h3>Write-Up</h3>
<p>Our research paper of our process and findings can be found <a href="finalresearchpaper.pdf" target="_blank">here</a>.</p>
</div>
<div class="footer-col col-md-4 wow slideInUp">
</div>
</div>
</div>
</div>
<div class="footer-below">
<div class="container">
<div class="row">
<div class="col-lg-12 page-scroll">
Morgan Evans and Jessie Peterson (The Dream Team) | INFO 474 Final Project
</div>
</div>
</div>
</div>
</footer>
<div class="scroll-top page-scroll visible-xs visible-sm">
<a class="btn btn-primary" href="#page-top">
<i class="fa fa-chevron-up"></i>
</a>
</div>
<div class="portfolio-modal modal fade" id="modal_tmpl" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2></h2>
<hr class="star-primary" />
<img src="img/2x2x2.jpg" class="img-responsive img-centered" alt="2x2x2 cube" />
<p></p>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jqmath-etc-0.4.3.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/main.js"></script>
<script src="js/Chart.js-master/Chart.js"></script>
</body>
</html>