youngcode

This visualization is based on the data of another project I am currently working on independent of classes:

The DAQS system uses the existing bus network to provide mobile sensing over a repetitive and suitable route. Two types of air quality units are used: high-sensitivity units fitted with high-grade electrochemical sensors and low-cost units fitted with cheaper electrochemical sensors that have been used successfully in other studies for air quality monitoring. On selected routes, buses are fitted with high-sensitivity units and the bus stops on those routes are fitted with low-cost units. The bus stops provide the needed coverage and real time data for the system while the buses serve as a calibration reference each time they pass a bus-stop. This is because data from both sets of sensors are uploaded to a database in real time and the data is calibrated then processed before making the information available to end users. This achieves accuracies comparable to the more expensive sensor at the cost of the cheaper sensor. Therefore it becomes affordable to have a city well encompassed by air quality sensors, resulting in dramatically fewer coverage ‘dead-zones’ and a constant feed of information.

This data is provided to the Firebase database in real time using the json query method. I created an initial visualization using basic graphing techniques in p5.js without the use of any libraries as seen in previous project submissions. However, I believe this is not a satisfactory way to convey the information to a wide audience in an effective manner. This is because it is very hard to determine the quality of the air from the sketch as well as any technical information about each of the parameters being measured. My new attempt for this class makes use of the grafica.js library. With this library, I was able to make a much more clear and useful interpretation of the data. Now it is easy to read the values of each parameter, understand whether the reading means that parameter is affecting your health and lastly, information about the parameter itself. While I have set up the connection to the firebase data in the previous plotting program attempt, I decided not to port that across for this demonstration. This is because the sensors being used in the first prototype which supplied the data to firebase were having technical difficulties resulting in a lot of the readings being constant and therefore not interesting visually when plotted. Once I collect more data from the monitoring devices, I will port across the firebase data connection to this visualization.

I had substantial difficulty working with the grafica.js library because it was set up differently to functions I had created in the past. However, the process of understanding this was very useful to add another dimension to my p5.js capabilities and for future projects.

My future plan for this is to create a date and time slider to that the user can see past readings instead of just the most recent 100 hours. Also, I plan to have a second ‘snapshot’ page which provides a summary of the most recent air quality data so the user can see all at once, all of the air quality parameters they are breathing in at that point in time.

This is building on the previous assignment where a New York times API is being used to pull recent headlines. However, now the user can input their desired search term!

This creative piece reads in real time headline snippets from the New York times and displays them on a cycling feed. Now you can get a mini news broadcast for the places or things that matter to you, live to your device.

Added features to choose between parameters and live update. The program reads the last 500 data entries and displays them on the graph. The entries are air quality readings from an array of sensors.

This is a p5.js app which reads in data from my previous project DAQS. DAQS is an air quality monitoring device which remotely collects data from an array of sensors and uploads it in real time to Firebase. This is a current work in progress. I hope to develop it so it is formatted in a way that the information can be easily interpreted and manipulated and develop features so the user can pan in time and also select which device and which parameter to show.

Please note, the screen grab colors look weird. It is not like this in the actual app.

Stella Reimagined

I built upon the stella star piece I made previously. The reason why I chose to work with this piece is because I believe it is the most aesthetically pleasing piece I have so far. The star now rotates at a configurable speed in either direction to create an interesting optical illusion.

You get the best out of it by trying some really high speeds! It can look like it is travelling super fast and super slow at the same time.

Weew. Making lots of sounds. Type your message and watch it flow into the encyption 0f t#A aby4s5.

I put a lot of effort into making these letters come alive. Look at them pulse and breathe. But don’t type too quickly! The letters can only do so much!!

So many letters. When you press a key, a new one spawns of that letter and floats around!

Visualizing entropy!

This is how I feel about increasing disorder. While so chaotic, it is also very methodical and fluid. I was inspired by my freshmen physics classes...

This ball bounces around and makes a loud ‘boing’ each time it hits the wall. Some cool color stuff going on too!

New and Improved!

Based on creative code class feedback, this project has had some rejuvenation. The main improvements are in regards to the relationships with color, which are now more considered and appropriate, as opposed to just using the obvious and drastic schemes. The other key change is the incorporation of a ‘failure’ end state, which occurs if the character is neglected for too long. Hopefully you never have to see this screen.

Development of Eyes on Social Anxiety!

This was inspired as a way for people to relate to the feeling of social anxiety by making it tangibly visible.

The arrows are used as a proxy to symbolize all the attention being on a character who has no control over it.

Initially (as seen above), the interaction involved using the left mouse click to divert the attention (arrows) away. The problem with this is where the initial difficulty arose. While there was interaction, there was only a very brief case to stay engaged, then it becomes repetitive. I then investigated further to see how the interaction could progress across time. This was achieved by integrating a new variable, to signify the level of chaos. This way, the anxiety the character feels can gradually shift across time instead of just being in two states.

Another major difficulty came from un-personifying the character. We were challenged to not use to obvious displays of emotion, such as a face, which is what I initially had coded. I then started again and resembled the level of chaos in the form of chaotic motion, as seen in the final version.

Eyes on Social Anxiety!

So many gazing eyes, so little time.

Make a safe space by sheltering the chaos.

Recreating this famous work with a couple of loops and angles.

Original here.

Transitioning from Processing to p5.js