Project 2 Final - The Jankasaur

Research Paper: https://drive.google.com/file/d/0B7EXvInBcN5jWWgwcjltSUs3TU0/view?usp=sharing

Code: Written for processing

import gifAnimation.*;
import processing.video.*;
import blobDetection.*;

Capture cam;
BlobDetection theBlobDetection;
PImage img;
boolean newFrame=false;

ArrayList shapes;
ArrayList shape;

int screenWidth = 640;
int screenHeight = 480;

Gif idleYellow;
Gif idleRed;
Gif idleBlue;
/*Gif idleOrange;
Gif idlePurple;
Gif idleGreen;
Gif idleGrey;*/

Gif shiftFromBlue;
Gif shiftFromRed;
Gif shiftFromYellow;
//Gif shiftFromGrey;

Gif shiftToBlue;
Gif shiftToYellow;
Gif shiftToRed;
/*Gif shiftToOrange;
Gif shiftToPurple;
Gif shiftToGreen;*/

/*Gif confusedRed;
Gif confusedYellow;
Gif confusedBlue;
Gif confusedOrange;
Gif confusedPurple;
Gif confusedGreen;
Gif confusedGrey;*/

String colorDetect;
boolean object;

point trackingPoint;
int lx, rx, y;
int printCount = 0;
int wormColor = 0;
//1 = red, 2 = yellow, 3 = blue;
int colorWant = 0;
int colorIs = 1;
int animControl = 0;
int count = 0;
boolean changing = false;
/*
0 = idleYellow
1 = idleBlue
2 = idleRed
3 = shiftFromYellow
4 = shiftFromBlue
5 = shiftFromRed
6 = shiftToYellow
7 = shiftToBlue
8 = shiftToRed
9 = confusedYellow
10 = confusedBlue
11 = confusedRed
*/

// ==================================================
// setup()
// ==================================================
void setup()
{
// Size of applet
size(screenWidth, screenHeight, P2D);
frameRate(100);
// Capture
cam = new Capture(this, screenWidth, screenHeight);

// Comment the following line if you use Processing 1.5
cam.start();

idleYellow = new Gif(this, “idle_yellow.gif”);
idleBlue = new Gif(this, “idle_blue.gif”);
idleRed = new Gif(this, “idle_red.gif”);
/*idleOrange = new Gif(this, “idle_orange.gif”);
idlePurple = new Gif(this, “idle_purple.gif”);
idleGreen = new Gif(this, “idle_green.gif”);
idleGrey = new Gif(this, “idle_grey.gif”);*/

shiftFromBlue = new Gif(this, “ShiftFromBlue.gif”);
shiftFromRed = new Gif(this, “ShiftFromRed.gif”);
shiftFromYellow = new Gif(this, “ShiftFromYellow.gif”);
//shiftFromGrey = new Gif(this, “ShiftFromGrey.gif”);

shiftToRed = new Gif(this, “ShiftToRed.gif”);
shiftToYellow = new Gif(this, “ShiftToYellow.gif”);
shiftToBlue = new Gif(this, “ShiftToBlue.gif”);
/*shiftToOrange = new Gif(this, “ShiftToOrange.gif”);
shiftToPurple = new Gif(this, “ShiftToPurple.gif”);
shiftToGreen = new Gif(this, “ShiftToGreen.gif”);*/

/*confusedYellow = new Gif(this, “unrecognizedYellow.gif”);
confusedRed = new Gif(this, “unrecognizedRed.gif”);
confusedBlue = new Gif(this, “unrecognizedBlue.gif”);
confusedOrange = new Gif(this, “unrecognizedOrange.gif”);
confusedPurple = new Gif(this, “unrecognizedPurple.gif”);
confusedGreen = new Gif(this, “unrecognizedGreen.gif”);
confusedGrey = new Gif(this, “unrecognized.gif”);*/
idleYellow.loop();

object = false;
lx = 265;
rx = 360;
y = 175;

img = new PImage(160,120);
theBlobDetection = new BlobDetection(img.width, img.height);
theBlobDetection.setPosDiscrimination(true);
theBlobDetection.setThreshold(0.45f); // will detect bright areas whose luminosity > 0.2f;

smooth();

}

// ==================================================
// captureEvent()
// ==================================================
void captureEvent(Capture cam)
{
cam.read();
newFrame = true;
}

// ==================================================
// intel()
// ==================================================

//animControl:
/*
0 = idleYellow
1 = idleBlue
2 = idleRed
3 = shiftFromYellow
4 = shiftFromBlue
5 = shiftFromRed
6 = shiftToYellow
7 = shiftToBlue
8 = shiftToRed
9 = confusedYellow
10 = confusedBlue
11 = confusedRed
*/

