Author: Paulin Alcoser

The first version of the videogame was done and we tested with three users.

The feedback given by user 1 was: Make the cursor brighter, avoid mirror effect with the cursor, have fewer targets that go faster, create random motions with the targets, and instructions so the user knows how to play;

The feedback given by user 2 was: Try to add more animations special effects so it feels more like a videogame, Make the cursor brighter and avoid the mirror effect.

The feedback given by user 3 (Jack) was: Modify the algorithm(Right now I am detecting the closer object in the Kinect in certain thresholds, but Jack told me that I would be a better idea to detect the change in the motion by making a comparison among different frame counts), to make the cursor more noticeable, and to declare the animations in the set up to make the code runs smoother

 

Conclusion and observations of the user tests:

• We need to improve the design because users take time to figure it out what’s going on and it is still intuitive.
• We will try the algorithm suggested by Jack to see if the movement detection accuracy improves.
• We will use Jack advice to add properly the animation needed to improve the experience of the game.

So far we have improved the accuracy of the Kinect, although we still want to put more conditions to make it more accurate. In the beginning, we use an algorithm that set up thresholds for aiming and shooting, after realizing that this algorithm was not enough for the accuracy that we wanted we added the condition where the closest the aiming box will be created in the pixel with the closest distance to the Kinect sensor in that aiming or shooting threshold. The code will be attached below. Now we are currently working to destroy targets once the user shoots at it.

 

Also, we have been working in what we think will the toughest challenge that is creating the main menu and buttons to store the scores, to show in the screen who has been the best iron man from all the participants during the IM showcase. The code will attach below

import org.openkinect.freenect.*;
import org.openkinect.freenect2.*;
import org.openkinect.processing.*;
import org.openkinect.tests.*;
PImage img;
float angle;
Kinect kinect;
boolean shoot;
float minShoot;
float minThresh;
float maxThresh;

void setup(){
  size(512,484);
  kinect = new Kinect(this);
  kinect. initDepth();
  kinect.initVideo();
  img = createImage(kinect.width, kinect.height,RGB); 
  angle = kinect.getTilt();
  shoot = false;
  minShoot = 610;
  minThresh = 710;
  maxThresh = 800;
}

void draw(){
  background(0);
  shoot = false;
  img.loadPixels();
  PImage dImg = kinect.getDepthImage();
  image(dImg,0,0);
  int[] depth = kinect.getRawDepth();
  float sumX = 0;
  float sumY = 0;
  float totalPixels = 0;
  
  int record = 4500;
  int rx = 0;
  int ry = 0;
  for (int x = 0; x<kinect.width; x++){
    for (int y =0; y< kinect.height; y++){
      int offset = x + y*kinect.width;
      int d = depth[offset];
      if(d>=minThresh && d<maxThresh){
        img.pixels[offset] = color(255,0,150);
        sumX+= x;
        sumY+=y;
        totalPixels++;
        if(d<record){
          record = d;
          rx = x;
          ry = y;
        }
      }
      
      else if(d>=minShoot && d<minThresh){
        img.pixels[offset] = color(255,255,0);
        sumX+= x;
        sumY+=y;
        totalPixels++;
        shoot = true;
         if(d<record){
          record = d;
          rx = x;
          ry = y;
        }
        
      }

      else{
      img.pixels[offset] = dImg.pixels[offset] ;
    }
    }
  }
  
  img.updatePixels();
  image(img,0,0);
  
  float avgX = sumX/totalPixels;
  float avgY =sumY/totalPixels;
  if(shoot == true){
  fill(255,0,0);
  }
  else{
    fill(150,0,255);
  }
  ellipse(rx,ry,64,64); 
}

void keyPressed() {
  if (key == CODED) {
    if (keyCode == UP) {
      angle++;
    } else if (keyCode == DOWN) {
      angle--;
    }
    angle = constrain(angle, 0, 30);
    kinect.setTilt(angle);  
  }
}

PImage menupic;
PImage bpic;
PImage spic;
import controlP5.*;
int state = 0;
ControlP5 a;
ControlP5 c;
ControlP5 d;
String output;
PFont b;
PFont yo; //for Scoreboard text input
final int menu = 0;
final int game = 1;
final int scoreboard = 2;
final int options = 3;
final int quit = 4;


