Wk 14: 4/21 – 4/28

Crazy to think it’s the last 2 weeks before we have to present our thesis! Time is even wonkier during quarantine.

Here are the goals for this week are: a.) finish the d3.js map of the e-waste drop off sites, b.) finish up content for the discarding site, c.) make a 3d or cardboard mockup of 2nd interaction, d.) document + work on presentation

There’s just so much more I had hoped to add for this project. I know I won’t be able to finish everything I was aiming for in time. I also don’t have it in me to pull all nighters/crazy work schedules during this pandemic that has taught me it’s not worth planning/stressing because life will do what it wants anyways….and there are too many things beyond our control. The best I can do is just treat these thesis deadlines as check-in points to a project with a longer timeline.

a.) d3.js map of e-waste drop off sites

First, I downloaded the CSV file of all the NY e-waste drop off sites from NYC Open Data. I cleaned up the data in google sheets and downloaded the CSV file again. Then I found online NY json map files and programmed the map so that each of the different drop off sites is a different color.

Some of the code was based on the Data + Publics example code, which can be seen: here.

Got the d3js map to work and it’s now integrated in the rest of the website.

b.) finish up content for the discarding site

Not all the content is included in there and there are so many processes steps I was hoping to add. I managed to make minor tweaks at least. The plus button toggles the content on and off now.

c.) make cardboard prototype for the 2nd kiosk

I’ve been putting this off for the longest time because I’ve just been unmotivated to do a cardboard version of this kiosk that was intended to be made out of wood+pegboard. But it needed to be done in some form, either with Rhino or with cardboard.

d.) Documentation

Documented, but I didn’t document me documenting…that would be too much I feel lol. There is more to do, but it was good to start. I always underestimate how long it takes to prep and practice a presentation.

Keeping it brief this week on the blog…just because there are so many loose ends to tie up.

Reference for Arduino to Raspberry Pi Communication:

Reference for d3js maps:

Wk 13: 4/14-4/21

This was another week focused on coding which turned out to be a delightful break from worrying about the unpredictable, economically uncertain future! For some reason, coding/designing is not an exhausting activity to do….but other things are? Why is this? Is this because coding/designing was already a screen-based activity? Anyways, the goal for this week was to get a decent website up for the disposal supply chain content. Second goal was to continue coding a website for the project itself.

Made progress on the: a.) disposal supply chain website, b.) flush out project website

a.) Disposal supply chain website

Kept designing the pages. The design was based on my original UX sketches. The content had already been written since February, which now feels like lifetimes ago.

Played around with svgs based on the udemy tutorial I’ve been watching.

a.) Codepen example of a svg animation test: here
b.) Another codepen example based on the tutorials (this one has more animation properties): here

b.) Website for project itself.

First did a rough design of the website. I decided to just make it a long scrolling website so people don’t have to click in and out too much. I felt much better after making this website just because I have a couple different pieces to this thesis. It really helps to house it somewhere in an organized way.


References:

Reference for are.na api plugin – for bibliography:

Reference for scss:

Reference for family tree using d3js:

References (general):

Wk 12: 4/7-4/14

Updates this week: a.) Spray painted the sides! , b.) animate the exploded laptop intro animation for the cooling system, c.) design and code the project documentation site, d.) start on discarding website

a.) Spray painted the sides!

Wow, spray painting indoors is quite a lengthy process that requires a lot of moving furniture around, setting up, and cleaning up. Thank goodness this is water based spray paint so the smell wasn’t too awful or toxic. Spray painting the sides does add a very nice touch to the kiosk though!

b.) animate the exploded laptop intro animation for the cooling system

Some people at the Q+D Show also mentioned that it would be helpful to have a diagram of where the cooling system belongs in the laptop. So I animated the cooling system coming out of the laptop. Also up on the website which can be seen: here

c.) design and code the project documentation site

Coded and designed a very basic website to help communicate what this project is all about. This was actually so soothing and helpful to do; it was a great way for me to understand everything I’ve done for thesis and what’s left to do. There are still some missing documentation videos and images but the basic format is there.

Put it on my server and can be viewed: here

d.) start on discarding website

I revisited the design I had done for this back in February and updated it to better match the current design. I started coding it but ran into issues with trying to get the screen to move around based on the clicks. Nonetheless, I got the structure of the site going and booked Code Lab hours with Vince for help. Also put on my server: here


