# Changing webcam-pixels to "nearest" color from color palette array

**URL:** <https://discourse.processing.org/t/changing-webcam-pixels-to-nearest-color-from-color-palette-array/14811>\
**Category:** Libraries\
**Created:** [October 19, 2019, 10:15pm UTC](https://discourse.processing.org/t/changing-webcam-pixels-to-nearest-color-from-color-palette-array/14811 "2019-10-19T22:15:10Z")\
**Posts on this page:** 10\
**Page:** 2

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 31, 2019, 10:09pm UTC](https://discourse.processing.org/t/changing-webcam-pixels-to-nearest-color-from-color-palette-array/14811/21 "2019-10-31T22:09:03Z")

</div>

Great! Thank you so much for sharing this.

Are there any strategies that you ended up using – for dealing with the holes, or warping, or glare, etc – that you would suggest to others!

---

<div class="post-metadata">

**Author:** ![AndreasRef](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/andreasref/32/133_2.png) [@AndreasRef](https://discourse.processing.org/u/AndreasRef)\
**Post date:** [November 1, 2019, 9:45am UTC](https://discourse.processing.org/t/changing-webcam-pixels-to-nearest-color-from-color-palette-array/14811/22 "2019-11-01T09:45:12Z")

</div>

Haven’t gotten to warping yet. So far I use blur to deal with holes but there is still a bit of noise, so might ask for advice here to improve it. Gonna clean things up a bit and then share the code.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [November 1, 2019, 9:39pm UTC](https://discourse.processing.org/t/changing-webcam-pixels-to-nearest-color-from-color-palette-array/14811/23 "2019-11-01T21:39:44Z")

</div>

> [@AndreasRef](#):
>
> So far I use blur to deal with holes but there is still a bit of noise, so might ask for advice here to improve it.

As an alternative to blur, a combination of dilate followed by erode is a good simple way to fill small holes. Given your goals, I would guess that you could be fairly aggressive with how much you dilate – you just have to avoid completely filling empty bead slots before the dilate step restores them. I believe that there is some fairly good documentation of that with opencv.

You could also you blob detection to detect the holes, then patch them with a color taken from their edge. Or, since in your case the holes are also almost identical sizes, you could also use template matching to detect and patch. It is dead simple – although a potential downside is it might be more sensitive to the lighting conditions of your setup.

---

<div class="post-metadata">

**Author:** ![earthbound](https://avatars.discourse-cdn.com/v4/letter/e/8c91f0/32.png) [@earthbound](https://discourse.processing.org/u/earthbound)\
**Post date:** [November 2, 2019, 3:23pm UTC](https://discourse.processing.org/t/changing-webcam-pixels-to-nearest-color-from-color-palette-array/14811/24 "2019-11-02T15:23:57Z")

</div>

Deciding what color is nearest to another in the digital realm is [a notoriously difficult thing](https://www.alanzucconi.com/2015/09/30/colour-sorting/).

I wrote a Python script that uses a library someone developed that uses the currently most advanced color model to find nearest colors, which model does a great job sorting color. Example output is [in this post of mine](http://earthbound.io/blog/superior-color-sort-with-ciecam02-python/).

If Processing or a Processing library can do HSL sorting, that might be the best you can do for now.

I would be thrilled if a library were developed that did CIECAM02 color modeling in Processing.

---

<div class="post-metadata">

**Author:** ![AndreasRef](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/andreasref/32/133_2.png) [@AndreasRef](https://discourse.processing.org/u/AndreasRef)\
**Post date:** [November 5, 2019, 9:46am UTC](https://discourse.processing.org/t/changing-webcam-pixels-to-nearest-color-from-color-palette-array/14811/25 "2019-11-05T09:46:43Z")

</div>

Thanks for the tips! I have only done blob detection, erosion + dilation with a black/white image after thresholding. Any examples of how to do it with specific colors?

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [November 5, 2019, 2:35pm UTC](https://discourse.processing.org/t/changing-webcam-pixels-to-nearest-color-from-color-palette-array/14811/26 "2019-11-05T14:35:29Z")

</div>

You can do it on binary buffers for each channel if you do it after quantization. During nearest-pixel, the results of each nearest-color channel is written to a different buffer, which can be processed as a binary image (eg erode dialate). The buffers are then combined.

---

<div class="post-metadata">

**Author:** ![AndreasRef](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/andreasref/32/133_2.png) [@AndreasRef](https://discourse.processing.org/u/AndreasRef)\
**Post date:** [November 7, 2019, 9:57am UTC](https://discourse.processing.org/t/changing-webcam-pixels-to-nearest-color-from-color-palette-array/14811/27 "2019-11-07T09:57:03Z")

</div>

Right… Would you happen to know where I might find an example that shows how to do that? I lost you a bit after the first sentence 😛 (i’m a creative coder in the sense that I don’t really know what I’m doing, haha).

---

<div class="post-metadata">

**Author:** ![AndreasRef](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/andreasref/32/133_2.png) [@AndreasRef](https://discourse.processing.org/u/AndreasRef)\
**Post date:** [November 11, 2019, 2:47pm UTC](https://discourse.processing.org/t/changing-webcam-pixels-to-nearest-color-from-color-palette-array/14811/28 "2019-11-11T14:47:48Z")

</div>

@jeremydouglass I looked at your suggestion once more and I found this example for reference, so I think I know what you mean now: [https://github.com/jorditost/ImageFiltering/tree/master/MultipleColorTracking](https://github.com/jorditost/ImageFiltering/tree/master/MultipleColorTracking).

You suggest I use to openCV library for processing to save the colors on different black/white channels, right?

One question is: How do I write to a openCV buffer from my own function? The example linked to does it with a build in function from openCV `opencv.inRange` that _filter the image based on the range of hue values_. I would like to do it from my own “nearest pixel” function…

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [November 11, 2019, 6:13pm UTC](https://discourse.processing.org/t/changing-webcam-pixels-to-nearest-color-from-color-palette-array/14811/29 "2019-11-11T18:13:27Z")

</div>

> [@AndreasRef](#):
>
> One question is: How do I write to a openCV buffer from my own function?

There are many ways to get image / pixel data into and out of opencv objects. Perhaps start with the simplest:

1. create n PImages, one for each channel, and fill them black
2. in the loop of your nearestpixel function
3. depending on result, write the results to each pixel as a white dot into the correct mask image

Now you have n masks.

1. load each mask into opencv with `opencv = new OpenCV(this, img);`
2. close holes with `opencv.dilate(); opencv.erode();` – you can also experiment with blur

Now you have n masks with closed holes.

For basic examples of moving color and grayscale pixels in and out of opencv object, see:

- [opencv-processing/examples/WorkingWithColorImages/WorkingWithColorImages.pde at master · atduskgreg/opencv-processing · GitHub](https://github.com/atduskgreg/opencv-processing/blob/master/examples/WorkingWithColorImages/WorkingWithColorImages.pde)

There are probably much faster ways of running your custom threshhold directly on the OpenCV buffer – I haven’t worked with it recently, so I’m not sure – but this is a great quick starting point to see if dilate+erode actually does what you want. If not, you may not need opencv at all, so no need to optimize.

---

<div class="post-metadata">

**Author:** ![AndreasRef](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/andreasref/32/133_2.png) [@AndreasRef](https://discourse.processing.org/u/AndreasRef)\
**Post date:** [November 17, 2019, 9:09pm UTC](https://discourse.processing.org/t/changing-webcam-pixels-to-nearest-color-from-color-palette-array/14811/30 "2019-11-17T21:09:56Z")

</div>

Thank you so much, will try it out!

[Previous page](https://discourse.processing.org/t/changing-webcam-pixels-to-nearest-color-from-color-palette-array/14811.md?page=1)