forked from RyanFitzgerald/devportfolio
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathproject-socket.html
More file actions
291 lines (276 loc) · 18.8 KB
/
project-socket.html
File metadata and controls
291 lines (276 loc) · 18.8 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
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hadiya Firdaus - Portfolio</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<div id="mobile-menu-open" class="shadow-large">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<!-- End #mobile-menu-toggle -->
<header class="sticky">
<div id="mobile-menu-close">
<span>Close</span> <i class="fa fa-times" aria-hidden="true"></i>
</div>
<ul id="menu" class="shadow">
<li class="lefter">
<a href="/" class="no-scroll"><img src="favicon.png" class="favicon"/>HADIYA FIRDAUS</a>
</li>
<li>
<a href="#about">Socket</a>
</li>
<li>
<a href="#initial-sketches">Initial Sketches</a>
</li>
<li>
<a href="#refined-sketches">Refined Sketches</a>
</li>
<li>
<a href="#software-implementation">Implementation</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</header>
<!-- End header -->
<div id="lead" style="background-image:url('images/socket.gif');">
<div id="lead-content">
<h1>Socket</h1>
<h2 color="white">HCI 581: P3</h2>
<div class="social">
<ul>
<li>
<a href="https://github.com/hfirdaus" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
</li>
<li>
<a href="https://linkedin.com/in/hadiyafirdaus" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</li>
<li>
<a href="mailto:contact@hadiyafirdaus.com"><i class="fa fa-envelope" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</div>
<!-- End #lead-content -->
<div id="lead-overlay"></div>
<div id="lead-down">
<span>
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</span>
</div>
<!-- End #lead-down -->
</div>
<!-- End #lead -->
<div id="about">
<div class="container">
<div class="row">
<div class="col-md-4">
<h2 class="heading">The Project</h2>
</div>
<div class="col-md-8">
The <b>aim</b> of this project is to create a fashion tech garment that tells a story.
</div>
</div>
<hr>
<div id="initial-sketches" style="padding:50px;" class="row">
<h2 class="heading">Initial Sketches</h2>
<br> <p>I thought that for fashion, lights would have the most dramatic effect, so most of my initial ideas were using LEDs as output.</p>
<div style="display:inline-block;">
<table>
<tr>
<td style="width:30%;">
<ul>
<li>A full-body skeletal system made of light up LEDs, to bring the inside outside.</li>
<li>An external view of the digestive system, when a motion detector detects the movement of the throat, a light travels down the LEDS to a stomach shape.</li>
<li>A body armour suit where the accented parts are stiff coloured light bars that alternate and shine to bring attention when the heart rate of the user goes up.</li>
<li>A skirt that gets longer or shorter depending on the temperature outside.</li>
<li>A shirt with LEDs scattered like a dot grid where touching the shirt on any LEDs creates a ripple effect on the other LEDs.</li>
<li>An umbrella that when opened up in rainy weather, has LEDs on the outside that light up traveling downwards like rain.</li>
</ul>
</td>
<td>
<img width="80%" style="padding:10px;" src="images/sketches-socket-initial-1.jpg">
</td>
</tr>
<tr>
<td>
<ul>
<li>A bar of lights on a pair of tights that lights up based on mood as determined by how much walking has been done, like leveling up.</li>
<li>Circles of LEDs that spins around the image of a heart, lighting up based on an acceleration sensor to visualize energy traveling into the body.</li>
<li>A skirt with string lights hanging off of it that light up when they are spun to create a beautiful effect. The concept is people creating power via movement, like a turbine.</li>
<li>A pair of earphones that have LEDs around the strings. They light up when the person is listening to music; the light travels from the ears to where the 2 connect, usually the heart area, and stop there to indicate music is an expression of love.</li>
</ul>
</td>
<td>
<img width="80%" style="padding:10px;" src="images/sketches-socket-initial-2.jpg">
</td>
</tr>
</table>
</div>
<div style="display:inline-block;">
</div>
<p>
</p>
</div>
<hr>
<div id="refined-sketches" style="padding:50px;" class="row">
<h2 class="heading">Refined Sketches</h2>
<p>We decided to implement Michaela's idea of giving girls pockets, but not just that - also charging your phone while they're at it. The idea is a mobile pocket that can be attached on the inside of clothes. When the phone is put in the pocket, the phone starts charging. <blockquote>However, we wanted to make that exciting and make people question <b>their relationship with technology</b> by using LED lights pulsing towards the phone from another location on the body. This makes the body and the technology seem connected, and asks the question: where is the power coming from?</blockquote> The team iterated on different ways to realize this relationship using fashion. Jacky's ideas of having an exposed exposed circuitry aesthetic was really interesting too, so we decided to put those two together in order to ask questions about technology.</p>
<br>
<table>
<tr>
<td style="width:30%;">
<h3>Me</h3>
<ul>
<li>
My first refined sketch is the idea of the food chain. We eat food that powers us up and then that power is used in our technology. When the phone is plugged in, the lights travel from the throat of the person to the stomach and they build up there one by one until the stomach is full. Then they disappear altogether as if they've all passed into the phone. This makes us question whether we're putting our energy to good use.</li>
<li>
My second refined sketch is the idea of the conversion of energy. The lights travel up from our feet, converting kinetic energy to potential energy. It's a play on "potential energy": where does that potential go? how much potential does technology have?
</li>
</ul>
</td>
<td>
<img width="300px" style="padding:10px;" src="images/sketches-socket-hadiya.jpg">
</td>
</tr>
<tr>
<td style="width:30%;">
<h3>Michaela</h3>
<p>
The LED pattern is a circuit that makes a meaningful pattern of lights as if part of a system of electronics. It asks: isn't the body also a series of circuits?
Some of the circuit based patterns Michaela looked at was a double helix pattern (what are we made of?) and a golden ratio spiral (what is beautiful?).
</td>
<td>
<img width="300px" style="padding:10px;" src="images/sketches-socket-michaela-4.jpg">
</td>
</tr>
<tr>
<td>
<h3>Max</h3>
<p>When the phone is charging, a tie lights up to indicate that it is charging. Or a series of LEDS going down suspenders with lights pulsing through them ask: what are the trappings of technology?</p>
</td>
<td>
<img width="350px" style="padding:10px;" src="images/sketches-socket-max-1.jpg">
<img width="350px" style="padding:10px;" src="images/sketches-socket-max-2.jpg">
</td>
</tr>
<tr>
<td>
<h3>Aaron</h3>
<p>A lit up exoskeleton, so when the phone is charging, the hands light up, as if the current is traveling into our bones. A wire skirt made of LEDs where the light pulses through all of them when the phone is plugged in.
</p>
</td>
<td>
<img width="300px" style="padding:10px;" src="images/sketches-socket-aaron-1.jpg">
<img width="300px" style="padding:10px;" src="images/sketches-socket-aaron-2.jpg">
</td>
</tr>
<tr>
<td>
<h3>Jacky</h3>
<p>The lights travel up the spine and stop like an appendage on the prefrontal cortex. This asks: should there be a direct connection from our technology to our brains? Should we think twice about what we consume?
His next design was lights spiralled where the pocket is actually held up on the back of the neck. Another design is where the pocket itself glows when it's charging, pulsing to let the person know.</p>
</td>
<td>
<img width="300px" style="padding:10px;" src="images/sketches-socket-jacky-1.jpg">
<img width="300px" style="padding:10px;" src="images/sketches-socket-jacky-2.jpg">
</td>
</tr>
</table>
</div>
<hr>
<div id="software-implementation" style="padding:50px;" class="row">
<h2 class="heading">Software and Hardware Implementation</h2>
<div style="padding:20px;float:right;">
<img width="250px" style="float:right;padding:10px;" src="images/sketches-socket-michaela-1.jpg">
<img width="250px" style="float:right;padding:10px;" src="images/sketches-socket-michaela-3.jpg">
<p>We decided on a design that used a cloth sleeve to hold the phone with a sensor inside that was activated when a phone was
inserted. This will serve as a fake "connection" that allows the Arduino to charge the phone; it will serve as a
proof-of-concept, since we don't have any connectors currently that would allow this. We have a power bank that charges
the Arduino, and ideally this fake connection will allow the power in the Arduino to charge the phone. </p>
<br><p>This pocket would house the electronics of the stitch kit. The wiring of the LED would be exposed to create
the circuitry aesthetic of the design. </p>
<br><p>Our input is the button that gets pressed when the phone enters the pocket. We initially used a resistor but
that wasn't giving us consistent results, so we switched to a simple button. Our output was the lights that pulsed
from an external point towards the phone.</p>
<br><p>Since everyone explored our relationship to technology using different formations in their refined sketches, and it
made sense that this relationship <b>changes</b> and is always in flux. So we decided to make it up to the user to define their relationship to tech
themselves.</p>
</div><div>
<img width="300px" style="padding:10px;float:right;" src="images/socket-hardware.jpg">
<h3>Design Decisions</h3>
<ul>
<li>The sleeve is a neutral colour, and thin so that it can fit into any pocket, but it is also made from a stretchy material because girls need pockets for lots of things with different sizes!</li>
<li>A flattish power bank on the back of the pocket so that it is easy to fit. A clip on the top so that it can attach on the inside of a skirt or jeans if need be.</li>
<li>What we decided was to make the wire malleable so the user can shape it to <b>express their relationship with technology however they want</b>. The primary design was the spiral that contained the human torso and ended at the spine back of the user so it is as if the human's brain is powering the phone. We liked this because it asks opposing questions: how does technology free human intelligence to create change? is technology taking power away from us?</li>
<li>The light pattern must flow from the end of the LED into the phone so that the question can be asked: what exactly powers our technology?</li>
<li>The end of the LEDs is also a plug, which implies that it plugs "into" something. We also made it end with small plugs that branch out so it makes you think about how technology connects to the things around it.</li>
<li>We chose to make the LED lights blue because it is the perceived colour of electricity and power.</li>
<li>We chose a LED light pattern that fades in and out quickly so it imitates blood running through veins, to suggest that people and technology are part of the same family of life. </li>
</ul>
</div><div>
<iframe width="560" height="315" style="padding:10px;float:left;" src="https://www.youtube.com/embed/U8rC3khjYJI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
I worked on the light pattern that that fades in and out and hooking up the sensor code with the light code so that it works like a toggle initiated by the press of the phone in the pocket, turning the lights on and off. I also filmed and edited the video for this project (and had way too much fun doing it)!
<h3>The source code is hosted on <a href="https://github.com/hfirdaus/socket">Github</a>. You can download <a href="/files/socket.zip">socket.zip</a> as well.<br><br></h3>
</div>
</div>
</div>
</div>
<!-- End #about -->
<div id="contact">
<h2>Get in Touch</h2>
<div id="contact-form">
<form method="POST" action="https://formspree.io/contact@hadiyafirdaus.com">
<input type="hidden" name="_subject" value="Contact request from hadiyafirdaus.com" />
<input type="email" name="_replyto" placeholder="Your email" required>
<textarea name="message" placeholder="Your message" required></textarea>
<button type="submit">Send</button>
</form>
</div>
<!-- End #contact-form -->
</div>
<!-- End #contact -->
<footer>
<div class="container">
<div class="row">
<div class="col-sm-5 copyright">
<p>
Copyright © 2018 HADIYA FIRDAUS
</p>
</div>
<div class="col-sm-2 top">
<span id="to-top">
<i class="fa fa-chevron-up" aria-hidden="true"></i>
</span>
</div>
<div class="col-sm-5 social-bottom">
<ul>
<li>
<a href="https://github.com/hfirdaus" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
</li>
<li>
<a href="https://linkedin.com/in/hadiyafirdaus" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</li>
<li>
<a href="mailto:contact@hadiyafirdaus.com"><i class="fa fa-envelope" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- End footer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/scripts.min.js"></script>
</body>
</html>