How to change color of overlapping ellipses

Hi! I have a question. I am fairly new to processing, so I need a little help.

I am trying to track the visitors of an exhibition. Right now I am comparing each frame with the previous one, detecting changes in pixels. Each change is visualized with an ellipse with opacity 10. The overlapping ellipses create a darker area, of course, but I would like to have the color of the ellipses (or overlaps of the ellipses) change when they have overlapped a few times (let's say 10). I would like to have a heat map effect.

This is my code right now:

Capture video;

float threshold = 30;
int vidw = 640;// video width zie lijst println
int vidh = 420;// video height
int step = 2; //om de hoeveel pixels scannen op beweging
PImage prevFrame;

void setup() {
  size(displayWidth, displayHeight);//P3D
  //video = new Capture(this, "name=Logitech HD Pro Webcam C920,size=640x480,fps=30");
  video = new Capture(this, 640, 420);
  prevFrame = createImage(vidw, vidh, RGB);
  background (#FFFFFF);

void captureEvent(Capture video) {
  prevFrame.copy(video, 0, 0, vidw, vidh, 0, 0, vidw, vidh); // Before we read the new frame, we always save the previous frame for comparison!
  prevFrame.updatePixels();  // Read image from the camera;

void draw() {
  //background (0);
  //image(video, 0, 0, width, height);
  //println(vidw + " - " + vidh);
  //if (millis()>2000) {

void coordinates() {
  // Begin loop to walk through every pixel
  for (int i = 0; i < vidw; i +=step ) {
    for (int j = 0; j < vidh; j +=step) {
      int loc = i + j*vidw;                   // Step 1, what is the 1D pixel location
      color current = video.pixels[loc];      // Step 2, what is the current color
      color previous = prevFrame.pixels[loc]; // Step 3, what is the previous color
      float r1 = red(current);
      float g1 = green(current);
      float b1 = blue(current);
      float r2 = red(previous);
      float g2 = green(previous);
      float b2 = blue(previous);
      float diff = dist(r1, g1, b1, r2, g2, b2);
      if (diff > threshold) {
        fill(#5882FA, 10);


  • edit post, highlight code, press ctrl-o to format.

    (it's treating your code as text, treating your operations as markup, hence the missing *s and added italics)

  • if you cannot access the ellipses (you have no objects of them) you cannot change their colors. you should create something of a Circle class where you store the position of the ellipses and redraw them every frame in your preferred color. just make a list with all Circles then

  • In theory you would have a 2D grid int to represent heat map(more rough than your monitor, let’s say 100x100, that’s the resolution)

    Now you for loop over the circles and increase each cell in circumference by 1 for each circle.

    Now display the grid and just draw ellipses in each cell (if not 0) in the color depending on its value

  • I would like to have the color of the ellipses (or overlaps of the ellipses) change when they have overlapped a few times (let's say 10).

    Do you want to track the ellipses that overlap multiple times so I understand. When two ellipses come together to (almost) full eclipsed state, you will loose information of the overlapping count of each ellipse since you won't be able to distinguish the ellipses from each other after they come apart. More thought is needed in this part.

    Other than that, as mention above, build a class with proper relevant fields. Partial code below.


    Class EllipseTrackingObject{
    final int RAD=10;
    final color LOW_OVR=color(0,250,0);
    final color MEDIUM_OVR=color(250,150,0);
    final color HIGH_OVR=color(250,0,0);
      int overlpaCtr;
      color noOverlap;
      color[] overlap;
      float px;
      float py;
      EllipseTrackingObject(){   ...}
      void drawEllipse(){  ... }
      void checkOverlap(){   ...}
Sign In or Register to comment.