Punch Me, I Dare You – Kinect Game

[PHOTOS and VIDEO COMING SOON]

Overview
Punch Me, I Dare You is a game that Tony Lim and I worked on for our ICM final. It uses a hacked Kinect, Processing, and MaxMSP. Download the full game here.

The Game
It’s a stress-relieving game that encourages the  player to punch areas of a face on screen (See my teasing face above). There are five areas: left eye, right eye, nose, left cheek, and right cheek. Each area must accumulate a certain amount of damage through punching before the player can move to the next area. A short clip of high-energy music plays each time a punch is landed, and the music progresses as the player progresses through the game. The game is timed, encouraging the player to want to beat their own time. Continue reading →

54 years ago Short URL

Computational Media

////

Mouse Position is not Updated in while-loop

So I’d been racking my brain on this for some time, wondering why my sketch wasn’t working. Then I realized what was wrong. Hopefully anyone in the same predicament and searching the web will find this helpful.

Mouse Position cannot updated inside of a while-loop.

Run this and see:
void setup(){
size(300,300);

}

void draw(){

while (mouseX < 150){
println(“in while-loop”);
println(“frameCount: ” +frameCount);
println(“mouse position: “+mouseX+”, ” +mouseY);
}
println(“out of loop”); //you will never see this

}

54 years ago Short URL

Computational Media

//

Juggling Game

This is a simple jugging game I created for this week’s assignment. I wanted to replace the 2 circles with images of circus balls but I having problems. I also couldn’t get them to rotate.

I started with the Example code in Processing for BouncyBubbles and I built the game on top of that.

/* This stetch will produce a little juggling game */

//int numBalls = 2;
int numBalls = 3;
float spring = 0.05;
float gravity = 0.03;
float friction = -0.9;
Ball[] balls = new Ball[numBalls];

int gameLength = 30; //how long the game will last in seconds

int timer; //time in seconds
int counter = 0;
int timedScore;
int savedTimeScore;
int ballsUpStartTime;
//int ballCounter = 0; //number of balls in the air

void setup() { 
  size(400, 700);
  noStroke();
  smooth();

  for (int i = 0; i < numBalls; i++) {
    balls[i] = new Ball(random(width), height, random(20, 40), i, balls);
  }
}

void draw() {

  background(0);
  for (int i = 0; i < numBalls; i++) {
    balls[i].collide();
    balls[i].move();
    balls[i].display();
  }
  //set the countdown timer
  timer = gameLength - int(millis()/1000);
  text ("Time left: " + timer, 20, 10);

  //set the ball counter = number of balls in the air
  int ballCounter=0;
  for (int i=0; i<numBalls; i++) {
    if (balls[i].onTheFloor() == false) {
      ballCounter++;
    }
  }

  if (ballCounter == balls.length) {
    //reset the time counter
    println("All BALLS UP!");
    
    //start timing
    //timedScore += int(frameCount /60);
    ballsUpStartTime = int(millis()/1000);
    println("millis/1000 "+int(millis()/1000));
    timedScore = int(millis() /1000) - ballsUpStartTime;
    println("timedScore : "+timedScore);
  }else { // if there's a ball on the ground, save the time
    //check if the time is bigger that the other time
    if (timedScore > savedTimeScore){
      savedTimeScore = timedScore;
    }
    
    timedScore = 0;
  }

  text ("Balls in the Air: " + ballCounter, 10, 50);

  if (timer == 0) {
    noLoop();
    background(0);
    fill(150);
    text("Your top score: "+ savedTimeScore, width/2, height/2);
  }
}// end draw



void mousePressed() {
  for (int i = 0; i < numBalls; i++) {
    balls[i].collideWMouse(mouseX, mouseY);
  }
}
class Ball {
  float x, y;
  float diameter = 50;
  float vx = 0;
  float vy = 0;
  int id;
  int ballRotation = 0;
  int push = 2;//for the on-click function
  Ball[] others;
  PImage b;

  boolean onTheFloor = true;

  Ball(float xin, float yin, float din, int idin, Ball[] oin) {
    x = xin;
    y = yin;
    id = idin;
    others = oin;
    b = loadImage("circusball.gif");
  } 

  void collide() {
    for (int i = id + 1; i < numBalls; i++) {
      float dx = others[i].x - x;
      float dy = others[i].y - y;
      float distance = sqrt(dx*dx + dy*dy);
      float minDist = others[i].diameter/2 + diameter/2;
      if (distance < minDist) { 
        float angle = atan2(dy, dx);
        float targetX = x + cos(angle) * minDist;
        float targetY = y + sin(angle) * minDist;
        float ax = (targetX - others[i].x) * spring;
        float ay = (targetY - others[i].y) * spring;
        vx -= ax;
        vy -= ay;
        others[i].vx += ax;
        others[i].vy += ay;
      }
    }
  }

