rainbowVomit from Andrew Bueno on Vimeo.

After talking about my old waterboarding clock processing app in class the other day, I got a bit nostalgic for that old, lo-fi aesthetic. Thus, the crapsaccharine rainbow vomit app. I hooked up the FaceOSCSyphon app to Dan’s FaceOSC template for processing. I kept track mainly of the mouth. When its tracking points become wide enough apart, the vomit begins. It quite a bit of figuring out – Caroline Record was a huge help. Another source of help was a fellow on openProcessing – he is properly credited in my code. Without him, the app wouldn’t have that special brand of ridiculous.

https://github.com/buenoIsHere/RainbowVomit

 
//
// a template for receiving face tracking osc messages from
// Kyle McDonald's FaceOSC https://github.com/kylemcdonald/ofxFaceTracker
//
// 2012 Dan Wilcox danomatika.com
// for the IACD Spring 2012 class at the CMU School of Art
//
// adapted from from Greg Borenstein's 2011 example
// http://www.gregborenstein.com/
// https://gist.github.com/1603230
//
// Addendum from Bueno: Thank you florian on openFrameworks for the code!
import codeanticode.syphon.*;
import oscP5.*;

SyphonClient client;
OscP5 oscP5;
float[] rawPoints = new float[131];
float cWidth; 
float cHeight; 
PImage img;
Wave wav;

// num faces found
int found;

// pose
float poseScale;
PVector posePosition = new PVector();
PVector poseOrientation = new PVector();

// gesture
float mouthHeight;
float mouthWidth;
float eyeLeft;
float eyeRight;
float eyebrowLeft;
float eyebrowRight;
float jaw;
float nostrils;

void setup() {
  size(640, 480, P3D);
  background (random (256), random (256), 255, random (256));
  smooth();
  frameRate(30);

  oscP5 = new OscP5(this, 8338);
  oscP5.plug(this, "found", "/found");
  oscP5.plug(this, "rawDataReceived", "/raw");

  client = new SyphonClient(this, "FaceOSC");

  colorMode(HSB);
  wav = new Wave(width/2, height/2, 25, PI/18, 0);
}

void draw() {  
  if (client.available()) 
  {
    // The first time getImage() is called with 
    // a null argument, it will initialize the PImage
    // object with the correct size.
    //img = client.getImage(img); // load the pixels array with the updated image info (slow)
    img = client.getImage(img, false); // does not load the pixels array (faster)
    image(img,0,0);
    //background(255,0,0,0);
    if(found > 0) {
      float lastNum = 0; 
      int Idx = 0; 

      noFill();
      noStroke();
      if(dist(rawPoints[122], rawPoints[123], rawPoints[128], rawPoints[129]) > 25)
      {
        wav.paint = true;
      }
      else
      {
        wav.paint = false;  
      }

      wav.offsetX = (rawPoints[120] + rawPoints[124])/2;
      wav.offsetY = (rawPoints[121] + rawPoints[125])/2;
      wav.amplitude = rawPoints[124] - rawPoints[120] - 40;
      wav.display();
      wav.update();
   // ellipse (rawPoints[130],rawPoints[131], 2,2);  

    }
    else
    {
      println ("not found");
    }
  }
}

void mousePressed() {
  background (random (256), random (256), 255, random (256));
}

// OSC CALLBACK FUNCTIONS

public void found(int i) {
  println("found: " + i);
  found = i;
}

public void rawDataReceived(float [] f){
    for (int i = 0; i < f.length; i++)
    {
      rawPoints[i] = f[i];
    }
}

// all other OSC messages end up here
void oscEvent(OscMessage m) {
  if (m.isPlugged() == false) {
    println("UNPLUGGED: " + m);
  }
}

 
/* OpenProcessing Tweak of *@*http://www.openprocessing.org/sketch/46795*@* */
/* !do not delete the line above, required for linking your tweak if you re-upload */
/* Some fun with the sin function
 once you press the left button of the mouse, you can modulate
 the scale and the frequency of a  sine wave*/

// I tried to keep things clean, using OOP
//i'm 100% not sure about the grammar and the vocabulary in the comments

//this script is inspired by the awesome book "PROCESSING a Programming Handbook for Visual Designers and Artists"
// written by  Casey Reas and Ben Fry

class Wave {

  float offsetX; // this will position our wave on the X axis
  float offsetY;
  float amplitude;// this is for the wave height
  float frequency;//this will set the frequency(from batshit fast to insanely zoombastic)
  float angle;// it's an angle, every body knows that!
  boolean paint;

  //constructor
  Wave(float offX, float offY, float amp, float fre, float ang) {
    offsetX = offX;
    offsetY = offY;
    amplitude = amp;
    frequency = fre;
    angle = ang;
    paint = false;
  }

  void display() {

    // for each pixel on the x axis, A.K.A: on all the width of the screen
    for (float y = offsetY; y < = height ; y+=.2) {   

      /*So this is when it's getting all maths and stuff
       it's a neat formula that updates the y position of the ellipse you'll draw
       so, after some movement, it will look like a wave*/
      float posx = offsetX + (sin(angle)*(amplitude + map(y, offsetY, height,20,100)));

      /*you draw an ellipse
       the y position is increasing everytime you loop
       the x position is going up and down and up and down, and...
       my ellipse is 5 pixel high and 10 pixel width. this is how I like my ellipse*/
      ellipse(posx, y, 10,10);

      /* a nice and easy way to get RAINBOW colours
       (don't forget to set the colorMode to HSB in the setup function)
       h will set the hue
       the h value is calculated wirh a sin function and is mapped in order to get a value between 0 and 130*/
      float h = map(sin(angle), -1, 1, 0, 130);
      //here is our h again, for hue. saturation and brightness are at 255

      if(paint)
      {
        fill(h, 255, 255);
      }
      else
      {
        noFill();  
      }

      //don't forget to increase the angle by adding frequency
      // or your wave will be flat; you don't want that
      angle += frequency/2;
    }
  }

  /*this function will be called each frame
   it modifies amplitude and frequency, depending on the x and y coordinates of the mouse,
   once you press the left button*/
  void update() {
  }
}