How to make a flip watch

Since i saw @cfw projects great flip watches i tried to create an own version.

Well - it already looks nice but am not 100% sure about the effect.

What do you think?

The effect for the seconds seems to work okay, although i think as well it shouldn´t be displayed to keep the magic. :wink: And the timing doesn´t seem to match in the preview…

The formulae for the flipping effect at minutes and hours are not yet perfect for me. I did my very best but i am no crack in maths at all.

The task:

A full flip transition consist of 4 single frame pictures, they should be displayed on after another in a range of 0.12 seconds, just before the change of the number. So it´s 0.03 seconds for each.

This works fine for the seconds with the following formulae:

Seconds

Frame-01
$(((#DWE#/1)-(floor(#DWE#/1)))*1)>=0.87&&(((#DWE#/1)-(floor(#DWE#/1)))*1)<=0.90?80:0$

Frame-02
$(((#DWE#/1)-(floor(#DWE#/1)))*1)>=0.90&&(((#DWE#/1)-(floor(#DWE#/1)))*1)<=0.93?80:0$

Frame-03
$(((#DWE#/1)-(floor(#DWE#/1)))*1)>=0.93&&(((#DWE#/1)-(floor(#DWE#/1)))*1)<=0.96?80:0$

Frame-04
$(((#DWE#/1)-(floor(#DWE#/1)))*1)>=0.96&&(((#DWE#/1)-(floor(#DWE#/1)))*1)<=0.99?80:0$

At the minutes i used different formulae but i am not sure if the effect is to short.

Minutes:

Frame 01
$#Dsm#>=59.87&&#Dsm#>=59.90?80:0$
Frame 02
$#Dsm#>=59.90&&#Dsm#>=59.93?80:0$
Frame 03
$#Dsm#>=59.93&&#Dsm#>=59.96?80:0$
Frame 04
$#Dsm#>=59.96&&#Dsm#>=59.99?80:0$

Hours

Frame 01
$#Dm#>=59&&#Dsm#>=59.87&&#Dsm#>=59.90?80:0$
Frame 02
$#Dm#>=59&&#Dsm#>=59.90&&#Dsm#>=59.93?80:0$
Frame 03
$#Dm#>=59&&#Dsm#>=59.93&&#Dsm#>=59.96?80:0$
Frame 04
$#Dm#>=59&&#Dsm#>=59.96&&#Dsm#>=59.99?80:0$

Maybe the formulae could be combined but i don´t know how to use the first one (seconds) as well for hour and minutes…

Suggestions and/or better solutions are highly appreciated.

Greetings, GAUSS

10 Likes

I think at this point the effect is as good as it’s gonna get unless you are willing to add more “number” elements to the watch face. If you were to actually divide the numbers so you have their top half and bottom half, that would make for a far more realistic (yet still not entirely there) effect where you make the display have that sort of motion-blur animation, then immediately switch the top half of the number for the next number on, and then lastly you change the bottom half for the next one. Perhaps even messing around with the size of the text so as the “blur/change” effect is happening, the previous number sort of shrinks (simulating the “card” moving forward and down) as the next number appears.

But yeah again, this is nice, and I think this is as good as it’ll be if you want to keep things as simple as possible (which you probably should since more elements = more lag on the watch apparently :frowning:)

2 Likes

Thanks - and yes - more items will mean more lags …

Dividing the number would be a nice solution but then i would have to create two new fonts for that and i don´t think the effort will be worth it. But it would have an even more realistic look for sure…

This is one case where adding sound could be nice; imagine being able to create that “old airport buzz” when flipping through the dials to get to the desired display state, say at screen wake. :slight_smile:

This was my attempt to make a flip clock.

I’m a firm believer in the KISS Theory. (Keep It Simple Stupid) So I didn’t try to make it super realistic. I figured it’s going to be on a display less than an inch and a half (38mm) and only switch once a minute. It’s not like someone is going to look at it while it’s switching and think to themselves, “that wasn’t real enough looking”. I mean they are only looking to see what time it is after all.

3 Likes

Well, i know the KISS-System but i am to much a perfectionist and, beside this, i love challenges.

I know my solution above isn‘t the best but it does the job.

And there is another point you should consider: your customer could be more happy with a nice looking animation…

1 Like

Personally I disagree that people won’t look at their watch just to see something cool happen, at the end of the day, that’s one of the biggest reasons why actual, physical analog watches still exist and those companies haven’t gone bankrupt :stuck_out_tongue: people like to just stare at something well made, especially cool complications; a nice flip effect is just that in my opinion, a cool complication to look at.
Furthermore, even if you don’t stare at it, you’re bound to see the minutes switch at some point by complete accident, and when that happens that’ll kill that person inside a little bit xD

1 Like

Maybe so, and if any of my watch faces disappoint the end user, I have a triple your money back guarantee. I also make nothing but free watch faces so three times nothing is still nothing. :blush:

4 Likes

The fact that you like to keep things simple doesn’t mean there aren’t people that also like simplicity :stuck_out_tongue: I’m in no way attacking you or your work, just to make that extra clear :stuck_out_tongue: I’m just saying, just as there are people who like simplicity and just like their watch to, say, show the time, others like them as messy and complicated as possible, some possibly even just to look at the thing go xD

1 Like

Absolutely okay. People do have a different taste.

1 Like

Added a nice wheel for the seconds - i think it´matches fine…

2 Likes

It does! From a “cool factor” standpoint it looks great :smiley: Sure maybe not very realistic but at this point who cares :stuck_out_tongue: it’s super neat and well done.

Very curious how this is gonna end up once finished!

Thanks. Why should we always be realistic, lol? That‘s the great advantage of smartwatches - we can expand the limits and go creative new ways…

I love to play with Autocad, Photoshop, animations, light effects…

I am curious as well what this draft will become. It was only made for testing at first.

2 Likes

I decided to make a dual time zone watch face with a rotating globe. But the final layout is not yet done…

7 Likes

Hello everybody. I’m not good at these formulas, but based on the Gauss formula (frame of seconds), I made this code that was simpler, with just one frame, and it worked better on my smartwatch:

$(((#Dsm#/1)-(floor(#Dsm#/1)))*1)>=0.84&&(((#Dsm#/1)-(floor(#Dsm#/1)))*1)<=0.96?80:0$

It would be nice if someone else tests it, to see if it works really well!

I’ve no idea how to use that sorry :thinking:

1 Like

Just go to Add element and select a black shape in front of the digital number of seconds. Put the code in opacity. So the seconds seem to act like a flip.

1 Like

I understand it should be actually one frame making the digit “wink” for a moment.
Just out of curiosity, what should the /1 and *1 change in the expression result? would not be easier to put there #Dsm#%1 instead the whole (((#Dsm#/1)-(floor(#Dsm#/1)))*1) thing?

1 Like

None of these methods work, all they do is make the Numbers flicker, I just tried all the methods described in this Thread, and that last one, #Dsm#%1, just makes the Seconds look grey.
If anyone wants to make a Flip Time Face, then I suggest you all check out this guys’ work here, where he has Inspection on -

8 Likes

Hey @icrltd4 Gizmo. Thanks for sharing that link . I was not following him I am now !!

1 Like