-
Notifications
You must be signed in to change notification settings - Fork 0
/
tronic.php
188 lines (176 loc) · 7.35 KB
/
tronic.php
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
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<?php include("head.php"); ?>
</head>
<body>
<div id="container">
<?php include("navigation.php"); ?>
<div class="spacer"></div>
<ul id="logo" class="logo">
<li class="layer" data-depth="2.00"><img src="img/logo/V1/layer1.png"></li>
<li class="layer" data-depth="1.50"><img src="img/logo/V1/layer2.png"></li>
<li class="layer" data-depth="1.00"><img src="img/logo/V1/layer3.png"></li>
<li class="layer" data-depth="0.50"><img src="img/logo/V1/layer4.png"></li>
<li class="layer" data-depth="0.00"><img src="img/logo/V1/layer5.png"></li>
</ul>
<ul id="language">
<li>de</li>
<li>//</li>
<li>en</li>
</ul>
<div id="topImageWrapper">
<div id="topImageProject">
<div id="groupProjectImage">
<img src="img/project/tronic/tronic-topImg-5.jpg">
<img src="img/project/tronic/tronic-topImg-4.jpg">
<img src="img/project/tronic/tronic-topImg-6.jpg">
<img src="img/project/tronic/tronic-topImg-2.jpg">
<img src="img/project/tronic/tronic-topImg-3.jpg">
<img src="img/project/tronic/tronic-topImg-7.jpg">
</div>
</div>
</div>
<ul class="grid projectTitle" id="projectDescription">
<h3>Super Tronic _ B A D</h3>
<div class="textSet deutschText">
<p>
Das Projekt B-A-D ist eine interaktive Sitzecke, in der ein Besucher die Videoprojektion von einem zentralen Stuhl aus steuern und verändern kann. Die Besucher begeben sich auf eine Zeitreise vom Urknall bis zur Apokalypse.
<br>
<br>
<strong>Resultat</strong>
<br>
Der Kernbestandteil von B-A-D ist der Zeitreisestuhl, auf dem der Betrachter sitzt um sich die Projektion anzusehen. Die Zeitreise wird mit 2 Beamern an die Wand gegenüber des Zeitreisestuhls projiziert. Der Zeitreisende hat Einfluß auf den Verlauf der Reise. Er kann mit den Pedalen die Geschwindigkeit erhöhen oder verlangsamen. Mit den Knöpfen auf dem Schaltpult hat er die Möglichkeit in 10 verschiedenen Zeiten zu reisen. Wird keiner der Knöpfe gedrückt, dann reist er chronologisch in der Zeit.
<br>
<br>
<strong>Umsetzung</strong>
<br>
2 Projektoren via VVVV, Knöpfe & Schalter per Arduino
Project by Birte Buss, Anne Pothenick & Dimitri Steinel
</p>
</div>
<!-- <div class="textSet englishText">
<p>
THIS IS eNGLICH
Soll dem Besucher die Sinnlosigkeit des Gaffens vor Augen führen. Die meisten Menschen tun es und denken nicht weiter darüber nach. Warum schauen Menschen Promi-Sendungen, warum kaufen sie sich Promi-Zeitschriften und warum ist die tägliche Zeitung voll von Schaulustigen-News? WhyAreYou_Watching?! soll das Interesse des Besuchers wecken und ihm anders, als die heißgeliebten Promis, alles offenlegen wo nichts zu sehen ist. Keine Mauern die umgangen werden müssen, keine heimlichen Fotos die geschossen werden und keine Tuscheleien über Sachen von denen man gehört hat das sie passiert sind. Hier wird einem der Blick ins Nichts offengelegt. Egal wie sich der Besucher bewegt, WhyAreYou_Watching?! zeigt ihm genau das, was die Promis versuchen zu verstecken, das intime Innenleben. Was der Betrachter sieht ist inhaltlich das Selbe, was er auch bei seinen Promimagazinen sieht: Nichts.
Auch Maschinen haben eine Schamgrenze. Kommt man der Maschine zu nah, dann verschließt sie all ihre Klappen!
Why are you watching kann zurzeit in der btk-fh Berlin besichtigt werden!
<br>
<br>
#Musik:
Fall walk run - What is love
</p>
</div> -->
<p>
<strong>Projektvideo</strong>
</p>
<video class="video" controls>
<!-- MP4 must be first for iPad! -->
<source src="video/tronic/tronic.mp4" type="video/mp4" />
<source src="video/tronic/tronic.webm" type="video/webm" />
</video>
<p>
<strong>MakingOf</strong>
</p>
<video class="video" controls>
<!-- MP4 must be first for iPad! -->
<source src="video/tronic/tronic_makingof.mp4" type="video/mp4" />
<source src="video/tronic/tronic_makingof.webm" type="video/webm" />
</video>
</ul>
</div>
<!-- Scripts -->
<script src="js/jquery.parallax.js"></script>
<script src="js/modernizr.custom.js"></script>
<script type="text/javascript" src="js/randomColor.js" ></script>
<script>
$("#language li").click(function(){
$(".deutschText, .englishText").toggle(200);
})
$(window).scroll(function(e){
parallax();
$('.photoset').each(function () {
if (($(this).offset().top - $(window).scrollTop()) < 100) {
$(this).stop().fadeTo(200, 0);
} else {
$(this).stop().fadeTo('fast', 1);
}
});
});
$('#logo').parallax();
$( document ).ready(function() {
$(".galleryStyle").delay(1000).animate({
marginTop: "-=800"
}, 500, function(){
$(this).animate({ marginTop: "40px" }, 100 );
$(this).animate({ marginTop: "-=40px" }, 100 );
$(this).animate({ marginTop: "10px" }, 100 );
$(this).animate({ marginTop: "-=10px" }, 100 );
$("html").css("overflow", "auto")
// $(".grid li").fadeTo(1, 400);
// $(".grid li").delay( 2000 ).css("display", "inline-block");
});
var myRandomColor = 'rgba(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',.65)';
$(".projectTitle figcaption").css("visibility", "visible");
$('.grid li').hover(function(){
$(this).siblings().addClass('fadeOutImages');
}, function(){
$(this).siblings().removeClass('fadeOutImages');
});
$(".spacer").css("background-color", myRandomColor);
$(".grid li, #navigation a").mouseover(function() {
$(this).css("background-color",myRandomColor);
$(this).find("figcaption").css("visibility", "visible").animate({ marginTop: "40px"}, 200 );
$(".grid li").not(this).fadeOut('slow', .5);
}).mouseout(function() {
$(this).css("background-color","#f6f6f6");
$(this).find("figcaption").css("visibility", "hidden").animate({ marginTop: "40px"}, 50 );
});
$("#meImageStart").css("marginTop", "500px");
});
var queries = [
{
context: 'mobile',
match: function() {
console.log('Mobile callback. Maybe hook up some tel: numbers?');
// Your mobile specific logic can go here.
},
unmatch: function() {
// We're leaving mobile.
}
},
{
context: 'skinny',
match: function() {
console.log('skinny callback! Swap the class on the body element.');
// Your tablet specific logic can go here.
},
unmatch: function() {
console.log('leaving skinny context!');
}
},
{
context: 'wide-screen',
match: function() {
console.log('wide-screen callback woohoo! Load some heavy desktop JS badddness.');
// your desktop specific logic can go here.
}
}
];
// Go!
MQ.init(queries);
</script>
<script>
var my_query = MQ.addQuery({
context: ['skinny','desktop'],
call_for_each_context: false,
match: function() {
console.log( 'second skinny callback!' )
}
});
</script>
</body>
</html>