void setup(){
  menupic = loadImage("menu.jpg"); //menu picture
  bpic = loadImage("background.jpg"); //background picture
  spic = loadImage("scoreboard.jpg"); //scoreboard picture
  size(1920,1030);
  
  //MENU INTERACTIONS
  a = new ControlP5(this); //a is for menu
  b = createFont("Verdana",30); //font for menu
  yo = createFont("Verdana",15); //font for scoreboard form
  a.addButton("Play") //name
    .setPosition(100,150) //position
    .setSize(250,200) //size
    .setFont(b) //font
    ;
  a.addButton("Scoreboard")
    .setPosition(1500,150)
    .setSize(250,200)
    .setFont(b)
    ;
  a.addButton("Options")
    .setPosition(100,750)
    .setSize(250,200)
    .setFont(b)
    ;
  a.addButton("Quit")
    .setPosition(1500,750)
    .setSize(250,200)
    .setFont(b)
    ;
    //C = Back Button
  c= new ControlP5(this); //c is for back button
  c.addButton("Back")
    .setPosition(1500,750)
    .setSize(250,200)
    .setFont(b)
    ;
    //D = Scoreboard
  d= new ControlP5(this); //d is for scoreboard screen
  
  d.addTextfield("Insert Name Here").setPosition(200,200).setSize(200,50).setAutoClear(false).setFont(yo);
  d.addBang("Submit").setPosition(400,200).setSize(200,50).setFont(yo);
    
}

void draw(){
  image(menupic,0,0);
  if(state == 0){ //Menu
    runMenu();
    c.hide();
    a.show();
    d.hide();
  }
  else if(state == 1){ //Game
    runGame();
    a.hide();
    //c.hide();
    c.show();
    d.hide();
  }
  else if(state == 2){ //Scoreboard
    image(spic,0,0);
    c.show();
    a.hide();
    d.show();
  }
  else if(state ==4){ //Quit
    exit();
  }
}
void runMenu(){
  textSize(40);
  text("MENU",50,100);
  
}
void runGame(){
  image(bpic,0,0);
}

void Play(){
  state = 1;
}
void Scoreboard(){
  state = 2;
}
void Back(){
  state = 0;
}

void Quit(){
  state = 4;
}

void Submit(){ //Submit form for text input in Scoreboard
  output = d.get(Textfield.class,"Insert Name Here").getText();
  println(output);
}

 

The first challenge that we mentioned was to create a user experience that allows people to feel like their iron man. In order to beat this challenge the first step that we took was using a Kinect to detect the hand of a user and to detect whether this hand moves in the X, Y or Z axis. This weekend we learned how the infrared sensor of the Kinect works and how it can detect the distance of objects.  So we created a processing program that detects the hand of the user when it’s in a specific distance and it puts an ellipse in the middle of the hand and then if the user moves his hand closer than the code change the color of the ellipse simulating that the user shot at a target. The code is attached.

import org.openkinect.freenect.*;
import org.openkinect.freenect2.*;
import org.openkinect.processing.*;
import org.openkinect.tests.*;
PImage img;

Kinect kinect;

void setup(){
  size(512,484);
  kinect = new kinect(this);
  kinect. initDepth();
  kinect.initDevice();
  img = createImage(kinect.depthWidth, kinect.depthHeight,RGB); 
}

void draw(){
  background(0);
  
  img.loadPixels();
  
  int[] depth = kinect.getRawDepth();
  float sumX = 0;
  float sumY = 0;
  float totalPixels = 0;
  for (int x = 0; x<kinect.depthWidth; x++){
    for (int y =0; y< kinect.Height; y++){
      int offset = x + y*kinect.depthWidth;
      int d = depth[offset];
      if(d>400 && d<1000){
        img.pixels[offset] = color(255,0,150);
        sumX+= x;
        sumY+=y;
        totalPixels++;
      }
       else if(d>200 && d<400){
        img.pixels[offset] = color(128,255,0);
        sumX+= x;
        sumY+=y;
        totalPixels++;
      }
      else;
      img.pixels[offset] = color(0);
    }
  }
  img.updatePixels();
  image(img,0,0);
  
  float avgX = sumX/totalPixels;
  float avgY =sumY/totalPixels;
  fill(150,0,255);
  ellipse(avgX,avgY,64,64); 
}

Credits to Daniel Shiffman from the Coding Train to teach us how to read kinect data

 

My main takeaway of this reading is that since the beginning of computer interactive art, the computer has been one of its most powerful tools.  The reading goes through a bit of the history of computer vision and interactive art and it mentions that one of the first computer interactive art performance was made using computer vision. Lately, in the reading, it is also mentioned that experts are still working to improve the algorithms to make computer vision more efficient. Hence, this means that computer vision was a cornerstone technique in interactive art and that there are still things to explore in computer vision.

