Dance App using video, beat-detect, and state-events (Beginners)

miaco · December 2016

//Processing 3.0; I'm new to processing and I made this fun little dance app for a Chemical Brothers song I thought I would share. It uses the pc/mac camera, beat.detect, and state/events to control the timing of the shape changes. I had such a great time making it near the end (although figuring it out was brutal). I'm sure with some automation and some new states it could be an amazing dance app! Remember to load the openCV, video, and minim libraries (Sketch > Import Library)!

//video background
import gab.opencv.*;
import processing.video.*;
import java.awt.*;

Capture video;
OpenCV opencv;

// sound files
import ddf.minim.*;
import ddf.minim.analysis.*;
Minim minim;
AudioPlayer song;

//beatdetect
BeatDetect beat;
float eRadius;

//heads
int unit = 110;
int count;
Heads[] heads;       // array of heads

// sets timed events
int Times[] = {86500, 86500, 86500, 86500, 86500, 86500, 82500, 78500, 70500, 80500, 84500, 86500, 86500, 86500, 86500, 86500, 86500, 86500, 86500, 86500, 86500  };

void setup() {
  size(640, 480);
  noStroke();

  //video
  video = new Capture(this, 640/2, 480/2); 
  video.start();

  // sound file
  minim = new Minim(this);

  // this loads the song from the data folder
  song = minim.loadFile("01 - Sometimes I Feel So Deserted.mp3");
  song.play();

  // beat
  beat = new BeatDetect();
  ellipseMode(RADIUS);
  eRadius = 20;

  // define array of heads
  int wideCount = 5;        // sets width of the heads
  int highCount = 4;        // sets height of the heads
  count = wideCount * highCount;    // determines total number
  heads = new Heads[count];        // calculates count of heads

  int index = 0;
  for (int y = 0; y < highCount; y++) {
    for (int x = 0; x < wideCount; x++) {
      heads[index++] = new Heads(x*unit, y*unit, unit/2, unit/2, unit, unit, Times[index]);  // array of heads
    }
  }
}

void draw() {
  background (0);
  // video
  pushMatrix(); 
  scale(2); 
  tint(255, 30);
  image(video, 0, 0 );
  popMatrix(); 

  // draws head
  for (Heads a_head : heads)
  {
    a_head.drawMe();
    a_head.CheckForStateChange();
  }
}

void captureEvent(Capture c) {
  c.read();
}

//class for heads
class Heads {
  int xOffset;
  int yOffset;
  float x, y;
  int unit;
  float speed; 
  int state;
  int r = 50; // radius 
  int crazyTime; //timed units

  //stores the last time the state changed.
  long lastStateChange;
  int MAX_STATE = 1;

  // Constructor
  Heads(int xOffsetTemp, int yOffsetTemp, int xTemp, int yTemp, float speedTemp, int tempUnit, int crazy) {
    xOffset = xOffsetTemp;
    yOffset = yOffsetTemp;
    x = xTemp;
    y = yTemp;
    speed = speedTemp;
    unit = tempUnit;
    crazyTime = crazy; 
    lastStateChange = millis();
  }

  // Custom method for drawing the object; states
  void drawMe() {
    switch(state) {
    case 0:
      state0();  //green, beat square still
      break;

    case 1:
      state1();    // square heads / green / move side to side
      break;

    case 2:
      state2();    //beat circle 
      break;

    case 3:
      state3();    // crazy circles wide / no beat detect // white // opacity
      state2();    //beat circle 
      break;

    case 4:
      state4();   // crazy circles long / no beat detect / pink / 50% opacity
      state2();    //beat circle 
      break; 

    case 5:
      state5(); //blue
      state2();    //beat circle 
      break;

    case 6:
      state6();  //white circle
      state2();    //beat circle 
      break;

    case 7:
      state4();   // crazy circles long / no beat detect / pink / 50% opacity
      state2();    //beat circle 
      break; 

    case 8:
      state5(); //blue
      state2();    //beat circle 
      break;

    case 9:
      state2();  //beat circle 
      break;

    case 10:
      state7();  // white circle wide with beat
      state2();    //beat circle 
      break;

    case 11:
      state2();    //beat circle 
      break; 

    case 12:
      state4();   // crazy circles long / no beat detect / pink / 50% opacity
      break; 

    case 13:
      state5(); //blue
      state2();    //beat circle 
      break;

    case 14:
      state3();    // crazy circles wide / no beat detect // white // opacity
      state2();    //beat circle 
      break;

    case 15:
      state4();   // crazy circles long / no beat detect / pink / 50% opacity
      state2();    //beat circle 
      break; 

    case 16:
      state5(); //blue
      state2();    //beat circle 
      break;

    case 17:
      state6();  //white circle
      state2();    //beat circle 
      break;

    case 18:
      state4();    // crazy circles long / no beat detect / pink / 50% opacity
      state2();    //beat circle 
      break; 

    case 19:
      state5(); //blue
      state2();    //beat circle 
      break;

    case 20:
      state2();  //beat circle 
      break;

    case 21:
      state6();  //white circle in place
      break;

    case 22:
      state7();  // white circle wide with beat
      break; 

    case 23:
      state2();  // white circle wide no beat
      break;
    }
  }

