Share your assets

Wanted to make a post about sharing assets you use to make watch faces.
Have awesome hands you want other to use? Add them!
Have tick marks you dig? Add them!
Have workflow hacks? SHARE THEM!

I will start, I made a script to help with the making of ticks in Illustrator. It basically lets you set the radius and number of ticket marks. You select object you want to use as a tick mark and it will make copies around a circle. Feel free to use it and share! illustrator-scripts/[wu]rotate.jsx at master · hilukasz/illustrator-scripts · GitHub



Here are some specific assets that would helpful:

Essentials

  • Hands (Hour/Minutes/Seconds)
  • Tick Marks
  • Center Points
  • Complication backgrounds

Format
To submit assets either have them as vector or if raster they should be for a 640 x 640px @ 72 dpi canvas.

Any community assets that are submitted will get a link back to the designer profile on Facer.

5 Likes

Thank you. Works great

1 Like

Sometimes, the Square Wave is a bit too harsh for some movements, so here is a little formula for an “Almost Square Wave” based on rotation tags.

Example here is:
$abs(sin(rad((#DWFKS#+45)2)))>=0.6?(50(round(sin(rad((#DWFKS#+45)6))))):(50(sin(rad((#DWFKS#+45)*6))/0.6))$

In other words:
$abs(sin(rad((#DWFKS#+OFFSET) * 1/PERIOD)))>=0.6?(AMPLITUDE/2 * (round(sin(rad((#DWFKS#+OFFSET) * 1/PERIOD))))):frowning:AMPLITUDE/2 * (sin(rad((#DWFKS#+OFFSET) * 6))/ 0.6 ))$

/!\ the 0.6 factor manages when we truncate the sinus graph. It only works above 0.5 (included). If below, we need to use cosinus instead.

Enjoy.
P.

5 Likes

Brilliant, thanks for sharing!

Here is a pretty basic formula I figured out in case you want a “watch hand” that is a small non-rotating object (as opposed to the standard of one giant image the size of the whole face that is rotating).

X-position:
(160 + cos((#DWFS# - 90) * ((pi)/180)) * 140)
Y-position:
(160 + sin((#DWFS# - 90) * ((pi)/180)) * 140)

The 140 is what controls the spacing from the center, you’ll have to mess around with it (or maybe the 160 too) based on the size of your image and the padding you want.

The tag used here makes this a second hand that moves discretely every second; add another S at the end to make it a smooth revolution, or use a different tag to change the unit of time.

Here is an example of this formula in action (the small metroid is the second hand):

2 Likes

Ok, I will add my 2 cents:

I was working on a way to create a function (set of functions) that would rotate an image so that it is always perpendicular to the ground.

Here is a beta version of a watch I’m working on, that will use it: Mellin - URWERK UR-T8 - watch face for Apple Watch, Samsung Gear S3, Huawei Watch, and more - Facer

Here is my newest result:

You will need 4 copies of the same image.
Here are scripts for their rotation and transparency:

for 1 and 8 octants
rot

(((((accelerometerRawY())*(accelerometerRawX()))/(((accelerometerRawY())*(accelerometerRawY()))+(0.28125*(accelerometerRawX())*(accelerometerRawX()))))/pi)*180)

trans

$((accelerometerRawY())/(accelerometerRawX()))>1||((accelerometerRawY())/(accelerometerRawX()))<-1&&(accelerometerRawY())>0?100:0$

for 2 and 3
rot

((((pi/2)-(((accelerometerRawY())*(accelerometerRawX()))/(((accelerometerRawX())*(accelerometerRawX()))+(0.28125*(accelerometerRawY())*(accelerometerRawY())))))/pi)*180)

trans

$((accelerometerRawY())/(accelerometerRawX()))>-1&&((accelerometerRawY())/(accelerometerRawX()))<1&&(accelerometerRawX())>0?100:0$

for 4 and 5
rot

(((pi+((accelerometerRawY())*(accelerometerRawX()))/(((accelerometerRawY())*(accelerometerRawY()))+(0.28125*(accelerometerRawX())*(accelerometerRawX())))))/pi)*180)

trans

$((accelerometerRawY())/(accelerometerRawX()))>1||((accelerometerRawY())/(accelerometerRawX()))<-1&&(accelerometerRawY())<0?100:0$

for 6 and 7
rot

((((pi/-2)-(((accelerometerRawY())*(accelerometerRawX()))/(((accelerometerRawX())*(accelerometerRawX()))+(0.28125*(accelerometerRawY())*(accelerometerRawY())))))/pi)*180)

trans

$((accelerometerRawY())/(accelerometerRawX()))>-1&&((accelerometerRawY())/(accelerometerRawX()))<1&&(accelerometerRawX())<0?100:0$

If you want to know, what’s going on in there, check out this: http://www.embedded.com/design/other/4216719/Performing-efficient-arctangent-approximation

3 Likes

topic has been moved to: Resources - FACER Community

please post/repost your resources under these Categories.