問題タブ [perception]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
colors - 「違い」で色間の指標(知覚モデル)を作る
下の画像を見てください。色覚異常でない場合は、A と B がいくつか表示されるはずです。画像には 3 つの A と 3 つの B があり、それらすべてに 1 つの共通点があります。それらの色は、背景 +値の 10% 、彩度、色相の順です。ほとんどの人にとって、中央の文字は非常に見づらく、彩度はあまり役に立たないようです!
ただし、文字認識ソフトウェアを作成していて、既知の 前景色と背景色に基づいて画像をフィルタリングしているため、これは少し面倒です。ただし、画像にノイズが多い場合でも、これらが非常に近い場合があります。ピクセルが文字に属しているか背景に属しているかを判断するために、私のプログラムはユークリッド RGB 距離をチェックします。
これは問題なく機能しますが、背景と前景が近い場合は、かなりうまく機能しないことがあります。
探すべきより良い指標はありますか?私は色知覚モデルを調べましたが、それらは主に私が探している知覚の違いではなく明るさをモデル化しています。たぶん、彩度をあまり効果的でないものとしてモデル化し、特定の色相の違いも?いくつかの興味深い指標へのポインタは非常に役立ちます。
performance - ウェブページの「知覚」速度の測定
Web ページの速度とパフォーマンスを測定する多くのツールを知っていますが、サイトの体感速度を測定できるオンライン ツールはありますか?
私はさまざまなフロントエンドのパフォーマンスの改善を行っており、これらが知覚されるパフォーマンスをどの程度変化させるかを判断したいと考えています。
javascript - JavaScriptの前に画像を読み込む方法
私は現在、JavaScript より先に会社のロゴがダウンロードされるようにすることで、Web アプリケーションの認識を改善しようとしています。
img
これを行うために、会社のロゴの要素の下に JavaScript 参照を移動しました。
例えば:
Google Chrome 開発者ツールを見ると、ロゴの呼び出しが行われていることがわかりますが、ページ上のすべての JavaScript がダウンロードされるまで「保留中」のままです。
なぜこうなった?会社のロゴが JavaScript より先に読み込まれるようにするにはどうすればよいですか?
image - 色相を変化させ、明度を維持
私は地図を「デザイン」しています。私はデザイナーではなく、地図をデザインするのが好きなだけなので、引用符で囲みました。高速道路、幹線道路、幹線道路、補助道路など、さまざまな種類の道路の色を定義する必要があります。赤みがかった色、紫がかった色、青みがかった色の 3 色を使用しています。赤みを基準にすると、青みがトライアドの配色から、紫がかった配色が正方形の配色から取られると言えます。
赤みを帯びた (#cf3030) の外観が気に入っています。「紫と青を思いつくのは簡単だろう。チャンネルを混ぜるだけだ」と自分に言い聞かせました。そこで #cf30cf と #3030cf が誕生しました。そして、それは唇またはウサギの穴でした。
RGB はモニターには適していますが、認識には適していません。HSL/HSV は RGB の単なる変換であるため、問題は解決しません。はい、H 値を変更するだけで、明度に関して知覚的に異なる色が得られます。
色空間スペクトルの反対側にある CIELAB は、知覚に一致するように設計されていますが、すべてを表示できるディスプレイのないモデル色空間です。実際、RGB をマップすると、サブスペースであることがわかります。つまり、一部の LAB カラーは RGB で表示できません。
それでも、 http://colorizer.org/のようなものを使用して RGB から LAB に変換し、AB 値を変更して青みがかった色と紫がかった色を取得し、レトロに変換された色を RGB で取得して使用できると考えました。
驚いたことに、色、特に青みがかった色は、私の赤よりもずっと明るく見えます. 背景が似ているサンプルを撮ろうとさえしました。それらが適用される道路はすべて同じ太さです。
これはカラー デザインのコースに匹敵するものですか、ツールが何らかの形で壊れているのでしょうか、それとも別のものを使用して色を考え出す必要がありますか? 多分私の腸を使って、「手で」物事を試してみてください?
colors - 見分けやすい色のカラーパレット
電子回路用の単純な CAD プログラムを設計していますが、黒 (または暗い) 背景に対して表示されたときに互いに簡単に区別できる 16 色程度のパレットを見つけるのに苦労しています。
理想的には、一連のパレットを用意して、ユーザーが色の数を簡単に区別できるようにしたいと考えています。たとえば、非常に異なる 8 色と、これらの「中間」にある追加の 8 色などです。32個までなら大丈夫だと思います。
これは、モニターに表示するためのものであり、印刷するためのものではなく、良好な照明条件 (つまり、屋外や直射日光が当たらない場所など) でのみ使用するためのものです。
パターンと単色を使用して実験していますが、これらはズームに問題があるため、適切な単色のセットを使用することをお勧めします.
これらの色を線形スケールで表現する必要はありません。「レインボー」カラーマップとその変種についてはよく知っています。