defaultCanvas problem

p5.js Coding Questions
1

Hello
I have a problem with p5js, I use video capture. The code works well and is displayed correctly. But by associating my P5Js with my HTML, I have two defaultCanvas that appear in my HTML when I inspect. one with my video and other one with nothing inside. Can you help me for resolve problem please.

let video;
let taille = 20;

function setup() {
    let cnv = createCanvas(640, 480);
    cnv.parent('theCanvas');
    pixelDensity(1);
    video = createCapture(VIDEO);
    video.size(width/taille, height/taille);
    video.hide();
}

function draw() {
  background(0);
  video.loadPixels();
  loadPixels();
  for (let y = 0; y < video.height; y++) {
    for (let x = 0; x < video.width; x++) {
        let index = (x+y * video.width)*4;
        let r = video.pixels[index+0];
        let g = video.pixels[index+1];
        let b = video.pixels[index+2];
        let bright = (r+g+b)/3;
        let w = map(bright, 0, 255, taille*2, 0);
        let col = color(r,g,b);
        let sinY = sin(x + frameCount*0.015);
        let motion = map(sinY, -0.5, 1, 1, 50);
        let moduleLen = motion;
        push();
        translate(x*taille, y*taille);
          module(0,moduleLen,w, col);
        pop();
    }
  } 
}
1 Like
2

Welcome to the forums!

Could you describe your problem more?

1 Like
3

Hello,
thank you,

My problem, it’s camera capture create one more defaultCanvas with nothing inside. I try to hide it with viedo.hide(); but nothing.

p5js problem
p5js problem1920×915 330 KB

Thank you in advance.

1 Like
4

Hello, try remove the default canvas by removing these 2 lines

let cnv = createCanvas(640, 480);
cnv.parent('theCanvas');

And replace with

noCanvas();
3 Likes
5

Thank you for your help,
i find solution, I have superimposed two canvas.

var x = (windowWidth - width) / 2;
  var y = (windowHeight - height) / 2;
  cnv.position(x, y);