Category: Week 2 – Interaction

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

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

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

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.

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

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.

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

For this interaction sketch, Ahmed and I used the mouse and keyboard as a way to control various elements on the screen. Most of the interaction comes from the mouse – moving the mouse to certain locations changes the rotation speed of a square in the middle. When the mouse is clicked, randomly-sized ellipses of random colors appear at the clicked location; the square will also reset and change colors. When a key is pressed, the background changes to a shade of grey.

One part of the project that was successful was the square. We used the translate and rotate as well as mouseX and mouseY functions to make it move. We were also able to change the colors of the objects pretty easily by putting random inside the fill function all in the mousePressed event. However, we did run into a couple of problems. One of them was the translate function. When we used it to shift the canvas to the middle so the square could rotate about its own axis, the location of the ellipses became jumbled. This happened when we tried to make them randomly pop up around the screen, but they ended up going off the screen and being created in random locations. Another problem was going from processing to the openprocessing website. We originally had the project where when the mouse was clicked, ellipses would pop up in a circle around the square. However, this didn’t happen when pasted in the website, so we had to rewrite the code so ellipses would pop up wherever the mouse was clicked. Overall, the project was pretty successful, as we utilized many concepts from class and were able to complete the assignment.

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