IxD Lab：Final Project

3.3 Prototyping with Processing & Makey Makey

Testing in processing.

Due to some technical and hardware issues, I change my plan:

• Ultrasonic sensors are not sensitive enough and designing for a touch screen requires better hardware support, so I decide to simplify the input as pressing the keyboard.
• Processing doesn’t support too big and complex files, otherwise it will crash. I decide to keep the background color as black, reduce the frames per second. (Black also symbolizes universe and possibilities.)

Process:

1. Export video as PNG sequence.

• Remember to enable the transparency toggle grid.
• Pay attention to the file name, for example, [Design_####][Game_#####].
• 24 Frame/s is good.

Pay attention to the square icon before “Active Camera”, enable it before exporting PNGs.

2. Prototyping in processing.

• If you have thousands of pictures, it’s very likely your processing will crash. In found my appropriate size is 320*135 (have 1200+ PNGs)
• In Processing, the code below will cover the code above, so make sure the order of code is right.

Animation animation1, animation2, animation3, animation4, animation5, animation6, animation7;

int index=0;

void setup() {
size(240, 135);
background(0, 0, 0);
frameRate(24);
animation1 = new Animation(“Design_”, 336);
animation2 = new Animation(“Delightful_”, 154);
animation3 = new Animation(“Exploring_”, 120);
animation4 = new Animation(“Storytelling_”, 120);
animation5 = new Animation(“Illuminating_”, 120);
animation6 = new Animation(“Game_”, 120);
animation7 = new Animation(“Next_”, 207);

}

void draw() {

if (keyPressed) {
if (key == ‘d’ ) {
//background(0, 0, 0);
//animation2.display(0, 0);
index=1;
}
}

else if (key == ‘e’ ) {
background(0);
animation3.display(0, 0);
index=0;
}

else if (key == ‘s’ ) {
background(0);
animation4.display(0, 0);
index=0;
}


else if (key == ‘i’ ) {
background(0);
animation5.display(0, 0);
index=0;
}

else if (key == ‘g’ ) {
background(0);
animation6.display(0, 0);
index=0;
}

else if (key == ’n’ ) {
background(0);
animation7.display(0, 0);
index=0;
}
else {
background(0, 0, 0);
animation1.display(0, 0);
// index=0;
}

if(index==1){
background(0, 0, 0);
animation2.display(0, 0);
}
println(index);

}

class Animation {
PImage[] images;
int imageCount;
int frame;

Animation(String imagePrefix, int count) {
imageCount = count;
images = new PImage[imageCount];

for (int i = 0; i < imageCount; i++) {
// Use nf() to number format ‘i’ into four digits
String filename = imagePrefix + nf(i, 4) + “.png”;
images[i] = loadImage(filename);
}
}

void display(float xpos, float ypos) {
frame = (frame+1) % imageCount;
image(images[frame], xpos, ypos);
}

int getWidth() {
return images[0].width;
}
}

3. Setup and remap Makey Makey.

I set up and remap makey makey at http://makeymakey.com/remap/. Then I made a rough prototype of the control panel use foam corn. So when people touch the nail, the animations will be triggered.

Control Panel.

4. Test and iterate.

The canvas is too small in processing, so I decide to upload it to a local server. It seems much bigger and smoother in a browser.

I upload this interactive typography to a local server.

Next step:

1. Make a control panel box.
2. Refine the html page.
3. Create live demo and a final process documentation.