Howdy, Stranger!

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

Test for image alpha on touch?

in Questions Posts: 171

I’m trying to implement a solution for detecting when a touch occurs on a transparent part of an image. So that the goal is touches on transparent parts are not valid.

It’s a tricky thing to solve but I am trying to approach it from the angle of perhaps using a shader to detect the alpha value of the image? But I’m really new to shaders and I don’t understand how to get the alpha value. Also as I was thinking about this and trying to solve it I realize that it would have to work for rotated images as well.

Any help?

Comments

  • dave1707dave1707 Mod
    Posts: 9,415

    Here’s an example of getting the r,g,b,a values of an image. The red square has 0 alpha and the green square is 255.

    viewer.mode=STANDARD
    
    function setup()
        rectMode(CENTER)
        img=image(200,200) 
        setContext(img)  
        background(255,0,0,0) 
        fill(0,255,0)
        rect(100,100,80,80)
        setContext()
        str=""
    end
    
    function draw()
        background(0)
        sprite(img,100,100)
        if r~=nil then
            text("r="..r.."  g="..g.."  b="..b.."  a="..a,WIDTH/2,HEIGHT/2)
        end
        text(str,WIDTH/2,HEIGHT/2+200)
    end
    
    function touched(t)
        if t.state==CHANGED then 
            str=""
            if t.x>200 or t.y>200 then
                str="out of bounds"
            else
                r,g,b,a=img:get(t.x//1,t.y//1) 
            end
        end
    end
    
  • edited April 4 Posts: 171

    @dave1707 awesome, thanks for that. Image.get gets me one step closer but now, how to handle any possible rotation?

    The touch bounds here are based on the screen, I need something to interpolate rotation.

    I can already handle position by interpreting my center x,y and using height/width. But this assumes the images will always be at 0 angle.

    The Touches demo uses raycasting for hit detection but I think that needs the craft 3D scene and camera. Not really a viable solution for 2D.

    Found this equation, I think it will work for me:

    The coordinates of a point (x1, y1) when rotated by an angle θ around (x0, y0) become (x2, y2), as shown by the following equation:

    x2 = cos(θ) * (x1 - x0) + sin(θ) * (y1 - y0)
    y2 = -sin(θ) * (x1 - x0) + cos(θ) * (y1 - y0)

  • Posts: 1,277

    I’m not sure how it works but I have an old @Ignatz project lying around that seems to do something like this.

    Run the last tab to see the touch demo.

  • Posts: 171

    Awesome, that’s exactly what I was thinking it could be done via shader, I’ll have to really study this example to see how it’s done thanks @UberGoober !!

  • Posts: 1,277

    Thanks @skar, I will take credit for trying to preserve some of the great work that’s been done here over the years, for precisely opportunities like this.

    Of course the code itself was made by the estimable @Ignatz, who contributed so much during his, er... reign? Term? Time here, at least.

  • Posts: 171

    There should really be a repo for Codea shared projects. The examples are great but so far I’ve seen tons of stuff on here from being active and asking that isn’t easily accessible.

  • Posts: 1,277
    @skar I agree, and I’m trying to collect a bunch of that code to host on my GitHub account.

    I’m also trying to make icons out of screenshots of the projects so that once they’re imported into Codea they’re easier to understand and remember.
Sign In or Register to comment.