I also found this reading helpful for our project. I learned that Kinect uses the Infrared technique  mention in the reading and that we are going to use detect motion. This reading help me to visualize all the potential techniques that I may use to create a better user experience for my final project

Concept of the Game:

3D videogame controls an iron man glove and a button to shoot, obstacles will be shown flying at the user and the user would have to aim and destroy the obstacle.

Materials Needed:

• glove with Ultrasonic or Infrared sensors
• button controller
•  Environment made in processing
• Box Surrounding the user to detect the distance.

Procedure:

1. We will create a glove similar to the iron man glove with infrared sensors and ultrasonic light that will detect the distance from the hand to the box that will surround the user.
2.  The values gathered by the sensors will cause movement in an aiming box in the processing environment
3. If the aiming box is at the same location as the obstacle and the user shoot,  a laser beam will be shown in the screen and the obstacle will be destroyed
4. The player will have one minute to destroy as many obstacles as possible. At the end of the game, we will show a scoreboard with the highest scores.

 

Creditst to the following videos and avengers Endgame for giving us the inspiration to this videogame.

 

 

 

This week assignment was to create a generative text. So what I did, taking inspiration by the movement of objects underwater, was to create a type of bubbles with random colors that have a smooth and random motion through the environment. The idea is that some of these bubbles randomly contain the letters and when the mouse is on the screen these bubbles will align to make a word. Some of the features of this art are that it shows deepness, the smaller the bubble is the lighter color it will have, in order to create an illusion that some objects are closer than others.

Potential improvements for this art, is add to the bubbles with letters the methods to allow to show the path of movement when these moves from its original position to the position to generate the code.

class FarCircles{
  float x,y,xSpeed,ySpeed,size;
  PVector loc;
  int R,G,B;
  
  
    FarCircles(int r,int g, int b, float SIZE){
      x = random(0+SIZE, width - SIZE);
      y = random(0-SIZE, height - SIZE);
      loc = new PVector(x,y);
      xSpeed = random(-.1,.1);
      ySpeed = random(-.1,.1);
      R=r;
      G=g;
      B=b;
      size = SIZE;
    }//Far circles
    
    void update(){
      loc.x+=xSpeed;
      loc.y+=ySpeed;
    }
    
    void display(){
      pushMatrix();
      fill(R,G,B);
      circle(loc.x, loc.y, size);
      fill(255);
      circle(loc.x, loc.y, size-5);
      popMatrix();
    }
    
  //size = diameter  
  void checkEdges() {
    if (loc.x+(size/2)>=width || loc.x-(size/2)<=0){
      xSpeed*=-1;
      ySpeed*=-1;
    }
    if (loc.y+(size/2)>height || loc.y-(size/2)<0)
  {
      ySpeed*=-1;
      xSpeed*=-1;
  }
    if(loc.x+(size/2) == (width/2)-150 && loc.y>(height/2)-50 && loc.y<(height/2) + 50){
      xSpeed*=-1;
      ySpeed*=-1;
    }
    if(loc.x-(size/2) == (width/2)+150 && loc.y>(height/2)-50 && loc.y<(height/2) + 50){
      xSpeed*=-1;
      ySpeed*=-1;
    }
    if(loc.y+(size/2) == (height/2)-50 && loc.x>(width/2)-150 && loc.x<(width/2) + 150){
      ySpeed*=-1;
      xSpeed*=-1;
    }
    if(loc.y-(size/2) == (height/2)+50 && loc.x>(width/2)-150 && loc.x<(width/2) + 150){
      ySpeed*=-1;
      xSpeed*=-1;
    }
  }
  
  void textCircles(char character){
    for(int i=0; i<word.length();i++){
      pushMatrix();
      fill(R,G,B);
      circle(loc.x, loc.y, size);
      fill(255);
      circle(loc.x, loc.y, size-5);
      pushMatrix();
      translate(loc.x,loc.y);
      fill(0);
      textSize(76);
      text(character,-26,32);
      popMatrix();
      popMatrix();
    }
    
  } // textCircles
  
