# Pixel correspondence with live capture

**URL:** <https://discourse.processing.org/t/pixel-correspondence-with-live-capture/22248>\
**Category:** Coding Questions\
**Created:** [June 29, 2020, 12:42pm UTC](https://discourse.processing.org/t/pixel-correspondence-with-live-capture/22248 "2020-06-29T12:42:03Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![maddyna](https://avatars.discourse-cdn.com/v4/letter/m/46a35a/32.png) [@maddyna](https://discourse.processing.org/u/maddyna)\
**Post date:** [June 29, 2020, 12:42pm UTC](https://discourse.processing.org/t/pixel-correspondence-with-live-capture/22248/1 "2020-06-29T12:42:04Z")

</div>

> \<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](https://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

. \>

---

<div class="post-metadata">

**Author:** ![SomeOne](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/someone/32/8639_2.png) [@SomeOne](https://discourse.processing.org/u/SomeOne)\
**Post date:** [June 29, 2020, 2:34pm UTC](https://discourse.processing.org/t/pixel-correspondence-with-live-capture/22248/2 "2020-06-29T14:34:38Z")

</div>

> [@maddyna](#):
>
> ```auto
> var r=video.pixels[index+0];
> var g=video.pixels[index+1];
> var b=video.pixels[index+2];
> var a=255;
> 
> ```

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

```auto
  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.

> **[reference | p5.js](https://p5js.org/reference/#/p5/loadPixels)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

---

<div class="post-metadata">

**Author:** ![maddyna](https://avatars.discourse-cdn.com/v4/letter/m/46a35a/32.png) [@maddyna](https://discourse.processing.org/u/maddyna)\
**Post date:** [June 29, 2020, 2:59pm UTC](https://discourse.processing.org/t/pixel-correspondence-with-live-capture/22248/3 "2020-06-29T14:59:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![SomeOne](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/someone/32/8639_2.png) [@SomeOne](https://discourse.processing.org/u/SomeOne)\
**Post date:** [June 30, 2020, 3:55am UTC](https://discourse.processing.org/t/pixel-correspondence-with-live-capture/22248/4 "2020-06-30T03:55:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![maddyna](https://avatars.discourse-cdn.com/v4/letter/m/46a35a/32.png) [@maddyna](https://discourse.processing.org/u/maddyna)\
**Post date:** [June 30, 2020, 11:24am UTC](https://discourse.processing.org/t/pixel-correspondence-with-live-capture/22248/5 "2020-06-30T11:24:03Z")

</div>

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();  
}