旬度の透明度を無段階にする~.@2023-09-28

算定式方針

線形に透明度を増やしていく

1以上は太字にするので関係ない

0未満を透明にしていく

20%未満は見づらい

2ヶ月以上先のものはこのくらい見えなくてもよさそう

検討

青：旬度-28で20%と旬度0で100%を通る線型函数

$ g(-28)=20\%

$ g(x)=\frac{100\%-20\%}{0-(-28)}(x-(-28))+20\%

緑：旬度-28,20%で青と接する指数函数

$ f(-28)=20\%

$ f'(-28)=g'(-28)=\frac{80\%}{28}

$ f(x)\to0\quad(x\to-\infty)

$ f(x)=20\%\cdot e^{\frac{40\%}{28}(x+28)}

黒：旬度-28,20%と旬度0,100%を通る指数函数

✅赤：旬度-7,80%と旬度0,100%を通る指数関数

https://gyazo.com/e272f8ba20327063f887162523769ef5

赤にしよう

実装

今まではCSSで色分けしていた

透明度は小数点2桁までに丸める

最小値は0.05にする

それ以下は見えない

テスト

このくらいにしよう

https://gyazo.com/08f65639ccacc2eeca08e22e307e5054

$ 80\%=a

$ 70\%=80\%e^{-7b}

$ \iff b=\frac17\ln\frac87

$ f\left(x\right)=80\%\cdot e^{\frac{\ln\left(\frac{8}{7}\right)}{7}x}

まあ悪くない

https://gyazo.com/daa3d3c59c62e7344c7df91b1e5b0d0a

赤と同じ式

うーん、-1あたりが濃すぎるな……

0未満は0と区別できるようにしたい

https://gyazo.com/3bc5ba2d95eedeafb7c0d51fed02ecf6