    void centerCircle(float newX, float newY){
      loc.x = newX;
      loc.y = newY;
      xSpeed = 0;
      ySpeed = 0;
    }

   
}//class 
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////
String word = "HOLA";
FarCircles[] circles = new FarCircles[35];
FarCircles[] letters =  new FarCircles[word.length()];
void setup() {
  size(640,480);
  noStroke();
  for (int i=0;i<circles.length; i++){
    float size = random(0,84);
      if(size>0 && size<14){
        int array[] = {204, 229,255};
        int R =int( random(0,3));
        int G = int(random(0,3));
        int B = int(random(0,3));
        circles[i] = new FarCircles(array[R],array[G],array[B], size);
      }
      if(size>14 && size<28){
        int array[] = {153, 204,255};
        int R = int( random(0,3));
        int G = int(random(0,3));
        int B = int(random(0,3));
        circles[i] = new FarCircles(array[R],array[G],array[B], size);
      }
      if(size>28 && size<42){
        int array[] = {102, 178,255};
        int R = int(random(0,3));
        int G = int(random(0,3));
        int B = int(random(0,3));
        circles[i] = new FarCircles(array[R],array[G],array[B], size);
      }
      if(size>42 && size<56){
        int array[] = {51, 153,255};
        int R = int(random(0,3));
        int G = int(random(0,3));
        int B = int(random(0,3));
        circles[i] = new FarCircles(array[R],array[G],array[B], size);
      }
      if(size>56 && size<70){
        int array[] = {0, 128,255};
        int R = int(random(0,3));
        int G = int(random(0,3));
        int B = int(random(0,3));
        circles[i] = new FarCircles(array[R],array[G],array[B], size);
      }
      if(size>70 && size<84){
        int array[] = {0, 102,204};
        int R = int(random(0,3));
        int G = int(random(0,3));
        int B = int (random(0,3));
        circles[i] = new FarCircles(array[R],array[G],array[B], size);
      }
  }//loop
  for(int p =0; p<word.length();p++){
        int array2[] = {0, 102,204};
        int R = int(random(0,3));
        int G = int(random(0,3));
        int B = int (random(0,3));
    letters[p] = new FarCircles(array2[R],array2[G],array2[B],84);
  }
}


void draw() {
  
background(255);
 for (int i=0; i<circles.length; i++){
    circles[i].update();
    circles[i].checkEdges();
    circles[i].display();
  }//loop
  

   for (int j=0; j<letters.length; j++){
    letters[j].update();
    letters[j].checkEdges();
    if(mouseOn()==true){
      float w = word.length()*84 + word.length()*2;
      float separation = w/word.length();
      //pushMatrix();
      //translate(width/2, height/2);
      //fill(255);
      //rect( - w/2, -44, w, 84);
      //popMatrix();
      letters[j].centerCircle(width/2-w/2+42+(separation*j),height/2);
    }
    //else{
    //  letters[j].xSpeed = random(-.1,.1);
    //  letters[j].ySpeed = random(-.1,.1);
    //  letters[j].update();
      
    //}
    letters[j].textCircles(word.charAt(j));
  }//loop
  
}


boolean mouseOn(){
  if(mouseX>0 && mouseX< width && mouseY>0 && mouseY<height){
  return true;
  }
  else {
    return false;
  }
}

//void mouseOn(){
//  float w = word.length()*84 + word.length()*2;
//  float separation = w/word.length() -42;
//  if(mouseX>0 && mouseX< width && mouseY>0 && mouseY<height/2){
//    pushMatrix();
//    translate(width/2, height/2);
//    fill(255);
//    rect( - w/2, -44, w, 84);
//    popMatrix();
//    pushMatrix();
//    translate(width/2 - w/2 + 42, height/2);
//    for(int i = 0; i<word.length();i++){
//      letters[i].centerCircle(separation*i,0);
//    }
//    popMatrix();
//  }
//}





//void checkClashes(){
//  FarCircles[] temp = new FarCircles[circles.length];
//  for (int k=0; k<circles.length;k++){
//    circles[k] = temp[k];
//  }
//  for(int i =0; i<circles.length; i++){
//      for(int j =0; j<circles.length; j++){
//        if(i !=j){
//          if( circles[i].loc.x + circles[i].size == circles[j].loc.x - circles[j].size){
//            circles[i].xSpeed*=-1;
//          }//if first x
//          else if( circles[i].loc.x -circles[i].size == circles[j].loc.x + circles[j].size){
//            circles[i].xSpeed*=-1;
//          }//if second x
//          else if( circles[i].loc.y +circles[i].size == circles[j].loc.y - circles[j].size){
//            circles[i].ySpeed*=-1;
//          }//if first y
//          else if( circles[i].loc.x -circles[i].size == circles[j].loc.y +circles[j].size){
//            circles[i].ySpeed*=-1;
//          }//if second y  
//        }//if i =j
//      }// j loop
//  }// i loop

//} //checkclashes

 