  // Custom method for updating the heads/circles; moves heads from left to right

  //square heads / no movement
  void state0() {

    //beat
    beat.detect(song.mix);
    float a = map(eRadius, 20, 80, 100, 250);
    fill(220, 220, 220, a);
    if ( beat.isOnset() ) eRadius = 20;

    //shape
    rect(xOffset + x, yOffset + y, r, r);

    //beat
    eRadius *= 0.95;
    if ( eRadius < 10 ) eRadius = 10;

    if (millis() - lastStateChange >= 17000) {
      state++;
      lastStateChange = millis();
    }
  }

  // square heads / green / move side to side
  void state1() {
    // beat
    beat.detect(song.mix);
    float a = map(eRadius, 20, 80, 100, 250);
    fill(195, 234, 42, a);
    if ( beat.isOnset() ) eRadius = 20;

    //shape movement
    pushMatrix (); 
    int sec = second(); 
    int mover = sec % 2; 

    if (mover == 0) {
      rect(xOffset + x, yOffset + y, r, r);
    } else if (mover == 1) {
      rect(xOffset + x + 5, yOffset + y, r, r);
    }
    popMatrix();

    //beat
    eRadius *= 0.95;
    if ( eRadius < 5 ) eRadius = 5;
  }

  // circles in place with beat detect
  void state2() {
    //beat
    beat.detect(song.mix);
    float a = map(eRadius, 20, 80, 60, 255);
    fill(255, 255, 255, a);
    if ( beat.isOnset() ) eRadius = 20;

    //shape
    long secs = millis()/100; //secs increments every 1/10th of a second
    ellipse (xOffset + x + 25 + sin(secs) * 5, yOffset + y + 25 +  cos(secs) * 5, r, r);

    if (millis() - lastStateChange >= 12000) {
      state++;
      lastStateChange = millis();
    }

    //beat
    eRadius *= 0.95;
    if ( eRadius < 5 ) eRadius = 5;
  }

  // crazy circles wide / no beat detect // white // opacity
  void state3() {
    float a = 80; // opacity
    fill(255, a);  // white
    long secs = millis()/100; //secs increments every 1/10th of a second
    ellipse (xOffset + x + 25 + cos(secs) * 100, yOffset + y + 25 +  sin(secs) * 50, r, r);

    if (millis() - lastStateChange >= 12000) {
      state++;
      lastStateChange = millis();
    }
  }

  // crazy circles long / no beat detect / pink / 50% opacity
  void state4() {
    float a = 50; // opacity
    long secs = millis()/100; //secs increments every 1/10th of a second
    fill(176, 42, 234, a);  // pink
    ellipse (xOffset + x + 25 + cos(secs) * 50, yOffset + y + 25 +  sin(secs) * 100, r, r);

    if (millis() - lastStateChange >= 8000) {
      state++;
      lastStateChange = millis();
    }
  }

  // crazy circles wide
  void state5() {
    float a = 50; // opacity
    long secs = millis()/100; //secs increments every 1/10th of a second
    fill(42, 99, 234, a); // blue
    ellipse (xOffset + x + 25 + sin(secs) * 50, yOffset + y + 25 +  cos(secs) * 100, r, r);

    if (millis() - lastStateChange >= 8000) {
      state++;
      lastStateChange = millis();
    }
  }

  // circles in place
  void state6() {
    float a = 50; // opacity
    fill(255, a); // white
    long secs = millis()/100; //secs increments every 1/10th of a second
    ellipse (xOffset + x + 25 + sin(secs) * 10, yOffset + y + 25 +  cos(secs) * 10, r, r);

    if (millis() - lastStateChange >= 12000) {
      state++;
      lastStateChange = millis();
    }
  }

  // crazy circles wide / with beat detect
  void state7() {
    //beat
    beat.detect(song.mix);
    float a = map(eRadius, 20, 80, 60, 255);
    fill(255, 255, 255, a); // white
    if ( beat.isOnset() ) eRadius = 20;

    //shape
    long secs = millis()/100; //secs increments every 1/10th of a second
    ellipse (xOffset + x + 25 + cos(secs) * 100, yOffset + y + 25 +  sin(secs) * 50, r, r);

    if (millis() - lastStateChange >= 12000) {
      state++;
      lastStateChange = millis();
    }

    //beat
    eRadius *= 0.95;
    if ( eRadius < 5 ) eRadius = 5;
  }

  void start() {
    state = 2;
    lastStateChange = millis();
  }

  void CheckForStateChange()
  {
    if (millis() > crazyTime && state == 1) start();
  }
}

jeremydouglass · December 2016

@miaco -- thank you for sharing. In order to make it readable, and to allow others to cut-paste without it being broken, please format your code.

Edit your post -- Highlight your code -- Press Ctrl+o (will indent four spaces) -- Save.

https://forum.processing.org/two/discussion/15473/readme-how-to-format-code-and-text

Howdy, Stranger!

Categories

In this Discussion

Dance App using video, beat-detect, and state-events (Beginners)

Comments