TrashCan - Gamified trashcans to save the world

Concept

Most educated people more or less know that recycling can slow down global warming; however, many of them do not care to do since they believe that their individual impact is insignificant. 

I would like to create a gamified trash can that reward people when they do more recycling than composting. 

Initial Plan - Need to be validated

1. Use HX711 Load Cell Amplifier and ADC module to measure weight.

2. Use 3D modeling, three.js, MongoDB, projection mapping to create a simple game that will be projected on the trash can or just a mobile app.

The game can be tamagotchi that features a little polar bear or something else.

Torn Between

In this October, Bitcoin's price is on fire. It increased $1,601 since Sep and $4,859 since the Sep of 2016. Despite of the overall rising trend, Bitcoin's price fluctuates a lot within each week, which makes buyers and sellers hard to decide when to exchange. The alternative of Bitcoin, Ethereum, fluctuates too but the overall price stays rather low. 

I created a torusKnot using Three.js to reflect the mood swing of buyers within recent weeks. The number of geometry winds of the torusKnot is proportional to the price change from within the week.  

Yayoi's Smashed Pumpkin

Back in February, 2017, a selfie-taker smashed Yayoi Kusama's high-priced pumpkin sculptures when her Infinity Mirrors was on view at the Smithsonian Institution's Hirshhorn Museum and Sculpture Garden. The accident was reported widely and referred as a damage of the art.

I find the fate of being damaged is meaningful. It is a performance art created by accident, leaving a shattered pumpkin that resonates with Yayoi's life and art style: speckled and fragmented madness.

To possibly extend the life of the smashed pumpkin(s) and the unintentional "performance art", I coded an interactive pumpkin(below) using p5.js. Whenever being clicked, the pumpkin will break into pieces and fade into the background eventually.

P5.js Sketch: FlipWord Logo

Background: I used p5.js to create a logo that I designed for my startup FlipWord. The logo is composed by two triangles with gradient colors.

Assumption: Use triangle( ) and fill( )

Reality: fill( ) only works for solid color // I might be wrong, but it didn't work for me.

Research for Solution: googled "gradient color, p5.js" and found lerpColor( ) and map( )

Initial Implementation: I created two functions with for loops inside to draw the gradient-colored triangles. In this initial implementation, I only used 1 gradient color.

Code Review: After completing the task, I asked an experienced software engineer for a code review. Based on his feedback, I made two changes: 1. renamed everything to increase the readability; 2. changed all of the "var" to "let" or "const", since "var" is not valid anymore in the newest JavaScript version (I also configured my WebStorm editor with JavaScript 6). He also suggested me to remove two of the variables I declared in the functions, since they are not used in anywhere else. I understand that it's removable, but I concerned that removing them will hurt the readability of the code. I plan to consult more people on this matter.

Final Version: Besides the two modifications, I also added another gradient color to the sketch. Github link

Solved Difficulties: 

1. Since the shape is a triangle, not a rectangle, it's not enough to only have 1 statement in the for loop inside the setGradient( ) function. I ended up using 3 statements for the bottom triangle.

2. The two triangles are not symmetric and are not facing the same angles. The first setGradient( ) function I created for the bottom triangle won't work for the top triangle. Therefore, I created another setGradient( ) function specific for the top triangle. Since the top triangle not only has a right angle but also stands upright, I only need to use 2 statements in the for loop this time.

3. The software engineer suggested me to make the code more concise by assigning the color value at the same line which the variables were declared, instead of inside the function setup( ), so I did...it turned out to be a mistake...Nothing would be drawn anymore. I spent tons of time debugging before knowing that it was actually caused by this change. 

Mystery: Even though the logo looks fine, but there might be something wrong with some of the coordinates or the for loops I wrote, because I had to use different values from the original design file. I still haven't figured it out why. 

Question: Is there an easier way to draw gradient colors using p5.js? I thought p5.js, as a library that is specifically developed for interactive design, should be much easier than CSS.

Experience with the Web Editor: I only used the p5.js web editor to complete the optional quizzes. I encountered delays, responsive issues, and usability issues, such as I cannot use shortcut to refresh the sketch if I made some changes in the code. Therefore, I'd like to continue using my WebStorm editor.

Thoughts in Computation and How it Applies to My Interests:

Knowing a foreign language, esp. English, once was considered as a golden skill in Asia for a long time until nowadays when everyone can speak some and there are tons of translation tools available at our fingertips. Although the value of being able to code is still at its peak, I tend to think its near future will fall into the same trajectory. The more I think of this, the more I feel urgent to learn, not just to learn how to code but also how to use the "superpower" to fulfill a meaningful pursuit. The direct application of computation will definitely be my startup project, which hopes to change the way people to learn things. I'm also excited to explore more applications, especially in the augmented reality field. I'm not sure what project I'd like to work on this term yet, but I hope it's something that I can combine the startup project with augmented reality.