Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Creating a **Outline** on your image?

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.

Comments

  • dave1707dave1707 Mod
    Posts: 7,872

    @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.

  • dave1707dave1707 Mod
    Posts: 7,872

    @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
    
  • Posts: 46

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

  • Posts: 59

    @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.

  • dave1707dave1707 Mod
    edited July 21 Posts: 7,872

    @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
    
Sign In or Register to comment.