Get color value for every pixel for making a mosaic

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:

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!

3 Likes

when you load an image it already has a pixel array which you can access using loadPixels and update with updatePixels further you can get the brightness of each pixel using brightness 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.

3 Likes

Processing uses a special color data type for representing color values, hence the weird-looking numbers. However, you can extract hue/saturation/brightness using hue(), saturation(), and brightness() functions –

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
3 Likes

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

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)   

3 Likes

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:

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()…

2 Likes