# Can't keep shape overlayed on top of video

**URL:** https://discourse.processing.org/t/cant-keep-shape-overlayed-on-top-of-video/26867
**Category:** Libraries
**Created:** [January 7, 2021, 11:21pm UTC](https://discourse.processing.org/t/cant-keep-shape-overlayed-on-top-of-video/26867 "2021-01-07T23:21:00Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![alenmartel](https://avatars.discourse-cdn.com/v4/letter/a/c68b51/32.png) [@alenmartel](https://discourse.processing.org/u/alenmartel)
#### Post date: [January 7, 2021, 11:21pm UTC](https://discourse.processing.org/t/cant-keep-shape-overlayed-on-top-of-video/26867/1 "2021-01-07T23:21:00Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

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…

```auto
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);      
    }
  }
}

```

---

<div class="post-metadata">

### Author: ![ErraticGenerator](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erraticgenerator/32/11304_2.png) [@ErraticGenerator](https://discourse.processing.org/u/ErraticGenerator)
#### Post date: [January 9, 2021, 5:15am UTC](https://discourse.processing.org/t/cant-keep-shape-overlayed-on-top-of-video/26867/2 "2021-01-09T05:15:15Z")

</div>

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()`

---

<div class="post-metadata">

### Author: ![alenmartel](https://avatars.discourse-cdn.com/v4/letter/a/c68b51/32.png) [@alenmartel](https://discourse.processing.org/u/alenmartel)
#### Post date: [January 16, 2021, 9:27pm UTC](https://discourse.processing.org/t/cant-keep-shape-overlayed-on-top-of-video/26867/3 "2021-01-16T21:27:03Z")

</div>

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)!

```auto
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;
  }
}

```