Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Generowanie kolorów pośrednich
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
PiNkOs
15.11.2010, 09:04:11
Witam,

Jestem w trakcie tworzenia pewnej aplikacji, która odlicza co 1s do liczby X.

Chodzi mi oto, że:

% to liczba obecna z X

1% - to kolor czerwony
2% - 49% - kolory co raz bardziej zbliżane do koloru żółtego. (przejscie z czerwonego na żółty)
50% - kolor żółty
51-99% - kolory co raz bardziej zbliżane do koloru zielonego (przejscie z zółtego na zielony)
100% - kolor zielony

[[[Pętla zaczyna się od nowa

Wiem, że da radę coś takiego zrobić (tylko nie znam się w ogóle na rgb)

Prosze o jakis przykład

Pozdrawiam
thek
15.11.2010, 13:36:30
Pytanie nr 1: Jakie wartości rgb (lub hex) mają kolory: czerwony, żółty, zielony?
Pytanie nr 2: Jak policzyć co ile należy zmieniać z każdym krokiem wartości wyjściowe, by z jednej barwy przeskoczyć do innej?

To chyba nie są trudne pytania? Pierwsze to kwestia zerknięcia w palety barw, drugie to banalna matematyka na poziomie podstawówki.
PiNkOs
15.11.2010, 18:15:51
No OK

Zielony:

rgb(0, 255, 0)

Czerwony:

rgb(255, 0, 0)

Żółty:

rgb(255, 255, 0)

I teraz jak to będzie z tym rachunkiem.

Przykładowo z czerwonego na żółty to jak...? jedna wartosc rosnie druga maleje?
ShadowD
15.11.2010, 19:17:35
Żółty - zielony ruszasz tylko R
Żółty - czerwony ruszasz tylko G

na prawdę odpalić jakiś edytor graficzny i popatrzeć na kolory, wyciągnąć wnioski i będzie OK. :-)
PiNkOs
15.11.2010, 19:57:41
Wykodziłem coś takiego:

[PHP] pobierz, plaintext 
  1. print "for(var i=0;i<=thisAd;i++){\n";
  2. print "var percent = thisAd / Ad;\n";
  3. print "percent = percent*100;\n";
  4. print "if(percent <= 50){\n";
  5. print "vv1 = 255;\n";
  6. print "vv2++;\n";
  7. print "}\n";
  8.  
  9. print "}\n";
  10.  
  11.  
  12. print "document.getElementById('zmiana').style.color = 'rgb('+vv1+','+vv2+',0)';\n";
  13. print "document.getElementById('zmiana2').style.color = 'rgb('+vv1+','+vv2+',0)';\n";
[PHP] pobierz, plaintext


Z koloru czerwonego na żółty.

Teraz:

percent - procent [odliczenia]
thisAd - obecna liczba
Ad - liczba do której odliczanie trwa

Reszty chyba nie musze...

Więc coś nadal jest źle, bo zmienia kolor zraz jak doliczy ZAWSZE do okolic liczby 255.

Co jest nie tak?? Kolor żółty powinien byc przy 50% odliczenia a nie w okolicach liczby 255...
thek
16.11.2010, 12:19:58
Nie działa, bo wypluwasz zmianę wartości dopiero po przeleceniu całej pętli. Ty zaś musisz to robić dynamicznie, czyli niejako w trakcie trwania samych pętli.
Bezpieczniej będzie:
Czerwony (255,0,0)
Ruszasz tylko 2 wartość jako różnica/liczba_kroków
Żółty(255,255,0)
Ruszasz tylko 1 wartość jako różnica/liczba_kroków
Zielony(0,255,0)
Wracasz do czerwonego albo skokiem, albo znów idąc krokowo, jako: ruszasz 1 i 2 jako różnica/liczba_kroków

Tak więc 255/50 = 5.1 możliwe do obliczenia już na starcie, bo wszędzie taka różnica jest używana.
for(var i = 0; i <=50 ; ++i) {
rgb(255, i*5.1, 0);
}
for(var i = 50; i > 0 ; --i) {
rgb(i*5.1, 255, 0);
}
A tu już albo skok tego od nowa, albo pętla
for(var i = 50; i > 0 ; --i) {
rgb(255-i*5.1, i*5.1, 0);
}
A jak to ująć by skrypt ładnie działał i nie wywalał się? Pomyśl... Skrypt musi być szybki i zwracać wynik. Jeśli puścisz go w nieskończonej pętli - zawiesi się i stronę, więc nie można tak. Powinien zwracać jakąś wartość, a więc uzależnij go od czegoś jako parametr. Przykład? Wiesz ile skrypt ma kroków, bo ma ich 100 (lub 150, zależnie od wersji), więc użyj tego i wprowadzaj krok jako parametr do obliczenia. Jeśli wartość będzie z zakresu 0-50 zmieniaj kolor z czerwonego do żółtego, jeśli 51-100 to z żółtego do zielonego (a od 101 do 150 z zielonego do czerwieni), a więc masz do sprawdzenia jakąś zmienną i wedle niej modulo x kroków +1, czyli modulo 101 (lub 151).

Nie wierzysz że to proste? Zobacz jak mały to jest kod, który tylko o 3 IFy oparłem winksmiley.jpg
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script type="text/javascript" charset="utf-8">
  4. function setColor(krok) {
  5.     krok = krok%151;
  6.     if(krok < 51) {
  7.         document.getElementById('box').style.backgroundColor = 'rgb(255, ' + parseInt(krok*5.1) + ', 0)';
  8.     }
  9.     if(krok > 50  && krok < 101 ) {
  10.         document.getElementById('box').style.backgroundColor = 'rgb(' + parseInt((100-krok)*5.1) + ', 255, 0)';
  11.     }
  12.     if(krok > 100 && krok < 151) {
  13.         document.getElementById('box').style.backgroundColor = 'rgb(' + parseInt((krok-100)*5.1) + ', ' + parseInt((150-krok)*5.1) + ', 0)';
  14.     }
  15. }
  16. function change_step( step ) {
  17.     setColor(step);
  18.     licznik++;
  19. }
  20. var licznik = 0;
  21. </script>
  22. </head>
  23. <body>
  24. <div id="box" style="width:200px;height:100px;background-color:#ff0000;" onclick="setInterval( 'change_step(licznik)', 25);"></div>
  25. </body>
  26. </html>
[HTML] pobierz, plaintext
Skopiuj do pliku, uruchom w przeglądarce i kliknij na prostokącie, a zacznie sobie zmieniać kolorki. To działa oczywiście z kolorami w RGB, ale możesz napisać konwerter na wartości HEX i też będzie działać. RGB nie działa bowiem z wszystkimi IE winksmiley.jpg
PiNkOs
16.11.2010, 19:41:06
Dzięki za poświęcenie czasu.

Ale teraz... chce przykładowo wykonać to za pomocą procentów (bo w mojej aplikacji użytkownik podaje własną wartość)

Mam tak i klapa... Mierzyłem za pomocą ColorZilla i...

Kod
<html>
<head>
<script type="text/javascript" charset="utf-8">
function setColor(krok) {
    krok = krok%151;
    percent = krok / 151;
    percent = percent * 100;
    if(percent < 30) {
        document.getElementById('box').style.backgroundColor = 'rgb(255, ' + parseInt(krok*5.1) + ', 0)';
    }
    if(percent > 30  && percent < 70 ) {
        document.getElementById('box').style.backgroundColor = 'rgb(' + parseInt((100-krok)*5.1) + ', 255, 0)';
    }
    if(percent > 70 && percent < 101) {
        document.getElementById('box').style.backgroundColor = 'rgb(' + parseInt((krok-100)*5.1) + ', ' + parseInt((150-krok)*5.1) + ', 0)';
    }
}
function change_step( step ) {
    setColor(step);
    licznik++;
    document.getElementById('box').innerHTML = licznik;
}
var licznik = 0;
</script>
</head>
<body>
<div id="box" style="width:200px;height:100px;background-color:#ff0000;" onmouseover="setInterval( 'change_step(licznik)', 500);"></div>
</body>
</html>
thek
17.11.2010, 10:35:34
Podpowiem tylko, bo ruszenie tego co już Ci podałem i przerobienie to nie jest fizyka kwantowa. Procenty możesz wywalić, bo są tam tylko udziwnieniem niepotrzebnym. Ciebie interesują jedynie wartości rgb kolorów: startowego, środkowego, końcowego. Na ich podstawie obliczasz różnicę między kolorami i obliczasz wartość zmiany co krok dla każdej składowej koloru. Napisałem już o tym już w 2 poście tego tematu.
1. Bierzesz rgb startu i następnego w kolejności oraz liczbę kroków.
2. Obliczasz różnicę wartości dla każdej składowej i dzielisz przez liczbę kroków
3. Dodajesz do startu krok * różnica/liczba_kroków obliczona w punkcie 2
Czym się to różni od kodu jaki podałem wyżej? Tylko tym, że teraz możesz mieć różną wartość kroków i kolorów wszędzie.
Myślę, że skoro chcesz równo, to nie 40, ale 33 powinno być. IFy na (< 34),(>33 i < 67),(>66 i <101), krok%101 a 5.1 nie na sztywno, ale liczone dla każdej składowej koloru OSOBNO, dla KAŻDEGO if. Dam Ci przykład dla przejścia między dwoma kolorami w jednym z 3 etapów.

Jeśli więc przechodzisz z koloru A = rgb(a,b,c) do B = rgb(d,e,f) w 30 krokach, potem do C(g,h,i) w 40 krokach, a potem znów do A w 30 krokach to musisz:
1) policzyć: q = (d-a)/30, r = (e-b)/30, s = (f-c)/30,
2) zrobić
[JAVASCRIPT] pobierz, plaintext 
  1. if(krok < 31) {
  2.     document.getElementById('box').style.backgroundColor = 'rgb(' + parseInt( a + krok * q ) + ', ' + parseInt( b + krok * r ) + ', ' + parseInt( c + krok * s ) + ')';
  3. }
