How to do this using color tracking?

JJJJJJ

please tell us how to draw this code.

We want to draw some particle. at this moment, the particle should be drawn on the color that we tracking.

the particle that we want to draw is as in the following.

the main tap is ↓

/**
 * Simple Particle System
 * by Daniel Shiffman.  
 * 
 * Particles are generated each cycle through draw(),
 * fall with gravity and fade out over time
 * A ParticleSystem object manages a variable size (ArrayList) 
 * list of particles. 
 */

ParticleSystem ps;

void setup() {
  size(640,360);
  ps = new ParticleSystem(new PVector(width/2,50));
}

void draw() {
  background(0);
  if(mousePressed)
  {  ps.updateOrigin(new PVector(mouseX, mouseY)); }

  ps.addParticle();
  ps.run();
}

and the second tap is ↓

// A simple Particle class

class Particle {
  PVector location;
  PVector velocity;
  PVector acceleration;
  float lifespan;

  Particle(PVector l) {
    acceleration = new PVector(0,0.05);
    velocity = new PVector(random(-1,1),random(-2,0));
    location = l.copy();
    lifespan = 255.0;
  }

  void run() {
    update();
    display();
  }

  // Method to update location
  void update() {
    velocity.add(acceleration);
    location.add(velocity);
    lifespan -= 1.0;
  }

  // Method to display
  void display() {
    stroke(255,lifespan);
    fill(255,lifespan);
    ellipse(location.x,location.y,8,8);
  }

  // Is the particle still useful?
  boolean isDead() {
    if (lifespan < 0.0) {
      return true;
    } else {
      return false;
    }
  }
}

and the third tap is ↓

// A class to describe a group of Particles
// An ArrayList is used to manage the list of Particles 

class ParticleSystem {
  ArrayList<Particle> particles;
  PVector origin;

  ParticleSystem(PVector location) {
    origin = location.copy();
    particles = new ArrayList<Particle>();
  }

  void addParticle() {
    //particles.add(new Particle(new PVector(mouseX, mouseY)));
    particles.add(new Particle(origin));
  }

  void run() {
    for (int i = particles.size()-1; i >= 0; i--) {
      Particle p = particles.get(i);
      p.run();
      if (p.isDead()) {
        particles.remove(i);
      }
    }   
  }

  void updateOrigin(PVector newOrigin)
  { origin = newOrigin.copy(); }

}

kfrajer

There is an example that comes with the video library. In the Processing IDE, open Files >> examples and then go to the folder Libraries >> Video> Capture >BrightnessTracking

Now, instead of trying to figure out the point with the highest brightness, you just need to look for the points that has the most red on it. For this, I suggest you use the distance function:

final color rTARGET=255;
final color gTAgGET=0;
final color bTARGET=0;
final color MIN_DISTANCE=10;


color current=pixels[i];   //Using your favorite loop call to access each pixel

float colDista=dist(red(current),green(current),blue(current),rTARGET,gTARGET,bTARGET);
if(conDist<MIN_DISTANCE){
   ...you have a pixel that is red or close to red (pending on the value of MIN_DISTANCE
}

The last thing you need to consider is what would happen if you have multiple red colors?

Kf

jeremydouglass

Check out Learning Processing Ch16, Color Tracking example:

https://github.com/shiffman/LearningProcessing/blob/master/chp16_video/example_16_11_ColorTrack/example_16_11_ColorTrack.pde

JJJJJJ

I can't understand ;( I know i need to check out the example_16_11 , Despite i checked out the example , i can't make the code that i want .... :(( Please teach me again

kfrajer

Please post the code you have so far for color tracking and your attempt to bring them together.

Kf

JJJJJJ

// 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);
  video.start();
  // Start off tracking for red
  trackColor = color(255, 0, 0);
}

void captureEvent(Capture video) {
  // Read image from the camera
  video.read();
}

void draw() {
  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];
}

this example is the ellipse follow the color that i clicked(mousePressed), but what i want to do is the ellipse follow color like red or blue etc. that i put in the "code" without any click.