[Need HELP] Sine-Transparency clipping

Watchface Design Expression Help
1

Hey - calling Math Wizards… Help!

I am developing a watch design that has a back plate (let’s say it is black) then once every so often the transparency drops so you can see through the face to what’s underneath. Then the back fades in to solid again. I got the standard fade-out/in cosine function and my cycle period is 12 seconds (5 passes per minute). And the amplitude runs from 0% to 100% with a positive offset so cos() doesn’t go negative.

But what I’m really looking for is:

  • Stay solid for a longer and see-thru for less time in the cycle.
  • Fade out and in more quickly. In other words get through the fading faster but still look like a fade.

Is it possible to offset with uneven symmetry:

Then, will transparency actually clip at 100 and 0 on its own? Just looking for longer solid time and shorter 0% time.
0% trans - 3 seconds
fade out - 2 seconds
fade in - 2 seconds
100% solid - 5 seconds

How does that sound?

2

I am no so good with math, but whats about doubling the layer and make a sinewave for both transparency maps with different amplltudes that match at two points (double amplitude values)…?

Greetings.

3

@Mellin, @Tomas - didn’t know if you guys wanted to chime in on this fade. This seems to do what I wanted even though it’s symmetrical between 100% and 0%.

((cos(#DWFSS#/11.5)*100)+100)

4

I think it would involve using the floor or absolute function.

5

you could also do a condition of when is greater that zero. something like:
$sin >= zero ? sin: 0$

6

to do a more squareish wave:

1 Like
7

actually maybe something like:

$sin >= zero ? ceiling(sin, x,): 0$

8

@eradicator09, thanks!
It seems transparency automatically clips at 100 on the top end and 0 at the bottom so I’m using that to my advantage.

-John

9

Hi John @jmorga106,
Hello Mark @eradicator09,
Hi @GAUSS,

I’m sorry to be late.

Actually I was here at this thread before, but I could not (under time pressure) clearly interpreted what was the problem.

So actually it’s good for everybody that you already solved it.

:wink:

10

Hi!

Letting the transparency go out of bounds is probably the easiest way to do this since transparency clips nicely (it can never go higher than 100 or lower than 0). However, if you apply it to something else (like rotation) it won’t work as well. If the rotation has a lowest value of -90 and a highest value of 90 it will oscillate half a lap between the nine position and the three position. If you instead have 0 as lowest and 720 as the highest it will travel two laps from 12 to 12 in one direction, then two laps back again.

In order to make this work in a more general way we could use the clamp() function to limit the values. clamp() lets you define an input value, a lowest value and a highest value. If the input value is lower than the defined lowest, it will be stick to that defined lowest. The same in the other direction for the defined highest.

Basically, it would behave exactly like your second graph. Let’s look at an example.

(cos(#DWFSS#/11.5)*180)

This outputs a value from -180 to 180 to -180 again. It moves slower near the extremes, but never really stops. But maybe we want it to go from 0 to 120 instead, spending half its time at 0 and a smaller amount of time at 120. We could then do this:

(clamp((cos(#DWFSS#/11.5)*180),0,120))

Right now it spends half its time at 0 since 0 is halway between -180 and 180. In order to make it spend half its time at 120 we need to put the halfway point at 120. We can do this by adding 120 to the sine:

((cos(#DWFSS#/11.5)*180)+120)

And with the clamp:

(clamp(((cos(#DWFSS#/11.5)*180)+120),0,120))

In a general way, this is how the formula works:

(clamp(((cos(RATE)*HEIGHT)+POSITION),MIN,MAX))

To make it work like in the second graph, we use 0 and 100 as our MIN and MAX. The sine seems to be about four times larger than the distance between 0 and 100 so for HEIGHT we’ll use 200 since it will make it go between -200 and 200. The midpoint of the sine seems to be at about 125 so that’s our POSITION. Finally, for our rate I’ll just use the same provided in the third post. This gives us the following:

(clamp(((cos(#DWFSS#/11.5)*200)+125),0,100))

The final times I get by trying this out aren’t the ones specified in the post, but the concept works out well. By tweaking the values you can get it exactly to where you want it. This works well for any value you want to change, not just transparency, so you can have something move in sync with the transparency if you want.

Hope this helps.

1 Like
11

Sounds like a nice and useful extension for me. Good explanation.

12

and to complete the notes here… don’t forget the human component on transparency. The naked eye doesn’t discern different blacks well so if you are running a sinusoidal fade on a black layer 100% 90% 80% in transparency value is still all black. As @szandor mentions, by default sine/cos is centered on 180/-180 so if you have a 12 second wave with 6 seconds running to clear and 6 seconds running to full black, the truth is it seems like 3 or 4 seconds running thru clear and the rest of the time is opaque.

Same idea for JPG optimization. Sure your computer generates 16 million colors but you can’t tell the difference between half of them. It’s the gradient change between colors next to each other that produces that HD quality. But if you put color samples of #000000, #001000, #020010 and about 1,000 other blacks next to each other you couldn’t tell the difference. Optimizers process some of these colors removing them to make JPG files smaller while retaining some kind of quality level to the naked eye. Some thing at the high end with white.

I suppose you can build your fade see what it looks like before committing to moving the sine midpoint. If you’re working in the middle of the color range where you can discern between lots of colors then maybe you have to commit to an offset if you want to favor one background over a foreground in the fade.

-John

13

That´s a very nice formula for fading in and out, but what if i want the item fade in and out only one time (without repeating on the screen)?

14

I assume you want to do this every time the watch goes active, is that right?

Could you use #DWE#? I’ve never used it but the description in the documentation seems to be relevant.

Something like:

($#DWE#<XX?(clamp(((cos(#DWE#/YY)*180)+120),0,120)):0$)

where XX and YY are adjusted to taste.

Would that work?

15

Yes. I want to display a logo for a short time with a smooth fade in and fade out after wake up the watch face (or when it goes active) The range of visibility should be inside the wake up time range (approx. 3 seconds)…

16

Maybe

($#DWE#<=3?sin(#DWE# * 1.047)*100:0)

If I have that right, that would start at 0, ramp up with a sin curve to full transparency in 1.5 seconds and ramp down again to zero by 3 seconds.

If you wanted it to ramp up more quickly and stay at full brightness for longer, you would change the “100” in the expression to a larger number and, as is mentioned in the thread above, rely on the transparency clipping at 100.

17

I will try!

18

Hmmm … doesn´t work. Did you misspelled the formula?

Shouldn´t it be like that? $#DWE#<=3?(sin(#DWE# * 1.047)*100):0$

19

Sorry, yes, I missed off the closing “$” symbol.

20

Never mind. Don´t ask me how often i mistyped formulaes. :slight_smile: It works great, but the fade in is a little bit to fast. What value should i change to make it a little bit longer?