It is currently June 23rd, 2024, 4:10 am

Animated HTC Clock

Clocks and timer skins
User avatar
AlC
Posts: 329
Joined: June 9th, 2011, 6:46 pm

Animated HTC Clock

Post by AlC »

Hey Guys,

In the last few months there were 3 Suggestions that came again and again up: Ellipse, Flip Clock, Music Spectrum Vizualisor
So KreAch3R did the Ellipse meter and here is today the Flip Clock ;-)

An animated clock based on the HTC clock style. I done the animations with TransformationMatrix.

Thanks: Jsmorley and kaelri for helping me with my little Update problem. Alex2539 for his tutorial. And Merlin for his improvement tips.

Credit: I'm not good at creating good images, so the backgroundimage is from (edited by me a little bit) -> http://livven.deviantart.com/art/HTC-Sense-Clock-PSD-2-0-217500637?q=boost%3Apopular%20in%3Aresources%2Fapplications%2Fpsd%20htc%20clock&qo=2

Changes in v2:
- more realistic
- more smoother
- now you can edit the flipspeed/smooth (more informations in the ini, under Variables)
- disabled every measure, if they not used

At the moment I'm working on adding a good looking shadow...

So enjoy it, have fun, report bugs and feedback :)
Last edited by AlC on September 25th, 2011, 7:47 pm, edited 2 times in total.
Rainmeter - You are only limited by your imagination and creativity.
User avatar
jsmorley
Developer
Posts: 22640
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Animated HTC Clock

Post by jsmorley »

Very cool!
User avatar
donutmtoazt
Posts: 50
Joined: July 10th, 2011, 9:15 am
Location: Fresno, CA

Re: Animated HTC Clock

Post by donutmtoazt »

Darn! Beat me to it... Oh well, I ended up not working on this project when school started, so I'm glad someone else actually created it.
This is my keyboard. There are many like it, but this one is mine.
User avatar
MerlinTheRed
Rainmeter Sage
Posts: 889
Joined: September 6th, 2011, 6:34 am

Re: Animated HTC Clock

Post by MerlinTheRed »

This looks pretty cool. I like the look of these kinds of clocks.
There are a small number of suggestions I have, regarding the animation:
right now, you are creating the "flip" effect by a linear scaling in y direction. This looks a little unnatural, because what you are trying to simulate is really something that is "rotated" around the middle axis of the numbers. If you take a small sheet of paper and rotate it in front of your eyes like the clock numbers do, you will notice that at the beginning and the end of the rotation the movement of the ....... Okay, this is too complicated to explain. I'll just show you the maths I imagine will work.

Basically, you have to take a sine or cosine function to simulate the rotation. This will make the scaling be slower at the beginning and end and faster in the middle. I will assume your scaling of the y direction starts at factor 1 and ends at factor -1. In that case applying a cosine function will work:

scale=cos(counter/max_counter*PI)
counter is a counter that increments as the animation progresses.
max_counter is the value the counter will have when the animation is complete
scale is the value you put into the transformation matrix.

Now if you can somehow apply these functions to your skin, you will have clock pages (or whatever you call them) that look like they are rotating. As a next step, you could add some physics ;)
In clocks like these you see on train stations or airports, the "pages" are flipped by letting them fall down rather than using a motor to rotate them. Things that are falling down must do this according to gravity. This means, they start off slow and get faster the longer they are falling. For us this means that we have to apply a square somewhere:

scale=cos((counter/max_counter)*(counter/max_counter)*PI)

If the animation that results of this is too fast, just make it slower by adding more counter steps.

And a third suggestion: as the "page" flips down, its angle to a potential light source would get flatter, resulting in a darker surface. I don't really know how to do this, but you could use a ColorMatrix to make the page a little darker as it flips. Of course only up to the middle of the animation. When the other side gets visible, it has to be bright again.

Now all I have written here is pure theoretical speculation. I don't know how exactly to do this in Rainmeter nor do I know if it will actually look better. It was just my feeling that the animation could be improved by this.

If you want to do some of this and need help, write me a PM. I have the suspiction you are a native German speaker and it would be much easier to explain and understand if we talked about this in German.

EDIT: I have thrown together code that displays a "flag" rotating about a line. You can have two different sides of the flag. When you use real images instead of SolidColor, you would have to put the [Light] values into a ColorMatrix. Perhaps you can make something of it.

Code: Select all

[Rainmeter]
Update=1
Author=MerlinTheRed
AppVersion=2001000
MiddleMouseUpAction=!Refresh #CURRENTCONFIG#
DynamicWindowSize=1

[Variables]
;increase to make the animation slower
maxCount=101

;this is just to shift the flag to the origin for transformation
middle=50

;Level of ambient light (0-255)
AmbientLight=128

;inclination of light source (positive values make light shine from above, negative from below)
LightAngle=PI/8

[Cos]
Measure=Calc
Formula=COS(Counter/#maxCount#*PI)

[mCos]
Measure=Calc
Formula=-COS(Counter/#maxCount#*PI)

[Trans1]
Measure=Calc
Formula=(COS(Counter/#maxCount#*PI)>0) ? -COS(Counter/#maxCount#*PI)*(#middle#-1)+#middle#-1 : 0

[Trans2]
Measure=Calc
Formula=(COS(Counter/#maxCount#*PI)<0) ? COS(Counter/#maxCount#*PI)*(#middle#)+#middle# : 0

[Light1]
Measure=Calc
Formula=#AmbientLight#+(COS(Counter/#maxCount#*PI+#LightAngle#)>0 ? ABS(COS(Counter/#maxCount#*PI+#LightAngle#))*(255-#AmbientLight#) : 0)

[Light2]
Measure=Calc
Formula=#AmbientLight#+(COS(Counter/#maxCount#*PI+#LightAngle#-PI)>0 ? ABS(COS(Counter/#maxCount#*PI+#LightAngle#-PI))*(255-#AmbientLight#) : 0)

[MeterBackgound]
Meter=Image
X=0
Y=0
W=100
H=100
SolidColor=00000000

[MeterImage1]
Meter=Image
SolidColor=[Light1], [Light1], [Light1], 255
X=25
Y=0
W=50
H=50
TransformationMatrix=1;0;0;[Cos];0;[Trans1]
DynamicVariables=1

[MeterImage2]
Meter=Image
SolidColor=[Light2], [Light2], [Light2], 255
X=25
Y=(#middle#+1)
W=50
H=50
TransformationMatrix=1;0;0;[mCos];0;[Trans2]
DynamicVariables=1

[Line]
Meter=Image
SolidColor=200, 200, 200
X=0
Y=#middle#
W=100
H=1
Have more fun creating skins with Sublime Text 2 and the Rainmeter Package!
User avatar
AlC
Posts: 329
Joined: June 9th, 2011, 6:46 pm

Re: Animated HTC Clock

Post by AlC »

Updated first post to v2.
Rainmeter - You are only limited by your imagination and creativity.