-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
185 lines (169 loc) · 13 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta name="author" content="Paul Heidicker, Silvan Dähn, Jakob Stecher, Kim Möller">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Rokkitt:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="favicon.ico">
<title>Distort</title>
</head>
<body>
<!-- NAVBAR / HEADER-->
<nav class="navbar navbar-default navbar-fixed-top animated fadeInDown">
<div class="container">
<div class="navbar-header">
<a href="#"><img class="logo" src="img/logo.png" alt="Distort" style="height: 32px;"></a>
</div>
<!-- <div class="pull-right">
<button class="btn btn-default navbar-btn"><a href="https://github.com/Distort-Mapping/Distort"><img src="img/github.png" width="20px" class="pull-left"/>Github</a></button>
</div> -->
</div>
</nav>
<!-- CONTENT -->
<div class="gray-section animated fadeIn">
<div class="container top-inset">
<div class="row col-md-6">
<!-- <div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/vKht76-zRBI?&controls=0&rel=0&showinfo=0&modestbranding=1" frameborder="0" allowfullscreen></iframe>
</div> -->
<img src="img/canvas.png" class="img-responsive center-block" alt="Distort Interface">
</div>
<div class="row col-md-5 col-md-offset-1">
<h2>Projection-Mapping, ganz einfach</h2>
<h4>Projection-Mapping beschreibt die gezielte Beleuchtung von 2D- und 3D-Objekten durch einen Projektor mit perpektivisch verzerrten Texturen,
so dass diese auf dem Objekt selbst wieder entzerrt erscheinen. Software hierfür ist meistens sehr komplex und deswegen für kleinere Projekte nicht geeignet.
Distort setzt genau an diesem Punkt an und bietet eine leichtgewichtige Lösung, die auch auf mobilen Geräten funktioniert. <br><br>
Entstanden ist Distort an der Universität Hamburg im Rahmen eines MCI Projekts des Studiengangs Mensch-Computer Interaktion.</h4>
</div>
</div>
</div>
<div class="red-section animated fadeIn">
<div class="container">
<div class="row col-md-7 col-xs-12">
<h2>Mobil und modern mit vielen Features</h2>
<h4>Wir nutzen moderne Technologien zum Darstellen deiner Texturen und haben Distort für mobile Geräte optimiert, damit deiner Projektion kein Kabel im Weg liegt.
Außerdem unterstützt Distort mehrere Monitore, damit dein Projection-Mapping auch flächendeckend von mehreren Seiten beleuchtet werden kann.<br><br>
Damit es keine Probleme beim Anzeigen von mehreren Belegungen deines Mappings gibt, bietet Distort zusätzlich direkt zwei Oberflächen an - eine zum Einrichten, eine zum Präsentieren.</h4>
</div>
<div class="row col-md-4 col-md-offset-1 ">
<img src="img/beamer.png" class="img-responsive" alt="Modell">
</div>
</div>
</div>
<div class="gray-section animated fadeIn">
<div class="container">
<div class="row col-md-6 col-sm-6 hidden-xs">
<img src="img/stack2.png" class="img-responsive center-block" alt="Stack">
</div>
<div class="row col-md-6 col-sm-5 col-sm-offset-1 col-md-offset-0">
<h2>Reibungslos durch robuste Technik</h2>
<h4>Das Distort Stack besteht aus zwei Komponenten,
einer Unity3D-Anwendung und einer AngularJS Web-Applikation.<br><br>
Mittels der Web-App lässt sich die Unity3D-Anwendung von einem Tablet
aus steuern und erlaubt die kabllose Bewegung um ein Modell.
<br>Vorgenommene Änderungen werden ohne Verzögerung in Unity3D repräsentiert.</h4>
</div>
</div>
</div>
<div class="red-section animated fadeIn">
<div class="container">
<div class="row col-md-5">
<h3>Wer wir sind?</h2>
<p>
Distort ist an der Universität Hamburg als ein Projekt des Studiengangs Human-Computer-Interaction entstanden. Wir wollten für ein Thema, das uns am Herzen liegt, eine flexible Lösung gestalten,
die jeder bedienen kann. Wir sind <a href="http://silvandaehn.com">Silvan Dähn</a>, Paul Heidicker, <a href="https://www.xing.com/profile/Kim_Moeller4">Kim Möller</a> und <a href="http://jakobstecher.de">Jakob Stecher</a>.
</p>
</div>
<div class="row col-md-5 col-md-offset-1">
<h3>Warum Projection-Mapping?</h2>
<p>
Projection-Mapping ermöglicht beeindruckende Projekte, die allerdings auch großen Aufwand erfordern.
Ach im kleinen Maßstab lassen sich Modelle einfach mit Texturen belegen, was das Modell dann sehr plastisch wirken lässt.
Distort macht diese Plastizität für jeden erreichbar.
</p>
</div>
</div>
</div>
<!-- FOOTER-->
<nav class="navbar navbar-default animated fadeIn no-margin">
<div class="container">
<p class="muted credit footer">
<a type="button" class="btn btn-link" data-toggle="modal" data-target="#impressum-modal">Impressum</a>·
<a type="button" class="btn btn-link" data-toggle="modal" data-target="#attributionen-modal">Attributionen</a>
</p>
</div>
</nav>
<!-- ///////// Modals ///////// -->
<!-- Impressum Modal -->
<div class="modal fade" id="impressum-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Impressum</h4>
</div>
<div class="modal-body">
<h4><p>Angaben gemäß § 5 TMG</p><p>Jakob Stecher <br>
Bremer Reihe 15<br>
20099 Hamburg <br>
</p><p> <strong>Vertreten durch: </strong><br>
Jakob Stecher<br>
Kim Möller<br>
Paul Heidicker<br>
Silvan Dähn<br>
</p><p><strong>Kontakt:</strong> <br>
Telefon: 040-18299224<br>
E-Mail: <a href='mailto:[email protected]'>[email protected]</a></br></p><p><strong>Haftungsausschluss: </strong><br><br><strong>Haftung für Inhalte</strong><br><br>
Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.<br><br><strong>Haftung für Links</strong><br><br>
Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.<br><br><strong>Urheberrecht</strong><br><br>
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.<br><br><strong>Datenschutz</strong><br><br>
Die Nutzung unserer Webseite ist in der Regel ohne Angabe personenbezogener Daten möglich. Soweit auf unseren Seiten personenbezogene Daten (beispielsweise Name, Anschrift oder eMail-Adressen) erhoben werden, erfolgt dies, soweit möglich, stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrückliche Zustimmung nicht an Dritte weitergegeben. <br>
Wir weisen darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich. <br>
Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten durch Dritte zur Übersendung von nicht ausdrücklich angeforderter Werbung und Informationsmaterialien wird hiermit ausdrücklich widersprochen. Die Betreiber der Seiten behalten sich ausdrücklich rechtliche Schritte im Falle der unverlangten Zusendung von Werbeinformationen, etwa durch Spam-Mails, vor.<br>
<br><br><strong>Google Analytics</strong><br><br>
Diese Website benutzt Google Analytics, einen Webanalysedienst der Google Inc. (''Google''). Google Analytics verwendet sog. ''Cookies'', Textdateien, die auf Ihrem Computer gespeichert werden und die eine Analyse der Benutzung der Website durch Sie ermöglicht. Die durch den Cookie erzeugten Informationen über Ihre Benutzung diese Website (einschließlich Ihrer IP-Adresse) wird an einen Server von Google in den USA übertragen und dort gespeichert. Google wird diese Informationen benutzen, um Ihre Nutzung der Website auszuwerten, um Reports über die Websiteaktivitäten für die Websitebetreiber zusammenzustellen und um weitere mit der Websitenutzung und der Internetnutzung verbundene Dienstleistungen zu erbringen. Auch wird Google diese Informationen gegebenenfalls an Dritte übertragen, sofern dies gesetzlich vorgeschrieben oder soweit Dritte diese Daten im Auftrag von Google verarbeiten. Google wird in keinem Fall Ihre IP-Adresse mit anderen Daten der Google in Verbindung bringen. Sie können die Installation der Cookies durch eine entsprechende Einstellung Ihrer Browser Software verhindern; wir weisen Sie jedoch darauf hin, dass Sie in diesem Fall gegebenenfalls nicht sämtliche Funktionen dieser Website voll umfänglich nutzen können. Durch die Nutzung dieser Website erklären Sie sich mit der Bearbeitung der über Sie erhobenen Daten durch Google in der zuvor beschriebenen Art und Weise und zu dem zuvor benannten Zweck einverstanden.</p><br>
Website Impressum erstellt durch <a href="http://www.impressum-generator.de">impressum-generator.de</a></h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Attributionen Modal -->
<div class="modal fade" id="attributionen-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Attributionen</h4>
</div>
<div class="modal-body">
<ul><h4>
<li><a href="http://unity3d.com">Unity3D</a></li>
<li><a href="https://angularjs.org">AngularJS</a></li>
<li><a href="https://github.com/edankwan/PerspectiveTransform.js/tree/master">PerspectiveTransformJS</a></li>
<li><a href="https://servicestack.net">ServiceStack</a></li>
<li><a href="http://blog.bagearon.com/2013/09/servicestack-unity/">Brad Gearon - ServiceStack with Unity</a></li>
<li><a href="https://github.com/Olivine-Labs/Alchemy-Websockets">Alchemy Websockets</a></li>
<li><a href="http://hammerjs.github.io">HammerJS</a></li></h4>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>