Trouble with tweens and resets

Questions
1

I am trying to get my head around tweens, and I am having some difficulties. There is something I am not understanding, possibly about how the reset functions work.

Goal:
Draw a dot on the screen that shrinks in size. Then, by touching a button, make it happen again – by which I mean the dot goes back to its initial size and starts shrinking again.

Code:
(This code is retyped, not copied-and-pasted, so if there are minor typos, I apologize. They are probably not the issue.)

function setup()
    length = 100
    dot = {diam = length}
    parameter.action("Reset", ResetTweens)
end

function draw()
    background(57, 57, 57, 255)
    strokeWidth(10)
    stroke(255)
    fill(0, 0, 0, 0)
    rectMode(CENTER)
    rect(WIDTH/2, HEIGHT/2, length, length)

    pushMatrix()
    DrawDot()
    popMatrix()
end

function DrawDot()
    id = tween(1, dot, {diam = 0.6*length})
    noStroke()
    fill(255,0,0)
    ellipse(WIDTH/2, HEIGHT/2, dot.diam)
end

function ResetTweens()
    tween.reset(id)
end

Two issues with this code.

  1. When the dot gets close to its final size, it stutters a bit, bouncing around slightly in size. I tried explicitly setting the easing to linear, but that didn’t solve the problem.
  2. Pressing the reset parameter button doesn’t do anything. I can see that I go into the Reset function (by adding a print statement to ResetTweens() ), but nothing happens to the red dot.

So, clearly, there are some things I don’t get. I have tried moving the push and pop of the matrix to within the DrawDot() function. I have moved the declaration of the tween around to various places. I have tried calling tween.reset() from within draw() and setup(). I have also tried using tween.resetAll(). But I can’t get the dot to behave the way I want. I feel like I’m basically trying stuff at random, and would love some guidance / explanation.

Thanks!
-B

2

You are re tweening Dot in every draw. this will make it shutter. try setting the tween in the setup function so its only called one time. or set the tween to take the x and y of a tap and move the dot.

3

I didnt write this but it helped me understand it.



-- tween testing

-- Use this function to perform your initial setup
function setup()

    -- since we need to tween objects or tables 
    -- let's create a table that will store our values to tween
    -- this object might be your own sprite class or animation class

    -- this contains our starting values
    tweenObject =  vec3(WIDTH/2,HEIGHT/2,0)--{x = WIDTH/2,
                   --y = HEIGHT/2,
                   --rotation = 0}

    -- here we are actually creating the tween    
    -- the first value is the number of seconds the tween will take
    -- the second parameter is our tween object we just created.
    -- now we pass it a list of "ending values"
    -- we can also pass it our easing type and looping type as well as a 
    -- callback function which I'm not using

    -- the ending values
    
    tween(2,tweenObject, {x = WIDTH/4,
                            y = HEIGHT/4,
                            z = 360},
                       {easing = tween.easing.quintInOut,
                        loop = tween.loop.pingpong})
end

-- This function gets called once every frame
function draw()
    -- This sets a dark background color 
    background(40, 40, 50)

    -- This sets the line thickness
    strokeWidth(5)

    pushMatrix()

    -- here we are using our tween Object to control
    -- the translation and rotation
    -- during each call to draw our tween values are slowly updated from
    -- start values to end values 
    -- tween means "the in-between values"  
   translate(tweenObject.x,tweenObject.y)
    rotate(tweenObject.z)


    sprite("Platformer Art:Block Special")

    popMatrix()    
end
4

Thanks, Briarfox.
Declaring the tween in setup() instead of draw() does solve the stuttering problem, as you suggested. So that’s good. Thank you.
However, the reset still doesn’t do anything. I saw the post that you’ve copied here, and it was helpful to me as well… just not helpful enough. I still don’t feel that I understand what’s going on, particularly with regard to resets. I tried reading through the animation example, but there are a lot of moving parts there. The task I’m trying to do now was an attempt to simplify things, but I’m still not having any luck getting it to work the way I want.

5

I didnt know there was a reset, I pretty much have two sets of coords. The set i’m at and the set I pass to the tween. I’ll play around with tween.reset. However, in your example I do not see you calling the function ResetTweens() anywhere?

6

. @bunderscore I modified your code a little. Reset doesn’t work if the tween is finished with what it’s doing. I increased your tween time from 1 second to 10 seconds to give you time to press reset before it’s done. Once it’s done, you have to redefine it to start it over again. I added the setup1() function to do that and added a parameter restart to restart the tween. Also, with the way the code is now, restart and reset won’t work if restart is pressed before reset because restart creates a new id.

EDIT: I added tween.reset(id) to the Restart() function so restart can be pressed at any time.


function setup()
    length = 100
    dot = {diam = length}
    parameter.action("Reset", ResetTweens)
    parameter.action("Restart",Restart)
    setup1()
end

function setup1()
    id = tween(10, dot, {diam = 0.6*length})
end

function draw()
    background(57, 57, 57, 255)
    strokeWidth(10)
    stroke(255)
    fill(0, 0, 0, 0)
    rectMode(CENTER)
    rect(WIDTH/2, HEIGHT/2, length, length)

    pushMatrix()
    DrawDot()
    popMatrix()
end

function DrawDot()
    noStroke()
    fill(255,0,0)
    ellipse(WIDTH/2, HEIGHT/2, dot.diam)
end

function ResetTweens()
    tween.reset(id)
end

function Restart()
    tween.reset(id)
    setup1()
end
7

@dave1707 you have your tween id in setup1() setup() has no access to id. you are passing nil to your reset buttons. move the id = tween(…) to the setup() function

8

.@Briarfox setup() calls setup1() when the program starts, creating the tween id. If you want to verify the id, put a print(id) after the tween statement in setup1() and before tween.reset(id) in ResetTweens() and Restart(). Anytime the Restart button is pressed, the current tween is stopped with it’s id, and a new tween id is created anytime setup1() is called.

9

@briarfox – My call to ResetTweens() is in the parameter button. Calling that function is what the button does.

@dave – Thank you. Now I see what the missing piece was that I wasn’t getting. Reset and Restart are not the same thing. My Reset was doing exactly what it was supposed to be doing all along… it just wasn’t what I wanted it to do. Now I think I can make some progress here. Thanks!

Cheers -B

10

Yup I’m just crazy, sorry about that :wink:

11

Thank you for this set of posts. I don’t think I would have figured out anything about tween without it.