  void collideWMouse(int mousePosX, int mousePosY) {

    if (mousePosX >x - diameter/2 && mousePosX < x + diameter/2 && mousePosY > y-diameter/2 && mousePosY < y + diameter/2) {
//      println("You hit Ball #" + id); 
//      println("on the Floor: " +onTheFloor());
//      println("Y: " +y);

      vy = -(Math.abs((vy+1) + push));
    }
  }

  void move() {
    vy += gravity;
    x += vx;
    y += vy;
//    this.rotate(ballRotation++);
    if (x + diameter/2 > width) {
      x = width - diameter/2;
      vx *= friction;
    }
    else if (x - diameter/2 < 0) {
      x = diameter/2;
      vx *= friction;
    }
    if (y + diameter/2 > height) {
      y = height - diameter/2;
      vy *= 0; 
      fill(255, 0, 0);
    } 
    else if (y - diameter/2 < 0) {
      y = diameter/2;
      vy *= friction;
    }
  }

  void display() {
    fill(255, 204);
    ellipse(x, y, diameter, diameter);
//    image(b, x, y, diameter, diameter);
  }

  boolean onTheFloor() {
    if (y + diameter/2 >= height) {
      onTheFloor = true;
    }
    else {
      onTheFloor = false;
    }
    return onTheFloor;
  }
}//end Ball class

54 years ago Short URL

Computational Media

Highlights Part 2 – Modularity in Processing

Mike and I expanded on my Highlights project last week and came up with this. I’m still not sure why it’s taking so long to play.

//global variables
int ballWidth = 10;

Circle myCircle;
Circle circle2;

void setup()
{
  size (600, 600);
  smooth();
  background(0);
  //frameRate(30);
  myCircle = new Circle(10, 400, 10);
  circle2 = new Circle(590, 200, 10);
}

void draw()
{
  background(0);

  //draw colored balls
  for (int i=0; i * ballWidth < width; i++)
  {
    for (int a=0; a * ballWidth < height; a++)
    {
      int ballX = ballWidth*i + ballWidth/2;
      int ballY = ballWidth*a + ballWidth/2;

      fill(map(ballX,0,width, 0,255), frameCount, map(ballY, 0, height, 0, 255));
      ellipse(ballX, ballY, ballWidth, ballWidth);
    }
  }

  //determine coordinates of the highlights
  /*float column = random(0, width/ballWidth);
  int newColumn = int(column);
  int randomX = newColumn * ballWidth+ ballWidth/2;
  float columnY = random(0, height/ballWidth);
  int newColumnY = int(columnY);
  int randomY = newColumnY * ballWidth + ballWidth/2;*/

  //draw highlights
  //drawHighlight(randomX, randomY);
  //drawHorizontalHighlight(randomX, randomY);

  myCircle.moveIt();
  myCircle.showIt();

  drawHighlight(myCircle.x, myCircle.y);
  drawHorizontalHighlight(myCircle.x, myCircle.y);

  circle2.moveIt();
  circle2.showIt();

  drawHighlight(circle2.x, circle2.y);
  drawHorizontalHighlight(circle2.x, circle2.y);

}//end draw

void drawHighlight (int _x, int _y)
{
  for (int d=0; d*ballWidth <= width; d++)
  {
    //bottom spoke
    fill(255, 255, 255, 100);
    ellipse(_x, _y+ d*ballWidth, ballWidth, ballWidth);
    fill(255, 255, 255, 70);
    ellipse(_x + ballWidth, _y+ d*ballWidth, ballWidth, ballWidth);
    ellipse(_x - ballWidth, _y+ d*ballWidth, ballWidth, ballWidth);
    fill(255, 255, 255, 40);
    ellipse(_x + 2*ballWidth, _y+ d*ballWidth, ballWidth, ballWidth);
    ellipse(_x - 2*ballWidth, _y+ d*ballWidth, ballWidth, ballWidth);
  }
  for (int d=0; d*ballWidth <= width; d++)
  {
    //top spoke
    fill(255, 255, 255, 100);
    ellipse(_x, _y- d*ballWidth, ballWidth, ballWidth);
    fill(255, 255, 255, 70);
    ellipse(_x + ballWidth, _y- d*ballWidth, ballWidth, ballWidth);
    ellipse(_x - ballWidth, _y- d*ballWidth, ballWidth, ballWidth);
    fill(255, 255, 255, 40);
    ellipse(_x + 2*ballWidth, _y- d*ballWidth, ballWidth, ballWidth);
    ellipse(_x - 2*ballWidth, _y- d*ballWidth, ballWidth, ballWidth);
  }
}//end drawHighlight

