Hype it up!!!

I am going to look into the 

import hypermedia.video.*;

function.

Anyway, I have found this link to a forum which looks very helpful so will give it a go!

http://forum.processing.org/#Topic/25080000000071029 

The Art of Processing...

I thought before I went any further, I should look more into artist pieces created using processing. I thought this may give me some more ideas , as to create a "Magic" effect for my installation.
I thought if I looked at more artistic pieces, using particles and movement, it would ideally develop my knowledge on what is possible in being created in Processing.

Processing

by Ana Paula Carvalho

Processing from Ana Paula Carvalho on Vimeo.

I found this video on processing, although very simple and just using shapes and movement, combined with the music, it is very effective. It just shows you have simple shapes can be very beautiful and elegant.

Magnetic Ink, Process video

by flight404

Magnetic Ink, Process video from flight404 on Vimeo.

Another gorgeous piece of work; very mesmerising with the movement and conversion of the shapes in time to the music...wow!

Another video by the same artist:

Tendrils continued from flight404 on Vimeo.

Again the movement is amazing... I could watch it for hours!

In my preliminary design ideas, I will probably incorporate some idea of creating the "Swoosh" effect of the Nike tick through use of movement of shapes and particles. I can't wait to experiment further with the use of particles and movement to create something people can watch for hours and hours, and more importantly interact with to make them stand there for even longer!

Play that Funky Music!!!

 

I absolutely love this video I found on YouTube; The combination between the Colour tracking and the music was amazing!

If only...

I would love to do something that incorporated movement and music... it would give the installation an extra element of fun! I will have to look into how difficult this would be to achieve. Even if it was a simple noise that was created during certain speeds or tracking of certain colours!

Open the Processing!

I signed up for an Open Processing Account so I could upload some of my Work.
Watch this Space!!!...

Myron is Magic!!!

I downloaded this software for processing from the processing.org website. It includes a few examples of coeds for processing with video, including the following code for tracking:

import JMyron.*;

/*

This example shows a whole lot of different
tracking methods being rendered at one time.
Don't be surprised if this one runs really slowly.

 last tested to work in Processing 0090

 JTNIMOY

*/

import JMyron.*;

JMyron m;

void setup(){
  int w = 320;
  int h = 240;
 
  size(w,h);
  m = new JMyron();
  m.start(320,240);
  m.findGlobs(1);
  println("Myron " + m.version());
}

void mousePressed(){
  m.settings();
}

void draw(){
  m.trackColor(255,255,255,255);

  m.update();
  int[] img = m.image();
 
  //first draw the camera view onto the screen
  loadPixels();
  for(int i=0;i<width*height;i++){
      pixels[i] = img[i];
  }
  updatePixels();
 
 
  //draw an averaged color block where the mouse is.
  noStroke();
  int c = m.average(mouseX-20,mouseY-20,mouseX+20,mouseY+20);
  fill(red(c),green(c),blue(c));
  rect(mouseX-20,mouseY-20,40,40);

  noFill();
  int[][] a;


  //draw center points of globs
  a = m.globCenters();
  stroke(255,255,0);
  for(int i=0;i<a.length;i++){
    int[] p = a[i];
    point(p[0],p[1]);
  }


  //draw bounding boxes of globs
  a = m.globBoxes();
  stroke(255,0,0);
  for(int i=0;i<a.length;i++){
    int[] b = a[i];
    rect(b[0], b[1], b[2], b[3]);
  }


  //draw edge pixels of globs (this and the next chunks of code are chokers)
  int list[][][] = m.globPixels();
  stroke(110,110,110);
 
  for(int i=0;i<list.length;i++){
    int[][] pixellist = list[i];
    if(pixellist!=null){
      beginShape(POINTS);
      for(int j=0;j<pixellist.length;j++){   
        vertex( pixellist[j][0]  ,  pixellist[j][1] );
       // print( pixellist[j][0]  +" " +  pixellist[j][1] );
      }
      endShape();
     }
  }

  //draw edge points (same as last, but vector based)
  list = m.globEdgePoints(20);
  stroke(0,128,0);
  for(int i=0;i<list.length;i++){
    int[][] contour = list[i];
    if(contour!=null){
      beginShape();
      for(int j=0;j<contour.length;j++){   
        vertex( contour[j][0]  ,  contour[j][1] );
      }
      endShape();
     }
  }

  //draw quads - like bounding box, but a 4-pointed polygon.
  a = m.globQuads(50,51);
  stroke(0,0,100);
  for(int i=0;i<a.length;i++){
    int[] b = a[i];
    quad(b[0], b[1],
         b[2], b[3],
         b[4], b[5],
         b[6], b[7]);
  }



}

