# Overlay sketch on movie

**URL:** <https://discourse.processing.org/t/overlay-sketch-on-movie/23857>\
**Category:** Libraries\
**Created:** [September 14, 2020, 6:52pm UTC](https://discourse.processing.org/t/overlay-sketch-on-movie/23857 "2020-09-14T18:52:19Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![petermakesnoise](https://avatars.discourse-cdn.com/v4/letter/p/977dab/32.png) [@petermakesnoise](https://discourse.processing.org/u/petermakesnoise)\
**Post date:** [September 14, 2020, 6:52pm UTC](https://discourse.processing.org/t/overlay-sketch-on-movie/23857/1 "2020-09-14T18:52:19Z")

</div>

Hi,  
I’m trying to overlay a drawing sketch on a movie. The sketch I’m using is “RandomWalkLevy” from Daniel Shiffman’s “The Nature of Code”, which calls two functions in the main draw() block. However, the trace of the drawing movement is erased by the new frames of the video. I have tried adapting the code here

> **[Processing 1.0 - Processing Discourse - Draw on top of a Movie??](https://processing.org/discourse/beta/num_1197673835.html)**

  
to create a top layer to put the drawing code. However, I’m not sure what to put between topLayer.beginDraw(); and topLayer.endDraw(); to make the Walker code work.  
Any help greatly appreciated.  
Thanks,  
Peter

import processing.video.\*;

Movie myMovie;

PGraphics topLayer;

void setup()  
{  
size(640, 480);  
myMovie = new Movie(this, “station.mov”);  
myMovie.loop();  
topLayer = createGraphics(width, height, g.getClass().getName());  
}

void movieEvent(Movie myMovie)  
{  
myMovie.read();  
}

void draw()  
{  
image(myMovie, 0,0, width, height);  
topLayer.beginDraw();  
topLayer.noFill();  
topLayer.stroke( 255 );  
topLayer.line( pmouseX, pmouseY, mouseX, mouseY );  
topLayer.endDraw();  
image( topLayer, 0, 0 );  
}

---

<div class="post-metadata">

**Author:** ![moritzsalla](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/moritzsalla/32/10593_2.png) [@moritzsalla](https://discourse.processing.org/u/moritzsalla)\
**Post date:** [September 14, 2020, 10:07pm UTC](https://discourse.processing.org/t/overlay-sketch-on-movie/23857/2 "2020-09-14T22:07:01Z")

</div>

If you are trying to replicate the trace effect of a non-cleared background, take look at objects. Shiffman explains it well in this video:

[![](https://img.youtube.com/vi/vqE8DMfOajk/hqdefault.jpg "9.7: Drawing Object Trails - p5.js Tutorial") ](https://www.youtube.com/watch?v=vqE8DMfOajk)

---

<div class="post-metadata">

**Author:** ![Hyperion65](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hyperion65/32/10569_2.png) [@Hyperion65](https://discourse.processing.org/u/Hyperion65)\
**Post date:** [September 15, 2020, 5:34am UTC](https://discourse.processing.org/t/overlay-sketch-on-movie/23857/3 "2020-09-15T05:34:47Z")

</div>

I guess blendMode has something to do with it, since the default setting is on blendMode(BLEND);

I get different results, cycling through them for either one of the two, the PGraphics or the movie.  
none of them are really satisfying, but in some modes you can see the movie and the traced line.

did not try all the different cases of all the mode combinations possible…

---

<div class="post-metadata">

**Author:** ![petermakesnoise](https://avatars.discourse-cdn.com/v4/letter/p/977dab/32.png) [@petermakesnoise](https://discourse.processing.org/u/petermakesnoise)\
**Post date:** [October 26, 2020, 3:35pm UTC](https://discourse.processing.org/t/overlay-sketch-on-movie/23857/4 "2020-10-26T15:35:15Z")

</div>

Thanks for the two replies. (And apologies for the delay in acknowledging them.)