void drawHorizontalHighlight (int _x, int _y)
{
  for (int d=0; d*ballWidth <= height; d++)
  {
    //left spoke
    fill(255, 255, 255, 100);
    ellipse(_x +d*ballWidth, _y, ballWidth, ballWidth);
    fill(255, 255, 255, 70);
    ellipse(_x + d*ballWidth, _y+ ballWidth, ballWidth, ballWidth);
    ellipse(_x + d*ballWidth, _y- ballWidth, ballWidth, ballWidth);
    fill(255, 255, 255, 40);
    ellipse(_x + d*ballWidth, _y+ 2*ballWidth, ballWidth, ballWidth);
    ellipse(_x + d*ballWidth, _y- 2*ballWidth, ballWidth, ballWidth);
  }
  for (int d=0; d*ballWidth <= height; d++)
  {
    //right spoke
    fill(255, 255, 255, 100);
    ellipse(_x - d*ballWidth, _y, ballWidth, ballWidth);
    fill(255, 255, 255, 70);
    ellipse(_x - d*ballWidth, _y + ballWidth, ballWidth, ballWidth);
    ellipse(_x - d*ballWidth, _y- ballWidth, ballWidth, ballWidth);
    fill(255, 255, 255, 40);
    ellipse(_x - d*ballWidth, _y+ 2*ballWidth, ballWidth, ballWidth);
    ellipse(_x - d*ballWidth, _y- 2*ballWidth, ballWidth, ballWidth);
  }
}//end drawHorizontalHighlight

// Cirlce Class
class Circle
{
  int x;
  int y;
  int xSpeed = 30;
  int ySpeed = 30;
  int circleSize;
  color circleColor;

  Circle(int _x, int _y, int _size)
  {
    x = _x + 5;
    y = _y + 5;
    circleSize = _size;
    //circleColor = color(random(255));
    circleColor = 255;
  }

  void moveIt()
  {
    x = x + xSpeed;
    y = y + ySpeed;

    if (x > width || x < 0)
    {
      xSpeed = xSpeed * -1;
    }

    if (y > height || y < 0)
    {
      ySpeed = ySpeed * -1;
    }
  }

  void showIt()
  {
    fill(circleColor);
    ellipse(x, y, circleSize, circleSize);
  }
}

54 years ago Short URL

Computational Media

Drawing App Throwback – Interaction and Variation in Processing

Use the arrow keys on your keyboard to draw something. Change the color of the pen to blue by tapping ‘b,’ green by tapping ‘g,’ and red by tapping ‘r.’

Just a little throwback to using keystrokes for drawing pictures.

I really wanted to have a key were you can switch from a ‘draw’ mode to a ‘move’ mode so you can move the cursor to somewhere else before drawing again, but I couldn’t figure out how to do that with out erasing everything. How do you keep some of the screen intact while erasing other parts? 

int ballWidth = 10;
int ballRadius = ballWidth /2;

int ballX = ballRadius;
int ballY = ballRadius;

int[] ballColor = {
  231, 0, 51
};
String ballColorText = "RED";

int opacity = 200;

int ballCount = 0;

boolean ballDraw = false;
PFont font;

void setup() {
  frameRate(5);
  size(400, 400);
  background(0);

  smooth();
  fill(255);

  //draw the main background grid
  for (int i=0; i * ballWidth < width; i++) {    
    for (int a=0; a * ballWidth < height; a++) {
      ellipse(ballWidth*i +ballRadius, (ballWidth * a+ballWidth/2), ballWidth, ballWidth);
    }
  }
}

void draw() {
  fill(0);
  rect (0, height - 50, width, 50);
  fill(0, 102, 153);
  text ("Count: " + ballCount, width -100, height - 20);
  text ("Draw color: " + ballColorText, 10, height - 20);
  //println(frameCount);
  if (keyPressed) {
    if (key == ' ') {
      //setup();

      ballDraw = !ballDraw;
      //  ballX
    }
  }
}

