For this assignment Kamau and I created Pinnochio. The two interactive elements we wanted to add was one, which may be the most obvious is make his nose grow. Second, we wanted his eyes mainly his pupils to always follow the mouse. Making the nose grow and become smaller was not too bad once I figured out how to set variables because then it became very easy to have increments of having values increase and decrease allowing the nose to grow and become smaller. I even added an extra effect where the sketch flashes when you make it smaller and bigger and some text even appears. The biggest struggle I had was the eyes they would move with the mouse but the pupils would always come out of the eye sockets. So I needed a way to make it moveable and still restrict its movement. This was really tough to do but I figured out the mapping techniques and then it was a lot easier.
One of the major challenges that really frustrated me was trying to do exact drawing in the program. The bezier curve was what i initially tried to use, however, it quickly became apparent that I would not be able to understand how to use it to recreate the face that I drew. The code became the result of me compromising on pretty much every aspect of my face I could see and then making very basic primitive shapes for all parts of my face.
For this project I partnered up with Yuening Bai. We knew that we wanted to have something following the mouse, and we discussed pulling images from the web and having the ball actually be a cat, so that it is chasing the mouse. I ran into some trouble trying to code this, and could only figure out how to load a photo from the hard drive of the computer, not from the web. So instead we made it a ball that got smaller as it got closer to the mouse. I originally figured I would do this by making the height and width of the circle correlate to the distance from the mouse in the x and y directions. This had an effect similar to what i was going for, but the circle would disappear if you backtracked from the bottom right of the screen to the top left. To solve this, I made it instead the absolute value of dy and dx.
For the interactive assignment, SangDoo and I created a helicopter (squares and rectangles) spinning around the mouse, while following the mouse. When you hold the mouse button, the helicopter flies off into the sky. Once you release the mouse button, the helicopter comes back to the mouse.
One of the hardest parts of the code was having the helicopter spin around the location of the mouse. We didn’t want to have the helicopter perfectly connected to the mouse, so we created an ease variable. The translate and rotate functions are sometimes confusing to use, but we were successful in having the helicopter spin around the location of the mouse, with an ease.
The color of the stroke of the helicopter also changes depending on the location of the mouse.
Another difficulty came when we tried to change the background color once the mouse was clicked. We didn’t want the helicopter to have a trail of color behind its movement, so we created a variable called “color” to put into the first input for the background function. We were able to randomize this variable later in the mousePressed function, and everything ended up working nicely.
Going into this assignment, the interaction I knew how to use was when mouse is pressed and having an object follow around the mouse. Jei and I talked about what more we can do, and we decided to make something that represents a simple puzzle. In order to do this, we needed to teach ourselves how to drag and drop certain shapes. We were able to find plenty of examples of this online. Our second component was the key pressed. When the up key is pressed, the colors of the rectangles and the background changes, and when the down key is pressed, the file gets saved.
The most difficult part was managing all the different size rectangles with the correct dimensions. We have 8 different rectangles, and all of them are different in size and color. We also came across with a problem with dragging the rectangles, that if one rectangle got too close to another one, they would combine. We weren’t able to fix this problem.
Although this was one of the most difficult assignments yet, I was able to learn many other interactive components of processing.
Here is the link to our sketch:
https://www.openprocessing.org/sketch/506727
Although I have prior knowledge in coding, I knew this was going to be very different from what I’m used to. I never had to code to create a drawing, so knowing that I might struggle, I made my sketch very simple.
I thought the most difficult part when coding would be doing my curly hair, but it was the eyebrow. I just used six different brown ellipses for the hair, and put my head in the front. But the eyebrow was hard because I didn’t know how to make the perfect arc I wanted. It took me many tries until I was able to place my eyebrows where I wanted them to be. But even so, my eyebrows are not perfectly symmetric to each other.
I wish I was capable of doing my individual hair strands, by using bezier. But overall, I am happy with how my self portrait came out.
Here’s the link to my sketch:
https://www.openprocessing.org/sketch/503835
The square was relatively the easiest part of this assignment. We were successfully able to implement it rotating according to the x and y coordinates of the mouse and speed it up accordingly. We were also successful in changing the colors every time the mouse is pressed. The ellipse brought the most issues. The difference between what was going on in processing and what was going on in open processing was confusing, but the open processing did what I originally wanted to do anyways. It was hard for me to wrap my head around how draw and mouse pressed worked at first, but I soon realized mouse pressed is an event and draw is a continuous function. The translate function was hard to figure out at first, partly due to how weird the location of the (0,0) coordinate is to us. Since it was in the draw, it continuously translated whatever was on the screen, and we wanted to figure out how it can be used for only a particular element. Overall though, we were successful in using the material taught in class and implementing two different types of interactions.
When we look at the history of computing and computer-generated models, we tend to think more in the realm of old room-sized computers that perform more science-oriented tasks for the computer scientists and engineers handling these early devices. This idea, however, is far from the reality of early computing. John Whitney, one of the first computer animators and one of the first pioneers in computer-graphics shows an interesting side to the history of animation.
Before computer-graphics, computers were used for more scientific or war-related efforts such as “to break Nazi codes” or to ease “British and American World War II defense efforts.” With the use of computer motion-control, John Whitney was able to produce a wide range of innovative visuals. Between the years 1960 to 1969, John became interested in computer generated films. One example of this interest was titled “Catalog” which was a demo created with a WWII anti-aircraft gun sight. The techniques he used in the development of his demo included geometric patterns and wave-like patterns. The choice of color in some of these images are like those used by companies nowadays such as PlayStation and the early Microsoft startup screen.
Although John Whitney’s early film proposals were rejected, the originality of his film ideas caught the attention of Jack Citron who would later program the computers, with the use of motion graphics, that he would use to make his first film. John’s later films, however, used the idea of Harmonic Progression. He experimented with different arts such as Islamic architecture which would end up as harmonic waveforms which were characterized as reverse curves.
The later part of his career involved developing the actual instruments that allowed the animations to come alive. He began to think more like a computer scientist and he started to show interest in composing visual and musical output. With the fact that most films prior to this were silent, it showed that Whitney was not only an artist but a visionary as well. After working for more than 55 years, his ability to work as both a filmmaker and computer scientist has inspired both individuals and companies. the quality of Whitney’s work when computers were not user-friendly is truly astonishing and it showed the idea that computers can be used as a medium to create art.
For the interaction sketch, Morgan and I created a rotating square that enlarges and shrinks depending on the location of the mouse. The square rotates at a random speed using a global variable. The speed of the rectangle randomly goes a value up until, but not including, 0.5. When a key is pressed, the rectangle changes to a random hue of color. When the mouse is clicked, the background changes to random saturation value for red.
While creating the sketch, we were successful in rotation, color changing, mouseX and mouseY because these functions are familiar to us. However, we had problems with order of operations in our code. We struggled with layering our functions correctly so that the background wasn’t overlapping everything. While moving from processing to openprocessing, we noticed that our sketch was very large, and it altered the interactions on the sketch because the screen wasn’t big enough. Overall the project was successful and if we knew how to, we would have the shape rotate while moving with the mouse’s location and have the shape change when a key is pressed.
