Pattern Checker - Test and learn string patterns in real time!

Code Sharing
21

The same thing happens with ellipse. Probable will happen with other things too.


function draw()
    background(255)
    fill(255,0,0)
    ellipse(WIDTH/2,HEIGHT/2,300)
    fill(255)
    ellipse(WIDTH/2,HEIGHT/2,300)
end

EDIT: Happens with line.


function draw()
    background(255)
    stroke(255, 0,0)
    strokeWidth(6)
    line(100,100,100,600)
    stroke(255)
    line(100,100,100,600)
end
22

@Briarfox I wrote a little test program to show what’s happening. Use the parameter to change values. The parameter value of 1 will show a tall red rectangle. A value of 2 will show a write rectangle. A value of 3 will show both rectangles, with the white over the red. I also show the r,g,b values of a cross section of the rectangle. When it’s red, the 6 values are 255,0,0. When it’s white, the 6 values are 255,255,255 . When it’s white over red, you’ll see that the first and last set of colors isn’t true red or true white, but a mixture.


function setup()
    parameter.integer("test",1,3,1)
    img=image(300,300)
end

function draw()
    background(40,40,50)
    if test == 1 or test==3 then
        setContext(img)
        fill(255,0,0)
        rect(100,1,6,200)
        setContext()
        sprite(img,200,200)
        count=0
        for x=101,106 do
            count = count + 1
            r,g,b,a=img:get(x,50)
            text(r.." "..g.." "..b,100,HEIGHT-count*20)
        end
    end
    if test==2 or test==3 then
        setContext(img)
        fill(255)
        rect(100,1,6,200)
        setContext()
        sprite(img,200,200)
        count=0
        for x=101,106 do
            count = count + 1
            r,g,b,a=img:get(x,50)
            text(r.." "..g.." "..b,300,HEIGHT-count*20)
        end
    end
end
23

@dave1707, @Briarfox - when the colours at the edge blend like that, it’s anti-aliasing, which unfortunately we can’t turn off.

24

@Ignatz If it’s anti-aliasing, then why does the red rectangle on a white background or a white rectangle on a red background not show it. If I do a red background, the white rectangle shows all 6 values as 255,255,255 . If I do a white background, the red rectangle shows all 6 values as 255,0,0 . If I do a red background, the white rectangle on top of the red rectangle shows the 1st and last values as not true white. So apparently, anti-aliasing doesn’t happen with the background color, just other colors drawn on top of each other.

25

@dave1707 - that’s the way I see it, too. Perhaps the anti-aliasing applied to images only applies to blending within the images (or text) pixels.

26

@Ignatz I was wrong. I didn’t have the background command in the correct spot. After I changed it, I was getting the anti-aliasing trying a red or white background with a red or white rectangle.

27

@JakAttak - your approach doesn’t work if wrapping is smaller than WIDTH

28

@Briarfox, @dave1707 - I got it to almost work with this code

https://gist.github.com/dermotbalson/9181463

It uses a shader to avoid the anti-aliasing, like this. As before, it creates a table of cumulative strings, so if you have this text This is RED TEXT and this is BLUE TEXT, you would break it into
This is
This is RED TEXT
This is RED TEXT and this is
This is RED TEXT and this is BLUE TEXT
ie you add each new colour section a piece at a time

Then you draw the first text to an image with setContext. Call it A1

Then you draw the second text to an image with setContext. Call it A2

You pass them both to the shader, and it compares pixels. If the pixel is missing for A1 and exists for A2, you draw the pixel from A2, otherwise you use A1. This means A2 will only be used for the text that has been added since A1, and the text in A1 will not be overwritten and cause anti-aliasing.

This is the result

There is still a problem, which is that Codea doesn’t word wrap consistently (or else it mis-measures text height. You’ll see the first few words have blue traces, and the blue word on the end of the line is a couple of pixels too low, which means the first word wrap pushed the first line down from where it was before.

This stuffs up my approach of overwriting text, so I don’t know what to suggest - unless this is good enough.

29

Just popping in to say at just now I was working with a pattern and this was super helpful. Was able to nail down the perfect pattern in this, copy it into my program and it worked first time.

30

@JakAttak Glad it helped you! I’ll need to get an updated version up. There is an issue with multiple pattern control characters returned in a single result. I am still messing with the text display as well.