Famous Painting Face in Hole! - Video is not refreshing

Yo,

So I am creating a program that functions like a photo booth, where there are famous paintings (eg. Mona Lisa, American Gothic, etc.) that have holes where your face goes. There are six “buttons” that when pressed show different paintings. I’m struggling to figure out how to get the video feed from the webcam to keep refreshing behind the images.

I think I am having issues because, during the draw function, I can get the video to work, because draw keeps refreshing, however when I put the command to start the video in mouseClicked it doesn’t keep following the command.

I know you wont be able to see the images however, maybe one of you peeps will have some knowledge on this.

Here’s what I have so far:

import processing.video.*;

PImage monalisa, frida, gothic, shoe, kiss, venus, pearl, gogh;
PImage lHole, fHole, gHole, sHole, kHole, vHole, pHole, vanHole;
Capture lisaFace;


void setup(){
  size(1000, 700);
 // background(255);
  
  String[] cameras = Capture.list();
  
  if (cameras.length == 0) {
    println("There are no cameras available for capture.");
    exit();
  } else {
    println("Available cameras:");
    for (int i = 0; i < cameras.length; i++) {
      println(cameras[i]);
    }
    
    // The camera can be initialized directly using an 
    // element from the array returned by list():
    lisaFace = new Capture(this, cameras[0]);
    lisaFace.start();     
  }  
  
  monalisa = loadImage("monalisa.png");
  frida = loadImage("frida.png");
  gothic = loadImage("usgothic.png");
  shoe = loadImage("shoe.png");
  kiss = loadImage("kiss.png");
  pearl = loadImage("pearl.png");
  gogh = loadImage("vangogh.png");
  venus = loadImage("venus.png");
  lHole = loadImage("monalisa2.png");
  fHole = loadImage("frida2.png");
  gHole = loadImage("usgothic2.png");
  sHole = loadImage("shoe2.png");
  kHole = loadImage("kiss2.png");
  pHole = loadImage("pearl2.png");
  vanHole = loadImage("vangogh2.png");
  vHole = loadImage("venus2.png");
}

void draw(){
  if(lisaFace.available() == true){
    lisaFace.read();
  }
  
  for(int xPos = 0; xPos < 851; xPos = xPos + 250){
    rect(xPos, 0, 250, 45); 
    rect(xPos, 655, 250, 45);
  } 
  ellipse(50, 70, 80, 30);
}


void mouseClicked(){
  if(mouseX < 250 && mouseY < 45){
    //image(monalisa, 0, 0);
    image(lisaFace, 0, 0, 1000, 700);
    image(lHole, 0, 0);
  }
  if(mouseX > 250 && mouseX < 500 && mouseY < 45){
    //image(frida, 0, 0);
    image(fHole, 0, 0);
  }
  if(mouseX > 500 && mouseX < 750 && mouseY < 45){
    //image(gothic, 0, 0);
    image(gHole, 0, 0);
  }
  if(mouseX > 750 && mouseX < 1000 && mouseY < 45){
   // image(shoe, 0, 0);
    image(sHole, 0, 0);
  }
  if(mouseX < 250 && mouseY > 655){
    //image(kiss, 0, 0);
    image(kHole, 0, 0);
  }
  if(mouseX > 250 && mouseX < 500 && mouseY > 655){
    //image(gogh, 0, 0);
    image(vanHole, 0, 0);
  }
  if(mouseX > 500 && mouseX < 750 && mouseY > 655){
    //image(venus, 0, 0);
    image(vHole, 0, 0);
  }
  if(mouseX > 750 && mouseX < 1000 && mouseY > 655){
    //image(pearl, 0, 0);
    image(pHole, 0, 0);
  }
}
1 Like

The problems you are having stem from a single issue: You are trying to do drawing outside of the draw() function.

You should do ALL your drawing in draw().

This means that you shouldn’t draw the paintings in mouseClicked(). So, how do you know which painting to draw?

You will need an additional variable and some logic to track which painting to use.

First, number the paintings. monalisa is 0. frida is 1. And so on.

Then add a new variable, current_image, that is the number of the current image to use. For example, if the image to use is frida, then current_image should have the value of 1.

Because current_image is a global variable, you can set its value inside mouseClicked() and read that value in draw().

So in mouseClicked(), set the value for the right painting to use.

And in draw(), draw the right painting based on that value.

1 Like