Code references for web animations using lottie:

Code references for zooming in on click:

Code references for flow charts:

Code references for svg

Thank you!!!

Biggest thank you to Vince Ming Pu Shao for helping me better understand how to pan across the screen when clicking on an svg. Amazing! He also provided the most helpful example code example regarding this: here

Wk 11: 4/1-4/7

Overall goal: need to get better at focusing when working at home.

Some updates: a.) make aluminum animation, b.) assemble component box’s graphics, c.) exploded view animation, d.) assemble RFID reader to kiosk, e.) integrate animation to website, f.) Q+D (Quick and Dirty) show, g.) code tweaks after Q+D show

a.) make aluminum animation

I followed the same steps as I did for the copper animation. This time it went by faster. First, I researched and wrote a script. Then I storyboarded my animation based on the script. Next, I illustrated the storyboard in Illustrator. I voice recorded myself narrating the script. I put it all together and added animated it in After Effects.

Thanks to Sarah’s helpful suggestion, I tried to add some more pauses and humor.

b.) assemble component box’s graphics

In order for the RFID tag to be read when the box is put into the scanning slot, I needed to make some graphics that indicated which side is in. The vinyl graphics came. Unfortunately, I couldn’t find an environmentally friendly, online vinyl printing company that also delivered. So I would say this part is not a shining moment/ something I am proud of.

c.) exploded view animation

Many people have suggested that I have an intro animation that shows where each component lives inside the laptop. Since a lot of these components look foreign to people, it is important to make it clear that it belongs in a laptop.

d.) assemble RFID reader to kiosk

So far, I have been treating the RFID reader and tag separately from the kiosk. But I finally integrated the two. What that entails is putting the RFID reader into the scanner slot and having the Arduino attached and placed in a safe spot inside the kiosk.

e.) integrate animation to website

I added the animation into the website and coded a custom progress bar and playhead for it. Finally finished coding the “Finished” page too.

f.) Q+D (Quick and Dirty) show

For the Q+D Show, I made a small presentation (based on the midterm presentations) for helping me explain to testers. Since I couldn’t have people try out the full kiosk interactive, I shared with them the website that appears when the Cooling System component is scanned. Overall, it was extremely helpful to user test! The feedback I received was so helpful and I’m beyond grateful for everyone’s smart advice.

Some key points were: a.) better explain what is being scanned and how it is being scanned, b.) include a photographic representation of the object for the web vs, c.) small UI tweaks to make it easier to navigate through the website, d.) make a web version of the interaction so that this website can be used in classrooms and for anyone online.

More feedback notes: here

Wk 10: 3/24-3/31

Latest game plan: Keep going as though I will be showing it at Sims by the end of summer or whenever the Coronavirus storm blows over. Get the website part ready for user testing. Build some mockup form of the 2nd kiosk with the ideal interaction. If there is a little time, build an index/ bibliography/ resource website for the diagrams made and references used.

Some updates: a.) Animation for how copper is made, b.) Diagram the full elements in a chrome book, c.) Fabricate the box for the component and RFID reader, d.) Integrate physical computing elements with the fabricated kiosk, e.) Print graphics for kiosk

a.) Animation for how copper is made: wow, this took quite a while to put together. The longest part was researching and figuring out what parts of the process I should include. There are really so many intricate steps to how copper is mined and manufactured. Not only steps, but also many different types. The animation I ended up making is only one way to mine + manufacture copper.

First was researching and writing a script.

Next was storyboarding the script.

Then I drew the animation scenes in Illustrator.

I also recorded myself narrating the script, then I used After Effects to animate the storyboard.

Latest video render: https://youtu.be/_tZeJJnpP0Q

Helpful feedback from Sarah: more pauses between the steps, too fast, add some questions (maybe even a slide with black text), add sound design, more relatable references to make it feel less textbook-like.


b.) Diagram the full elements in a chrome book. From the cooling system research, I realized it took me a long time to figure out what elements made up the cooling system. It took forever because I was reading many different sources and unsure of which source to “believe” or go with. It’s hard for a non-expert to tell what is right/wrong information on the net. So, I asked my partner Kasra, who is a material scientist, to help with diagramming and fact checking what elements go into the Chromebook. This process is definitely more accurate and well-researched then if I were to do it myself. So biggest thank you to Kasra, who is the always the best research scientist to collaborate with 🙂