void intel()
{
//0 = wants/is blue
//1 = wants/is yellow
//2 = wants/is red

if(colorWant == 0)
{
fill(0, 0, 255); //blue
rect(20, 20, 100, 100);
}
if(colorWant == 1)
{
fill(255, 255, 0); //yellow
rect(20, 20, 100, 100);
}
if(colorWant == 2)
{
fill(255, 0, 0); //red
rect(20, 20, 100, 100);
}

if(colorWant == 0 && colorDetect == “blue” && changing == false)
{
if(colorIs == 1) {idleYellow.stop(); animControl = 3;}
else if(colorIs == 2) {idleRed.stop(); animControl = 5;}
}

if(colorWant == 1 && colorDetect == “yellow” && changing == false)
{
if(colorIs == 0) {idleBlue.stop(); animControl = 4;}
else if(colorIs == 2) {idleRed.stop(); animControl = 5;}
}

if(colorWant == 2 && colorDetect == “red” && changing == false)
{
if(colorIs == 1) {idleYellow.stop(); animControl = 3;}
else if(colorIs == 0) {idleBlue.stop(); animControl = 4;}
}
print(colorIs, ” “);
}

// ==================================================
// drawJanky()
// ==================================================

/*
0 = idleYellow
1 = idleBlue
2 = idleRed
3 = shiftFromYellow
4 = shiftFromBlue
5 = shiftFromRed
6 = shiftToYellow
7 = shiftToBlue
8 = shiftToRed
9 = confusedYellow
10 = confusedBlue
11 = confusedRed
*/

void drawJanky()
{
background(255, 255, 255);

switch(animControl) {
case 0:
idleYellow.loop();
image(idleYellow, 0, 0);
drawEyes(idleYellow);
break;

case 1:
idleBlue.loop();
image(idleBlue, 0, 0);
drawEyes(idleBlue);
break;

case 2:
idleRed.loop();
image(idleRed, 0, 0);
drawEyes(idleRed);
break;

case 3:
changing = true;
shiftFromYellow.play();
shiftFromYellow.ignoreRepeat();
image(shiftFromYellow, 0, 0);
if (shiftFromYellow.currentFrame() == 49)
{
count = 0;
shiftFromYellow.stop();
if(colorWant == 0) animControl = 7;
else if(colorWant == 2) animControl = 8;
}
break;

case 4:
changing = true;
shiftFromBlue.play();
shiftFromBlue.ignoreRepeat();
image(shiftFromBlue, 0, 0);
if (shiftFromBlue.currentFrame() == 49)
{
count = 0;
shiftFromBlue.stop();
if(colorWant == 1) animControl = 6;
else if(colorWant == 2) animControl = 8;
}
break;

case 5:
changing = true;
shiftFromRed.play();
shiftFromRed.ignoreRepeat();
image(shiftFromRed, 0, 0);
if (shiftFromRed.currentFrame() == 49)
{
count = 0;
shiftFromRed.stop();
if(colorWant == 0) animControl = 7;
else if(colorWant == 1) animControl = 6;
}
break;

case 6:
if(count == 0) {
colorIs = 1;
randColor();
count = 1;
}
shiftToYellow.play();
shiftToYellow.ignoreRepeat();
image(shiftToYellow, 0, 0);
drawEyes(shiftToYellow);
if (shiftToYellow.currentFrame() == 49)
{
shiftToYellow.stop();
animControl = 0;
changing = false;
}
break;

case 7:
if(count == 0) {
colorIs = 0;
randColor();
count = 1;
}
shiftToBlue.play();
shiftToBlue.ignoreRepeat();
image(shiftToBlue, 0, 0);
drawEyes(shiftToBlue);
if (shiftToBlue.currentFrame() == 49)
{
shiftToBlue.stop();
animControl = 1;
changing = false;
}
break;

case 8:
if (count == 0){
colorIs = 2;
randColor();
count = 1;
}
shiftToRed.play();
shiftToRed.ignoreRepeat();
image(shiftToRed, 0, 0);
drawEyes(shiftToRed);
if (shiftToRed.currentFrame() == 49)
{
shiftToRed.stop();
animControl = 2;
changing = false;
}
break;
}
}

// ==================================================
// drawEyes()
// ==================================================
void drawEyes(Gif g)
{
if(animControl < 3)
{
//idle animations
if((g.currentFrame() != 15) && (g.currentFrame() < 78 || g.currentFrame() > 92)) eyeTrack();
}

else if(animControl > 5 && animControl < 9)
{
//shiftFrom animations
if(g.currentFrame() > 15) eyeTrack();
}

}

