-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
week_3_presentation.html
130 lines (103 loc) · 5.88 KB
/
week_3_presentation.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>TDDE39 Week 3 | Spatial interaction with physical-digital objects</title>
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/black.css">
<!-- Theme used for syntax highlighted code -->
<link rel="stylesheet" href="plugin/highlight/monokai.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<style type="text/css">
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
word-wrap: normal;
-webkit-hyphens: manual;
-moz-hyphens: manual;
hyphens: manual;
}
</style>
<section>
<h3 style="text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue">Spatial interaction <br> with physical-digital objects</h3>
</section>
<section>
<p style="text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue">Calm technology</p>
<img class="r-stretch" src="Visuals/livewire.gif">
<span class="reference">Livewire (1995) by Natalie Jeremijenko</span>
</section>
<section>
<p style="text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue">Center and periphery</p>
<img class="r-stretch" src="Visuals/bakker.png">
<span class="reference">The interaction-attention continuum by Bakker and Niemantsverdriet</span>
</section>
<section>
<p style="text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue">Responsive lighting</p>
<img class="r-stretch" src="Visuals/bakker_light.png">
<span class="reference">Interactions with sLight by Bakker and Niemantsverdriet</span>
</section>
<section>
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Fun project that I made for my campus office - a 3D printed moon that glows red when the International Space Station is overhead based on my location (Berkeley) or blue when not. Uses live ISS satellite data from NASA to be accurate <a href="https://twitter.com/hashtag/Coding?src=hash&ref_src=twsrc%5Etfw">#Coding</a> <a href="https://twitter.com/hashtag/digitalfab?src=hash&ref_src=twsrc%5Etfw">#digitalfab</a> <a href="https://twitter.com/hashtag/forFun?src=hash&ref_src=twsrc%5Etfw">#forFun</a> <a href="https://twitter.com/hashtag/iss?src=hash&ref_src=twsrc%5Etfw">#iss</a> <a href="https://t.co/NQ9KqoIXyI">pic.twitter.com/NQ9KqoIXyI</a></p>— Eric Paulos (@epaulos) <a href="https://twitter.com/epaulos/status/1487312322318139392?ref_src=twsrc%5Etfw">January 29, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</section>
<section>
<img class="r-stretch" src="Visuals/ambient_orb.webp">
<span class="reference">Ambient Orb, Image: Craig Shames</span>
<aside class="notes">
The Ambient Orb by Ambient Devices in 2002. This object can be connected to a data source (e.g., Stock market) and communicate change in the data through color. For example, when the stock prices are going up, the color turns to green, and when the prices are going down the orb's color changes to red. The idea behind the design is to enable people to have situational awareness about the data they are interested in with just a glance. The orb is customizable which means that users can connect it to different data sources (e.g., temperature, weather, sea levels etc.).
References: http://www.actforlibraries.org/how-does-the-ambient-orb-device-work/, https://www.nytimes.com/2002/12/15/magazine/the-year-in-ideas-news-that-glows.html
</aside>
</section>
<section>
<iframe width="560" height="315" src="https://www.youtube.com/embed/WO939s7FARQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<span class="reference">ambientROOM by Tangible Media Group</span>
<aside class="notes">
</aside>
</section>
<section>
<iframe width="560" height="315" src="https://www.youtube.com/embed/hP36xoPXDnM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<span class="reference">LINES by Anders Lind</span>
<aside class="notes">
</aside>
</section>
<section>
<iframe src="https://player.vimeo.com/video/86994036?h=71eee64fd5&title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
<span class="reference">Keymoment by Laschke and Hassenzahl</span>
<aside class="notes">
</aside>
</section>
<section>
<iframe src="https://player.vimeo.com/video/258304082?h=1166f32dc4" width="640" height="272" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
<span class="reference">Surface X by Picaroon</span>
<aside class="notes">
</aside>
</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script>
// More info about initialization & config:
// - https://revealjs.com/initialization/
// - https://revealjs.com/config/
Reveal.initialize({
hash: true,
// Display presentation control arrows
controls: false,
// Learn about plugins: https://revealjs.com/plugins/
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
});
// Reveal.configure({ showNotes: 'separate-page' });
// Reveal.configure({ showNotes: 'true' });
</script>
</body>
</html>