c.) Fabricate the box for the component and RFID reader

I didn’t fabricate the boxes that the components are on…should’ve done it before the shop and school closed. I ended up making the boxes at home. It worked out though it is a a bit harder to fabricate in my apartment. Thank you Professor Ben Light for letting me borrow the shops’ clamps and some tools-promise to return.

d.) Integrate physical computing elements with the fabricated kiosk

In order to sync up all the physical computing elements with the kiosk, I needed to drill holes for the screen’s cables to be passed through. I also needed to drill holes in the frame for the wires of the RFID reader to be passed through. I also had to test the old touch screen and the code worked with the school’s Windows laptop to double check it worked.

d.) Design and print the vinyl

Designed a few graphics then printed it out to see what would be the best version.


Notes for self:

Steps for RFID Reader setup:

  • Run Arduino code
  • open p5 serial port. make sure correct port is selected. test console log works.
  • open website code with serial port script.

Resources:

Wk 8 + 9: 3/12-3/24

The past 2 weeks were slow on account of the COVID-19 adjustments and spring break. I took a mental break and allowed myself to be a slug for a week. Eventually, I got around to being more lighthearted-it doesn’t feel good to be anxious all the time (though sometimes it can’t be helped). Some minor steps I managed to make: a.) progress on the web development for the cooling system, b.) storyboard for the copper animation, and c.) develop a new game plan for the 2nd kiosk, d.) email all the places I was planning to user test at.

a.) Progress on the web development for the cooling system

The HTML, CSS and JS for the Cooling System is almost complete. The only part missing is the click through steps for the elements.

Code is here.

b.) Storyboard the steps and animation for mining and manufacturing copper

The research and content development for this one copper animation took a long time. It took multiple references and multiple watches of the same documentary video for me to understand the gist of how copper mining and manufacturing works. Part of the reason it takes so long is because each source explains different techniques – it reminds me that there are really so many ways and steps involved with this. The steps I am describing are just a simplified depiction of what is a very complex procedure.

Anyways, I first wrote a script and was sure to write all the sources. Based on the script and diagrams from the sources I started storyboarding the animation.

script

After storyboarding the animation, I realized that there were too many steps and that it would be a very long animation. The easier and more sensible approach is to do a click through for each step on the website. The steps will still animate but it won’t be a full blown 5 min animation that it would’ve been if it were all combined.

c.) Develop a new game plan for the 2nd kiosk

The new game plan is to just do the 2nd kiosk in cardboard. Professor Ben was extremely helpful to talk to about how I can readjust my fabrication plan. He suggested I build it out in cardboard with all the physical computing elements in place. For the screen, I will just be using a table for it to sit on and build the cardboard structure around it.

d.) Email all the places I was planning to user test at

I’ve been still emailing with the people at Sims Center, Dibner Library and Beam Center about showing the piece at their place. They have all been so understanding. The new schedule is just to keep in touch and show it once this virus storm is gone. No one knows when that will be, but praying that situation improves for everyone soon.

Thank you!!!

Many thanks to Professor Ben Light for helping me come up with a decent game plan for the 2nd kiosk and for lending me shop tools. So helpful! I also promise to bring it all back.

Wk 7: 3/4 -3/11

Updates for this week: a.) Finish the ‘Making’ kiosk!, b.) Watch +2 thesis presentations, c.) Make midterm presentations, d.) Update rfid tag code, e.) Be upset…then recalibrate plan based on COVID-19/remote school

a.) Finish the ‘Making’ kiosk!

Fabrication-wise, this week has been about finally finishing up the first kiosk. All that was left was building the top frame to house both the scanning slot and the screen. This isn’t as easy as it sounds. Nonetheless it is done! There is some sanding and painting left but I think I should leave that for later, especially now that there’s a rush to work remote.

b.) Watch +2 thesis presentations

I chose to watch the thesis presentations of Jasmine Soltani, Aaron Parsekian, and Mathura Govindarajan mostly because their topics are similar to the work I am doing and plan to continue doing. I especially wanted to watch Jasmine’s because I have been emailing/talking with her throughout my research process and she has been incredibly helpful in providing references. Before this COVID-19, we (ITP Trash) were even trying to get her and Aaron to lead a teardown on our floor.

