Skip to content
Snippets Groups Projects
Commit 75277fb6 authored by esomo22e's avatar esomo22e
Browse files

push week 12

parent f1b8c6ea
No related branches found
No related tags found
No related merge requests found
Pipeline #
Hide whitespace changes
Inline Side-by-side
assignments/week12.html
+ 156
− 41
View file @ 75277fb6
......@@ -68,59 +68,174 @@
<div class="col-xl-10">
<div class="content-column-content">
<h1>Skin Electronics</h1>
<p class="lead">For week 12, we explored the possibility of skin electronics. Skin-like electronics that can adhere seamlessly to human skin or within the body,
<p class="lead">For week 12, we explored the possibility of skin electronics. Skin-like electronics that can adhere seamlessly to human skin or within the body,
which are highly desirable for various functions and applications. I chose to do a project which focuses on nail art and the application you can utilize with integrating technologies
with your nails.</p>
<h3>Documentation Website</h3>
<p>For my website, I used template created by bootstrapious called <a href = "https://bootstrapious.com/p/creative-portfolio">Creative Portfolio</a> and uploaded my folder that I created from my portfolio into gitlab. I wanted to turn my website into a seemless
website created with HTML because I have more experience working with HTML than Markdown and I would know how to create a more seamless and enganging website for Fabricademy.</p>
<div class = "research_container">
<h2>Research</h2>
<p>Doing research on this assignment, I looked at different people who worked on nail art such as <a href = "https://dl.acm.org/citation.cfm?id=2702123.2702572">Kao, Hsin-Liu Cindy</a> and
<a href = "https://cargocollective.com/futureofwearableservices">Sensor Salon</a> and wanted to pursue my own form of nail electronics</p>
<h5>New Fabricademy Website</h5>
<div class = "web_container">
<div class = "web_image">
<div class="img_item"><img src="../img/week_1/creativeportfolio.PNG" alt="" class="img-fluid"></div>
<figcaption class="cap">Creative Portfolio</figcaption>
</div>
<div class = "web_image">
<div class="img_item"><img src="../img/week_1/newfabricademypage.PNG" alt="" class="img-fluid"></div>
<figcaption class = "cap">New Fabricademy Website</figcaption>
<p>I initially wanted to create <a href = "">Nail RFID stickers</a> but didn't have access to an RFID reader so inspired by SensorSalon and the work of Hsin-Liu Cindy Kao,
I decided to create a nail sensor.</p>
<div class="print_img_container">
<!-- <div class="img_des">
<img src="../img/week_3/ankara_print_2.jpeg" alt="ankara print 2" class = "print_des">
<figcaption class="cap">Circular Print ankara print.</figcaption>
</div>
<div class="img_des">
<img src="../img/week_3/fabric-patterns-guerrilla.jpg" alt="ankara print 2" class = "print_des">
<figcaption class="cap">Tessalation Print</figcaption>
</div> -->
</div>
</div>
<h3>GitLab and Command Line</h3>
<p>For Gitlab, rather than individually changing each element within the Gitlab page, I decided to use git to connect my command line and gitlab with positivie results. I used videos and documentation to learn how to connect Gitlab
and my Command Line like I do with Github. It made it easier to edit pages and to organize what I wanted to do for each assignment. Furthermore, I can work on my editor Atom which allows me to see my mistakes easier.</p>
<div container = "mat_container">
<h2>Materials</h2>
<ul>
<li>Acrylic Nails</li>
<li>Nail Polish</li>
<li>Bare Conductive Paint</li>
<li>LEDs</li>
<li>Conductive Fabric</li>
<li>Velostat</li>
<li>Arduino</li>
<li>Wires</li>
<li>Alligator Clips</li>
<li>Acrylic Nail Glue</li>
<li>Breadboard</li>
</ul>
</div>
<div class = "editor_image">
<div class="img_item"><img src="../img/week_1/editor.PNG" alt="" class="img-fluid"></div>
<figcaption class = "cap">Atom Editor</figcaption>
</div>
<div container = "proc_container">
<h2>Procedures</h2>
<div class = "proc_vel">
<div class = "editor_container">
<div class = "web_image">
<div class="img_item"><img src="../img/week_1/commandline.PNG" alt="" class="img-fluid"></div>
<figcaption class = "cap">Command Line on my PC</figcaption>
</div>
<div class = "web_image">
<div class="edit_item"><img src="../img/week_1/gitlab.PNG" alt="" class="img-fluid"></div>
<figcaption class = "cap">Gitlab</figcaption>
</div>
<h4>Velostat + Fabric Pressure Sensor</h4>
<p>Velostat is conductive and pressure sensitive and it will allow you to make a good pressure sensor nail sticker.</p>
<ol>
<li>I gathered all my materials.</li>
<li>Cut (you can also use a Vinyl Cutter) the Velostat and Conductive Fabric</li>
<li>Use acrylic Nail Glue to connect the velostat and conductive Fabric</li>
<li>Make sure all the pieces are connected thoroughly.</li>
<li>Then connect the velostat to the acrylic nail.</li>
<li>Connect the led to velostat and squeeze. You will see it glow.</li>
</ol>
</div>
<div class = "proc_paint">
<h4>Conductive Paint + Nail Polish Distance Sensor</h4>
<p>Bare Conductive Paint is a multipurpose electrically conductive material perfect for all of your DIY projects. It allowed
me to be flexible and develop simple designs on nails and still is conductive when covered over nail art. I think if I was
more talented nail artist, I probably could create engaging designs.</p>
<div class = "sen_nail">
<h5>Create Sensor Nail</h5>
<ol>
<li>Gather your materials materials.</li>
<li>Paint the nail with conductive paint.</li>
<li>Wait for the conductive paint to dry.</li>
<li>Paint a wire to the conductive paint and wait for it to dry.</li>
<li>Paint over with nail polish and wait for it to dry.</li>
<li>Connect the wire to an alligator clip which will connect to the breadboard of the arduino.</li>
</ol>
</div>
<div class = "led_nail">
<h5>Create LED Nail</h5>
<ol>
<li>Paint the acrylic nail and create positive and negative branch.</li>
<li>I connected it with alligator clips but you can also paint a wire to the nails.</li>
<li>Connect the alligator clips to the breadboard.</li>
<li>Develop a program in Arduino that allows the LED to light up depending on the distance of the sensor.</li>
</ol>
</div>
</div>
</div>
<div class = "code_container">
<h4>Code Example</h4>
<p>Here is the code for the distance sensor. It kind of worked but it wasn't always easy.</p>
<pre><code>
#include <CapacitiveSensor.h>
/*
* CapitiveSense Library Demo Sketch
* Paul Badger 2008
* Uses a high value resistor e.g. 10M between send pin and receive pin
* Resistor effects sensitivity, experiment with values, 50K - 50M. Larger resistor values yield larger sensor values.
* Receive pin is the sensor pin - try different amounts of foil/metal on this pin
*/
CapacitiveSensor cs_4_2 = CapacitiveSensor(4,2); // 10M resistor between pins 4 & 2, pin 2 is sensor pin, add a wire and or foil if desired
CapacitiveSensor cs_4_6 = CapacitiveSensor(4,6); // 10M resistor between pins 4 & 6, pin 6 is sensor pin, add a wire and or foil
CapacitiveSensor cs_4_8 = CapacitiveSensor(4,8); // 10M resistor between pins 4 & 8, pin 8 is sensor pin, add a wire and or foil
void setup()
{
cs_4_2.set_CS_AutocaL_Millis(0xFFFFFFFF); // turn off autocalibrate on channel 1 - just as an example
pinMode(13, OUTPUT);
Serial.begin(9600);
}
void loop()
{
long start = millis();
long total1 = cs_4_2.capacitiveSensor(10);
long total2 = cs_4_6.capacitiveSensor(10);
long total3 = cs_4_8.capacitiveSensor(10);
Serial.print(millis() - start); // check on performance in milliseconds
Serial.print("\t"); // tab character for debug windown spacing
Serial.print(total1); // print sensor output 1
Serial.print("\t");
Serial.print(total2); // print sensor output 2
Serial.print("\t");
Serial.println(total3); // print sensor output 3
if(total2 > 5){
digitalWrite(13, HIGH);
delay(1000);
}
else{
digitalWrite(13, LOW);
delay(1000);
}
delay(5); // arbitrary delay to limit data to serial port
}
</code></pre>
</div>
<div class = "test_container">
<p>A lot of testing with paper before I painted the nails.</p>
</div>
<div class = "result_container">
<p>The Results were mixed but I think there were a positive start.
Velostat worked okay to one day make a sticker but I think there
would be a better way to create a conductive sticker for nails.</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ry1wSHlD53E" frameborder="0" allow="accelerometer;
autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p>The conductive paint in my opinion worked really well and the distance sensor mostlyy worked and it was a fun way to
create a nail sensor.</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/v9YHL-5Skug" frameborder="0" allow="accelerometer; autoplay;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<h5>GitLab CE Tutorial #3 - SSH Key Setup & Pushing Our First Project</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/0z28J0RfaJM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h3>Goals for Final Project</h3>
<p>For my Final Project, my goal is to integrate data visualization and fabrication. The goal is to create a bodysuit that allows to show data visualization in either real time or over a static seet of time.</p>
<h3>References</h3>
<p>Here are my references for my final project:</p>
<ul>
<li><a href="https://medium.com/@giorgialupi/data-items-exploring-the-power-and-depth-of-soft-data-for-the-museum-of-modern-art-e5f40a82943">Giorgia Lupi- Exploring the Power and Depth of Soft Data for the Museum of Modern Art</a></li>
<li><a href="http://dataphys.org/list/x-pose-a-wearable-dynamic-data-sculpture/">x.pose</a></li>
<li><a href="http://dataphys.org/list/data-clothing-dresses-show-air-pollution/">2014 – Data Clothing: Dresses Show Air Pollution </a></li>
</ul>
<!-- <div id="main-slider" class="owl-carousel owl-theme">
<div class="item"><img src="../img/slider/3.jpg" alt="" class="img-fluid"></div>
<div class="item"><img src="../img/slider/2.jpg" alt="" class="img-fluid"></div>
......@@ -158,4 +273,4 @@
<script src="../vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="../vendor/masonry-layout/masonry.pkgd.min.js"></script>
<script src="../js/front.js"></script>
</body>
\ No newline at end of file
</body>
assignments/week3.html
+ 2
− 2
View file @ 75277fb6
......@@ -73,7 +73,7 @@
<div id="main-slider" class="owl-carousel owl-theme">
<!-- <div class="item"><img src="../img/week_2/sticker.jpg" alt="" class="img-slider"></div> -->
<div class="item"><img src="../img/week_3/photo_3-2.jpg" alt="" class="img-slider"></div>
<div class="item"><img src="../img/week_3/photo_17.jpg"" alt="" class="img-slider"></div>
<div class="item"><img src="../img/week_3/photo_17.jpg" alt="" class="img-slider"></div>
<div class="item"><img src="../img/week_3/photo_12.jpg" alt="" class="img-slider"></div>
<!-- <div class="item"><img src="../img/week_2/acrylicbody_edited.jpg" alt="" class="img-slider"></div> -->
</div>
......@@ -126,7 +126,7 @@
</ol>
</div>
<div class = "proc_human">
<h4>Execution pf the design</h4>
<h4>Execution of the design</h4>
<ol>
<li>I cut out my initial design with the Trotec Laser Cutter. It connected on paper but not with the neoperene.</li>
<li>So, I designed a connector design with Adobe Illustrator.</li>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment