Project #1 Lost and Found

Description

This project was about describing something that we lost. We had to share in detail the lost object to one of our classmates so they could reproduce it digitally for us to be able to “find it again”. Sarah Nichols shared with me the description of a mouse. It was a gift from her boyfriend when she started 3D modeling. It’s was a black gaming mouse. The mouse was round, and the palm rest was high and spherical so that her hand could rest on it with her fingers angled downwards. The front of the mouse was divided into two (right-click, left-click) with a scroll wheel in the middle. The scroll wheel had ridges for traction and was located between the mouse buttons, about ¾ of the way down from the center of the mouse. Half of it was sticking up from the mouse and the rest of it is inside the mouse. The front of the mouse was angled down and is flat. The back of the mouse was rounded. The sides of the mouse were flat and slightly indented so she could rest her thumb on the sides.

Design Process

Using 2D primitive shapes, I sketched the mouse on paper based on Sarah’s description. Then, I thought about how I was going to organize the drawing in code, what shapes should I draw before others, how I was going to include the required functions for this project into my drawing, and what and how I could integrate other functions. I created the mouse using p5.js. First, I set the canvas size, then the background color, then I wrote the titles of each part of the process of my drawing. (Mouse location and colors, Mouse wheels, buttons, and Text).

Using the function Push and Translate, I set the location of the mouse in the canvas. Since the canvas size is 400 by 400, translate was set in 200 by 200 to center the mouse. The first part of the mouse is a dark gray square with rounded corners, and the top corners are wider than the ones at the bottom, on top of the square is a circle that represents the sphere of the mouse, and on top of the sphere, I drew a rectangle and lines to create the wheel and the buttons of the mouse. Since Sarah’s mouse was black, I used white stroke for the shapes and lines, and two dark tones, black and dark gray to fill the shapes. Once I finished the mouse I closed the drawing with the Pop function.

I added and centered the text using mathematical formulas, I thought it was an easier way to center text. Regarding the blend mode, I played with it, trying to see the different options that this function offers, as well the different results that this function has based on its location in the code. I decided to use “Difference” and setting it right after the canvas, so it could affect the background color and the drawing colors.

Finally, I found a function called mouseX and mouseY that I found interesting, especially since while looking for something that can make my mouse more appealing and fun, I found the mouse function. I learned that before writing on any function I could set the value for “a” and “b”, and then “a” and “b” in the setup function could become mouseX and mouseY, to finally add on the background-color the values of mouseX and mouseY. This means that every time that I move the mouse on top of my canvas the background color will change, and since blend mode affects the background-color and the colors of my drawing, this will affect the entire drawing and canvas.

Reflection

On p5.js coding turned into a game, a game that requires organization and exploration to see the different results of the drawing. It helped me a lot to organize my drawing in code, to think about what code I needed, and how and where I need to locate that code to have the results I wanted. Overall I feel my design skills felt a little limited in terms of creating shappings, but on the other hand, I really enjoy being able to play with color based on the mouse movement, the playful outcome that I can have with code is unique.