Starting to code things was the scariest part. I always feel like I conceptually understand how my ideas can translate to code and algorithms, but I have a hard time feeling comfortable executing it. Breaking down my concept into tiny interactions really helped me move past this uncomfortable feeling.
I started by making my category buttons (overlaying a different image onto of an existing one) using preexisting DOM elements.
Next, I thought about rollovers. How can I make the sketch change with mouse position. I found it a bit intimidating to add to my sketch, so I took a step back and made generic rollovers based on stuff we had done in class.
Generic rollover 1: mouse changes the background to black or white based on x position.
Generic rollover 2: Making the computer aware that the mouse is positioned over the circle.
Adding the rollover concepts to my sketch. I created an invisible circle over the bowl in the drawing to create a boundary.
Mouse is aware of when it is positioned over the bowl.
Although I had successfully made the mouse aware of its position over the bowl, I wanted this to be category specific, i.e. have the console only print that the “mouse is over bowl” when it is in the artistic decisions category and no other time. I got a bit stuck with this, so I decided to try making my own buttons until inspiration struck.
Since I couldn’t figure out how to change the aesthetic of the DOM buttons, I created my own, using mousePressed().
To tackle the global rollover problem, I realized I needed to make the computer aware of what image it is effecting. I thought about using states. After each click, the computer is in a different state. Rollover should only be active when only in the correct state.
I was able to get the rollover to cause the text to appear, but it lingered. I wanted to have the text only display when the mouse is over a certain part. The rollover is symbolic in a sense. I want it to emulate that thoughts are fleeting. These snippets only happened in the moment and only because of the technology are we able to hold onto them. It takes away from this if the text persists.
To solve this issue, I had to create an initial state to be the default image (the drawing without color overlay) as well as a new function that I called reload(). This function refreshes the default image and buttons. This needs to occur over and over again in the draw function or the text will remain on the screen because it was only called once. An unintended and happy result is that the text looks much clearer too.
Link to sketch with all working parts thus far.
With all of these main interactions coded out, now it’s time to perfect it aesthetically and build it out!
There is so much more to be done on this project. The data presented is only a mere fraction of the information collected, and aesthetically, I have better ideas (make it bigger, text more readable, better colors, show video….I could go on forever). However, I really wanted to focus on functionality and get all the pieces up and running and working together. I used the principles of mouseOver and mouseClick functions as a basis for the UI. The exciting thing was learning how to take my vision and actually create it in code. Moving forward I hope to optimize the code, generalize it, and make the project scalable.