on final project

Our final project is based upon the concept of creating a database of drawings.  We wanted to use the framework of Draw Something! in order to create such a database, where players would draw a picture after being provided a word, and then guessing an existing picture.  Since the complexity of the project was beyond the scope of the course material, we decided to remove some of the qualities of the game and brought it down to “Draw!”.

The process of designing a game as complex as draw something involves several classes.  One of the key classes is the color swatch on the top of the screen.  The start button would begin the database by calling upon a predetermined word and clearing the contents of the screen, which at the beginning of the game is simply the start button.  The word is displayed on the top right corner, and the player uses the Kinect system (or a mouse) to draw the displayed word.  Upon completion, the program should take a screen shot of the image drawn and save it into the database with the word pair, and display a drawn picture for the player to guess.

The second part of the project would have involved a guessing mechanism with 10 letters, x of which belong to the word itself and the rest filled with random letters.  We created the class for this as a preliminary set up, but didn’t have the time or knowledge to complete this portion of the project.

At the end of the project, there would be a database with a series of words and a series of pictures paired to the word.  It could be beneficial to observers to see how long it took a person to draw a particular picture, its complexity, and how long it takes for another player to decipher the drawing.  I would be interested to see how players with certain handicaps, perhaps closing their eyes or drawing with their non-dominant hand would react to such changes.

A copy of the unfinished script can be found here.


on draw something project

For the final arch 430 project, Lauren and I decided to make something less complicated than the project outlined in a previous blog post.  We decided that because of the complexity involved in writing code for four separate stations and having it sync to one source, we were going to follow the trends of handheld (mobile) gaming and make a kinect version of “Draw Something”.

Basically, we’ve dumbed down the game to make it easier to code since, to be frank, coding is a completely foreign language to the both of us.  The player competes against the computer, and upon finishing a drawing, the player’s drawing is stored in the database to be accessed by another player.  Through this process, we would have about 15 words with 100 different drawings for each word.  We want to use this information later on to understand how people can interpret simple drawings at different speeds using different visual cues.  Though the complexity of storing a drawing into the array is mind numbing, we’ve trudged through and hopefully will have a working prototype on Thursday.

assignment 03 _ on XML

The purpose of assignment 3 was to parse XML data into processing, using existing XML data of different x-positions, y-positions, widths, and heights.  This data is turned into boxes and drawn using the draw() function.  Using the Box class, we go through the data and pick out the information relevant to the boxes, and using getChildCount figure out how many boxes to make.  The println() function prints to processing the information already provided in the XML data.  The beauty of XML over traditional spreadsheet tables is that it is readable by computers and humans using code and pseudocode.  For example, a box would be called as <box id=”1″ height=”40″ width=”50″></box> and through the script, draw a 40×50 size box.  The script can be found here and screenshots below.

on final


My idea of the final project is highly interactive.  I was thinking of creating a new game that requires all four players, connected with a Kinect camera and a TV.  The players become actors of a greater game, which is projected in the center of Crown Hall.  The image above  is a quick sketch of the set up.  Each corner of the building will have a booth set up, designating their role in the game.  In terms of programming and processing, the cameras will accept all visual input and the TV will output what the other players will see.  However, none of the players will see what the audience sees.

The purpose of the game is to work together to overcome a certain challenge.  Using no audio feedback, the players focus on miming their instructions, much like Charades, to the other players.  The screen, I’d imagine, would be divided into four screens.  The audience watches the four players in Center Core by the use of a projector on a screen, or maybe the projector would project onto the floor.

In terms of the game’s structure, I haven’t considered what types of challenges the players would endure together.  I figure that it’d be some sort of sequence of puzzles, much like Myst.  For example, player 1 may need to hold open a door while player 2 runs in to get a key from a cave, but since it’s so dimly lit inside, player 3 and player 4 hold mirrors to reflect the light.  The challenges can be altered so the game doesn’t require four players at all times.

I imagine the most challenging aspect of this project, should we venture my way, is to coordinate the inputs between four different inputs into one “base”, and then programming a game so that each of the four inputs all control different variables in the game.  In a dumbed down version of the game, I imagine a similar set up, but each of the players have a turn making their bodies into a certain shape–either their own creation or suggested by the game–and it is the other three players’ responsibility to match the pose or lose.

Suggestions in the comments would be helpful.

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.

on processing

I started to toy with the processing program used for this course.  I have a basic understanding of C++ and I immediately recognized the language while sifting through the different examples on the site.  One of the most striking characteristic of this program is the simple GUI.  I’m always a fan of simplicity and have an appreciation for powerful tools, and I do feel that this will become a favorite of mine.  I’m glad that we’re not learning flash in this course, to be honest, because I’m sick of watching it struggle and fail on several of my computers.  There are better technologies out there, and I’d much rather learn those languages instead.

Processing is rather simple.  Script, save, play.  If something breaks, or code miswritten, the program alerts you rather than crashing everything in sight.  I chose the “animator” example because I like interaction.  I made this grid system using moving dots, and it was actually pretty fun to watch.

The code wasn’t that complicated either.  A copy of the script can be found here if you want to try it out.