Engineering Projects/Poppit/Howard Community College/Fall2011/502 1+1=11

Electronic Sections Expected

Problem Statement

Poppit is a popular flash game where the player must pop balloons in specific patterns in order to reduce the total number of balloons on the screen. While it sounds simple enough, the game can be frustrating, and eliminating all of the balloons can prove challenging - perhaps even impossible.

The overall goal of the project is to find out if it's possible to beat the game 100% of the time. The class has been broken up into sub-teams, one of which is programming. Our objective is to write a program that, when given a screenshot of the starting screen, can identify the balloons, and reproduce them in a matrix with a similar structure to the one in the game. This is to be done with Processing, an open-sourced Java based programming language.

Team Members

We have made a program that will take a print screen and load it onto processing. It will then look at the colors of the balloons at each coordinate and replace them with ovals. Then it will fill the oval in with the same color as the balloon in that coordinate.

Story

Originally, none of us knew anything about programming. We were given suggestions about how to go about completing the objective (namely being told about the "get" function that extracts the RGB color value from a single pixel, and can then be applied as a fill color to any shape). We also studied on our own, sharing our discoveries with one another at class meetings.

The actual program took a good amount of time, just working out the kinks, learning the programming language/syntax, and then putting in the legwork to make sure the get function was properly extracting all 150 balloons properly.

Decision List

List all formal decisions made with links to their documentation such as a decision tree or decision matrix.

None

Software List

Chrome

Processing

Poppit

Time

We estimated approximately 6-8 hours to appropriately learn the Processing language to the point where we felt confident actually moving forward with the project, and around 3-4 hours to actually complete.

Actual time spent was more like 3 or so hours simply practicing with the Processing client, and around 15 to complete the objective. These 15 hours, however, are misleading, as a considerable amount of time was spent learning more about Processing as the project was being worked on. Additionally, approximately 5-6 hours were spent just creating the coding triplets that each corresponded to one balloon, as each triple has completely unique (X,Y) coordinates.

Tutorials

See: Programming notes to understand how the bulk of this project works. Note: "//xxx" is a comment, and is not actually read by the program, and exist solely for the purpose of explaining elements of the code.

Next Steps

There is MUCH that can be done to work on this code, namely in the area of ensuring it is properly cropped. Ideally, as long as an image contains the full "Poppit" flash screen, we would want the code to run properly. This may be possible by specifying image size by somehow utilizing the "width/2, height/2" - though that's just an errant thought.

However what this code leaves most to be desired is a new background. These balloons are reproduced back on the Poppit image itself. The problem we had was that you can't mix active and static modes - namely that, it seems impossible to reproduce these balloons on, say, a black background. In order to extract the "get" values from the image, there can be no image in between the extraction and where the file is loaded in the code (say, for example, a black rectangle that is used as a backdrop), or else the color from the extraction will take the that (ie the black backdrop) color instead of the image, and you won't have the correct color of balloon.

It might be possible if a code could be produced that creates two images - one that simply loads the image and extracts the RGB color values, and another that is simply a black backdrop with all 150 balloons, whose colors use the extracted values from the original value. However, this feels unnecessary complicated, and the first image is not at all necessary, and would not necessarily streamline the program.

Additionally, any method that could shorten the code would be incredibly useful, however, we came up with no other method to do this that just writing the triplets for each balloon.

Programming Notes

The actual program is fairly simple, yet lengthy. The most important sections of the code are lines 1-18, where the image is established. The full code can be viewed here

It works by first loading the image in active mode, as seen in lines 1-13. In order to determine the color of each balloon, the "get" function is used to extract the RGB color value of a specified pixel (in the case of cp1_10, the pixel that is located at (295, 50)). This color is then applied to an ellipse with a center at the exact same pixel the color was extracted from. All ellipses in the program have a width and height of 32 pixels.

The code has 150 iterations of lines 16-18, 1 for every balloon in the game. Each Triplet has a unique (X, Y) coordinate for the get function, location of the ellipse, and cpX_Y color value. The code is 621 lines long, and is accurate, so long as the image used is at least decently cropped (though it does not need to be precisely 1026X769 pixels as in the example).

The first 18 lines of the code are displayed below:

//Poppit balloon duplication program
PImage img;

void setup() {
  size(1026, 769);
  //Input dimensions of image in "size", if known.
  img=loadImage("Poppit1.png");
  //Input file name and type in "loadImage". Required.
}

//Color designations "cpX_Y" denote location based on balloon grid (ie, "cp1_1" is the bottom-left most balloon, "cp15_10" is the top-right most balloon).
void draw() {
  image(img, 0, 0);

  //Columns 1&2
  color cp1_10 = get(295, 50);
  fill(cp1_10);
  ellipse(295, 50, 32, 32);