# Get color value for every pixel for making a mosaic

**URL:** <https://discourse.processing.org/t/get-color-value-for-every-pixel-for-making-a-mosaic/32907>\
**Category:** Processing.py\
**Created:** [October 18, 2021, 2:30pm UTC](https://discourse.processing.org/t/get-color-value-for-every-pixel-for-making-a-mosaic/32907 "2021-10-18T14:30:08Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![LindowMan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lindowman/32/14031_2.png) [@LindowMan](https://discourse.processing.org/u/LindowMan)\
**Post date:** [October 18, 2021, 2:30pm UTC](https://discourse.processing.org/t/get-color-value-for-every-pixel-for-making-a-mosaic/32907/1 "2021-10-18T14:30:08Z")

</div>

Hi!  
Now I know this is very basic, and probably has been answered before, but I am running into issues with my project, and couldn’t find the answer I need. I want to create a program that allows me to load an image and turn it into a photo mosaic. To this end, I thought the best way was to load the image, get the brightness for each pixel, and store these values in an array for future processing/mapping. Brightness is enough for now as I am beginning with monochrome images, once that is set it should be easy to adapt the code for colours. My problem is I don’t really understand the values I am getting here:

```auto
def settings():
    global img, pixlist
    img = loadImage("b1.jpg")
    pixlist = []

def draw():
    colorMode(HSB,255)
    image(img,0,0)
    for x in range(width):
        for y in range(height):
            pixlist.append(get(x,y))
    print(pixlist)

```

I expected the output of the last line to be values between 0-255 since I am setting colorMode to HSB with a max value of 255, but I am getting values between -1 and some some 8-digit negative numbers, i.e.:

-3947581  
-1250068  
-65794  
-1

Where am I going wrong?

Thanks for helping me!

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [October 18, 2021, 3:09pm UTC](https://discourse.processing.org/t/get-color-value-for-every-pixel-for-making-a-mosaic/32907/2 "2021-10-18T15:09:55Z")

</div>

when you load an image it already has a pixel array which you can access using [loadPixels](https://processing.org/reference/PImage_loadPixels_.html) and update with [updatePixels](https://processing.org/reference/updatePixels_.html) further you can get the brightness of each pixel using [brightness](https://processing.org/reference/brightness_.html) so really you don’t need to create another array of the same values. also by having pixlist appending every time draw is called i think you will have some problems.

as to why you are getting the values you are getting, don’t quote me, but i think when you call .get(x, y) it returns a packed int which is a representation of the color at that pixel with each 8 bits for each color channel red, green, blue and alpha.

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [October 19, 2021, 6:28pm UTC](https://discourse.processing.org/t/get-color-value-for-every-pixel-for-making-a-mosaic/32907/3 "2021-10-19T18:28:49Z")

</div>

Processing uses [a special color data type](https://processing.org/reference/color_datatype.html) for representing color values, hence the weird-looking numbers. However, you can extract hue/saturation/brightness using `hue()`, `saturation()`, and `brightness()` functions –

```python
colorMode(HSB, 360, 100, 100)
background(5, 80, 90) # a reddish color
c = get(10,10) # -65536
print(hue(c)) # 5.21
print(saturation(c)) # 80.34
print(brightness(c)) # 89.80

```

---

<div class="post-metadata">

**Author:** ![villares](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/villares/32/3166_2.png) [@villares](https://discourse.processing.org/u/villares)\
**Post date:** [October 19, 2021, 7:30pm UTC](https://discourse.processing.org/t/get-color-value-for-every-pixel-for-making-a-mosaic/32907/4 "2021-10-19T19:30:57Z")

</div>

I was playing with this the last few days… maybe it helps put in context the very nice explanations by @hotfooted and @tabreturn 😃

```python
step = 6
sample = []

def setup():
    size(880, 632)
    noStroke()
    url = "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Ada_Lovelace_portrait.jpg/440px-Ada_Lovelace_portrait.jpg"
    img = loadImage(url)
    img.loadPixels()
    for x in range(0, img.width, step):
        for y in range(0, img.height, step):
            # c = img.get(x, y) # slower
            loc = x + y * img.width
            c = img.pixels[loc]
            sample.append((x, y, c))

def draw():
    background(0)
    for x, y, c in sample:
        d = brightness(c) / 250.0 * step
        colorMode(RGB)
        fill(c)
        circle(step / 2 + x, step / 2 + y, d)        
        colorMode(HSB)
        fill(hue(c), 255, 255)
        circle(step / 2 + x + 440, step / 2 + y, d)   

```

 ![ada](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5a15cc7bab5bb1867cd561b9641e74685385d7a3.png)

---

<div class="post-metadata">

**Author:** ![LindowMan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lindowman/32/14031_2.png) [@LindowMan](https://discourse.processing.org/u/LindowMan)\
**Post date:** [October 29, 2021, 9:22am UTC](https://discourse.processing.org/t/get-color-value-for-every-pixel-for-making-a-mosaic/32907/5 "2021-10-29T09:22:55Z")

</div>

Thanks a lot I just noticed I never got back but your reply got me off in the right direction so I am gonna post this here for anyone who might need this later, it’s actually very simple:

```auto
img = loadImage("1.jpg")
colorMode(HSB,255)
image(img,0,0)

for x in range(img.width):
    for y in range(img.height):
        val = brightness(img.get(x,y))
        print(val)

```

Also thanks for encouraging me to read the docs instead of just serving me the code. Wasn’t aware of brightness()…