What's the propper way to make a tween.path start each time a button is pressed?

Questions
1 
Hello all, long time reader, first time poster. Thanks in advance to anyone taking the time to read this. All guidance is welcome. I am very new to Codea and programing in general, so please bare with me, as I am sure this is extremely simple to most here.

  I have created a very basic app and was trying to spice things up with a few short animations. I've successfully made a tween.path just the way I need it, and it looks great in my actual game. I'm just not sure of the best way to call the animation each time my button is pressed. So far, I have been able to to get it to start on press, but with some weird results. 

 My first couple tries caused the sprite to appear static with no animation at all. Another attempt, the animation flickered and jumped around the path, sometimes only showing while actualy touching the button.  At one point, I actually thought I had it working correctly, but then realized it only worked for the first three seconds of running the app, after that its as if the animation has already completed in the background.
 
 I have made a very simple example to try and wrap my head around exactly how all this tween.path stuff works. Im clearly missing something. Any help would be greatly appreciated. 

--# Main
-- *Tween.Path Post Press
--
-- What is the propper way to make a tween.path start each time a button is pressed? 

function setup()

     --create the button
     button = Button("Planet Cute:Chest Closed","Planet Cute:Chest Open",WIDTH/2,HEIGHT/2)
     button.action = function() buttonPressed() end
    
     --create my path
     strt = {x = WIDTH, y = HEIGHT, size = 20}
    
     t1 = {x = WIDTH/2, y = HEIGHT/2, size = 80}
     t2 = {x = WIDTH/1.8, y = HEIGHT/1.5, size = 100}
     t3 = {x = WIDTH/1.7, y = HEIGHT/1.2, size = 100}
     t4 = {x = WIDTH/1.3, y = HEIGHT/1.5, size = 0}
    
     tween.path(3, strt, {t1,t3,t4},{loop=tween.loop.once}) 
    
end

function draw()
    background(40, 40, 50)
    sprite("SpaceCute:Background",WIDTH/2,HEIGHT/2, WIDTH,HEIGHT)
    button:draw()

-- Currently setup to trigger animation on launch --  used to test tween.path. Comment out
   sprite("Planet Cute:Gem Green",strt.x, strt.y, strt.size)   

      
    function buttonPressed()
        -- would like tween path to start here
        -- what would be the correct way of doing this?       
        print("Gem Now ;)")
        end
             
    function touched(touch)
        button:touched(touch)
        end
        
end

--# Button
Button = class()

function Button:init(btnNorm,btnSel,x,y)
    self.pos = vec2(x,y)
    self.btnNorm = btnNorm
    self.btnSel = btnSel
    self.selected = false
    self.action = nil
    self.w,self.h = spriteSize(self.btnNorm)
end

function Button:draw()
    if self.selected == true then
        sprite(self.btnSel,self.pos.x,self.pos.y,self.w/1,self.h/1)  
    elseif self.selected == false then
        sprite(self.btnNorm,self.pos.x,self.pos.y,self.w/1,self.h/1)  
    end
end

function Button:touched(touch)
    if touch.state == BEGAN or touch.state == MOVING then
        if math.abs(self.pos.x - touch.x) <= (self.w/2)   
        and math.abs(self.pos.y - touch.y) <= (self.h/2)  then   
            self.selected = true
        else
            self.selected = false
        end
    elseif touch.state == ENDED then
        if self.selected == true and self.action then
            self.action()
        end
        self.selected = false
    end
end
2

Try this. Also, the functions buttonPressed and touched shouldn’t be in the draw function.


displayMode(FULLSCREEN)
    
function setup()
     button = Button("Planet Cute:Chest Closed","Planet Cute:Chest Open",WIDTH/2,HEIGHT/2)
     button.action = function() buttonPressed() end
end
    
function gemPath()
     strt = {x = WIDTH, y = HEIGHT, size = 20}
     t1 = {x = WIDTH/2, y = HEIGHT/2, size = 80}
     t2 = {x = WIDTH/1.8, y = HEIGHT/1.5, size = 100}
     t3 = {x = WIDTH/1.7, y = HEIGHT/1.2, size = 100}
     t4 = {x = WIDTH/1.3, y = HEIGHT/1.5, size = 0}
     tween.path(3, strt, {t1,t3,t4},{loop=tween.loop.once},gemDone) 
end

function draw()
    background(40, 40, 50)
    sprite("SpaceCute:Background",WIDTH/2,HEIGHT/2, WIDTH,HEIGHT)
    button:draw()
    if strt then
        sprite("Planet Cute:Gem Green",strt.x, strt.y, strt.size)  
    end
end 


function buttonPressed()
    if not gem then
        gem=true
        gemPath()
    end
end

function gemDone()
    gem=false
end


function touched(touch)
    button:touched(touch)
end

--# Button
Button = class()

function Button:init(btnNorm,btnSel,x,y)
    self.pos = vec2(x,y)
    self.btnNorm = btnNorm
    self.btnSel = btnSel
    self.selected = false
    self.action = nil
    self.w,self.h = spriteSize(self.btnNorm)
end

function Button:draw()
    if self.selected == true then
        sprite(self.btnSel,self.pos.x,self.pos.y,self.w/1,self.h/1)  
    elseif self.selected == false then
        sprite(self.btnNorm,self.pos.x,self.pos.y,self.w/1,self.h/1)  
    end
end

function Button:touched(touch)
    if touch.state == BEGAN or touch.state == MOVING then
        if math.abs(self.pos.x - touch.x) <= (self.w/2)   
        and math.abs(self.pos.y - touch.y) <= (self.h/2)  then   
            self.selected = true
        else
            self.selected = false
        end
    elseif touch.state == ENDED then
        if self.selected == true and self.action then
            self.action()
        end
        self.selected = false
    end
end
3

@Circuit I changed the above code again to prevent another gem being created until the current gem is finished.

4

Thank you so much, that works perfectly! You have saved me hours of confusion. Actually, you have helped me a lot previous to this post, as I have read many of your comments on the forums. Thanks for all the knowledge and your speedy response.

5

@Dave1707, One other thing.

I’ve noticed that the image doesn’t actually disappear unless I take it down to “size = 0” on the last point of my path. Even then it’s still there, just too small to see.

If I change “t4” of "gemPath to something like:

t4 = {x = WIDTH/1.3, y = HEIGHT/1.5, size = 20}

How can I get the object to go away after completion? I’ve been playing with tween.reset but I’m not sure if this would be correct.

6

@Dave1707 , Never mind, I think I got now…

if strt then
        if gem then. 
        sprite("Planet Cute:Gem Green",strt.x, strt.y, strt.size)
        end
 end

So simple

Thanks again!

7

@Circuit Glad I could help even though you figured it out yourself.