Pixel correspondence with live capture

p5.js Coding Questions
1

<I have asked this question but not getting a successful answer.Tring to scale the video feed from the capture object into a small size and then mapping it into a larger canvas but some how even 1:1 pixel manipulation doesn’t seems to work either .Can someone guide me what is the problem here:
my code is given below:

let video;

function setup() {
createCanvas(640, 480);
video=createCapture(VIDEO);
pixelDensity(1);
//video.size(320,240);

}

function draw() {
// background(220);
video.loadPixels();
video.loadPixels();
for(var y=0;y<height;y++){
for(var x=0;x<width;x++){
let index=(x+y*width)*4;

  var r=video.pixels[index+0];
  var g=video.pixels[index+1];
  var b=video.pixels[index+2];
  var a=255;
  
  let br=(r+g+b)/3;
  pixels[index+0]=br;
  pixels[index+1]=br;
  pixels[index+2]=br;
  pixels[index+3]=255;
  
  
}

}
video.updatePixels();
}

please HELP

. >

2

You read values from video with video.loadPixels(); and video.updatePixels();,

  let br=(r+g+b)/3;
  pixels[index+0]=br;
  pixels[index+1]=br;
  pixels[index+2]=br;
  pixels[index+3]=255;

but you assign or change values of pixel array of canvas without loadPixels() and updatePixels(). You need to loadPixels() for each and every data source or target you use. Without them none of the changes really happen.

1 Like
3

Thnkyou Someone
it was such a careless mistake from my side and I didnt even looked at that
thank you so much
I was so foolish i didn’t even check srry
srry for being so careless

4

It happens to everyone. With experience you learn to notice these things, but still happens.

1 Like
5

Thanks a lot though can i add a question though i am not sure whether I should create a topic again?
does video.size() function doesn’t work properly for pixel manipulation.
the moment i am using it I am getting a black screen in the canvas though the video is running in the browser
I am sending the code -I dont think this time I have committed any careless mistake

let video;

function setup() {
createCanvas(320, 240);
video=createCapture(VIDEO);
pixelDensity(1);
video.size(320,240);

}

function draw() {
background(220);
loadPixels();
video.loadPixels();
for(var y=0;y<height;y++){
for(var x=0;x<width;x++){
let index=(x+y*width)*4;

  var r=video.pixels[index+0];
  var g=video.pixels[index+1];
  var b=video.pixels[index+2];
  var a=255;
  
  let br=(r+g+b)/3;
  pixels[index+0]=br;
  pixels[index+1]=br;
  pixels[index+2]=br;
  pixels[index+3]=255;
  
  
}

}
updatePixels();
}