Category: Assignments

parent category for weekly work and assignments

animation

https://www.openprocessing.org/sketch/509951

The idea was to emulate the infinite road illusion with code. First I tried making an array of lines with varying stroke weight to get a reference for how the code would look without animation in place. I then tried to replicate the image using a for loop and line function which for the life of me I could not get to work due to its tendency to just fill the space made . I then also wanted to vary the horizon details a bit so I used a bezier function instead to create a bit more random behavior. The hardest part from there was aligning the overlapping curves to make straight lines so it became a trial and error game with inputting numbers but in the end I got a result similar to what I wanted.

Principles of Animation

In this animation sketch, I attempted to apply the principles of solid animation by incorporating a “weight” aspect to an object. And so, the ball in my sketch bounces until gravity makes it stops bouncing. I knew from the outset that I would be exclusively manipulating the y variable, but I had some trouble understanding the “gravity” element of the sketch. I looked up some tutorials on Youtube/Processing site about manipulating object speed, and used our class notes to finally understand how to get the ball to eventually stop. For example, at times the ball would stick to the end of the screen/sketch’s floor, and it was due to miscalculating positive/negative direction, which was similar to the problem we encountered in a class exercise last week.

Link to sketch: https://www.openprocessing.org/sketch/509885

Principles of Animation

For this animation sketch, I tried to show the principles of solid animation, slow in and slow out, and arcs. Originally, I wanted to recreate a basketball bouncing up and down and slowing down because of gravity. Then after I accidentally changed a variable, it created what looked like a basketball being bounced towards the screen. I thought this animation looked a lot cooler so I decided to go with it. It appears as though the ball travels in an arc towards the viewer’s screen. Also, it looks as though the basketball speeds up mid-bounce; the basketball starts slow, speeds up as it gets closer to the screen and then slows down again when it is right in front of the viewer. The hardest part was trying to incorporate solid animation; I wanted to make a sphere rather than just an ellipse. I had to make my sketch 3D; I explored the processing website to learn about how to control the ball’s location and how to make the shape bigger and smaller.

https://www.openprocessing.org/sketch/509171

Animation

For my animation I wanted to incorporate loops so It could look more dynamic when it compiled. This wasn’t to bad because I just built off of the code we did in class and played around with the number and and other built in functions of processing until I got something I enjoyed watching. My animation is supposed to represent anticipation because of the way the program fades out the background every time the circles make a move. It gives the viewer a sense of when things are acting normal and when they are about to act up.

 

https://www.openprocessing.org/sketch/509233

Principles of Animation process

For this principles of animation exercise, I tried to show the principles of slowing in and out as well as squashing and stretching by animating a bouncing ball. The ball bounces in the x direction from side to side – as it gets closer to the center, it speeds up and becomes thinner (squashed); as it moves towards the other side, it slows down and goes back to normal size. This is the opposite when the direction is reversed. I actually had a lot of trouble creating this animation – I was trying to emulate some of the concepts from my lecture notes, but I kept running into obstacles. The slowing in/out wasn’t too hard to figure out, once I realized I had to create a variable for speed and add to it when the ball got closer to the center, and subtract from it when the ball moved away. I had the most problems with the squashing. I knew I had to create a variable for the squash and set it as the width of the ellipse, which wasn’t too hard. But when I added the variable into my if statements, the ball kept growing and didn’t stop. Later, I ran into a new problem where the ball would keep going faster and faster and wouldn’t slow down. Basically, to solve these problems, I just tried everything I could think of. I moved if/else statements around and tried to use different conditions for those if/else statements. Eventually, after trying many different things, I found that using a different condition for the if/else statement worked, and the ball consistently sped up and slowed down as well as squashed and unsquashed.

https://www.openprocessing.org/sketch/508591

Week 2 – Random Face

