Saya sedang menulis permainan Java dan saya ingin menerapkan pengukur daya seberapa keras Anda akan menembak sesuatu.
Saya perlu menulis fungsi yang mengambil int antara 0 - 100, dan berdasarkan seberapa tinggi angkanya, itu akan mengembalikan warna antara Hijau (0 pada skala daya) dan Merah (100 pada skala daya).
Mirip dengan cara kerja kontrol volume:
Operasi apa yang harus saya lakukan pada komponen warna Merah, Hijau, dan Biru untuk menghasilkan warna antara Hijau dan Merah?
Jadi, saya bisa menjalankan say, getColor(80)
dan itu akan mengembalikan warna jingga (nilainya di R, G, B) atau getColor(10)
yang akan mengembalikan nilai RGB yang lebih Hijau / Kuning.
Saya tahu saya perlu meningkatkan komponen nilai R, G, B untuk warna baru, tetapi saya tidak tahu secara spesifik apa yang naik atau turun saat warna bergeser dari Hijau-Merah.
Kemajuan:
Saya akhirnya menggunakan ruang warna HSV / HSB karena saya lebih menyukai gradien (tidak ada cokelat gelap di tengah).
Fungsi yang saya gunakan adalah:
public Color getColor(double power)
{
double H = power * 0.4; // Hue (note 0.4 = Green, see huge chart below)
double S = 0.9; // Saturation
double B = 0.9; // Brightness
return Color.getHSBColor((float)H, (float)S, (float)B);
}
Di mana "daya" adalah angka antara 0,0 dan 1,0. 0,0 akan mengembalikan warna merah cerah, 1,0 akan mengembalikan hijau cerah.
Bagan Warna Jawa:
Jawaban:
Ini seharusnya berfungsi - cukup skala nilai merah dan hijau secara linier. Dengan asumsi nilai merah / hijau / biru maks Anda adalah
255
, dann
berada dalam kisaran0 .. 100
(Diubah untuk matematika integer, ujung topi menjadi Ferrucio)
Cara lain untuk melakukannya adalah dengan menggunakan model warna HSV , dan siklus rona dari
0 degrees
(merah) ke120 degrees
(hijau) dengan saturasi dan nilai apa pun yang sesuai untuk Anda. Ini akan memberikan gradien yang lebih menyenangkan.Berikut demonstrasi setiap teknik - gradien atas menggunakan RGB, bawah menggunakan HSV:
sumber
Di luar kepalaku, inilah transisi rona hijau-merah di ruang HSV, diterjemahkan ke RGB:
Nilai merah, hijau, biru pada contoh di atas adalah persentase, Anda mungkin ingin mengalikannya dengan 255 untuk mendapatkan rentang 0-255 yang paling sering digunakan.
sumber
Jawaban Copy'n'Paste singkat ...
Di Java Std:
int getTrafficlightColor(double value){ return java.awt.Color.HSBtoRGB((float)value/3f, 1f, 1f); }
Di Android:
int getTrafficlightColor(double value){ return android.graphics.Color.HSVToColor(new float[]{(float)value*120f,1f,1f}); }
catatan: nilai adalah angka antara 0 dan 1 yang menunjukkan kondisi merah ke hijau.
sumber
String.format("#%06X", 0xFFFFFF & getTrafficlightColor(value));
Jika Anda menginginkan representasi hijau-kuning-merah seperti yang disarankan jawaban yang diterima, lihat ini.
http://jsfiddle.net/0awncw5u/2/
function percentToRGB(percent) { if (percent === 100) { percent = 99 } var r, g, b; if (percent < 50) { // green to yellow r = Math.floor(255 * (percent / 50)); g = 255; } else { // yellow to red r = 255; g = Math.floor(255 * ((50 - percent % 50) / 50)); } b = 0; return "rgb(" + r + "," + g + "," + b + ")"; } function render(i) { var item = "<li style='background-color:" + percentToRGB(i) + "'>" + i + "</li>"; $("ul").append(item); } function repeat(fn, times) { for (var i = 0; i < times; i++) fn(i); } repeat(render, 100);
li { font-size:8px; height:10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <ul></ul>
sumber
Interpolasi linier antara hijau dan merah hampir bisa digunakan, kecuali di bagian tengah akan ada warna coklat keruh.
Solusi paling fleksibel dan terbaik adalah memiliki file gambar di suatu tempat yang memiliki warna ramp yang Anda inginkan. Dan kemudian cari nilai piksel di sana. Ini memiliki fleksibilitas sehingga Anda dapat mengubah gradien menjadi tepat .
Jika Anda masih ingin melakukannya dari kode, mungkin yang terbaik adalah menginterpolasi antara warna hijau dan kuning di sisi kiri, dan antara kuning dan merah di sisi kanan. Dalam ruang RGB, hijau adalah (R = 0, G = 255, B = 0), kuning adalah (R = 255, G = 255, B = 0), merah adalah (R = 255, G = 0, B = 0 ) - ini mengasumsikan setiap komponen warna berubah dari 0 hingga 255.
sumber
Saya membuat fungsi kecil yang memberi Anda nilai integer rgb untuk nilai persentase:
Jadi jika currentValue Anda 50 dan maxValue Anda 100, fungsi ini akan mengembalikan warna yang Anda butuhkan, jadi jika Anda mengulang fungsi ini dengan nilai persentase, nilai warna Anda akan berubah dari hijau menjadi merah. Maaf atas penjelasan yang buruk
sumber
Jawaban yang diterima bahkan tidak benar-benar menjawab pertanyaan itu ...
C ++
Berikut adalah segmen kode C ++ sederhana dari mesin saya yang secara linier dan efisien menginterpolasi antara tiga warna acak:
The
interpolation_factor
diasumsikan di kisaran0.0 ... 1.0
.Warna diasumsikan berada dalam kisaran
0.0 ... 1.0
(misalnya untuk OpenGL).C #
Berikut fungsi yang sama yang ditulis di C #:
The
interpolationFactor
diasumsikan di kisaran0.0 ... 1.0
.Warna diasumsikan berada dalam kisaran
0 ... 255
.sumber
Anda perlu interpolasi linier (LERP) komponen warna. Begini cara melakukannya secara umum, diberi nilai awal v0 , nilai akhir v1 dan rasio yang diperlukan (float yang dinormalisasi antara 0.0 dan 1.0):
Ini memberikan v0 ketika rasio adalah 0,0, v1 ketika rasio adalah 1,0, dan segala sesuatu di antara dalam kasus lain.
Anda dapat melakukannya baik pada komponen RGB, atau menggunakan skema warna lain, seperti HSV atau HLS. Dua yang terakhir ini akan lebih menyenangkan secara visual, karena keduanya bekerja pada komposisi corak dan kecerahan yang memetakan lebih baik ke persepsi warna kita.
sumber
Saya akan mengatakan Anda menginginkan sesuatu di antara segmen garis di ruang HSV (yang memiliki warna kuning agak terlalu terang di tengah) dan segmen garis di ruang RGB (yang memiliki warna coklat jelek di tengah). Saya akan menggunakan ini, di mana
power = 0
akan memberi warna hijau,power = 50
akan memberikan warna kuning yang agak kusam, danpower = 100
akan memberi warna merah.sumber
Berikut adalah solusi salin dan tempel untuk skala Swift dan HSV:
Penginisialisasi UIColor menerima hue, saturation dan brightness dalam [0, 1] jadi untuk nilai yang diberikan dari [0, 1] kita memiliki:
sumber
sumber
Jika Anda membutuhkan jenis gradien ini (sebenarnya terbalik) di CSS (versi min 2.1) Anda dapat menggunakan HSL juga.
Misalkan Anda berada dalam template AngularJs dan nilainya adalah angka dari 0 hingga 1 dan Anda ingin memberi gaya pada elemen (latar belakang atau warna teks) ...
Nilai pertama: derajat (0 merah, 120 hijau) Nilai kedua: saturasi (50% netral) Nilai ketiga: ringan (50% netral)
Artikel yang bagus di sini
Teori di Wikipedia di sini
sumber
Berikut adalah
Objective-C
versi solusi Simucal:Dimana level akan menjadi nilai antara
0.0
dan1.0
.Semoga ini bisa membantu seseorang!
sumber
Dengan Python 2.7:
Persen tentu saja
value / max_value
. Atau jika skala Anda tidak dimulai dari 0 maka(value - min_value) / (max_value - min_value)
.sumber
JavaScript
Saya menggunakan Visualisasi Google dengan diagram batang dan ingin batang berwarna hijau menjadi merah berdasarkan persentase. Ini ternyata solusi terbersih yang saya temukan dan berfungsi dengan sempurna.
Pastikan saja persentase Anda adalah 50 untuk 50% dan bukan 0,50.
sumber
Saya telah memperbarui jawaban yang diterima dengan membaginya menjadi paruh pertama dan kedua dari kisaran (0,100) dan mengganti 100 dengan level maksimal, sehingga kisaran dapat menjadi dinamis. Hasilnya sama persis dengan model HSV, namun tetap menggunakan RGB. Kuncinya adalah memiliki (255,255,0) di tengah untuk mewakili warna kuning. Saya telah menggabungkan ide ini dalam jawaban yang diterima dan kode VBA lain, jadi capai di VBA dan gunakan di Excel. Saya harap logikanya membantu dan dapat digunakan dalam bahasa / aplikasi lain.
Cheers, Pavlin
sumber
VB
sumber
Contoh mandiri
sumber
Ini akan bervariasi dari Merah ke Kuning dan kemudian ke Hijau
nilai bervariasi dari 0 - 100
sumber