-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsol.html
More file actions
181 lines (139 loc) · 8.58 KB
/
sol.html
File metadata and controls
181 lines (139 loc) · 8.58 KB
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine -->
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta name="robots" content="index, follow"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- Use title if it's in the page YAML frontmatter -->
<title>SYNTOP</title>
<link rel="shortcut icon" type="image/png" href="image/favicon.png">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="sha384-UQiGfs9ICog+LwheBSRCt1o5cbyKIHbwjWscjemyBMT9YCUMZffs6UqUTd0hObXD" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-min.css">
<!--<link href="https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700" rel="stylesheet"> -->
<link href="stylesheets/normalize.css" rel="stylesheet" /><link href="stylesheets/all.css" rel="stylesheet" />
<script src="javascripts/jquery-2.1.3.min.js"></script><script src="javascripts/modernizr.js"></script><script src="javascripts/respond.min.js"></script><script src="javascripts/jquery.scrollify.min.js"></script><script src="javascripts/lang.js"></script>
<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link rel="apple-touch-icon" sizes="57x57" href="./images/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="./images/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="./images/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="./images/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="./images/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="./images/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="./images/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="./images/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./images/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="./images/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="./images/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicons/favicon-16x16.png">
<link rel="manifest" href="./images/favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="./images/favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<meta name="keywords" lang="en" content="media design, generative design, interaction design, user experience design, new media, exhibition design, interactive exhibits, information design, digital transformation
">
<meta name="keywords" lang="de" content="mediengestaltung, generative gestaltung, interaktionsdesign, new media, exhibition design, ausstellungsdesign, interaktive exponate, interactive exhibits, information design, informationsdesign, digitale transformation
">
<!--TODO description-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body class="sol">
<script src="javascripts/project.js"></script>
<header class="onWhite">
<div class="content2">
<div class="title">
<h2 lang="en">SOL
</h2>
<h3 lang="en">Into the sun, pushing atoms
</h3>
<h2 lang="de">SOL
</h2>
<h3 lang="de">In die Sonne, Atome bewegen
</h3>
</div>
<div class="logosmall">
<!--<a href="javascript:history.back()"><div>SYNTOP</div></a>-->
<a href="./index.html?lang=de#projects" lang="de"><div>SYNTOP</div></a>
<a href="./index.html?lang=en#projects" lang="en"><div>SYNTOP</div></a>
</div>
</div>
</header>
<section>
<div class="startimagecontainer">
<div id="startimage" data-image= images/syntop-sol-title.jpg ></div>
</div>
<article class="projectcontent">
<div class="projectinformation">
<div class="description" lang="en">
<p>In an immersive environment the principles of nuclear fusion can be experienced in a narrative and playful way: Entering a bright and glistening corpus, the visitor experiences the darkness inside the Sun and watches the chaotic motion of Protons.</p>
<p>Interacting with the particles causes them to fuse and to produce energy which manifests as light bursts inside “the core” as well as a rising light level on the outside.</p>
<div class="imagecontainer"><video controls="" loop="" muted="" playsinline=""><source src="images/syntop-sol-0.mp4" type="video/mp4" /></video></div>
</div>
<div class="description" lang="de">
<p>Im Mittelpunkt der Wanderausstellung für Kinder <em>here comes the sun</em> steht die Installation SOL, welche die Kernfusion als Ursprung der Sonnenenergie inszeniert.</p>
<p>Um die Vorgänge zu erklären, gestalteten und programmierten wir für das Innere der Installation eine sensitive Oberfläche, auf der Besucher projizierte Protonen beeinflussen und zur Fusion bringen können.<br />
Die Geschehnisse im Inneren werden durch die Verortung in einem großen Installationskorpus ins Verhältnis zu der enormen Größe der Sonne gesetzt; durch ein eigens konzipiertes Lichtsteuerungssystem überträgt sich die Fusionsenergie von der Projektion über ultrahelle LEDs im Innenraum und dimmbare Leuchtstoffröhren auf der Außenhülle schließlich auf die gleißende Oberfläche der Installation.</p>
<p>Weiterhin programmierten wir ein dynamisches Audiosystem, welches, basierend auf Samples sonifizierter Sonnenaktivität, Fusionsreaktionen und Gesamtenergie akustisch dargestellt.</p>
<div class="imagecontainer"><video controls="" loop="" muted="" playsinline=""><source src="images/syntop-sol-0.mp4" type="video/mp4" /></video></div>
</div>
</div>
<!--TODO check if thumbnails are in json for images, too. -->
<div id="images" class="anim-fade hide">
<div class="grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<div class="grid-item">
<img alt="SYNTOP - SOL" src="images/syntop-sol-1.jpg" lang="de"/>
<img alt="SYNTOP - SOL" src="images/syntop-sol-1.jpg" lang="en"/>
</div>
<div class="grid-item">
<img alt="SYNTOP - SOL" src="images/syntop-sol-2.jpg" lang="de"/>
<img alt="SYNTOP - SOL" src="images/syntop-sol-2.jpg" lang="en"/>
</div>
<div class="grid-item">
<img alt="SYNTOP - SOL" src="images/syntop-sol-3.jpg" lang="de"/>
<img alt="SYNTOP - SOL" src="images/syntop-sol-3.jpg" lang="en"/>
</div>
<div class="grid-item">
<img alt="SYNTOP - SOL" src="images/syntop-sol-4.jpg" lang="de"/>
<img alt="SYNTOP - SOL" src="images/syntop-sol-4.jpg" lang="en"/>
</div>
</div>
</div>
<div class="credits" lang="de">
<p><strong>Leistungen (als TheProduct)</strong><br />
Konzept, Experience Design, Programmierung, Medientechnik</p>
<p><strong>Auftraggeber</strong><br />
Humboldt-Universität zu Berlin</p>
<p><strong>Partner</strong><br />
<a href="http://www.neuesuniversum.de/index.php?id=4">Neues Universum e.V.</a><br />
<a href="https://www.neo-studio.de">Neo.Studio Neumann Schneider Architekten</a></p>
</div>
<div class="credits" lang="en">
<p><strong>Services (as TheProduct)</strong><br />
Concept, Experience Design, Software Development, Media planning</p>
<p><strong>Client</strong><br />
Humboldt-Universität zu Berlin</p>
<p><strong>Partners</strong><br />
<a href="http://www.neuesuniversum.de/index.php?id=4">Neues Universum e.V.</a><br />
<a href="https://www.neo-studio.de">Neo.Studio Neumann Schneider Architekten</a></p>
</div>
<footer class="black">
<a href="/imprint.html" rel="nofollow" lang="de">
<p>SYNTOP 2023 / Impressum und Datenschutzerklärung</p>
</a>
<a href="/imprint.html" rel="nofollow" lang="en">
<p>SYNTOP 2023 / Legal Disclaimer and Data Privacy Statement</p>
</a>
</footer>
</article>
</section>
<div id="largeimageoverlay"><div id="largeimageoverlayimage"><img src=""/></div></div>
</body>
</html>