17

やあそう、

私が取り組んでいるプロジェクトに実装する温度ウィジェットがあります。特に難しいことはありません。必要なデータを取得するための無料の API があります。

しかし、私と一緒に仕事をしている素敵なデザイナーは、私が最初から良いアイデアを持っていない色の特徴を持っているでしょう...

彼は、現在の気象温度に応じて背景色を定義します。

温度カラースキーマ

つまり、気温が -20 度のように寒い場合、背景色は青/紫/その他の寒色にする必要があります。25度のように暖かいときは、オレンジ/赤のような背景色が必要です。

「温度ステップ」の配列で簡単に作業できると思いますが、温度に応じて色を定義できる関数を使用したいと思います。私はそれが奇妙であることを知っています。温度の色で色を定義するアルゴリズムがあるかどうかはわかりません...この記事は役に立ちますhttp://en.wikipedia.org/wiki/Color_temperatureどんなアイデアでも、初めてでも、とても興味があります！

私はこのスレッドを見ました: Display temperature as color with C#?

しかし、私は C# を使用しておらず、使用したくないので、JavaScript で解決策があれば完璧です。サーバー側の必要性があれば、最終的には PHP または NodeJS を使用できます。

編集 - 回答:

最後に、グラフィックが必要なため、実際の色のグラデーション配列を使用する選択肢がありませんでした。しかし、温度に応じて、最も近いステップの色を混ぜなければなりませんでした。それを行うための小さな JS ライブラリを作成しました。すぐに GitHub で見つけることができます。リンクをここに投稿します。

ここで見つけることができます：

プロジェクト発表サイト

または github プロジェクト

4

4 に答える 4

7

あなたの色の範囲は、-30ºC で 270º (すみれ色) から +30ºC で 30º (オレンジ) までの「HSL 色空間」での「色相のみ」のスイープと同じように見えます。

var hue = 30 + 240 * (30 - t) / 60;

が範囲外の場合tは、上記の式を呼び出す前にクランプするか、h後で目的の色相範囲にクランプします。

サポートされているブラウザーでは、hsl(h, s, l)カラー文字列を使用するか、一般的に利用可能な"HSL to RGB"関数を使用して HSL カラーを RGB に変換できます。

http://jsfiddle.net/V5HyL/を参照してください

于 2013-05-09T18:22:33.953 に答える
3

これは特殊なケースであり、一般的な解決策ではありませんが、単純に色相間の線形グラデーションを実行し、中間範囲 (つまり緑) でブレンドを圧縮するだけで、カラー ステッピングなしで合理的な近似値を得ることができます。

デモ: http://jsfiddle.net/bcronin/kGqbR/18/

//
// Function to map a -30 to 30 degree temperature to 
// a color
//
var F = function(t)
{
    // Map the temperature to a 0-1 range
    var a = (t + 30)/60;
    a = (a < 0) ? 0 : ((a > 1) ? 1 : a);

    // Scrunch the green/cyan range in the middle
    var sign = (a < .5) ? -1 : 1;
    a = sign * Math.pow(2 * Math.abs(a - .5), .35)/2 + .5;

    // Linear interpolation between the cold and hot
    var h0 = 259;
    var h1 = 12;
    var h = (h0) * (1 - a) + (h1) * (a);

    return pusher.color("hsv", h, 75, 90).hex6();
};
于 2013-05-09T19:08:48.787 に答える
2

色温度に関するウィキペディアの記事は、問題とは関係ありません。ウィキペディアの記事は、デジタル イメージングの専門家のみに関連しています。この文脈での色温度は、何か違うことを意味します...

あなたの問題は、特定の温度を摂氏で視覚化する方法に関するものです。これを行うための標準アルゴリズムはありません。このタスクをどのように解決するかは設計者次第です。

おそらく、2.5°C または 5°C ごとに RGB 値の配列を作成し、その間の温度値を RGB でブレンドします。

于 2013-05-09T18:15:12.607 に答える
1

私は最近、時間データを使用して、その時間が対応する空の色を表示するという難問に直面しました。それは難しいです、ここに私が探求した3つの方法があります：

1）悪い方法：温度のx切片を受け入れるR、G、Bチャンネルの関数を個別に作成し、赤チャンネル、青チャンネル、緑チャンネルのy切片を吐き出します。あなたが持っている温度と対応する色の範囲。これを行うには、温度のいくつかの主要な区分の色範囲に沿ってサンプリングし、できるだけ多くのポイントをプロットしてから、各チャネルのポイントを介して 6 次多項式を描画することにより、リバース エンジニアリングを行います。温度値を受け入れ、アルファ 1 の RGB カラーの R、G、および B チャネルの 3 つの出力を組み合わせることができる関数を取得します。

2) 主要な色 (これが 5 色か 50 色かを決めた) ごとに背景クラスを作成し、アルファ ブレンドでそれらを切り替えます。これが私の問題に最終的に使用したものです。

if(temp > 0 && temp <= 5)
{
     greenBackground.alpha == 1
     yellowBakckground.alpha == (temp/5)
}
else if(temp > 5 && temp <= 10)

等...

したがって、温度が 2.5 の場合、黄色と緑の 50% の混合になります。

このオプションを 1 晩で実装することができ、結果は素晴らしいものになりました! 時間はかかりますが、実行可能で、思ったほど面倒ではありません。

3) 可能なすべての整数に対してグラデーションからサンプリングされた RGB カラーの配列を作成して保存し (-30 から 30 の間にはそれほど多くありません)、必要に応じて API のデータを整数値に丸めます。それは私が推測する最も単純なものでしょう。ただし、オプション1ほどクールではありません:)

幸運を！

于 2013-05-09T03:12:06.920 に答える