The main goal of this text is to create awareness of the importance of digitalization in these times. Digitalize everything uses as evidence the examples of digital applications that have affected our lives such as Waze, an app that can tell you the current best route possible to your destination, and google translate, an app that translates text among different languages.  Also, the text shows examples of the current uses of digital applications, just as how it is possible to predict the success of a movie in the box office by analyzing the tweets made about that movie.

The main take away of the reading is that we are currently living in the second machine age and digitalization lies in its heart.

This reading presents a dilemma in the design of the products that helped people with disabilities. The text presents a comparison between aid objects that have a different level of social acceptance. While in the design of hearing aids objects discretion is one of the most important characteristics, in the design of eyeglasses fashion is almost a must. My guess to explain this phenomenon is that the more common is the disability and the less impact that it has in the person’s life causes to find “normal” certain aid devices. Another main takeaway of this reading is the importance of considering disabilities in the design process of daily objects. Sometimes a bad design of the simplest can really affect people’s life and right now, due to my knee injury and that I am using clutches, I have been able to perceive the bad design of the simplest thing. I am impressed by how much a friendly disabilities design can make life easier.

 

For this week assignment, I decided to build the classic Snake game that used to appear in all Nokia phones before the smartphones were invented. The Idea seemed simple at the beginning to create class Snake with the proper methods that allow the snake to move in a specific direction, eat the apple and increase its size and die if the snake clash against itself.  Creating the methods to move around and eat an apple were simple to make. The struggle came trying to build an increasing size method. When I was planning my algorithm I forgot that arrays cannot increase its size once the code is running, so the solution that I attempted to do was using ArrayList instead of arrays to keep the vector position of the snake. Unfortunately,  I was not able to make ArrayList work the way I wanted, Although I learned how to add and remove elements from ArrayList I did not find a function that Allowed to overwrite the values from the list without altering its size. And when I gave up trying to use ArrayList it was too late to design a whole new algorithm. But I decided to make a piece of art with the leftovers of my snake code.

Credits to this video of the  CodingTrain who helped me to be closer to achieving the game that I wanted to create. But if the purpose was to improve my OOP, it definitely worked.

int scl = 20;
PVector apple;


////////////////////////////////////OPP
class Snake{
int xspeed, yspeed, xdir, ydir;
int x,y;
int total;
PVector vec ;
ArrayList<PVector> tail;

 Snake(){
  x = 0;
  y = 0;
  xspeed = 0;
  yspeed = 0;
  total = 0;
 tail = new ArrayList();
 }

void update(){

  if (total == tail.size()){
 for(int i = 0; i<tail.size();i++){
    tail.remove(i);
  tail.add(i,tail.get(i+1));
  
 }
  }
 vec = new PVector(x,y);
 tail.add(vec);
 
 

 

 for (int i = 0; i< tail.size();i++){
   print("Snake",tail.get(i));
 }
 
  x = x+xspeed*scl;
  y = y+yspeed*scl;
  x = constrain(x,0,width -scl);
  y = constrain(y,0,height -scl); 
}

void show(){

   println("total",total);
   println("size",tail.size());
for(int i = 0; i<tail.size();i++){
  fill(random(255),random(100),random(50));
   rect(tail.get(i).x,tail.get(i).y,scl,scl);
 }
  fill(random(255),random(100),random(50));
  rect(x,y,scl,scl);
  
}
void setdir(int xpass,int ypass){
  xspeed = xpass;
  yspeed = ypass;
  
}

boolean eat(PVector pos){
  float dis = dist(x,y,pos.x,pos.y);
  if(dis<2){
    total++;

    return true ;
  }
  else{
    return false ;
  }
}

}
////////////////////////Main///////////////////////
Snake snake;
void setup(){
  size(640, 480);
  snake = new Snake();
  frameRate(600);
  pickLocation();
 
}

void pickLocation(){
  int cols = int(width/scl);
  int rows = int(height/scl);
  apple = new PVector(int(random(cols)),int( random(rows)));
  apple.mult(scl);
}



void keyPressed(){ 
int four = int(random(4));
  if(four == 0){
    snake.setdir(0,-1);
  }
   else if(four == 1){
     snake.setdir(0,1);
  }
   else if(four == 2){
     snake.setdir(-1,0);
  }
  else if(four == 3){
     snake.setdir(1,0);
  }
}



void draw(){
  background(255);
  keyPressed();
  snake.update();
  snake.show();
  
  if(snake.eat(apple)){
    pickLocation();
  }
  
  fill(254,0,101);
  rect(apple.x, apple.y, scl,scl);  
}