Processing Project – Design

Now that I have my media theory idea sorted, I can now focus on designing an interactive Processing piece. From my initial ideas, I know that I will be using a webcam for this piece. The difficult thing now is thinking what I will actually change about the webcam to fit the theory I have chosen to use. Retro gaming is something that is close to my heart and that I engage and interact with on almost a daily basis and I believe that more people should do the same. Although, most people use advanced technologies for gaming nowadays such as, smartphones, next generation consoles and pc’s.

I think these digital technologies have too much control over the gaming industry. The basis of my Processing piece is to get people thinking about the old games they used to play and maybe to play them instead of games developed for digital technologies. I will do this by making the webcam look like it’s a retro game by having the pixels in the webcam bigger. This will hopefully trigger peoples brains into thinking its a retro themed interaction, which it is.


Now how do I go about creating what I have envisioned? From the past initial ideas I have had, creating the webcam was easy as I used the past code. The difficult part was creating it so every pixel was a rectangle. I looked through different examples on how to achieve this and I finally found out how to accomplish my vision. The code I used for my final piece is below:


int cellSize = 15;
int cols, rows;

Capture video;

void setup() {
size(640, 480);
cols = width / cellSize;
rows = height / cellSize;
colorMode(RGB, 255, 255, 255, 100);

video = new Capture(this, width, height);


void draw() {
if (video.available()) {;

for (int i = 0; i < cols; i++) {

for (int j = 0; j < rows; j++) {

int x = i*cellSize;
int y = j*cellSize;
int loc = (video.width - x - 1) + y*video.width; // Reversing x to mirror the image

float r = red(video.pixels[loc]);
float g = green(video.pixels[loc]);
float b = blue(video.pixels[loc]);

color c = color(r, g, b, 75);

translate(x+cellSize/2, y+cellSize/2);

rect(0, 0, cellSize+1, cellSize+1);

The outcome of this was:

Screen Shot 2015-01-26 at 06.35.07


As you can see, the outcome shows a pixelated environment. This was exactly what I envision it to turn out like as it is an homage to retro gaming and, in my opinion, if a participant was in this frame, they would think it was to do with retro gaming as well.


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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s