# Image processing of webcam video (dithering)

**URL:** <https://discourse.processing.org/t/image-processing-of-webcam-video-dithering/3904>\
**Category:** Coding Questions\
**Created:** [September 27, 2018, 2:55pm UTC](https://discourse.processing.org/t/image-processing-of-webcam-video-dithering/3904 "2018-09-27T14:55:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![gramalam](https://avatars.discourse-cdn.com/v4/letter/g/f0a364/32.png) [@gramalam](https://discourse.processing.org/u/gramalam)\
**Post date:** [September 27, 2018, 2:55pm UTC](https://discourse.processing.org/t/image-processing-of-webcam-video-dithering/3904/1 "2018-09-27T14:55:00Z")

</div>

hello! I am hoping to get someone to look at what I’ve written and help me troubleshoot.  
below is a link to the sketch written in the web editor, with a goal of applying a dithering effect to streamed video from a webcam. Its a modification of code I put together to perform this same transformation to a static image, and that has no problems.  
(also i know my code is quite un-optimized, i plan to clean things up once i get this fixed)

[https://editor.p5js.org/gramcraka/sketches/SkSXv4tFX](https://editor.p5js.org/gramcraka/sketches/SkSXv4tFX)

I have tested this sketch: [https://editor.p5js.org/kellylougheed/sketches/ryYR3-cIM](https://editor.p5js.org/kellylougheed/sketches/ryYR3-cIM) with my webcam and it works just fine, which leads me to believe its has something to do with how I am stepping through the pixel array. for the dithering effect, the x,y position of a pixel is used.

im hoping someone could shed some insight as to why this might not be working, thank you!!

---

<div class="post-metadata">

**Author:** ![gramalam](https://avatars.discourse-cdn.com/v4/letter/g/f0a364/32.png) [@gramalam](https://discourse.processing.org/u/gramalam)\
**Post date:** [September 28, 2018, 12:32pm UTC](https://discourse.processing.org/t/image-processing-of-webcam-video-dithering/3904/2 "2018-09-28T12:32:44Z")

</div>

I guess could some one just answer how this bit of code:

```auto
for (var y = 0; y < (photo.height-1) * d; y++) {
    for (var x = 1; x < (photo.width -1) * d; x++) {
      for (var i = 0; i < d; i++) {
        for (var j = 0; j < d; j++) {
          // loop over
          var idx = 4 * ((y * d + j) * photo.width * d + (x * d + i));

```

is different than this:

```auto
for (var i = 0; i < capture.pixels.length; i += 4) {
    // Edit the red value
    capture.pixels[i] *= 1;
    // Edit the green value
    capture.pixels[i + 1] *= 1;
    // Edit the blue value
    capture.pixels[i + 2] *= 1;
  }

```

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [September 28, 2018, 6:23pm UTC](https://discourse.processing.org/t/image-processing-of-webcam-video-dithering/3904/3 "2018-09-28T18:23:36Z")

</div>

Do both codes do the same thing? (I didn’t have the chance to test it).

I can tell you that one code is more readable than the other one.

In addition, one code is easier to maintain than the other one.

To explain the difference, you will need to print the value of x and i (also y and j) to convince yourself both codes do the same thing. Start with a Photo width and height of 4 and 6 pixels, for instance so you can see the output and interpret the result yourself. One thing: you need to tell us what is the value of d. I am guessing it is 4. However, guessing is not an efficient way to approach these questions.

Kf

---

<div class="post-metadata">

**Author:** ![gramalam](https://avatars.discourse-cdn.com/v4/letter/g/f0a364/32.png) [@gramalam](https://discourse.processing.org/u/gramalam)\
**Post date:** [September 28, 2018, 6:58pm UTC](https://discourse.processing.org/t/image-processing-of-webcam-video-dithering/3904/4 "2018-09-28T18:58:58Z")

</div>

d is the pixel density, and is annotated as such in the full code. I merely copy and pasted the related sections from each link that I posted above. yes they do the same thing. the top one takes a x,y coordinate and converts that to that corresponding pixels’ index within the pixel array, then performs the same tasks inside the loop on the bottom one. the only difference is the bottom one steps through the pixel array index-wise, the top one steps through based on x,y coordinate. I’d like to know if this difference is the source of my problem, and if not what could other problems be