Rotate forms for round watch faces

Especially in the beginning of designing round watch faces, I had to get used to place forms to the right place in a circle. This is needed for markers, numbers and some decoration elements. Photoshop doesn’t offer circular guide lines or other help functions for these kind of layouts.

In fact, it’s easy to get the right degree values for spreading assets in a circle. You just have to divide 360 by the number of elements, you like to place in a circle.

Examples:

Hours \frac{360^\circ}{12} = 30^\circ
Minutes \frac{360^\circ}{60} = 6^\circ
Weekdays \frac{360^\circ}{7} = 51.4286^\circ
Days in Month \frac{360^\circ}{31} = 11.6129^\circ

The elements to rotate and place are usually similar or same to each other. So the workflow is usually to create an asset, to place it, to copy it and to rotate and place it.

If you do this one by one manually, it not only feels stupid to repeat one and the same action again and again, it’s also very easy to make small mistakes, if you loose concentration.

In these cases, it’s always good to use Photoshop’s action feature.

My workflow for creating hours markers looks like that:

  1. I create one marker and place it.
  2. I copy this marker to the opposite side and rotate it by 180°.
  3. I select both markers.
  4. I press 5 times on the play button of the hour rotation action.

Step 2 is necessary, because the function rotates in the center of a selection.

If you do this with uneven number of elements, like weekdays, you can do it the same way. But in this case you have to press double times on the play button. In a firths step you have to delete every second element to clean up duplicates. This sounds a bit confusing, but it’s easy to do in practice.

Here’s the download of the actions.
The file will be updated from time to time with more helping actions. You are welcome to collaborate updating this file on GitHub: https://github.com/IOIO72/watchface-photoshop

Icon

Watch face Photoshop Actions 1.37 KB 34 downloads

This file includes helping actions for designing round watch faces with Adobe Photoshop. You...

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

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}

Back to trigonometry

Since I’m scripting watch faces for smart watches, I was confronted with mathematical issues from my school days nearly 30 years ago.

The basics

The circle is the main geometric form to support using watch faces. And so I was confronted with π, sine, angles and some other things from the trigonometry.

Circle-trig6.svg

By This is a vector graphic version of Image:Circle-trig6.png by user:Tttrung which was licensed under the GFDL. Based on en:Image:Circle-trig6.png, which was donated to Wikipedia under GFDL by Steven G. Johnson. – This is a vector graphic version of Image:Circle-trig6.png by user:Tttrung which was licensed under the GFDL. ; Based on en:Image:Circle-trig6.png, which was donated to Wikipedia under GFDL by Steven G. Johnson., CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=770792

One main use for my watch faces so far, was, to move objects around a circle to a corresponding time value like I did with the eye movements of Homer in my Homer watch face or with the hours and minutes bobbles in TriGoIO.

I needed a function to place an object with the x and y coordinates in position of a circle to a given value of time. To do this, I needed sine, cosine and π.

Sine curve drawing animation.gif

By Lucas V. BarbosaOwn work, Public Domain, https://commons.wikimedia.org/w/index.php?curid=21360683

The seconds

To move Homer’s eyes by seconds, we use the WatchMaker variable {ds}, which represents the seconds in a minute from 0 to 60.

Because we want to calculate the x and y coordinates to place the object depending of the seconds, we need to use the sine and cosine functions.

As the illustration above shows, a full circle is 2 \pi.

To move an object around a circle we need values from 0 to 2 \pi, so we need to convert the 0 to 60 seconds to a value from 0 to 1 and multiply this with 2 \pi. So 60 seconds would be represented by 1 after the conversion which would result in 2 \pi when multiplied with 2 \pi, which is the full circle position.

To convert the seconds, we simple have to multiply them by \frac{1}{60}. The formula, where “ds” stands for the seconds, is: ds * \frac{1}{60} * 2 \pi.

To get the horizontal position in the clockwise movement we use the cosine function and we use the sine function for the vertical position.

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

Because the clock begins counting at the top of the watch face, we need to subtract \frac{\pi}{2} inside the cosine and sine functions.

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

That’s it.

Of course you can control the size of the circle by simply multiplying a desired value to it.
And if you wish to change the position of the circle, just add or subtract a value.
And if you would like to use hours, just use the {dh} variable and divide by 12 instead of 60.

Homer’s eyes

