seconds

Moving around – the easy way

In my recent articles Back to Trigonometry and Move objects in a circle smoothly, I described a formula to move objects around a circle.

Since WatchMaker also offers rotation values in degrees for time, we can simplify those formulas and make them more efficient to calculate.

In the original formulas I’ve used {ds}, which represented the seconds in time, as the input value. It’s much easier to use the rotation value {drs} as input. The only thing to do is to convert the degree values to radian values which can be done by the formula drs * \frac{\pi}{180}. Lua script offers this conversion function math.rad() out of the box. The formula looks like this.

x = \sin(radian(drs))
y = -\cos(radian(drs))

If you compare this with the other formula, you immediately see the difference:

x = \cos((ds * \frac{1}{60} * 2 \pi) - \frac{\pi}{2}) = \sin(radian(drs))
y = \sin((ds * \frac{1}{60} * 2 \pi) - \frac{\pi}{2}) = -\cos(radian(drs))

So in Lua script it looks like this:

x = math.sin(math.rad({drs}))

y = -math.cos(math.rad({drs}))

To define the size of the circle, you just have to multiply the desired size:

x = math.sin(math.rad({drs})) * 25

y = -math.cos(math.rad({drs})) * 25

You can use any rotation value with this formula just by replacing the tag, which is another big advantage compared to my prior formulas, because WatchMaker offers many rotation values.

Therefore you can replace the little complex formula in Move objects in a circle smoothly just by the rotation value {drss} for smooth seconds resulting in the following Lua script code:

x = math.sin(math.rad({drss})) * 200

y = -math.cos(math.rad({drss})) * 200

Update: In the original article Back to trigonometry I’ve described the eye movements of the Homer watch. Of course you do this with the new formula too. It would look like this:

x="-48 + math.sin(math.rad({drs})) * 25"

y="-42 - math.cos(math.rad({drs})) * 25"

Thanks to Brian Scott Oplinger for giving me the hint to add this aspect. 😉

Update: Here you can play around with the formula:

Move objects in a circle smoothly

Some days ago, I posted an article called “Back to trigonometry” about moving objects in a circle by seconds, minutes or hours with a trigonometric formula.

Today I write about the making of my new watch face Burner.

Before writing about trigonometry again, I describe the production of the asset for moving in a circle.

Asset production of an animated gif video

I had the idea to move a flickering flame around a circle.

The first step, was to record a short gif video of the flame, which came out of my lighter. To do this, I simply used a GIF camera app. In my case, I’ve used Fixie GIF Camera.

Flame video

GIF video capture

In default mode, this app records 10 frames, which was exactly what I needed. I imported it into Photoshop to crop it and center the single frames to the same position.

Unfortunately WatchMaker doesn’t support the transparent mode of animated gifs, so I had to choose a solid background color. Black was fine for my idea.

Moving the flame by seconds smoothly

I wanted to move the flame by seconds smoothly. As mentioned above, I used the same formula I’ve already described.

x = \cos((ds * \frac{1}{60} * 2 \pi) - \frac{\pi}{2})
y = \sin((ds * \frac{1}{60} * 2 \pi) - \frac{\pi}{2})

The problem by using the seconds as the input value is, that the flame moves step wise by seconds and not smoothly.

Update: Please use the formula in my new article Moving around – the easy way, because it’s better.

To move it smoothly, I’ve just added the thousands fraction of the millisecond of the current second. That’s all and looks like this:

x = \cos(((ds+\frac{dssz}{1000}) * \frac{1}{60} * 2 \pi) - \frac{\pi}{2})
y = \sin(((ds+\frac{dssz}{1000}) * \frac{1}{60} * 2 \pi) - \frac{\pi}{2})

In lua script it looks like this (here multiplied with 200 for a larger circle):

x="math.cos((({ds}+({dssz}/1000))*0.016666*math.pi*2)- math.pi/2) * 200"

y="math.sin((({ds}+({dssz}/1000))*0.016666*math.pi*2)- math.pi/2) * 200"

You can see the result in my watch face Burner.

Animation

Animation

Bouncing seconds

When I thought I was finished with the Homer watch face, I stumbled upon a video of the real Homer clock and saw a bouncing seconds hand.

So I stopped my intention to load the watch face up and made the hand bounce like as follows:

I set the rotation value of the seconds hand to this formula:

{drs}+outElastic({dss}, 0, 6, 500)

The value “drs” is the rotation value of the current second and would be enough, if you just want to move the hand by seconds without any bouncing effect.

The “outElastic” function is a tweening function, which gets the following arguments:

  1. “{dss}” the milliseconds of the current time as the input value of the effect.
  2. “0” for the beginning value of the effect.
  3. “6” for the changing value of the effect.
    So the difference between the beginning and changing value affects the intensity of the movements.
  4. “500” for the running time at the end of the tweening. Here you can control the duration of the movements.