Creative Coding &
Fabrication
Weather in a Jar
The goal of this project was to build a unique connection between a person and a city in real time disregarding the limitation of space.
ELEMENTS
Javascript | Pepper's Ghost Effect |
Open API Data | Digital Painting |
Acrylic | Mason Jar Cap
TOOLS
P5.js | JSON Data | Procreate
Laser Cutter | Ipad/Apple Pencil
Overview
Weather in a Jar is a 3-week expansion of one of my coding practice. This project contains two part: programming & fabrication.
How it Works
The interaction of this project was based on P5.js. To save some time, I used the html5 on a smartphone instead of a digital screen as the image source. (Which made my project very expensive, lol).
In a further development, a digital screen connected to an App could be used to replace the smartphone. Therefore, for the final result, users will be able to control the display wirelessly.
Test the code on the web here.
Process
Planning of Gains
Since this is not a user-oriented project, the concentration of this project was to have fun and learn as much as I could. Before I start on this project, I made a study plan to set up goals on thing I want to explore.
1. Use of Pepper's Ghost Effect
Inspired by Jiwon Shin and Becca Moore's & Chunhan Chen and Emily Lin's midterm – Halloween Theme Physical Computing projects. I gained my interest in Pepper's Ghost Effect. I wanted to explore a different use for the pepper's ghost effect (other than the hunted house or ghost theme), and my Intro to Computation Media Final offered me a great chance to practice this idea.
2. Improve my Coding Skills on (javascript)
a. The use of objects, arrays, function & class.
b. Make my code clean & easy to understand.
c. Try to better understand the particle system.
d. Use proper variables to make the system adjustable.
3. Make realistic style weather effect
a. Reference Daniel Shiffman's <The Nature of Code>.
b. Combine coding with my illustrations.
Design
Storm Glass inspired me with the concept to put the weather into a bottle. I wanted to play with this idea and combine it with P5.js to make practice on my skills.
Instead of using chemicals to simulate the real-time weather in the nearby location. I used a free open API from OpenWeather.
I developed the first generation of the project while I was learning JSON. I used weather icons to represent weather statues.
You can try the first prototype here
I also add a sine wave movement to visualize the speed of the winds.
Evolve
Based on my previous project, I made some modification on the visual design. Also, It was necessary to set the background into black, in order to support pepper's ghost effect.
Through the project development process, something I left behind was:
1. Design a user interaction with user flow
2. Design the UI of the interaction
Just because I’ve been so busy dealing with things inside/outside school, although I felt beautiful UI/UX would be an add-on to my portfolio, those skills has been living in my comfort zone for too long which will eventually take away too much of my time and distract me from the skills that I truly need to gain.
Therefore, My plan was to focus on anything but UI/UX design. So my project ends up with very simple interactions and ugly interface(temporarily). But I would probably keep working on this during the winter since I really had fun working on this topic.
Code
Something I learned from this project was:
“The more we learn, the more creativity we could be.”
Learning to code really affect the way I thought about product design. Therefore, I definitely need to work harder in the future to become a better programmer in order to make myself a better designer. (Yet, I insist that programming will never be my career goal! )
The process of project development has been the journey of seeing any possible on coding. Special thanks to Dan O'Sullivan(my instructor), Dominic Barrett(ITP resident), Qice Sun, Yuguang Zhang to help me with many difficulties that I faced. Also, Thanks to Daniel Shiffman's tutorials which offered me a joyful learning experience.
Yuguang helped me to implement my attemptation into the code that works, and I made my design on top of this contribution. Solved my problem under 30 mins! He's amazing!
One of my side challenges was to tidy up my code, and make it more flexible (more variables), easier to navigate, and categorize functions into different files.
So I wrote each weather effect into functions and call them based on if statement navigating the API.
I spent a good amount of time writing each function to make sure they work but faced many difficulties putting them together, that taught me lots of debugging skill, especially to use print() to figure out where the bug came from.
I referenced shtrom’s rain effect for the rain, but just try to learn how it worked and get it to work as the way I wanted was also time-consuming.
I also tried to reference Nacho’s snow effect, but I became a little confused through the process, and end up using Chunhan’s snow effect as a reference.
Different weather effect
Fabrication
Special thanks to Ben Light– his intro to fabrication class allows me to gain the skills to make a decent weather jar.
