assignment 02 – on processing squares

My biggest inspiration was a blog post by a fellow student found here that illustrates several beautifully executed examples of using processing.  For the second assignment, the project was aimed towards utilizing a for loop; essentially, making the program repeat itself until certain parameters were reached.  First, I began playing with a script called “Box Fitting Img”, which would essentially take an existing picture and use different sized squares to recreate such image.

I began with an image on google.  I found this one to be pretty interesting:

The script was relatively robust; it had a couple of errors in referencing the image file, but besides that minor inconvenience, it ran perfectly.  Basically, the script begins by creating an empty canvas with a white border.  It draws five squares of relatively large widths and expands them to a predetermined size.  It creates a Box class that pretty much draws a box, like we have done in class.

The first boxes are created and placed on the canvas.  As the script runs, it checks for pixels using the checkPixel() command and runs through the entire image (which was specified in the script).  The beauty of this script is that the bulk of the for looping is done in the expand() command.  It takes the dimensions of existing squares and then checks for collisions and obstructions.  

The boxes continue emerging in groups of five at random points in the image, constantly checking (using for loops) for no obstructions.  As the canvas fills with squares, I noticed that there were several areas with no squares drawn in.  I think this is because the size of the squares get exponentially small and can’t be seen unless the resolution of the screen was even bigger.  The other beauty of this script is that it is user generative.  If I wanted a different iteration, I simply clicked the mouse and another set would begin to draw.

Notice the changes between these two iterations.  The square in the middle of the second one is clearly an area that has been overemphasized.

Now, to apply this to my script, I wanted to take our class example and elaborate on the collision bit.  I wanted to create these generative squares–predetermined at 500–and then have them regenerative per mouse click.  As of now, the clicking sets the canvas back to 0, but I can’t seem to figure out the draw function or the collision functions.  Hopefully keeping this tabbed as a “work in progress” will remind me to come back to this.

Edit – February 18, 2012

After consulting with my computer science major friend, I have fixed and resolved all issues!  The file will now create all squares in a series of for and if loops.  The beauty behind this script is that by creating a white border, it is able to determine the intricacies of collisions and avoid them.  Through the expand() function, we can visualize the relationship between squares.  By adding or subtracting the number of starting squares, we see the relationship of early squares and later squares, where the later squares are significantly smaller than the older ones.  You can find the script here.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s