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

Supporting round and square watches in one watch face

Shortly after I’ve released my Homer watch face for round smart watches, a user suggested that I should support square watches as well. So I did.

It doesn’t matter, if you usually design your watch faces on a square watch or on a round one. You can support both watches in one and the same watch face file.

Assets for round and square

To do this, produce assets for both shapes. In case of my Homer watch, I’ve created an additional rectangular frame (and a few other assets).

Import all assets for the round and square watch face version into the same project.

Apply the following value to the opacity of the assets for the square watch face mode:

{around} and 0 or 100

And for the round watch face mode, just apply the opposite opacity value: 

{around} and 100 or 0

Adjustments for both shapes

To edit and fine tune the different watch face modes, just switch the watch model in the WatchMaker settings to a round or square model. Tap on the hamburger menu, then on “Settings”, then “Watch” and finally on “Select Watch” to choose the other watch form factor. Don’t worry, you can always switch back to your own watch model without negative effects to your creations.

That’s it. Now your watch face support both form factors in one and the same project.

Final notes

If the differences between the square and round model are too big, you might better use two separate watch face files.

You can also support special adjustments for flat tired round watch displays by checking the variable

{atyre}