assignment 04 _ on triangles

Assignment three addresses the input of XML data and output as triangle information.  Through the use of classes, I am able to call upon functions within a particular class in another attached file to streamline the retrieval, update, and output process.  Below, we can see some of the script used to generate these triangles.

One of the things that we covered in class is incorporating movement and mouse input.  While the original class assignment was intriguing in its potentiality, I felt that it lacked color.  The three images below show, with the code above, how you can add color to the processing program by declaring three variables, presumably the RGB value, and set a function to randomize the colors chosen.

To explain, the first image is the last remaining of the three original triangles.  The second image shows that by clicking the mouse, the user generates a series of triangles that emerge from the mouse click position.  Notice how each of the triangles is a different color.  The third image shows that as the mouse is no longer clicked, the triangles move outward and disappear from the screen.

A copy of the script can be found here.


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.