Spring 2018
parent category for weekly work and assignments
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.
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
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
The most challenging thing about this assignment was learning to think in terms of basic shapes. When I was planning the portrait, I had to think of the body in terms of its most basic components. I tried to focus on rectangles and ellipses, as those were the easiest to code. The head is almost all made of circles, with a few lines. I thought the clouds would be very difficult, but they actually didn’t take me very long. They were the last things I did, and so I’d gotten a hang of how to use the program. I made a series of small ellipses with no strokes and combined them into clouds. The actual hardest part of the project was figuring out the arc.
The one thing I couldn’t master was bangs. I have kind of weird, swoopy bangs, and I could not figure out how to code them. I tried using an arc, but I didn’t know how to rotate it. Nor did I know how to put a stroke only on one part of the arc.
Ultimately, I’m happy with how it turned out!
You can find it here: https://www.openprocessing.org/sketch/504627
This was very challenging to transition from drawing an image to making a model in processing. The most challenging portion is trying to make curve lines. The easiest way to do that seems to be, is using arc method which worked great for the mouth but not so much for the nose and ears. I wanted the nose and ears to rotate in specific ways but no matter what I do to the variables in arc they did not rotate the way I wanted them to. I was also surprised by how easy changing the colors as I thought it would be much more difficult but it was easy to get adjusted to it.
Link to processing site: openprocessing.org/sketch/504339
I previously worked with the processing program in my Data Structures class for the lab but it was nothing like the experience I had making the self-portrait. I used it in python and we didn’t really go into the code that made up the draw function. When working on the assignment I felt more under control and I was able to turn my code into art. Usually, when we think of code we envision work being done with engineering software such as blockchain or artificial intelligence. It was a good feeling to know that code can also be used as a form of art. I still need to work on getting my ideas out faster through the code but the assignment was quite fun. The colorway for myself portrait was inspired by hip-hop artist Tyler the Creator.
https://www.openprocessing.org/sketch/503878
While creating this self-portrait, I found it difficult to ballpark where the points would end up on the grid, but I began to get the hang of it as I continued drawing shapes. I’m not sure how you would tilt a shape (ex. to make arms or hair), but enjoyed experimenting with different transformations I could make to the shapes. I wanted to keep it feeling as organic as possible, which is why I avoided hard corners/shapes like polygons and straight lines. I struggled a lot figuring out how to use bezier curves. Unlike a circle where you can create it and then just move the center point to move the entire shape, when you move one coordinate on a bezier curve it changes the entire shape of the curve and the shape you had is distorted. It took me a second to figure out how to turn the arc upside down to create the body, but after refreshing myself on the unit circle it made more sense. I was pleasantly surprised to find that to create the irises of the eyes, I could copy the code from the eyes and just change them from ellipsi to circles. They ended up looking exactly how I hoped for them to. For some reason it isn’t allowing me to upload my sketch. The image upload keeps failing.
Link to sketch: https://www.openprocessing.org/sketch/503765
This was my first coding experience, so I tried not to make the self portrait too demanding in order to allow me to practice the basics without getting too stressed. Regardless, I still found the program to be extremely challenging at first, particularly when it came to solving creative problems like drawing hair and aligning shapes so the proportions come out accurately. Initially I had tried to draw the hair with arc functions but ultimately found it too difficult and decided to try straight line functions for now. Hoping to practice more and improve on using Processing, particularly studying functions and familiarising myself with the graphing system so that placing shapes becomes more intuitive.
Link to sketch: https://www.openprocessing.org/sketch/504052
