<Interactive Fractal> 

Inspiration

I was inspired by the fractal wall at the Museum of Math. I wanted to develop a interactive wall where people can create their own fractals with customized shape.

Process

At first, I wanted to develop a shape detection using fingers like the figure below. However, the finger detection using kinect camera was so limited under specified environment. It requires a blank white or black background. Therefore, I decided to use OpenNI hand detection instead, and draw shapes along with the hand motion.  After letting users draw shapes over air in front of hand detection, I require users to hold their hand still for 3 seconds to let the program know that drawing shape is done. Then, the program a.k.a openframeworks stores hand drawn shape as vertices and duplicate them multiple times in order to create a fractal based on drawn shape.

Technology

I used Kinect+OpenNI library to detect hand motion and wrote a program in Openframeworks.

Documentation Video

Interactive Fractal from Ju Young Park on Vimeo.

Code

I will upload the github later.

My original idea was to develop a project using recursive or L-system algorithm and kinect camera sensing. My idea was to build human forest. I wanted to turn human body into stem of tree and create branches recursively around the arms.

Here are the sketches

However, I saw a similar project at the Museum of Math.

Fortunately, I was inspired by the fractal wall at the museum so that I could develop a new ides. Basically,  I decided to make interactive fractals.

With shape detection, users can create shapes with their fingers. The created shape becomes a basis of the fractal.

Technical Issues: 

Object Detection + Shape Detection

Processing or Openframeworks

Camera Sensing

For my midterm, I was inspired by TextRain, which created by Camille Utterbeck and Romy Achituv.

For my assignment 4, I created rain drops falling from top of the screen. I improved the concept of rain drops to interactive bubbles in order to make the project more interactive and attractive to kids. I decided to use particle system to make falling bubbles to spread out into smaller bubbles. I used brightness detection to detect moments when bubbles touch my body. Originally, I wanted to use kinect for this project, but I failed to do so since I struggled a lot with getting pixels from kinect.

Overall, I am satisfied with my final outcome. I will upload the code as soon as possible.

For this week, I spent most of time to figure out how box2D works, because I haven’t used it before now. What I tried to make was a particle system of bunch of people using box 2D. Incorporating two different convex shapes to look like a human so that the shape looks like a south-park character. However, it was pretty hard to do it. What I am trying to do next is to make texture for each shape.

Inspired by Camille Utterback and Romy Achituv’s Text Rain, I wanted to develop rain dropping using PVectors and Particle Systems. Currently, The rain drops from the top center, and it lands on user’s body. A mouse click creates wind to the right side.

I will upload code later!

General Idea

For Oscillation homework, I was inspired by a cartoon-like surfing wave. I decided to create generating wave form with a click button. I wanted to create a surfing man along with the wave, but I didn’t have time to do it. I will try to make one later.

Inspiration

Screenshots

Video

Code HERE

I have used Attraction + wind + gravity for making a kite flying over wind. Whenever mousePressed, blue sky appears on the sketch, and it blows wind to right and up. Therefore, a girl’s kite flies over the wind! Whenever mouseReleased, there is no more of blue sky, and kite moves along the attraction to the girl and the effects of the previous wind.

Code

Kite k;
Attractor a;
void setup(){
  size(600, 600);
  k = new Kite();
  a = new Attractor();

}

void draw(){
  background(255);
  noStroke();

  rect(0, 0, width, height/2.5);
  PVector gravity = new PVector(0, -0.020);
  PVector wind = new PVector(0.015, 0);
  PVector force = a.attract(k);

  if(mousePressed){
    k.applyForce(gravity);
    k.applyForce(wind);
    fill(139, 239, 255);
  }

  rect(0, 0, width, height/2.5);
  k.applyForce(force);
  k.update();
  k.display();
  a.display(k);
  k.checkEdges();

}

class Attractor{
  float mass;
  float G;
  PVector location;
  PImage girl;
  Attractor(){
    location = new PVector(width/2, height/2);
    girl = loadImage("girl.png");
    mass=20;
    G =1;

  }

  PVector attract(Kite k){
    PVector force = PVector.sub(location, k.location);
    float d = force.mag();
    d = constrain(d, 5.0, 25.0);
    force.normalize();
    float strength = (G * mass * k.mass) / (d * d);
    force.mult(strength);
    return force;
  }

  void display(Kite k){
    //ellipseMode(CENTER);
    stroke(0);
    noFill();
    image(girl, location.x-50, location.y);
    curve(location.x+35, location.y+50, location.x+20, location.y+15, k.getLoc().x+30, k.getLoc().y+20, k.getLoc().x+30, k.getLoc().y-20);
  }
}

class Kite{
  PImage kite;
  PVector location;
  PVector velocity;
  PVector acceleration;
  float mass;

  Kite(){
    kite = loadImage("kite.png");
    location = new PVector(width/2, height/2);
    velocity = new PVector(1, 0);
    acceleration = new PVector(0,0);
    mass = 1;
  }

  void applyForce(PVector force){
    PVector f = PVector.div(force, mass);
    acceleration.add(f);
  }

  void update(){
    velocity.add(acceleration);
    location.add(velocity);
    acceleration.mult(0);
  }

  void display(){
    image(kite, location.x, location.y);
  }

  PVector getLoc(){
    PVector newLoc = new PVector(location.x, location.y);
    return newLoc;
  }

  void checkEdges(){
    if(location.x > width){
      location.x = width;
      velocity.x *= -1;
    } else if (location.x < 0){       velocity.x *= -1;       location.x = 0;     }          if(location.y > height){
      velocity.y *= -1;
      location.y = height;
    }
  }
}

Here is my Processing sketch of Random Walk applied with Gaussian Distribution. Each step is connected to a current mouse position, and color of each step changes according to the mouse position; I used colorMode(HSB, height, height, height). My main purpose of this project was to apply mathematical concept to a method of drawing rainbow wave, perhaps rainbow lollipops since curves connected to ellipses look like a bunch of lollipops!

Screenshots

Code

Walker w;

void setup(){
size(800, 400);

w = new Walker();
background(0);

}

void draw() {

w.step();
w.render();

}

class Walker{
Random generator = new Random();

float prevX, prevY, x, y, randomNum;

Walker(){

//x = mouseX;
//y = mouseY;
x = random(50, width-50);
y = random(50, height-50);
colorMode(HSB, height, height, height);
}

void render(){
stroke(255);
//noStroke();
//point(x,y);

//line(prevX, prevY, x, y);

curve(x, y, x, y, mouseX, mouseY, mouseX-20, mouseY-20);
float mappedR = map(mouseX, 0, 800, 0, 255);
// fill(255, 255-mappedR, 255-mappedR);
fill(mouseY, height, height);
ellipse(x, y, 15, 15);

//line(prevX, prevY, x, y);

}

void step(){

//prevX =x;
//prevY =y;

float stepx = random(-1, 1);
float stepy = random(-1, 1);

float randomNum = (float)generator.nextGaussian();
//randomNum = montecarlo()*50;
stepx *= 10+randomNum;
stepy *= 10+randomNum;

x+= stepx;
y+= stepy;

//Stay on the screen
x = constrain(x, 0, width-1);
y = constrain(y, 0, height-1);

}

float montecarlo() {
while (true) {

float r1 = random(1);
float probability = pow(1.0 - r1,8);

float r2 = random(1);
if (r2 < probability) {
return r1;
}
}
}

}