# Border between two colours

**URL:** <https://discourse.processing.org/t/border-between-two-colours/46399>\
**Category:** Beginners\
**Created:** [May 16, 2025, 7:29am UTC](https://discourse.processing.org/t/border-between-two-colours/46399 "2025-05-16T07:29:07Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![paulstgeorge](https://avatars.discourse-cdn.com/v4/letter/p/53a042/32.png) [@paulstgeorge](https://discourse.processing.org/u/paulstgeorge)\
**Post date:** [May 16, 2025, 7:29am UTC](https://discourse.processing.org/t/border-between-two-colours/46399/1 "2025-05-16T07:29:07Z")

</div>

I have loaded an image into Processing.

`loadImage("setup.png");`

Here (below) is a greatly magnified screenshot. I want an easy way to make the pixels along the border either red or blue. The choice could be change to the nearest colour, or it could be a flip of a two-sided coin, or some other method.

Or, perhaps, a combination of nearest colour and flip a coin if not nearer to one or the other.

There are other borders in the image, but only about eight colours in all so I could have a line of code for each pair of colours that have a border.

Red (218, 95, 68)

Blue (136, 57, 155)

 ![Screenshot 2025-05-16 at 09.03.04](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/f/7f22d60daa3cb4dee13cc1fea5c8753a4972592f.png)

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [May 16, 2025, 2:32pm UTC](https://discourse.processing.org/t/border-between-two-colours/46399/2 "2025-05-16T14:32:29Z")

</div>

- Create a HashMap of color to integer count.
- For each pixel in the image, increment the count of its color.
- Sort the colors in the map based on their count and use some cutoff to decide on your target palette (either take the top 8 colors or all the colors with a count above some fraction of the total pixel count).
- Put the palette colors in a new HashMap with a dummy value.
- For each pixel in the image, if its color is not in the palette hash, find its nearest neighbor color in the palette and write that as its new color.

---

<div class="post-metadata">

**Author:** ![paulstgeorge](https://avatars.discourse-cdn.com/v4/letter/p/53a042/32.png) [@paulstgeorge](https://discourse.processing.org/u/paulstgeorge)\
**Post date:** [May 16, 2025, 4:55pm UTC](https://discourse.processing.org/t/border-between-two-colours/46399/3 "2025-05-16T16:55:58Z")

</div>

That’s good, but it boils down to this:

> [@scudly](#):
>
> find its nearest neighbor color in the palette

And that is my question. How do you find the nearest colour? I thought of using approximate equality but often the Red value of a colour will send you one way and the Blue value the other way…

> [@Approximate equality for Rosetta](https://discourse.processing.org/t/approximate-equality-for-rosetta/42196):
>
> I noticed that Processing is missing from [https://rosettacode.org/wiki/Approximate\_equality](https://rosettacode.org/wiki/Approximate_equality). Sure this can be improved, but here is a start… I have used ‘big’ not in a vain attempt to avoid floating point errors, but to give expected results. int big = 1000000000; void setup() { noLoop(); } void draw() { isClose(1.2, 1.1, 0.10000001); // first number, second number, how close is close } void isClose(float num1, float num2, float prox) { int intnum1 = int(num1\*big); int intnum2 …

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [May 16, 2025, 5:23pm UTC](https://discourse.processing.org/t/border-between-two-colours/46399/4 "2025-05-16T17:23:58Z")

</div>

If your pixel is on the border between two different colors, then, yes, it would have to get sent one way or the other.

I would treat the colors as triples of values and compute distance as with vectors. For colors c0 and c1, the square distance is `sq(c1.r-c0.r) + sq(c1.g-c0.g) + sq(c1.b-c0.b)`. Then choose the palette entry that minimized the squared distance.

That’s not the most perceptually accurate, so there are a variety of ways you could improve it. Our eyes are much more sensitive to green than red and the least to blue so you could scale up the green difference a lot and the red a little before squaring. 2x red, 7x green, and 1x blue is pretty good. In the extreme, you could try to convert the colors to some perceptually accurate CIE colorspace and compute distances there, but I’ll bet that’s overkill and won’t make much difference anyways.

Or you could try to dig into the source code for some image editing software such as [https://www.gimp.org/](https://www.gimp.org/) to see how their posterize code works.

---

<div class="post-metadata">

**Author:** ![paulstgeorge](https://avatars.discourse-cdn.com/v4/letter/p/53a042/32.png) [@paulstgeorge](https://discourse.processing.org/u/paulstgeorge)\
**Post date:** [May 17, 2025, 5:43am UTC](https://discourse.processing.org/t/border-between-two-colours/46399/5 "2025-05-17T05:43:14Z")

</div>

> [@scudly](#):
>
> convert the colors to some perceptually accurate CIE colorspace

That’s exactly what I did in the end, thank you! It would have been overkill, but I already had the code. I converted the RGB to LCH then ignored the Lum and the Chr and went for the nearest Hue.