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:

• https://aescripts.com/bodymovin/
• http://airbnb.io/lottie/#/web
• https://medium.muz.li/a-guide-to-lottie-framework-5-steps-to-create-an-animation-6ccc446d7b13

Code references for zooming in on click:

• https://css-tricks.com/best-way-programmatically-zoom-web-application/
• https://www.geeksforgeeks.org/how-to-zoom-in-and-zoom-out-image-using-javascript/
• https://stackoverflow.com/questions/21479102/how-to-add-zoom-in-out-on-click-to-all-img-html-tags/21479616

Code references for flow charts:

• https://codepen.io/siiron/pen/aLkdE
• https://codepen.io/Mestika/pen/PwVROV
• https://freefrontend.com/css-flowcharts/
• https://codepen.io/sdras/pen/VjvGJM

Code references for svg

• https://css-tricks.com/using-svg/
• https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
• https://petercollingridge.appspot.com/svg-optimiser

—

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