Translate() causing problems with colors

Hello!
I am getting somewhat confused with what translate() is doing here. For context, I am writing a dithering algorithm that creates squares of size 16x16. It takes a value between 0 and 255 for brightness as input. A value of 0 just draws a black rectangle, a value of 255 just draws a white rectangle. Values >0 and <255 fill a square with points, either black or white, based on the input value. The input value determines the ratio between black and white points: The higher the input value, the more white points are drawn, lower input values mean more black points than white points.

Now I have a problem with this:
When I draw a black rectangle, it appears as deepest black.
But when I fill a square area with white or black points, the black points actually turn out lighter than the solid black rectangle. This is very strange. I started this sketch without translate(), simply drawing using for-loops that expressly specify the absolute positions for each point. This worked well and gave me colours as expected. But using translate() somehow draws points lighter, even if stroke is set to 0. Same seems to go for values of 255 where a drawn rectangle is lighter in color than a bunch of white points. I am stuck.

import random

#  prepare a list of values (0 or 1) to randomly fill a square with white or black points
#  v determines brightness for the square: the higher v, the more white points per square will be drawn, lower v values draw more black points than white points.
def index(v):
    l = []
    for i in range(v):
        l.append(0)
    for i in range(256-bright):
        l.append(1)
    random.shuffle(l)  # shuffle the list to get a randomized order for the points in a square
    return l

#  draw a square. Lower values for v draw "darker" squares
def sprink(v,x,y):
    pushMatrix()
    translate(x,y)



    if v == 255:   # to save time: if value for v is 255:
        fill(255)  # just draw a white rectangle at the current coordinates...
        rect(x,y,16,16)  # ...instead of filling the current square area with 256 white points



    elif v == 0:  # as above, but for black: if v is 0, just draw a black rectangle...
        fill(0)  #...  instead of filling the current area with 256 black points
        rect(x,y,16,16)      


    else:  # aka if v > 0 and < 255:
        l = index(v)  # call the index function to prepare a list of values to draw points
        for y in range(16):
            for x in range(16):
                pos = x + y*16
                if l[pos] == 1:  # the higher v, the higher the "brightness" of the square:
                    stroke(0)  # draw a black point..
                else:
                    stroke(255)  # or a white point for each point in the current square
                point(x,y)    
    popMatrix()

size(256,256)
#noStroke()
side = 16

# fill 16x16 squares with brightness values from 0 to 255
bright = 0
for y in range(16):
    for x in range(16):
        sprink(bright,x*side,y*side)
        fill(255,0,0)
        bright += 1

# just drawing a grid, helps in distinguishing each square
# comment this out to better see the color problem
for y in range(0,width,16):
    for x in range(0,height,16):
            stroke(255,122,0,128)
            line(x,y,x+16,y)
            line(x,y,x,y+16)

Aplogies for posting long code but I don’t know where the problem is.
Additionally, I don’t understand why the very last square doesn’t just draw a white rectangle since the loop reaches a value of 255 which should draw a white rectangle.

Thanks a whole lot for looking into this!

Hi, did you try noSmooth()? It sounds like an anti aliasing issue.

Hello,

Try this:
rect(0,0,16,16)

That is the rectangle you are translating.

And add a background color after size():

background(255);

image

This is just an initial exploration of this…

:)