2018-02-22

線形補間とノーマライズのメソッド -『JavaScript』

インタラクティブなコンテンツを実装するときに利用したい、線形補間とノーマライズのメソッドの紹介です。processing でよく使う関数なのですが、Javascript でいつも自前で実装しています。

線形補間

0から1のまでの値を、任意の範囲に相当する値に変換する。


const lerp = (x, y, p) => {
    return x + (y - x) * p;
}

console.log( lerp(100, 200, Math.random()) )

任意の範囲のある値を、0から1の範囲の値に変換する。


const norm = (x, y, p) => {
    return (p - x) / (y - x);
}

console.log( norm(1000, 1800, 1005) )

おわります。

flex
flexコンテナの孫要素の高さを親要素いっぱいにしたいときのtips -『CSS3』

2016-10-27
font
コピペできるフォントスタイルシート。2017年に向けたCSSで出来る最強のフォント指定をひととおりまとめ -『CSS』

2016-12-10
animation
かわいく、かっこよく。素敵なアニメーションを実装するためのライブラリのまとめ -『animation』

2017-01-26
javaScript
数秒後に処理を遅らせて実行するsetTimeout()とjQueryのqueue()の扱い方 -『javascript』

2016-12-15
plug-in
自分の好みのスクロールバーに。「perfect-scrollbar」でかんたんにスクロールバーをカスタマイズする -『javascript』

2016-12-10
ejs
コーディング環境を効率化できるテンプレートエンジン「EJS」の基本的な使い方 -『front-end』

2016-11-10