The original plan was to make a visualization of mathematical equation. If you are familiar with Maya there is phong function. The function that changes the surface of the object in 3D. However, the Phong is named after a mathematician whose name is Phong. So, what we see on the screen is often from the mathematical equation done by some mathematicians. So, my goal was to make a visual representation of the mathematical equation.
- Average Equation
So, I started with a simple equation using array. The reason that I thought of using array is that because the value that influence the visual got to be changing over time. So, I started with average equation. It was easy approach because the array can be divided by the length of the array. So, mouse X values are summed up in the array and the sum of mouseX is divided by the length of the array. I divided the windowwidth into two that if the mouse X is on the left side, it will be the negative value and if the mouse X is on the right side it would be positive value. In this way the visual would be able to increase and decrease its shape over time.
- User Testing A
I showed this to the class and classmates were perplexed by the complexity. They did not get the what the mouseX is doing and why the visual is keep changing. I needed to explain what the logic is behind and clarify the user interaction.
- User Testing B
I simplified the visual and showed it to one of the ITPers and I got a suggestion of using a webcam. So, I created the webcam and mouseX interaction. However, even after, the mouse X was not responding fast enough. I needed something that the value changes dramatically. If you put your mouse on the right side for a long time then, you would be able to see the lines moving and moving objects over the webcam will change the movements of the lines. Also if you put your mouse on the left side for a long time then, you would be able to see the lines are diminishing. http://doyoki.com/project/icm/finalfin3/
- Thanksgiving Break
I was in the bed, dreamed that I was in the darkness and saw black ellipses moving. So, I woke up and I just opened up the laptop and started to make a black ellipse changing its radius. However, the ellipse was only getting big but small. So, I changed the if statement adding “c = -c;” Now, ellipse was changing big and small.
- Exponential Equation
So, I played more with ellipse making more like my dream. I needed an exponential equation. So, I changed the code from “c = c d” to “c = c d*f.” The “f” is the counter in the for loop so it would change the value in more dramatic as:
1 1 * 1 = 2
2 2 * 2 = 6
6 6 * 3 = 24
And after changing the equation, when I looked at this sphere getting big and small, I felt like I was in the space approaching to and flying away from the star.
I added more colors, more ellipses later. And I eliminated the mouse and the webcam interaction because I wanted to eliminate user’s misunderstandings. Here is the final.
And here is the visual interpretation of code. You can see the radius of the ellipses are changing in bigger scale.
And here is the code.
ICM got me a better understanding of the code. I was in the computer engineering major for the first two years of college and back then I enjoyed elective courses like design 101 more rather than doing the labs on C# and C . ICM got me better that I like coding now. And I cannot believe there are only three semesters left at the ITP and it feels much different from the first semester of the 4 years of college. I am running out of time. ITP gotta be 4 year pr0gram.