Howdy, Stranger!

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

How to 'smooth' out a variable?

in Questions Posts: 35

So, I'm trying to do an odd little project but I've run into a problem- my lack of math knowledge. Basically, what I want to achieve is this:

When you touch the screen, a rectangle fades in (from opacity 0 to around opacity 100). This I can do, since I just need to add 1 or something like that to the alpha variable until it gets to 100. I also want the rectangle to fade out when you let go of the screen, which I can do as well.

The problem is this part- I want the rectangle to get brighter the more you move your finger around the screen, and then dim the more your finger stays still. I thought about using the touch.DeltaX and touch.DeltaY variables for this, but since the delta changes so fast, it doesn't look very smooth. This is what I need help with. How can I make the variable change smoothly?

Thanks for anyone who can be bothered figuring this out!

Comments

  • dave1707dave1707 Mod
    Posts: 7,673

    Something like this. Move your finger to brighten the rectangle, stop moving to dim it.

    function setup()
        a=0
    end
    
    function draw()
        background(0)
        fill(255,0,0,a)
        rect(100,400,200,200)
        if dim and a>0 then
            a=a-.7
        end  
        dim=true         
    end
    
    function touched(t)
        if t.state==MOVING and a<255 then
            a=a+1
            dim=false
        end
    end
    
  • edited July 2016 Posts: 35

    Thanks a lot for that @dave1707, that's pretty much exactly what I needed, but there's still a small problem:

    I want the alpha to fade from 0 to about 100 when you're touching the screen no matter if the touch is moving or not, but I want the alpha to be able to go over 100 if the touch DOES move. I was able to do this before, but now with the new code it's a bit tricky for me.

    I tried using a second alpha variable for this and adding it to the first one, but I can't seem to get it to work- I think the dimming in the draw function is making it screw up and I can't seem to think of a fix.

    Also, sorry for saying 'I want' so much, hopefully you don't feel like a slave reading my requests. I just can't think of what to do.

  • edited July 2016 Posts: 35

    I managed to think of a decent solution:

    function setup()
        a=0
        a2=0
        touching = false
        x,y = 0,0
        rectMode(CENTER)
    end
    
    function draw()
        background(0)
        fill(255,0,0,a+a2)
        rect(x,y,200,200)
        if touching then
        a2 = math.min(100,a2+1)
        end
        if dim then
            a=math.max(0,a-5)
        end
        if dim2 then
            a2=math.max(0,a2-3)
        end
        dim=true         
    end
    
    function touched(t)
        x,y = t.x,t.y
        if t.state==MOVING then
            local diff = math.abs(t.deltaX)+math.abs(t.deltaY)
            a=math.min(255,a+(diff/5))
            dim=false
        elseif t.state == ENDED then
            touching = false
            dim2 = true
        elseif t.state == BEGAN then
            touching = true
            dim2 = false
        end
    end
    

    It's a bit lazy and messy though, if someone could think of a less bad way to do it, I'd appreciate that

  • dave1707dave1707 Mod
    edited July 2016 Posts: 7,673

    @MPan1 I think this does what you want. If you touch the screen but don't move your finger, variable a increments to 100. If you move your finger, variable a increments to 255. If you stop moving your finger but don't lift your finger, the variable a decrements to 100. If you lift your finger from the screen, the variable a decrement to 0.

    function setup()
        rectMode(CENTER)
        x,y,a=0,0,0
    end
    
    function draw()
        background(0)
        fill(255,0,0,a)
        rect(x,y,200,200)
        if state=="began" then
            if a<100 then
                a=a+1
            elseif a>0 then
                a=a-1
            end        
        elseif state=="moving" then
            state="began"
            if a<255 then
                a=a+1
            end
        elseif state=="ended" and a>0 then
            a=a-1
        end
    end
    
    function touched(t)
        x,y=t.x,t.y
        if t.state==BEGAN then
            state="began"
        elseif t.state==MOVING then
            state="moving"
        elseif t.state==ENDED then
            state="ended"
        end        
    end
    
  • Posts: 35

    Thanks dave, I think that's exactly what I needed. Good to see you managed it without the use of another variable. Well done, thanks for helping!

  • Posts: 35

    Can someone close/remove this thread please?

  • IgnatzIgnatz Mod
    Posts: 5,396

    Why? It might be useful for someone else later.

Sign In or Register to comment.