(部分的)リバースエンジニアリングのNemoorphismio

最近、私は使用しているneumorphism.io 私のプロジェクトのための-私は本当に柔らかいとsquishyボタンを持っている.
しかし、私が第二の時間の間サイトに私の色を貼ったので、私は驚き始めました-どのように、それは働きますか?私はこれらの影の色を自分で計算できますか?
もちろん、最初のステップは、ランダムな色の束に接続し、影のための16進数コードをつかむし、そのRGB番号をチェックアウトした.使用するcolorhexa これは.
名称
R
ジー
B
アザミ
216
191
216
アザミの青白い影
248年
220
248年
アザミの暗い影
184
162
184
-
-
-
-
パウロブルー
176
224
230
パウダーブルーの青白い影
202
255
255
PowderBlueの暗い影
150
190
196年
-
-
-
-
ペルー
205
133
63
ペルーの青白い影
236年
153
72
ペルーの暗い影
174
113
54
OK、私はコードを学ぶので、私は一日の数字を入力を避けることができました.😭
とにかく、今、我々には数があるので、我々は彼らが変異される方法を見てみることができます.
名称
チェンジ
Gチェンジ
チェンジ
アザミの皮
+ 32
+ 29
+ 32
アザミダーク
- 32
- 29
- 32
-
-
-
-
ピーマンブルーペール
+ 26
+ 31
+ 25
暗黒色
- 26
- 34
- 37
-
-
-
-
Powderblue Paleについては、緑と青は255でマークされますので、両方の数字が32か何かより大きいかもしれないと仮定できます.
私はペルーにとってそれ以上の数学をしなかった.しかし、我々が見るものは変数を仮定することですx どこx 量R、G、Bは、それから淡い影が変化することですr + x, g + x, b + x 暗い影がある間r - x, g - x, b - x .x また、26から37までの範囲に表示されます-より多くの色で、1つは、それが20から30、または可能性がさらに大きいことができると仮定できます.
この時点で、私は一歩後退した.このプロジェクトは、今日の私の迅速なフロントエンドのパズルであることになっていました.jsアプリ.だけを追加し、減算、と言うと、各RGB値から25十分に罰金されます.

楽しみのために、私は、ノイフォリズムの背後に走るコードをチェックしました.入出力私はいつでもすぐに同じような機能で何かを書くつもりはありません.それで、今のところ、私は、ユーザーによって提供されるRGB値にちょうど25を加えて、引く何かをプロトタイプにするつもりです.
( HexとRGBとの間の変換について説明します).
現在の構造は以下のようになります.

3入力－R、GとB

onsubmit , R、G、Bを合法的なCSS文字列に合成する
テンプレートリテラルの使用background: rgb(${r},${g}, ${b})

各番号から25を減算し、これを正に設定します
シャドウ、25を追加し、これを負の影として設定します.

そして、私は1時間半で働くデモを紡ぐことができました:
かなりクール、huh?それも、かなり良い見て!私は、将来私自身のプロジェクトのためにこれを確かに使います.
次のステップ:また、16進コードを消費する.しかし、影の色を計算するには、我々は16進数コードに変換する必要があります!これは、正規表現を読む方法を学ぶときに便利です.
このスクリプトはsite :

function HEXtoRGB(hex) {
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function (m, r, g, b) {
        return r + r + g + g + b + b;
    });
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

でも……私は、それがどのように働くかについて、本当に理解しません.そして、私はコードをコピーするのが嫌いです.そして、それは怖く見えます.だから、この機能を離れてブレークを書いて、それを自分で作ってみましょう!

16進色構造：

8adaff <- これは例16進色です.16進色には2つの部分があります.

オプション#

文字または数字から成る2桁の16進数
数値

オプションのハッシュにマッチするには、^#?

^ 文字列の先頭をマークする

# マッチ# (duh)

? regex eseで「オプション」を意味します.

残りの6文字を分割し、ベース16からベース10に変換する必要があります.

こうすることで、次のようにフォームを検証できます.

フォームの入力を検索する# - もしあれば、スライス
機能を持たない# 正面で.

新しい文字列を( 0 , 2 ),

If # が存在しない場合は、スライスを開始します.

しかし、よりエレガントな解決法は、私が見つけた複雑なコード断片のようにregexsを使うことです.
各16進数にマッチするには、次のようにします.a-f - hexadecimalsはaからfまでの文字だけを使用します.完全な16進数の行は0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , a , b , c , d , e , fです.\d - 任意の数にマッチ[] - ブラケットは1文字だけにマッチします{2} - 二回一致する-ブラケットの後に配置され、数または文字の任意の2文字の置換に対して一致します.() - 今日はこれらのことを学びました.後でその機能について説明します.
さて、#8adaff , この正規表現を使うことができます.^#?([a-f\d]{2}){3}
クール!今、我々はregexメソッドを使用することができますmatch() そして、数字で混乱させてください.
またはできますか.

これは悪いです-私たちがストリング全体に合っているように思えます、そして、それから最後の2文字.どうやってそれを修正するのですか?
この解決策は、実際には、^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})
代わりに{3} :

ここがどこです() マッチンググループは、3つの一致するグループを作ることによって、正規表現マッチメソッドは3つの2文字列を吐き出します:私たちの16進数.
私は最終的な結果を入れている間、別のエラーを見つけましたi 正規表現の最後に/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})/i
したがって、大文字小文字を区別しない場合にマッチします.
パーフェクト!今、私たちはベース10に数字を解析しなければなりません.

//assuming hex came from the form:
var num = hex.match(regex)
var r = parseInt(num[1], 16)
var g = parseInt(num[2], 16)
var b = parseInt(num[3], 16)

そして、我々はparseintを使用するため、値が自動的に番号です-私たちはもうそれについて心配する必要はありません!
そして、もし私たちがHexコードを出力したいなら、あなたはparseintを使うことができません.you have to use toString()
とにかく、ここでは最終的な製品は、グリッチに主催
< div >
このアプリはいくつかの問題があることに注意してください- 255以上の数字がフィルタアウトされていないので、彼らは3文字16進数になります.もしこれを最適化するなら、おそらく255以上の値を変更する検証変数の層を追加します.br/>
さらに、変数を宣言するブロックは、配列やメソッドで最適化されるかもしれません.マップ.foreach ;< tt/p >
しかし、数時間で作られたプロジェクトのために、これはあまり悪くありません!p >
<思想>考え?憎しみメール?コメントを残してください!p >