This week we learned mostly about the basics of Processing and simple commands we can use inside of the environment. Our first homework was to create a sketch of our choosing, and using simple shape commands we learned in class, try and represent that sketch in Processing. At first I had a really complex design that I wanted to create, however very quickly I realized that the simple shapes that are available to us in Processing are very limiting.

I decided to start of creating my sketch on graph paper, and applying the values on the paper to Processing. Once the sketch of the sketch was complete, I had to convert it into the code that Processing understands. In general, I am a strong programmer and it seemed that the processing syntax seemed to match most programming languages fairly closely. When coding my sketch I noticed I had to be very weary with the layering system that Processing uses. That is, whatever is coded first in the environment will be drawn first. I searched the documentation to try and see if there was a work around for this particular aspect, but I couldn’t find a suitable outcome.
Drawing complex shapes, for example a tie in my sketch, required the use of quads that Professor Rosenstock mentioned in class but did not explicitly go over. However he mentioned that Processing had documentation, and after looking at it briefly, I figured out how to make some complex shapes using the quadrangle function in Processing. The documentation for Processing was actually quite good and made programming my sketch actually quite simple.

After a few hours and some color changes, my sketch was finally completed. A few things I noticed while creating my first real Processing sketch were: 1) Comment all of your code early and often. Frequently it was necessary to go back and tweak the color or dimensions of a particular aspect of the program, and if not commented thoroughly, it is almost impossible to remember what code draws what shape. 2) The most time consuming part of programming the sketch is figuring out the exact dimensions of the shapes in the sketch. Because I don’t have 500×500 graph paper it was very difficult to scale it up correctly. It seems that it would be much easier to pinpoint the exact location if a tool tip told you what X and Y coordinate your mouse was currently touching. This way, the “guessing” needed to create the shapes in the exact locations could be eliminated. My guess for the lack of this feature is that Processing in general is a very powerful tool that, when used to its’ full potential, can generate dynamic shapes based on input rather than hard coding values.

In the second version of this sketch the user can press enter on the keyboard to “flip” through the sketch like a flipbook. Once the user completes flipping through the entire sketch, a conditional statement fires that clears the sketch and automatically puts the drawing on loop mode. Loop mode is a Boolean that will continuously draw the sketch without user input. At any time, the sketch can be cleared by pressing the delete key. For this sketch (seen below), I heavily relied on the Processing documentation to create some cool effects. I wanted to have specific key commands to control the sketch as well as have clear readable code. In order to achieve these two goals, I used a switch statement which organized my entire if and else statements, as well as found functions that check for specific key input such as “Enter” and “Delete.”

Simple Directions: Press enter multiple times to flip through the sketch, once completely flipped through, hit enter once more to start the automated loop. Delete will clear the sketch.