void keyPressed() {
  fill(ballColor[0], ballColor[1], ballColor[2], opacity);
  if (key == CODED) {
    switch (keyCode) {
    case LEFT :
      ellipse(ballX - ballWidth, ballY, ballWidth, ballWidth);
      ballX -= ballWidth;
      ballCount++;
      break;
    case RIGHT :
      ellipse(ballX + ballWidth, ballY, ballWidth, ballWidth);
      ballX += ballWidth;
      ballCount++;
      break;
    case UP :
      ellipse(ballX, ballY - ballWidth, ballWidth, ballWidth);
      ballY -= ballWidth;
      ballCount++;
      break;
    case DOWN :
      ellipse(ballX, ballY + ballWidth, ballWidth, ballWidth);
      ballY += ballWidth;
      ballCount++;
      break;
    default :
      break;
    }
  }
  switch (key) {
  case 'g' :
    //fill in green
    println("Green pressed!");
    //ballColor = {140, 235, 93};
    ballColor[0] = 140;
    ballColor[1] = 235;
    ballColor[2] = 93;
    ballColorText = "GREEN";
    break;

  case 'r' :
    //fill in green
    println("Red pressed!");
    ballColor[0] = 231;
    ballColor[1] = 0;
    ballColor[2] = 51;
    ballColorText = "RED";
    break;

  case 'b' :
    //fill in green
    println("Blue pressed!");
    ballColor[0] = 0;
    ballColor[1] = 102;
    ballColor[2] = 153;
    ballColorText = "BLUE";
    break;

  default:
    break;
  }
}

54 years ago Short URL

Computational Media

Highlights – Interaction and Variation in Processing

I wanted to created a highlight effect over a grid. Originally I wanted to highlight to be diagonal, but it was getting to be difficult. The hardest part about this was figuring out which circle in the grid needed to be which color. I ended up with two identical, nested for-loops: one for the background, and second for finding where the mouse was. I also had to call the setup function inside of draw, which I’m almost sure is a not a good idea. That’s probably why this page is super sloooow.

//global variables
int ballWidth = 10;


void setup() {
  size (600, 600); 
  smooth();
 background(0);

  for (int i=0; i * ballWidth < width; i++) {    
    for (int a=0; a * ballWidth < height; a++) {
      int ballX = ballWidth*i + ballWidth/2;
      int ballY = ballWidth*a + ballWidth/2;

      fill(ballX, 0, ballY);
      ellipse(ballX, ballY, ballWidth, ballWidth);
    }
  }
}


void draw() {
  setup();

  for (int i=0; i * ballWidth < width; i++) {    
    for (int a=0; a * ballWidth < height; a++) {
      int ballX = ballWidth*i + ballWidth/2;
      int ballY = ballWidth*a + ballWidth/2;

      if (((mouseX >= ballWidth*i) && (mouseX <= ballWidth*i+ballWidth))
        && ((mouseY >= ballWidth*a) && (mouseY <= ballWidth*a+ballWidth))) {
  
        for (int d=0; d*ballWidth <= width; d++) {
          fill(255, 255, 255, 100);
          ellipse(ballX, ballY+ d*ballWidth, ballWidth, ballWidth);
          fill(255, 255, 255, 70);
          ellipse(ballX + ballWidth, ballY+ d*ballWidth, ballWidth, ballWidth);
          ellipse(ballX - ballWidth, ballY+ d*ballWidth, ballWidth, ballWidth);
          fill(255, 255, 255, 40);
          ellipse(ballX + 2*ballWidth, ballY+ d*ballWidth, ballWidth, ballWidth);
          ellipse(ballX - 2*ballWidth, ballY+ d*ballWidth, ballWidth, ballWidth);  
      }
         for (int d=0; d*ballWidth <= width; d++) {
          fill(255, 255, 255, 100);
          ellipse(ballX, ballY- d*ballWidth, ballWidth, ballWidth);
          fill(255, 255, 255, 70);
          ellipse(ballX + ballWidth, ballY- d*ballWidth, ballWidth, ballWidth);
          ellipse(ballX - ballWidth, ballY- d*ballWidth, ballWidth, ballWidth);
          fill(255, 255, 255, 40);
          ellipse(ballX + 2*ballWidth, ballY- d*ballWidth, ballWidth, ballWidth);
          ellipse(ballX - 2*ballWidth, ballY- d*ballWidth, ballWidth, ballWidth);
        }
      }
    }
  }
}

54 years ago Short URL

Computational Media

Intro to Processing

Having gone over some basics in Processing, our first assignment was to create our own simple screen drawing, programmically. I chose to try to replicate a piece by Ron Gang called Windmill. Below is the original oil on canvas by Gang.

"Windmill" by Ron Gang

Here is my version created using Processing. Continue reading →

54 years ago Short URL

Computational Media

Proudly powered by WordPress
Theme: Esquire by Matthew Buchanan.