[JAVASCRIPT] pobierz, plaintext
A dla reszty wziąć poprawkę, że musi liczba kroków się odpowiednio wyzerować, a więc nie (100-krok) czy (krok-100), ale właściwie pasująca. Możesz nawet olać to, że wartości po odejmowaniu wyjdą ujemne, bo skrypt wtedy podczas dodawania i tak będzie działał jak trzeba , gdyż wynika to z tego, że dodawanie liczby ujemnej zamieni działanie na odejmowanie. Matma i jej dobre zrozumienie daje dużą przewagę podczas programowania. Powie Ci o tym każdy programista siedzący w skryptach back-endu.

To naprawdę jest matma prosta i więcej nie pomogę, bo dostałeś wszystko niemal jak na tacy i jeśli teraz już nie będziesz potrafił napisać sam, to wróć może do podstawówki, bo tam jest liczenie na poziomie dodawania, odejmowania i tym podobnych prostych operacji algebraicznych. Tu nawet nie ma potęgowania czy trygonometrii, a to ostatnie ja już znałem w podstawówce w 7 klasie, więc nawet nie pisz, że to za trudne i włącz myślenie, bo póki co po Twoim kodzie, widzę, że nawet nie wysiliłeś się by zrozumieć dlaczego dałem choćby (150-krok)*5.1 tylko radośnie swoje procenty powrzucałeś, myśląc, że to załatwi sprawę. Usiądź, popatrz, przemyśl i dopiero wtedy przerabiaj.
PiNkOs
20.11.2010, 18:25:27
Heh dzięki bardzo za poświęcenie czasu i cierpliwość ;-)

Teraz już wszystko wiem co i jak ;-)

W tygodniu powiem szczerze, że nie miałem nawet czasu tego analizować a teraz już wszystko jasne party.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.