For Homer’s eyes in the Homer watch face, which have a specific size and position, I’ve used this formula:

Homer’s left eye:
x = -48 + \cos((ds * \frac{1}{60} * 2 \pi) - \frac{\pi}{2}) * 25
y = -42 + \sin((ds * \frac{1}{60} * 2 \pi) - \frac{\pi}{2}) * 25

Homer’s right eye:
x = 48 + \cos((ds * \frac{1}{60} * 2 \pi) - \frac{\pi}{2}) * 25
y = -42 + \sin((ds * \frac{1}{60} * 2 \pi) - \frac{\pi}{2}) * 25

The same in Lua script for WatchMaker as follows.

Tap on the object and set the values for “Position X” and “Position Y” to:

x="-48 + math.cos(({ds}*0.016666*math.pi*2)- math.pi/2) * 25"
y="-42 + math.sin(({ds}*0.016666*math.pi*2)- math.pi/2) * 25"

And for the other eye:

x="48 + math.cos(({ds}*0.016666*math.pi*2)- math.pi/2) * 25"
y="-42 + math.sin(({ds}*0.016666*math.pi*2)- math.pi/2) * 25"

Updates

Additional formula: Move objects in a circle smoothly
Alternative formula: Moving around – the easy way

Color changing

Shortly after releasing my Homer watch face, one user suggested a feature to change the colors of the watch face background.

I liked the idea, so I implemented a color change function, which I describe now.

Asset production

The first thing to do, is to remove the colors of the graphic assets, which should be affected by the color change function. The graphic assets should be as white as possible and only contain grey scale colors to represent structure or shadows. Of course you can use any graphics program. I use Photoshop like so:

Please note, that this procedure isn’t the same as just removing color out of a colored image by pulling down the saturation. With the black & white adjustment function, you can control how the color is translated to black, white or a grey color. You can get more information about this in Adobe’s tutorial: Convert a color image to black and white.

Scripting the color change

Now, back to WatchMaker: replace the original background image with the new whitened asset.

Preparing the script

In the main script we need to set up an array variable which contains the color codes:

var_color = {'21d5ff', '2160ff', 'c821ff','f2ff21','ffbe21','21ff7f','37ca52','ff2121','b04040','000000','fefefe','999999'}

To select one of these colors, we need an index variable, which contains the index of the first color code as default:

var_index = 1

Now you can set the tint color of the whitened background image to:

var_color[var_index]

This means: Display the color (var_color) of the current index number (var_index).

The white background should be displayed in cyan, because this is the first color of the colors array.

Implementing the change function

Now we need a function to change the color.

In the script part we include a very simple color change function, which simply increments the index value (var_index):

function click_col_change()
var_index = var_index + 1
end

Each time, the function is called, it increments the value of the index by one. It’s easy to imagine, that we don’t have infinite colors in our colors array. So we need to reset the index value to the first index number, if the number of available colors are exceeded.

To get the number of colors, we simply have to count the number of array entries with the length function “#”. To save calculation resources, we store the result of the count in a separate variable.

var_num_cols = #var_color

Now we can check, if the number of available colors are reached and reset the index variable inside the color change function:

function click_col_change()
if (var_index >= var_num_cols) then var_index = 0 end
var_index = var_index + 1
end

I thought, the easiest way for the user is to change the color by simply tapping in the middle of the watch face.

The only thing to do is to tap on the background image and apply a tap action for scripts which consists of the function call:

click_col_change()

Now, we are done with the background color change function.

Adding more color changes

We can use the tint function for any other graphic asset or any other colored elements by simply applying 

var_color[var_index]
instead of a single color code.

If you want to use corresponding foreground colors, you only need another array of colors with the same amount of colors as the first array of colors. I used that for the hours and minutes hand.

Here’s the complete script:

var_color = {'21d5ff', '2160ff', 'c821ff','f2ff21','ffbe21','21ff7f','37ca52','ff2121','b04040','000000','fefefe','999999'}
var_color2 = {'da1a01', 'da1a01','da1a01', 'da1a01','da1a01','da1a01','da1a01','011ada','6069c0','da1a01','da1a01','da1a01'}
var_num_cols = #var_color
var_index = 1

function click_col_change()
if (var_index >= var_num_cols) then var_index = 0 end
var_index = var_index + 1
end

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.