Custom Patterned Pixelated image with custom palette of colors

Processing Coding Questions
1

chicago_radialtiles1_initialization
chicago_radialtiles1_initialization.png1099×768 290 KB


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 :slight_smile:
Thanks.

2

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 :slight_smile:

3

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…?

4

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.

5

Btw, the color palette thingy you want to do is called color quantization.

6

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.

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

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

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