Jasmine Soltani

Jasmine’s thesis video

Notes:

  • Embodied energy of electronics: mining of raw material, manufacturing, transportation, retails; Embodied energy refers to energy consumed at all these phases. 
  • She set out to create a tool to easily compare embodied energy of electronic components
  • Need to personally look into “Greener guide”
  • Thinking about obsolete objects

Biggest Takeaways:

  • While I knew that Jasmine’s thesis was about e-waste, this was the first time I watched her thesis talk. It proved to be extremely helpful. I enjoy the fact that are outputs are so different yet our concerns are very similar.
  • I loved that she also talked about the issue and research itself. It wasn’t just about her project but also about the research she had done. It was fabulous because it felt like a lecture on the embodied energy and life cycle in electronics. Unfortunate it was only 10 minutes because I’m sure she could’ve talked more about her research.
  • She mentions ITP Power. Note to self: mention ITP Trash team in thank you slide!

Aaron Parsekian

Aaron’s thesis video

Notes:

  • Personal challenge: do something high tech using nothing but trash
  • Environmental impact of technology → cynical
  • High tech equipment is a blessing → but can we do without? 
  • Only used easily obtained recycled materials
  • Return to fundamentals of tech → focus on materials 
  • How it is eco-friendly → environmental impact

Biggest Takeaways:

  • The choice of materials and minerals is so important. This is a helpful note.
  • Being aware of how to not be wasteful is a key part of his thesis
  • It is important to mention the environmental impact that all our physical creations have

Mathura M Govindarajan

Mathura’s thesis video

Notes:

  • Like that she notes how electronics engineering is extremely interesting but acknowledges that it is also unapproachable, especially for kids
  • Nice line! – “Kindle the same curiosity of electronics as opening a Christmas gift”
  • She is very clear about who it is for and her process
  • Walks through a.)metrics she had, b.)audience, c.) research/inspiration, d.) storyboard, e.) feedback 
  • 1st user testing at NY Hall of Science
    • It was very great that she included actual quotes from the kids she user tested from
  • Created a super demo video of the book and how to interact with it→ amazing! 
  • 2nd user testing
    • Good that people didn’t use it the way she expected. She framed this unpredictable behavior in a positive light
  • Mentions the 2nd version of the book she wants to make. Wonderful looking forward idea. It is specific enough of a future plan that I really think she will make it.

c.) Make Midterm Presentations

Creating a coherent midterm presentation actually took more time than expected but also proved to be very helpful. It was a good exercise in trying to synthesize all the work that has been done and to frame it in the bigger picture of my life/body of work.

Midterm presentation slides are here

d.) Update the code for the RFID Tag

It’s been a while since I touched the code for the RFID tag. I also needed to see if the RFID would still scan if there was pegboard and wood covering it. Turns out it still does read very well even with a bunch of pegboard covering it.

Updated code for that is here

e.) Be Sad + Recalibrate

Being sad is actually a super necessary step to moving forward. I’m just upset at a lot of things… I’m upset at how COVID-19 is effecting the feasibility of thesis. I’m upset that I spent a lot of tuition money and will have students loans for a program that is now online. I’m upset at how our government has been handling this pandemic. I’m upset that in a time like this our government has hesitated/doesn’t know how to provide free testing. I’m upset at how democratic primaries are going. I’m upset that the one candidate who would fight and has fought for universal healthcare is being outvoted somehow. I’m upset that people in certain professions are putting themselves in danger. I’m upset that people in certain professions will not be able to work but financially need to. I’m upset so many people have already passed because of this. I’m upset because this epidemic reminds me of a small scale version of what’ll happen when the climate crisis is so bad that there’s really no point in anything. I’m upset at the state of the world and the many stupid things we do, including myself (but not at the enormous scale that governments and corporations operate at), for the sake of convenience and greed. 

(I’ve also started reading ‘The Uninhabitable Earth’ this week so I might be spiraling.)

Despite it all, I feel grateful for my specific situation and for the fact that my family is relatively healthy.

In terms of recalibration, I’ve brought the one kiosk that is done home. Other than that, idk exactly what I’ll do about anything.