-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsystem_overview.html
More file actions
209 lines (185 loc) · 9.18 KB
/
system_overview.html
File metadata and controls
209 lines (185 loc) · 9.18 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
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
<!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>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Complex Kinect — An Interdisciplinary Engineering Endeavor</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Free HTML5 Template by FREEHTML5.CO" />
<meta name="keywords" content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive" />
<meta name="author" content="FREEHTML5.CO" />
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="shortcut icon" href="favicon.ico">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="box-wrap">
<header role="banner" id="fh5co-header">
<div class="container">
<nav class="navbar navbar-default">
<div class="row">
<div class="col-md-3">
<div class="fh5co-navbar-brand">
<a class="fh5co-logo" href="index.html">Complex Kinect</a>
</div>
</div>
<div class="col-md-9 main-nav">
<ul class="nav text-right">
<div class='dropdown'>
<li><a href="index.html"><span>Home</span></a></li>
</div>
<div class="dropdown">
<li class="active"><a href="system_overview.html">The System</a></li>
<div class="dropdown-content">
<a href="mechanical.html">Mechanical</a>
<a href="software.html">Software</a>
<a href="electrical.html">Electrical</a>
<a href="financial.html">Financial</a>
</div>
</div>
<div class="dropdown">
<li><a href="process_overview.html">An Iterative Process</a></li>
<div class="dropdown-content">
<a href="sprint1.html">Sprint 1</a>
<a href="sprint2.html">Sprint 2</a>
<a href="sprint3.html">Sprint 3</a>
<a href="sprint4.html">Sprint 4</a>
</div>
</div>
<div class="dropdown">
<li><a href="growth_overview.html">Team Growth</a></li>
<div class="dropdown-content">
<a href="team_learning.html">Team Learning</a>
<a href="individual_learning.html">Individual Learning</a>
</div>
</div>
<div class="dropdown">
<li><a href="aboutus.html">About Us</a></li>
</div>
<div class="dropdown">
<li><a href="blog.html">Blog</a></li>
</div>
</ul>
</div>
</div>
</nav>
</div>
</header>
<!-- END: header -->
<div id="fh5co-intro-section" class="section-overlay animate-box" data-animate-effect="fadeIn">
<div class="fh5co-intro-cover text-center" style="background-image: url(images/final-15.jpg); background-size: cover; margin-bottom: 30px; max-width:100%;">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 float-overlay">
<h2>The System</h2>
<h3>A distributed electrical and firmware system that allows for expandability and a compact, efficient mechanical design that minimizes parts for better functioning.</h3>
</div>
</div>
</div>
</div>
</div>
<!-- END fh5co-intro-section -->
<div id="fh5co-section">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<p>Interactive art is on the rise in our current society, from visual media arts produced at the MIT Media lab to informational aesthetic displays popping up in public places. Our team took inspiration of this new movement, and developed an interactive art sculpture, meant to be visually appealing while engaging a larger audience.</p>
<p>We also took inspiration from the movement of birds, impressed by how they move in a flock, despite there being no distinct leader. Our sculpture thus abstractly represents how birds would move based on the motion and audio around them.</p>
<p>Complex Kinect is a 1 x 3 x 8 foot sculpture, that is able to stand completely on its own. It has eighteen origami structures, that are grouped by three, on a grey background. The user interfaces with the sculpture through a web application, allowing the user to engage with the sculpture in three different ways: through audio, through motion, and through a preset demonstration. If the audience chooses visual, then the nodes will open and close depending on the motion in the camera. Thus as the user walks by the structure, the nodes follow his or her movement, simulating a flock of birds slowly taking off.</p>
<p>If the user chooses audio, then the nodes will move depending on the sound in the environment. If there is a lot of noise, then the nodes will move rapidly and at the same time. If there is only a little bit of movement, then only a couple of nodes will move at that time. The last option that the user can choose is the demonstration mode, which allows the user to experience the movement of the sculpture in a pre-set demo, which shows the highlights of the sculpture, without playing on its interactive side.</p>
<figure>
<center><img src="images/SystemDiagram.jpg">
<figcaption>Our system diagram is shown above.</figcaption></center>
</figure>
<p></p>
<div class="col-md-6 animate-box">
<div class="fh5co-inner fh5co-services">
<i class="icon-cog"></i>
<div class="holder-section">
<a href="mechanical.html"><h3>Mechanical Design</h3></a>
<p>To minimize moving parts and the introduction of friction, our system uses a rack and pinion drive system and a servo motor to move a line of 3 flowers. The servo racks back and forth to move the pinions in and out of the front which moves the inner section of the flowers.</p>
</div>
</div>
</div>
<div class="col-md-6 animate-box">
<div class="fh5co-inner fh5co-services">
<i class="icon-display"></i>
<div class="holder-section">
<a href="software.html"><h3>Software</h3></a>
<p>Using OpenCV and a Raspberry Pi camera, our system tracks motion within the frame. Dividing the frame into quadrants corresponding to the physical apparatus of flowers, the system transmits which frame(s) have motion to the master arduino.</p>
</div>
</div>
</div>
<div class="col-md-6 animate-box">
<div class="fh5co-inner fh5co-services">
<i class="icon-power-cord"></i>
<div class="holder-section">
<a href="electrical.html"><h3>Electrical</h3></a>
<p>In order to supply enough current to our servos, we have the microcontrollers on a separate power supply from the servos. Our electrical system is very simple with each servo requiring just power and a sense line.</p>
</div>
</div>
</div>
<div class="col-md-6 animate-box">
<div class="fh5co-inner fh5co-services">
<i class="icon-stats-dots"></i>
<div class="holder-section">
<a href="financial.html"><h3>Financial</h3></a>
<p>In order to accurately track our expenses with transparency, we’ve included a break down of all the components used for this project. We outline where we got some of our sources and you can see how much the whole thing cost to make.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div id="footer" class="fh5co-border-line">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<p>© 2017 ComplexKinect. All Rights Reserved. <br>Template made with <i class="icon-heart3 love"></i> by <a href="http://freehtml5.co/" target="_blank">Freehtml5.co</a></p>
<p class="fh5co-social-icons">
<a href="https://github.com/ComplexKinect" target="_blank"><i class="icon-github-with-circle"></i></a>
</p>
</div>
</div>
</div>
</div>
</footer>
</div>
<!-- END: box-wrap -->
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Owl carousel -->
<script src="js/owl.carousel.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Parallax Stellar -->
<script src="js/jquery.stellar.min.js"></script>
<!-- Main JS (Do not remove) -->
<script src="js/main.js"></script>
</body>
</html>