[TOMAJA Mini Tutorial] Gyro 3D Interactive Wrist Movement Effects & Animations

Resources Expressions
1

Hello to everybody,

welcome to my new tutorial, where I show you how easy and simple a super cool wrist movements interactive (2D and 3D) effect could be. We will speak about the accelerometer (gyro) functions. Actually, it is so easy that one picture explains everything :wink:

gyro.jpg2626×2569 656 KB

As you see one number is everything we need to deal with. In the picture above (most natural movements of a wrist between the angle 0 and 90 degree) this value is increasing smoothly from 0 to 10.

Here is the “tag” for this Y-Axis movements.

(accelerometerRawY())

The value change depending on the watch position between -10 and +10. Zero is the horizontal position.

The same works in the X-Axis (Right and Left Rotation) in the same way.

(accelerometerRawX())

ANIMATION EXAMPLE

GIF EFFECT - FRAME PER FRAME

Here a simple example for my paid watch face with animation depending on wrist movement.

If you would like to have an animation with 10 frames depending on Y-Axis movements, your coding per frames could looks like this (please feel free to copy & pate those expressions into the Transparency fields):

$(accelerometerRawY())>=8?100:0$
$(accelerometerRawY())>=7&&(accelerometerRawY())<8?100:0$
$(accelerometerRawY())>=6&&(accelerometerRawY())<7?100:0$
$(accelerometerRawY())>=5&&(accelerometerRawY())<6?100:0$
$(accelerometerRawY())>=4&&(accelerometerRawY())<5?100:0$
$(accelerometerRawY())>=3&&(accelerometerRawY())<4?100:0$
$(accelerometerRawY())>=2&&(accelerometerRawY())<3?100:0$
$(accelerometerRawY())>=1&&(accelerometerRawY())<2?100:0$
$(accelerometerRawY())>0&&(accelerometerRawY())<1?100:0$
$(accelerometerRawY())<=0?100:0$

There is also a Mini Tutorial for the flame too.

ANIMATION EXAMPLE

SMOOTH MOVING (ROTATION; TRANSPARENCY, etc.)

Here is another simple example (using only X-Axis Position) with a nice effect and my free watch face:

(160+((accelerometerRawX())*8))

In the open Inspector Mode the interactive dynamic element calls “GREEN WATER” :wink:

SECRET FORMULA

There is (I think still) one important thing for having good results at all different watch faces supporting this function. It’s called the @Mellin s Constant and you will need to put it into your watch face creation as a separated (invisible) element. This small (important) trick start the accelerometer working.

Secret Mellin’s Constant Coding:

(accelerometerX()) x (accelerometerY())

Bild1dsdsds.jpg2796×987 567 KB

MASTER LEVEL

In the case this tutorial was too easy for you, here is the MASTER LEVEL TUTORIAL for gravity rotation from @Mellin and another one with an example and open Inspector Mode from TOMAJA Design :heart:.

5 Likes
2

great job

3

@Tomas Is there any way to control the movement of an element? for example, if I wanted the “A” element to only move in “Y” from 160 to 200 when I move the wrist in the 0 to 8 range of the accelerometer. How should the code be? It is important that only move from 0 to 8 and not in -1 to -10 …

4

Hi @GRR! Sure you could easily move any objects in the direction you like. I your case for

Y Position it would be

(160+((accelerometerRawY())*5))

for the range 0 to 8. For me, the 0 to 8 (first picture in this thread) is the most natural movement of the wrist. However you could move your wrist to another direction too as well up to 10.

5

Secret Mellin’s Constant Coding:

(accelerometerX()) x (accelerometerY())

Is it still necessary to add this? It works for me without it, but is it supposed to optimize something ?

1 Like
6

I find the Accelerometers work fine without the Mellin Magic. However not all watches work the same with these sensors. For the sake of an extra line just put it in.
Obviously it is hidden and does not really do anything.

2 Likes