Its inspiration:
I was trying to figure out how to make triangle and rectangle and circles and all those simple shapes to seem more interesting. Then I thought What if I make an object up of itself; sort of like inception for shapes). That reminded me of Suerat’s “Sunday Afternoon […]” which is a pointilism style creation. So I set my basis to make a winter scene using a style of pointilism. I tried not to step out of my coding ability by only using basic shapes.

Its special powers:
I also figured I would add a little flare by having my “snowflakes” be randomly dimensioned ellipses. Also, I spent a while developing the code to be relative to the size of the window and the size of the “dots”. This allows for the image to be different each time but always similar, even if the window size or the “dot” size is changed.

Its progress and debugging
There are a few early attempts to see if I was coding right. If something was wrong I would comment out
everything and work my way done the code uncommenting until I found my issues.

For the second homework I edited my simple snowman picture in processing to be a little more exciting. The center snowball grows to its full size, while the lowest ball appears when the mouse is clicked. The head and eyes are re-drawn with a different background (a slight grey) when the mouse is on different sides of the screen. I found a little trouble with the stroke on the middle circle overlapping the top circle making it look a bit off, but as the top circle is dedrawn every time the mouse passes the center line, once the middle circle has reached it’s max size the top circle will remain on top.

This week I expanded on my last sketch, adding changing background colors based on nyan-cat’s height in the sky and mouse-based locations that a mini-nyan cat uses to follow the mouse.

I am not very good at all at programming so I needed a little more help on this one. I found the Processing reference to be very useful. The reference can be accessed quickly by typing a keyword in Processing, highlighting it, right-clicking and selecting to look it up in the reference. It explains everything about the highlighted term in question, how it can be used, and it provides explanations of related terms as well. But for questions I did not have the keyword for, like when I was having problems declaring variables, the Processing.org forums provided me with the information I needed. I discovered that variables declared in one method cannot be seen in another, so variables used by both the setup and draw methods needed to be declared outside both methods. I found that information here: http://forum.processing.org/topic/cannot-find-anything-named-token

Thanks to the technical resources Processing provides I was able to create this sketch.

Hi, I’m Jayson Corey. This is my first post, showing my first homework assignment for the class this term. The project is supposed to be a piece that can be used in “Instructional Art” exercises. Enjoy! 🙂

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.

I’ve never used Processing before, but I’ve found I like it so far with the first assignment and the things we’ve begun to do in class. Learning how to create the sketches and then making one based on a drawing was a little fussy and tedious, but I’m happy with the results!

I sketched out a cute little robot on paper for my design before moving to Processing.

He came out pretty good! I primarily used CENTER mode for the ellipses and rectangles that I drew, first getting the shape and color correct and then moving it into position, which worked out well!

I’ll continue to update this blog post with the iterations I make on this for the next assignment. I had a lot of fun in class today playing with variables and colors, so I’ll try to work in the various “challenges” in some interesting ways!

Quick update, here’s my first new iteration on the robot – now with dynamic colors and moving eyes! Try clicking on him, too!

Edit 2: Here’s another iteration, working on completing the challenges all within this sketch.

In addition to dynamic eyes and colors based on mouse location, and eyebrow movement based on mousepress, you can use the keys R,O,Y,G,B,I and V to change the color of the robot’s square front panel!

Here’s what I’ve done so far for each of the challenges:

Challenge 1: I’ve been using variables instead of hard-coding values into the sketch. This came in useful when centering the design, where I was able to use ‘width/2’ and ‘height/2’ instead of the numerical pixel values of the locations I wanted. Additionally, for the movement of the eyes, I used an if statement and looked for the location of the mouse based on thirds; if the mouse is in the left third of the screen, the eyes look left; in the center third, the eyes are centered; finally, in the right third, the eyes are drawn looking right! This is also how the up and down movements of the eyes were coded.

Challenge 2: I declared my own variables to create the key-press activated color changing for the robot’s square panel. I declared rColor, bColor, and gColor at the beginning of the sketch with initial values of 255 (when you start the sketch you can see the panel is white.) Then, I used if-statements to figure out which key was being pressed, and assigned new values to rColor, bColor and gColor depending on which letter was pressed so that when the rectangle is drawn, it changes color and stays changed, not just changing when the specific key is pressed.

Challenge 3: The eyes and colors of the robot are dependent on the mouseX and mouseY, the eyebrows are dynamic with mouse presses, and the square panel is dynamic depending on specific key presses.

Challenge 4: All of the above use logic, including IF, AND, OR, ELSE, and ELSE IF.

I’ll continue to work on playing with the sketch to work in more logic to get more familiar with the different conditional logic concepts soon!

I first began to work with processing this week, and here is the process I went though in creating my first sketch.

Here is my finished first processing sketch.

My first ideas on the Processing sketch

Then I revised it some more after I began coding.

I made some approximate measurements on my paper sketch.

Here are a series of images that show how my sketch was made.

And here is the finished product once the code runs.

The finished program is below.