Can't keep shape overlayed on top of video

Processing Libraries
1

please format code with </> button * homework policy * asking questions

Hi all - I am trying to have shapes overlay on top of live video whenever I press certain keys; however, I cannot get the shapes to stay overlayed on top of the live video.

Everytime I press ‘e’, there should be an ellipse that stays centred over the live video. Then, if I press ‘r’, then the ellipse should disappear and a rectangle should take its place. Then, if I press ‘e’ again, the rectangle should disappear and an ellipse should show up. I hope that makes sense!

I tried to put into 3D and use the translate function to bring the z-axis of the shape forward, but it doesn’t seem to work…

import processing.video.*;

Capture video;

void captureEvent(Capture video) {
  video.read();
}

void setup() {
  size(1280, 720, P3D);
  video = new Capture(this, width, height);
  video.start();
}

void draw() {
  image(video, 0, 0);
  if (keyPressed) {
    if(key == 'r' || key == 'R') {
    rectMode(CENTER);
    noFill();
    stroke(253, 255, 0);
    translate(0, 0, 1);
    rect(width/2, height/2, width/4, height/4);
    } else if(key == 'e' || key == 'E') {
    noFill();
    stroke(253, 255, 0);
    translate(0, 0, 1);
    ellipse(width/2, height/2, width/4, height/4);      
    }
  }
}
2

The problem is that your shape does show up but in the following frame, it is overridden by your video. Think of how background() paints over every frame inside draw().

If you want to maintain your shape over the video, one simple thing to do is

  1. remove any key checking inside draw() because they will not persist in the subsequent frames.
  2. create a boolean variable and turn on/off through keyPressed() function.
  3. check the boolean state in draw() with if statement inside draw()
2 Likes
3

Thanks @ErraticGenerator that was the solution!

The solution was the below as per @ErraticGenerator 's reply (though I changed it to toggle only one shape)!

boolean makeShapeR = false;

import processing.video.*;

Capture video;

void captureEvent(Capture video) {
  video.read();
}

void setup() {
  size(1280, 720, P3D);
  video = new Capture(this, width, height);
  video.start();
}

void draw() {
  image(video, 0, 0);
  noFill();
  stroke(253, 255, 0);
  rectMode(CENTER);

  if (makeShapeR) {
    rect(width/2, height/2, width/4, height/4);
  }
}

void keyPressed() {
  if (key == 'r' || key == 'R') {
    makeShapeR = !makeShapeR;
  }
}
1 Like