For my Random face sketch, I tried to implement a couple of the new functions we learnt in class, mainly relating to color change and rotation. I managed to have the background and eye-color of he face change with clicking and movement of the mouse. However, with the rotation element, I struggled to correctly map it onto the sketch. My original plan was to have a rotating ring of squares around the face that would act as a frame. However with the current code I have (using the variable “float rot=0/ rot=0.5 ” from last class) the ring appears to the side of the face rather than fully wrapping around it in a smaller perfect circle.

 

Sketch: https://www.openprocessing.org/sketch/506765

Week 2 – Interaction

I paired up with Leah for this assignment and decided to make a simple puzzle that utilizes mousePressed function in Processing. I looked through the example page on the Processing website to find some inspiration for this assignment. Then I really wanted to learn how to drag objects, so I talked with Leah and decided to teach ourselves how to do that. The reference page had some instructions, but I didn’t quite get the process. Fortunately, we found a great tutorial video on Youtube, which not only had instruction on how to drag objects, but also taught us how to use set color variable that can be useful in almost all Processing sketches. The idea and fundamental skills required for the assignment were achieved successfully.

However, we soon realized that it is difficult to work in an organized manner when we have to create multiple draggable objects. Codes were longer than those of simple sketches, so it was challenging to organize them. Also after programming everything, we realized that while dragging an object, other objects will stick and follow along if we went over them. We tried to remedy the issue by narrowing down the area of an object that triggers mousePressed function. I also wanted to make a key function that would return all the objects back to their original positions, but I failed to make that happen for this assignment.

https://www.openprocessing.org/sketch/506727

Week 2 Interaction (Michael and Shyam)

Much of this hw was very in the moment. There were times when the code worked relatively well with the different inputs that we had come up with. the challenge of reworking our code many times made us end up with a very interesting sketch. We wanted to add the drawing function to the canvas in a unique way so we started with the rainbow pen we learned in class and tried to come up with a way to translate it to spin art. However, we didn’t know how to do so we were stuck. Ahmed and Allen had something similar to what we had in mind so we figured out how to make the rectangle turn from analyzing their code. We then tried to make spin art which worked in a very weird way in processing and didn’t necessarily transfer over well to the open processing site. So after many slight tweaks we came to what we have now and are happy with our accident.

https://www.openprocessing.org/sketch/506764

Week 2 — Interactive

Hi!
I know this was supposed to be a partner assignment, but I emailed 5 different people from class and could not find a partner. Instead, I did it myself!

The most challenging part of this assignment was honestly just learning how to do it. I watched many hours of YouTube tutorials, including but not limited to the ones you linked us to. I still couldn’t figure out how to get objects to move in reaction to each other. That was a bigger problem in the face assignment, when I tried to make pupils move around the eye and ended up having them roam around the entire background.

Unlike the other two assignments, it was hard for me to come up with a concrete vision for this sketch. I ended up thinking about randomized color. I’m a huge fan of using color to tell a visual story, and there was something interesting to me about a completely randomized color palette. I’m not super happy with how it turned out, but it was an interesting process.

You draw by moving your mouse around, and the stroke picks random shades between 0-255. Random ellipses are generated constantly, with random colors and strokes. And every time you click, the background becomes a new color.

https://www.openprocessing.org/sketch/506762

Week 2 Interaction

This assignment was difficult but rewarding once we were able to get our program to work.  Cesar had the idea of importing an image of space with stars only as the background of our illustration. We wanted to model the solar system including the rotation of the planets around the sun. Getting the rotation of the planets around the sun was very difficult but once Cesar figured it out it was pretty easy to apply it to each of the planets. Once we did that. It was up to me to add the interactive elements. It was difficlut at first because I was reading a bunch of fancy documentation on processing website, that proved futile. I decidee to go with that as long as the mouse was getting pressed the sun would increase size and begin to change in color. This way it looked like the sun was swallowing the solar system and getting hotter. Hopefully me and Cesar could build upon this as we get more familiar with processing.