Hello! we are struggling with something (i would imagine?) should be relatively simple: we are trying to mix a live video feed with a loaded image, jpg, png etc. We can't get it right. We tried to make the video feed transparent, didn't work. And then to place the transparent image over the video feed. Ultimately we want to compare a figure from the live stream, with a shape on the loaded image. Please help on what the best way is to achieve this please?

Hello,

I am new to Processing since a few days, but here is something I have done:

/**
* Mix videos
*
* by OlivierL.
*
* Play two video files in parallel.
* Mix the two stream by adjusting transparency
* of each image. The transparecny depends on the
* horizontal position of the mouse
*
*/
 
import processing.video.*;

Movie myLeftMovie, myRightMovie;
float ratioLeft, ratioRight;
int InMouseX;

void setup() {
 size(640, 480, P3D);
 background(0);
 // Load and play the videos in a loop
 myLeftMovie = new Movie(this, "movie3.mov");
 myRightMovie = new Movie(this, "movie2.mov");
 myLeftMovie.loop();
 myRightMovie.loop();
}

void movieEvent(Movie m) {
 // just continue to play each frame of each video
 m.read();
}

void draw() {
 
 // The 'left' video is totally transparent if mouse is on the right
 ratioLeft = (255 * (width - mouseX)) / width;
 tint(255, int(ratioLeft)); // set transparency
 image(myLeftMovie, 0, 0);
 
 // The 'right' video is totally transparent if mouse is on the left
 ratioRight = (255 * mouseX) / width;
 tint(255, int(ratioRight)); // set transparency
 image(myRightMovie, 0, 0);
 
 // display some values in the console, for checking, can be removed
 println("mx " + mouseX + " rl " + ratioLeft + " rr " + ratioRight);
 
}