# Custom Patterned Pixelated image with custom palette of colors

**URL:** https://discourse.processing.org/t/custom-patterned-pixelated-image-with-custom-palette-of-colors/3864
**Category:** Coding Questions
**Created:** [September 26, 2018, 2:46pm UTC](https://discourse.processing.org/t/custom-patterned-pixelated-image-with-custom-palette-of-colors/3864 "2018-09-26T14:46:13Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![Ruchi](https://avatars.discourse-cdn.com/v4/letter/r/f475e1/32.png) [@Ruchi](https://discourse.processing.org/u/Ruchi)
#### Post date: [September 26, 2018, 2:46pm UTC](https://discourse.processing.org/t/custom-patterned-pixelated-image-with-custom-palette-of-colors/3864/1 "2018-09-26T14:46:13Z")

</div>

![chicago_radialtiles1_initialization](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d83f32299a7a3a659651d32eec14190a99f1abad.png)  

> **[Images via Clustered Strip Collages](https://loomsci.wordpress.com/2013/09/19/images-via-clustered-strip-collages/)**
>
> Listening to Pandora one day, I remember seeing the cover art for Death Cab for Cutie’s Narrow Stairs album pop up. Out of the corner of my eye, I thought it was a picture. It turns out that …

  
Hello  
The above image shows concentric circle pixelated pattern and the link shows an image with strip pixelated pattern.  
My question is can I impose this type of patterns on an image but with my custom palette of colors in processing (almost like indexed color mode in photoshop with custom color table)?  
Retaining the characteristics of an image, I wish to make custom shaped pixel patterns with custom palette of colors.  
I am new to processing so any help would be appreciated 🙂  
Thanks.

---

<div class="post-metadata">

### Author: ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)
#### Post date: [September 26, 2018, 4:05pm UTC](https://discourse.processing.org/t/custom-patterned-pixelated-image-with-custom-palette-of-colors/3864/2 "2018-09-26T16:05:07Z")

</div>

Hi Ruchi,

You can do what you describe but not sure you can really keep the characteristics of the image. The main problem I see is that you first lose lots of data by pixelating your image with “random shape” (by random I mean that you are not following characteristics of the picture like defined line, similar color etc…). And then you lose even more of those data by deleting color informations that were already an average of several colors (so a loss of color informations).

But the best way to be sure is to try out, and I’m sure that the result will look cool anyway 🙂

---

<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: [September 27, 2018, 3:55am UTC](https://discourse.processing.org/t/custom-patterned-pixelated-image-with-custom-palette-of-colors/3864/3 "2018-09-27T03:55:27Z")

</div>

> [@Ruchi](#):
>
> with custom palette of colors.

What kind of custom palette(s) so you have in mind. Are you mapping a rainbow of colors to something else? Desaturated, all red, posterized…?

---

<div class="post-metadata">

### Author: ![Ruchi](https://avatars.discourse-cdn.com/v4/letter/r/f475e1/32.png) [@Ruchi](https://discourse.processing.org/u/Ruchi)
#### Post date: [September 27, 2018, 10:05am UTC](https://discourse.processing.org/t/custom-patterned-pixelated-image-with-custom-palette-of-colors/3864/4 "2018-09-27T10:05:10Z")

</div>

Colors would range from dark to light according to the image in hand , it would include dark shades for shadows, lights for highlights & midtones but just in limited palette.  
The aim is to retain the image characteristics to the point of identification, losing out finer details is fine.

---

<div class="post-metadata">

### Author: ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)
#### Post date: [September 27, 2018, 11:12am UTC](https://discourse.processing.org/t/custom-patterned-pixelated-image-with-custom-palette-of-colors/3864/5 "2018-09-27T11:12:27Z")

</div>

Btw, the color palette thingy you want to do is called [color quantization](https://en.wikipedia.org/wiki/Color_quantization).

---

<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: [September 27, 2018, 3:18pm UTC](https://discourse.processing.org/t/custom-patterned-pixelated-image-with-custom-palette-of-colors/3864/6 "2018-09-27T15:18:31Z")

</div>

> [@Ruchi](#):
>
> Colors would range from dark to light according to the image in hand , it would include dark shades for shadows, lights for highlights & midtones but just in limited palette.

For simple experiments, you could try coercing all the pixels in HSB colorspace in systematic ways – setting a channel to 0 or 100%, or inverting or rotating a channel.

```auto
PImage img;
PImage img2;

void setup(){
  size(500, 800);
  img = loadImage("https://processing.org/tutorials/color/imgs/hsb.png");
  img.resize(500,400);

  img2 = img.copy();
  img2.loadPixels();
  colorMode(HSB, 100, 100, 100, 100);
  for(int i=0; i<img2.pixels.length; i++){
    float h = hue(img2.pixels[i]);
    float s = saturation(img2.pixels[i]);
    float b = brightness(img2.pixels[i]);
    img2.pixels[i] = color((h+50)%100, 100-s, 90, 100);
  }
  img2.updatePixels();
}

void draw(){
  image(img, 0, 0);
  image(img2, 0, 400);
}

```

For example, setting saturation to 0 desaturates the image. Rotating the hue 50% swaps every color with its (rainbow) opposite. Inverting the saturation makes the bright areas faded and the faded areas bright. Et cetera.

For very simple experiments in making everything blue-tone or red-tone etc you could also use tint, e.g. `tint(0, 128, 255, 255);`

- [tint() / Reference / Processing.org](https://processing.org/reference/tint_.html)

For taking a range of two arbitrary colors and mapping them against the brightness spectrum, use `lerpColor()`.

- [lerpColor() / Reference / Processing.org](https://processing.org/reference/lerpColor_.html)

If you want to take a collection of arbitrary colors (a crayon box) and map them, use a custom function `lerpColors()` – see old discussion:

- [Grayscale PGgraphics to a gradient map - Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/27959/grayscale-pggraphics-to-a-gradient-map)