// ==================================================
// randColor()
// ==================================================
void randColor()
{
int newColor = 0;
if(colorIs == 0)
{
newColor = int(random(2));
if (newColor == 0) colorWant = 1;
if (newColor == 1) colorWant = 2;
}
else if(colorIs == 1)
{
newColor = int(random(2));
if (newColor == 0) colorWant = 0;
if (newColor == 1) colorWant = 2;
}
else if(colorIs == 2)
{
newColor = int(random(2));
if (newColor == 0) colorWant = 0;
if (newColor == 1) colorWant = 1;
}

}

// ==================================================
// draw()
// ==================================================
void draw()
{
if (newFrame)
{
newFrame=false;

image(cam,0,0,width,height);
img.copy(cam, 0, 0, cam.width, cam.height,
0, 0, img.width, img.height);
theBlobDetection.computeBlobs(img.pixels);
drawShapes();
drawJanky();
checkState();
intel();
}
}

// ==================================================
// getCenter()
// ==================================================
point getCenter(PShape shape)
{
float left = 0;
float right = 0;
float top = 0;
float bottom = 0;

//left
for (int i = 0; i{
float j = shape.getVertex(i).x;
if (left == 0) left = j;
else if (j}

//right
for (int i = 0; i{
float j = shape.getVertex(i).x;
if (right == 0) right = j;
else if (j>right) right = j;
}

//top
for (int i = 0; i{
float j = shape.getVertex(i).y;
if (top == 0) top = j;
else if (j}

//bottom
for (int i = 0; i{
float j = shape.getVertex(i).y;
if (bottom == 0) bottom = j;
else if (j>bottom) bottom = j;
}

float x = (right – left)/2 + left;
float y = (bottom – top)/2 + top;
point pt = new point(x, y);

return pt;
}

// ==================================================
// getColor()
// ==================================================
color getColor(point pt)
{
cam.loadPixels();
int loc = ((int)pt.x + (int)pt.y*cam.width);
color c = cam.pixels[loc];
float r = red(c);
float g = green(c);
float b = blue(c);
//print(“(“, r, “, “, g, “, “, b, “) “);
return c;
}

// ==================================================
// string isColor(color c)
// ==================================================
String isColor(color c)
{
float r, g, b;
r = red(c);
g = green(c);
b = blue(c);

if(r > 10*g && r > 10*b)
return “red”;
else if(r > 2.5*b && g > 2.5*b)
return “yellow”;
else if(b > 2*r && g > 2*r)
return “blue”;
else return “na”;

}
// ==================================================
// checkState()
// ==================================================

void checkState()
{
if (object == true) {}
}

// ==================================================
// drawShapes()
// ==================================================
void drawShapes()
{
Blob b;
EdgeVertex eA,eB;
PShape s;

for (int n=0 ; n{
//noFill();
s = createShape();
s.beginShape();
//s.fill(255,0,0);
//s.stroke(255,0,0);
b=theBlobDetection.getBlob(n);
if (b!=null)
{
for (int m=0;m{
eA = b.getEdgeVertexA(m);
if (eA != null)
s.vertex(eA.x*width, eA.y*height);
}
}
s.endShape(CLOSE);

//print(s.getVertexCount(), ” “);
if(s.getVertexCount() > 100){
s.setFill(color(getColor(getCenter(s))));
if (trackingPoint == null) trackingPoint = getCenter(s);
colorDetect = (isColor(getColor(getCenter(s))));
shape(s, 0, 0);
object = true;
}
else {
colorDetect = “null”;
object = false;
trackingPoint = null;
}
//shapes.add(s);
//fill(255,255,255);
//ellipse(getCenter(s).x, getCenter(s).y, 5, 5);
}

}
// ==================================================
// eyeTrack()
// ==================================================
void eyeTrack()
{
float targetX;
fill(0,0,0);
if(trackingPoint != null)
{
targetX = trackingPoint.x/23 + 258;
//print(trackingPoint.x, ” “);
if(lx < (int)targetX)
{
lx++; rx++;
}
else if (lx > (int)targetX)
{
lx–; rx–;
}
if (y<185 br="" style="box-sizing: border-box;" y="">}

else
{
if(lx<270 br="" lx="" rx="" style="box-sizing: border-box;">else if(lx>270){lx–;rx–;}
if(y>175){y–;}
}
//left eye
ellipse(width – lx, y, 5, 5);
//right eye
ellipse(width – rx, y, 5, 5);
}
// =================================================
// point
// =================================================
class point{
float x, y;
point(float i, float j){
x = i;
y = j;
}
}

Idle

Unrecognized

User study Banner

User study questions

Blue Tangible

Yellow Tangible

Red Tangible

Sketch of Janky

Early Concept

Finalizing Janky

Finalized Concept

Tangible Concept