# Calculation the color density of an image

**URL:** <https://discourse.processing.org/t/calculation-the-color-density-of-an-image/40021>\
**Category:** Coding Questions\
**Created:** [December 4, 2022, 8:54pm UTC](https://discourse.processing.org/t/calculation-the-color-density-of-an-image/40021 "2022-12-04T20:54:03Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jaspervb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jaspervb/32/10571_2.png) [@jaspervb](https://discourse.processing.org/u/jaspervb)\
**Post date:** [December 4, 2022, 8:54pm UTC](https://discourse.processing.org/t/calculation-the-color-density-of-an-image/40021/1 "2022-12-04T20:54:03Z")

</div>

Hi There,

Is there a way to calculate the percentages of the colors in an image, for example in a logo.  
If it is possible i want to translate those color percentage values into rectangles.  
I hope to hear from you.  
Kind regards in advance!  
Greetings

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 4, 2022, 9:01pm UTC](https://discourse.processing.org/t/calculation-the-color-density-of-an-image/40021/2 "2022-12-04T21:01:36Z")

</div>

Hello @jaspervb ,

> [@jaspervb](#):
>
> Is there a way to calculate the percentages of the colors in an image,

Yes. You will have to write some code to do this or find a solution out there that already does this.

Here are some tutorials to get you started:

> **[Images and Pixels](https://processing.org/tutorials/pixels/)**
>
> How to load and display images as well as access their pixels.

> **[Color](https://processing.org/tutorials/color/)**
>
> An introduction to digital color.

There are also resources (tutorials, references, examples) here:

> **[Welcome to Processing!](https://processing.org/)**
>
> Processing is a flexible software sketchbook and a language for learning how to code. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology…

`:)`

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 4, 2022, 9:57pm UTC](https://discourse.processing.org/t/calculation-the-color-density-of-an-image/40021/3 "2022-12-04T21:57:05Z")

</div>

Hello @jaspervb,

An incomplete example which I started with to plot a distribution of hues:

```auto
// Color Distribution
// v1.0.0
// GLV 2022-12-04

PImage img;
int [] col = new int [60];

void setup()
  {
  size(600, 600);
  colorMode(HSB, 60, 100, 100);
  img = loadImage("http://learningprocessing.com/code/assets/sunflower.jpg");
  println(img.pixels.length);
  println(img.width, img.height);
  
  for(int i= 0; i<img.pixels.length; i++)
    {
    // Extract the hues (0 to 60) and add to col[]
    }
    
  printArray(col);  
  image(img, 300, 200);
  noLoop();
  }
  
void draw()
  {
  }

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/f/e/fe7c044c332501acddd82283d19fafaa5ba45490.png)

Have fun!

`:)`

---

<div class="post-metadata">

**Author:** ![jaspervb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jaspervb/32/10571_2.png) [@jaspervb](https://discourse.processing.org/u/jaspervb)\
**Post date:** [December 5, 2022, 11:42am UTC](https://discourse.processing.org/t/calculation-the-color-density-of-an-image/40021/4 "2022-12-05T11:42:15Z")

</div>

Can you probably help me with your example. I don’t know how to make those colored lines wich i see in your image

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 5, 2022, 5:13pm UTC](https://discourse.processing.org/t/calculation-the-color-density-of-an-image/40021/5 "2022-12-05T17:13:54Z")

</div>

> [@jaspervb](#):
>
> how to make those colored lines

you want to display this array as lines:

```auto
int [] col = new int [60];

```

for the lines use rect:

Pseudo code:

```auto
noStroke(); 
for ( i .... ) {
    fill( i ); 
    rect ( i * width / 60.0, 0 , 
            width / 60.0, col[i] ); 
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 6, 2022, 1:11am UTC](https://discourse.processing.org/t/calculation-the-color-density-of-an-image/40021/6 "2022-12-06T01:11:14Z")

</div>

> [@jaspervb](#):
>
> I don’t know how to make those colored lines wich i see in your image

There is a histogram example on the Processing website.

`:)`