Capture image is not shown

p5.js Coding Questions
1

Hi, since some point of coding, my code has not been able to show an image on the canvas… My original intent was make the captured image (by webcam) as a background once the button is clicked and game starts playing, but my code doesn’t show the image anymore. Since I tried with another preloaded image but it didn’t work, the problem might be with the image() function. But I’m not sure what is causing my problem here. Could anyone help me with this?

Thank you :slight_smile:

let capture; 
let state = 0;

function setup() {
  createCanvas(400, 300); 
  frameRate(3);

  capture = createCapture(VIDEO);
  capture.size(width,height);
  capture.hide();
}

function draw() {

  if (state == 0) {
    drawIntro();
  } else if (state == 1) {
    background(150);
    image(capture, 0, 0); //not showing
    drawPlaying();
  }
}

function mousePressed() {
  if (mouseX > 150 && mouseX < 250 && mouseY > 170 && mouseY < 200) {
    state = 1; 
  } 
}

function drawIntro() {
  background(0);
  ...
}

function drawPlaying() {
 push();
 ...
 pop();
}
2

You have not provided enough of your code to demonstrate the problem. If I make the most minimal possible changes to the code you shared to make it run, everything works fine:

let capture;
let state = 0;

function setup() {
	createCanvas(400, 300);
	frameRate(3);

	capture = createCapture(VIDEO);
	capture.size(width, height);
	capture.hide();
}

function draw() {
	if (state == 0) {
		background(0);
	} else if (state == 1) {
		background(150);
		image(capture, 0, 0); // once I click on the canvas, the webcam image is displayed
	}
}

function mousePressed() {
	state = 1;
}

It seems most likely that your actual drawPlaying() function is drawing something over top of and completely covering the image drawn of the capture element.

3

Hi @KumuPaul, thank you so much for your response. In the drawPlaying() function, it essentially draws a set of ellipses by rotating and translating the coordinate (which is all reset at the end). Actually, what is strange is that I see background(150) is working correctly, while image(capture, 0, 0) is not showing. So I think it’s not likely that the drawPlaying() overdraws the canvas. I’m prefixed because image() suddenly stopped working though the webcam itself is working …

Also, I get a part of the capture and modify the cropped picture before the image() is called, but I don’t think capture itself is affected by this.

function draw() {
  selected = capture.get(width/2 -50, height/2 -50, 100, 100);
  selected = shuffleImg(selected);

  if (state == 0) {
    drawIntro();
  } else if (state == 1) {
    var alpha = map(counter, 0, 0, 0, 255);
    tint(0, 255 - alpha);
    counter++;
    if (counter > 0) { state=2; }
  } else if (state == 2) {
      background(150);
      image(capture, 0, 0);
      drawPlaying();
  }
}