public void stop(){
  m.stop();
  super.stop();
}

I therefore set to work with a few experiments!

My first experiment was to get it up and running... tick!

My second was to see exactly what it does and how I could adapt it.

I firstly tried to adapt it by altering the size of the sketch (As it's default size was quite small). The result:

 

As you can see it didn't work!!! I read on a forum online that it depends on the default settings of the webcam you are using. As my webcam is many years old...the biggest I could go to was 320 x 240, which is tiny, but at least it works for now! (I hope when using the cameras supplied by the college, I will be able to enlarge to 720 x 576 at least). But for now, here's the effect it creates, without any alterations to the code:

 

 

Now for a few experiments with alterations of the code. First, I wanted to see what happened if I cancelled out some of the code to get rid of the bounding boxes of the globs. My code now looks like this:

import JMyron.*;

/*

This example shows a whole lot of different
tracking methods being rendered at one time.
Don't be surprised if this one runs really slowly.

 last tested to work in Processing 0090

 JTNIMOY

*/

import JMyron.*;

JMyron m;

void setup(){
  int w = 320;
  int h = 240;
 
  size(w,h);
  m = new JMyron();
  m.start(320,240);
  m.findGlobs(1);
  println("Myron " + m.version());
}

void mousePressed(){
  m.settings();
}

void draw(){
  m.trackColor(255,255,255,255);

  m.update();
  int[] img = m.image();
 
  //first draw the camera view onto the screen
  loadPixels();
  for(int i=0;i<width*height;i++){
      pixels[i] = img[i];
  }
  updatePixels();
 
 
  //draw an averaged color block where the mouse is.
  noStroke();
  int c = m.average(mouseX-20,mouseY-20,mouseX+20,mouseY+20);
  fill(red(c),green(c),blue(c));
  rect(mouseX-20,mouseY-20,40,40);

  noFill();
  int[][] a;


  //draw center points of globs
  a = m.globCenters();
  stroke(255,255,0);
  for(int i=0;i<a.length;i++){
    int[] p = a[i];
    point(p[0],p[1]);
  }


  //draw bounding boxes of globs
  a = m.globBoxes();
  stroke(255,0,0);
  for(int i=0;i<a.length;i++){
    int[] b = a[i];
    rect
  }


  //draw edge pixels of globs (this and the next chunks of code are chokers)
  int list[][][] = m.globPixels();
  stroke(110,110,110);
 
  for(int i=0;i<list.length;i++){
    int[][] pixellist = list[i];
    if(pixellist!=null){
      beginShape(POINTS);
      for(int j=0;j<pixellist.length;j++){   
        vertex( pixellist[j][0]  ,  pixellist[j][1] );
       // print( pixellist[j][0]  +" " +  pixellist[j][1] );
      }
      endShape();
     }
  }

  //draw edge points (same as last, but vector based)
  list = m.globEdgePoints(20);
  stroke(0,128,0);
  for(int i=0;i<list.length;i++){
    int[][] contour = list[i];
    if(contour!=null){
      beginShape();
      for(int j=0;j<contour.length;j++){   
        vertex( contour[j][0]  ,  contour[j][1] );
      }
      endShape();
     }
  }

  //draw quads - like bounding box, but a 4-pointed polygon.
  a = m.globQuads(50,51);
  stroke(0,0,100);
  for(int i=0;i<a.length;i++){
    int[] b = a[i];
    quad(b[0], b[1],
         b[2], b[3],
         b[4], b[5],
         b[6], b[7]);
  }



}

public void stop(){
  m.stop();
  super.stop();
}
 

And the result:

 

Still getting some bounding going on. So I am furhter cancelling out some more of the code (edge pixels of globs, bounding boxes e.t.c). 

My code:

import JMyron.*;

/*

This example shows a whole lot of different
tracking methods being rendered at one time.
Don't be surprised if this one runs really slowly.

 last tested to work in Processing 0090

 JTNIMOY

*/

import JMyron.*;

JMyron m;

void setup(){
  int w = 320;
  int h = 240;
 
  size(w,h);
  m = new JMyron();
  m.start(320,240);
  m.findGlobs(1);
  println("Myron " + m.version());
}

void mousePressed(){
  m.settings();
}

void draw(){
  m.trackColor(255,255,255,255);

  m.update();
  int[] img = m.image();
 
  //first draw the camera view onto the screen
  loadPixels();
  for(int i=0;i<width*height;i++){
      pixels[i] = img[i];
  }
  updatePixels();
 
 
  //draw an averaged color block where the mouse is.
  noStroke();
  int c = m.average(mouseX-20,mouseY-20,mouseX+20,mouseY+20);
  fill(red(c),green(c),blue(c));
  rect(mouseX-20,mouseY-20,40,40);

  noFill();
  int[][] a;


  //draw center points of globs
  a = m.globCenters();
  stroke(255,255,0);
  for(int i=0;i<a.length;i++){
    int[] p = a[i];
    point(p[0],p[1]);
  }


  /*//draw bounding boxes of globs
  a = m.globBoxes();
  stroke(255,0,0);
  for(int i=0;i<a.length;i++){
    int[] b = a[i];
    rect(b[0], b[1], b[2], b[3]);
  }
*/

  //draw edge pixels of globs (this and the next chunks of code are chokers)
  int list[][][] = m.globPixels();
  stroke(110,110,110);
 
  for(int i=0;i<list.length;i++){
    int[][] pixellist = list[i];
    if(pixellist!=null){
      beginShape(POINTS);
      for(int j=0;j<pixellist.length;j++){   
        vertex( pixellist[j][0]  ,  pixellist[j][1] );
       // print( pixellist[j][0]  +" " +  pixellist[j][1] );
      }
      endShape();
     }
  }
/*
  //draw edge points (same as last, but vector based)
  list = m.globEdgePoints(20);
  stroke(0,128,0);
  for(int i=0;i<list.length;i++){
    int[][] contour = list[i];
    if(contour!=null){
      beginShape();
      for(int j=0;j<contour.length;j++){   
        vertex( contour[j][0]  ,  contour[j][1] );
      }
      endShape();
     }
  }
*/
/*  //draw quads - like bounding box, but a 4-pointed polygon.
  a = m.globQuads(50,51);
  stroke(0,0,100);
  for(int i=0;i<a.length;i++){
    int[] b = a[i];
    quad(b[0], b[1],
         b[2], b[3],
         b[4], b[5],
         b[6], b[7]);
  }

*/

}

public void stop(){
  m.stop();
  super.stop();
}

My result:

 

This may have taken out too much detail. So here is my updated code:

import JMyron.*;

/*

This example shows a whole lot of different
tracking methods being rendered at one time.
Don't be surprised if this one runs really slowly.

 last tested to work in Processing 0090

 JTNIMOY

*/

import JMyron.*;

JMyron m;

void setup(){
  int w = 320;
  int h = 240;
 
  size(w,h);
  m = new JMyron();
  m.start(320,240);
  m.findGlobs(1);
  println("Myron " + m.version());
}

void mousePressed(){
  m.settings();
}

void draw(){
  m.trackColor(255,255,255,255);

  m.update();
  int[] img = m.image();
 
  //first draw the camera view onto the screen
  loadPixels();
  for(int i=0;i<width*height;i++){
      pixels[i] = img[i];
  }
  updatePixels();
 
 
  //draw an averaged color block where the mouse is.
  noStroke();
  int c = m.average(mouseX-20,mouseY-20,mouseX+20,mouseY+20);
  fill(red(c),green(c),blue(c));
  rect(mouseX-20,mouseY-20,40,40);

  noFill();
  int[][] a;


  //draw center points of globs
  a = m.globCenters();
  stroke(255,255,0);
  for(int i=0;i<a.length;i++){
    int[] p = a[i];
    point(p[0],p[1]);
  }


  /*//draw bounding boxes of globs
  a = m.globBoxes();
  stroke(255,0,0);
  for(int i=0;i<a.length;i++){
    int[] b = a[i];
    rect(b[0], b[1], b[2], b[3]);
  }
*/

  //draw edge pixels of globs (this and the next chunks of code are chokers)
  int list[][][] = m.globPixels();
  stroke(110,110,110);
 
  for(int i=0;i<list.length;i++){
    int[][] pixellist = list[i];
    if(pixellist!=null){
      beginShape(POINTS);
      for(int j=0;j<pixellist.length;j++){   
        vertex( pixellist[j][0]  ,  pixellist[j][1] );
       // print( pixellist[j][0]  +" " +  pixellist[j][1] );
      }
      endShape();
     }
  }

  //draw edge points (same as last, but vector based)
  list = m.globEdgePoints(20);
  stroke(0,128,0);
  for(int i=0;i<list.length;i++){
    int[][] contour = list[i];
    if(contour!=null){
      beginShape();
      for(int j=0;j<contour.length;j++){   
        vertex( contour[j][0]  ,  contour[j][1] );
      }
      endShape();
     }
  }

/*
 //draw quads - like bounding box, but a 4-pointed polygon.
  a = m.globQuads(50,51);
  stroke(0,0,100);
  for(int i=0;i<a.length;i++){
    int[] b = a[i];
    quad(b[0], b[1],
         b[2], b[3],
         b[4], b[5],
         b[6], b[7]);
  }

*/

}

public void stop(){
  m.stop();
  super.stop();
}

And my result:

 

That's a bit better!

Now to get rid of the silly sqaure that follows the mouse around! Just cancelled code:

//draw an averaged color block where the mouse is.
  noStroke();
  int c = m.average(mouseX-20,mouseY-20,mouseX+20,mouseY+20);
  fill(red(c),green(c),blue(c));
  rect(mouseX-20,mouseY-20,40,40);

That's worked.

Now to play around with colours and effects...

Adding a fill to the shapes (in this case a black fill):

 

Red fill:

 

or taking the stroke away completely:

 

This is certainly a very exciting effect, and will try and perhaps incorporate it into my final piece.

 

Processing Art!!

Just a couple of examples of me practicing with particles! Hours of Amusement!:

Colour tracking Code!!!

Here is the code I sourced from Learning Processing website for colour tracking:

// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Example 16-11: Simple color tracking

import processing.video.*;

// Variable for capture device
Capture video;

// A variable for the color we are searching for.
color trackColor; 

void setup() {
  size(320,240);
  video = new Capture(this,width,height,15);
  // Start off tracking for red
  trackColor = color(255,0,0);
  smooth();
}

void draw() {
  // Capture and display the video
  if (video.available()) {
    video.read();
  }
  video.loadPixels();
  image(video,0,0);

  // Before we begin searching, the "world record" for closest color is set to a high number that is easy for the first pixel to beat.
  float worldRecord = 500; 

  // XY coordinate of closest color
  int closestX = 0;
  int closestY = 0;

  // Begin loop to walk through every pixel
  for (int x = 0; x < video.width; x ++ ) {
    for (int y = 0; y < video.height; y ++ ) {
      int loc = x + y*video.width;
      // What is current color
      color currentColor = video.pixels[loc];
      float r1 = red(currentColor);
      float g1 = green(currentColor);
      float b1 = blue(currentColor);
      float r2 = red(trackColor);
      float g2 = green(trackColor);
      float b2 = blue(trackColor);

      // Using euclidean distance to compare colors
      float d = dist(r1,g1,b1,r2,g2,b2); // We are using the dist( ) function to compare the current color with the color we are tracking.

      // If current color is more similar to tracked color than
      // closest color, save current location and current difference
      if (d < worldRecord) {
        worldRecord = d;
        closestX = x;
        closestY = y;
      }
    }
  }

  // We only consider the color found if its color distance is less than 10. 
  // This threshold of 10 is arbitrary and you can adjust this number depending on how accurate you require the tracking to be.
  if (worldRecord < 10) { 
    // Draw a circle at the tracked pixel
    fill(trackColor);
    strokeWeight(4.0);
    stroke(0);
    ellipse(closestX,closestY,16,16);
  }
}

void mousePressed() {
  // Save color where the mouse is clicked in trackColor variable
  int loc = mouseX + mouseY*video.width;
  trackColor = video.pixels[loc];
}