Creating a **Outline** on your image?

Questions
1

I searched the forums cannot seem to find if there is a way to accomplish what I am setting out to do.
This is what I am trying to accomplish:

I have an image of a character flying (think superman)
behind him, I placed the image background of a city.

However, there is not enough contrast from the superman character to distinguish him from the city background. It’s like he is blending into the background.

My initial thought was to, add the stroke keyword at the end of the sprite image code block gave it a color so it can then give directions to codea to draw a stroke outline of the color I chose around the sprite image, but that does not do anything.

That’s the extent of my knowledge.

What am I doing wrong?
How do I achieve my goal?

Thank you.

2

@tactfulgamer I wrote a program that creates an outline of an image. It’s somewhere on the forum. I’ll see if I can find it later today so you can see if it fits your needs or maybe you can modify it.

3

@tactfulgamer Here’s the code. The outline is created in a table. You might have to modify this to work with what you want because I don’t know what you’re doing. Try different sprites to get an idea of the outline. You can vary the outline size in the ellipse statement at the bottom.

displayMode(FULLSCREEN)

function setup()
    spriteMode(CORNER)
    tab={}
    img=readImage("SpaceCute:Rocketship")
    iw=img.width
    ih=img.height
    for y=1,ih do
        col=false
        for x=1,iw do
            r,g,b=img:get(x,y)
            if r+g+b==0 then
                if col==true then
                    table.insert(tab,vec2(x,y))
                end
                hx=x
                hy=y
                col=false
            elseif r+g+b>0 then
                if x==1 or x==iw then
                    table.insert(tab,vec2(x,y))
                elseif col==false then
                    table.insert(tab,vec2(hx,hy))
                end
                col=true
            end
        end
    end
    for x=1,iw do
        col=false
        for y=1,ih do
            r,g,b=img:get(x,y)
            if r+g+b==0 then
                if col==true then
                    table.insert(tab,vec2(x,y))
                end
                hx=x
                hy=y
                col=false
            elseif r+g+b>0 then
                if y==1 or y==ih then
                    table.insert(tab,vec2(x,y))
                elseif col==false then
                    table.insert(tab,vec2(hx,hy))
                end
                col=true
            end
        end
    end
    print(#tab)
end

function draw()
    background(0)
    fill(255)
    sprite(img,WIDTH/2,HEIGHT/2)
    for a,b in pairs(tab) do
        ellipse(b.x+WIDTH/2,b.y+HEIGHT/2,4)
    end
end
4

Like always @dave1707 you are amazing! thank you. I will give it a go and report when i get the chance.

5

@tactfulgamer I am not sure if you are into shaders, but after reading your post I thought I would like a 2D outline shader for my projects. I found one online and modified it to work in Codea. You need to make sure there is enough room in alpha space from the edge of the sprite to the edge of the image for it to work. Outline Shader

The white space around the heart in the attached image is being created by the shader. The size and color of the outline can be set.

6

@tactfulgamer Here an updated version to my outline code. I added 3 sliders that allow you to change the outline color, change the outline size, and save the image with the outline in the Codea Dropbox folder. By using the saved image, you don’t need to constantly calculate the outline.

function setup()
    spriteMode(CORNER)
    tab={}
    img=readImage("Planet Cute:Tree Tall")
    iw=img.width
    ih=img.height
    for y=1,ih do
        col=false
        for x=1,iw do
            r,g,b=img:get(x,y)
            if r+g+b==0 then
                if col==true then
                    table.insert(tab,vec2(x,y))
                end
                hx,hy=x,y
                col=false
            elseif r+g+b>0 then
                if x==1 or x==iw then
                    table.insert(tab,vec2(x,y))
                elseif col==false then
                    table.insert(tab,vec2(hx,hy))
                end
                col=true
            end
        end
    end
    for x=1,iw do
        col=false
        for y=1,ih do
            r,g,b=img:get(x,y)
            if r+g+b==0 then
                if col==true then
                    table.insert(tab,vec2(x,y))
                end
                hx,hy=x,y
                col=false
            elseif r+g+b>0 then
                if y==1 or y==ih then
                    table.insert(tab,vec2(x,y))
                elseif col==false then
                    table.insert(tab,vec2(hx,hy))
                end
                col=true
            end
        end
    end
    Size=3
    parameter.color("colr",color(255),outline)
    parameter.integer("Size",1,10,3,outline)
    parameter.action("Save image",save)
end

function draw()
    background(223, 194, 146, 255)
    sprite(img1,100,100)
end

function outline()
    img1=image(iw,ih)
    setContext(img1)
    sprite(img,0,0)
    fill(colr)
    for a,b in pairs(tab) do
        ellipse(b.x,b.y,Size)
    end
    setContext()
end

function save()
    saveImage("Dropbox:img1",img1)
    output.clear()
    print("Image saved in Dropbox")
end