Active self-moving shadows under elements

Here’s a small thing that some premium designers used in their watches:
How to create self-moving shadows controlled by watch’s position.

First of all duplicate your element (eg.: a hand or another part).
Then edit the lower one accordingly:

  1. Tint it full black
  2. Set it’s transparency to 30%
  3. Input those into its position fields:
    X:
    (x1+((accelerometerRawX())(-x2)))
    Y:
    (y1+((accelerometerRawY())
    (y2)))

x1 and y1 are the original position coordinates of that element.
x2 and y2 is a multiplier that makes the shadows move more (when you will use “1” it will move by no more than 10 units in every direction)

Explanation:
I assume that we have the sun (or other light sources) more or less above (since watches don’t have an option to test the direction of outside lighting we have to stay at it now) that mean that when the watch is flat, the shadow would be under element - have same coordinates.
So to original coordinates, we add the change of watch’s position based on the ground and make sure that it moves the other way than the sun (that’s why that is a “-” mark in there).

A small and easy thing that can change all your faces.

8 Likes

Hi, I did exactly how you have described but it just put shadows up in the upper left area of the face?

1 Like

Did you edit x1 and y1 so that they would be original coordinates (for center 160)?
If you left them as x#, or placed “0” it would give that kind of effect.

1 Like

Very kind and helpful information. Did think about something similar, but not in this much details. Thank you!

1 Like

Details?
There is one tag and 2 numbers you pun in manually…
It cannot be more simple.

2 Likes

awesome post @Mellin

3 Likes

Hello Mellin, indeed, I sincerely hope beginners will find your codes helpful, and so they won’t be intimidated by codes and tags. If they persevere, they can be good designers. You are right! It can’t be simpler! :slight_smile: cheers! I also hope my sincere apprreciation of your efforts can get across. May God bless you. :slight_smile:

2 Likes

Hey @Mellin,
Cool again as usual… I’ve been thinking about your post but for a different purpose. There was a lot of chatter on the Movado Sapphire in Can someone create a Movado Saphire face?. For sure, it’s a simple face to reproduce but is it really that simple if you think more about it?

I make my own Hour/Mins/Secs hands but if the watch face is busy with a lot of graphics, I dont spend excess time on shadows. I’ll make the basic shadow and leave it at that or just use the Creator’s shadow. But on the Movado Sapphire, you really have to go the full 100% effort on the hands - they are the only element on the face!

At some times the left side of the pointer is lighted and the right side is in shadow.

But later in the day, the shadows flip sides as the shadow stays on the bottom.

I’m also not sure what happens at 6 and at 12, but wouldn’t it cool if the shadows on the hands moved and changed as you tilted the watch with your equations above?

Just thinking out loud.
John

2 Likes

Are you stalking me?
Ha ha ha ha ha ha!
I’m currently working on this face with @jdmeyer1 and I have found a way to do that.

Facer team is checking my solution right now and when they will say it works I will release next tutorial on that aspect.

2 Likes

LOL :smile: ok looking forward to see how it comes out.

John

1 Like

Thank you for the reply.

I am very new to this as this is my first time trying to create a face.

No I did not, but now you have explained it better I will go off and play with it to see what I can learn by myself.

Thank you again

1 Like

I just found this topic, and want to thank you for it. I’ve been wanting to know how to get hands’ shadows to move in a realistic way on my light colored faces.

Hi @Linlay, I use even much easier method for shadows (described here)… :wink:

  1. Copy object
  2. Tint the second one black
  3. Set opacity 50-80%
  4. Add “3” to Y & Y position

Thank you, Tomas. I tried that but could not get the shadow in a place where it looked realistic. I was using Advanced settings. What do you mean by Add ‘3’ ?
I’ll have to experiment some more. Just checked and it appears that I’ve set the shadow layers at x=160 and y=163. Opacity is 30%. Maybe my problem is because the hands are thin and I need only a hint of a shadow instead?

Editing to add that it looks better on a wider hand, so maybe that was the problem.

Hi @Linlay, yes, you could play with X and Y position (162 x 162 or only 161 x 161) and opacity (as you write 30% up to 80% at darker models)… :wink: