Questo sito utilizza cookies solo per scopi di autenticazione sul sito e nient'altro. Nessuna informazione personale viene tracciata. Leggi l'informativa sui cookies.
Username: Password: oppure
Javascript - Canvas html - Cambiare colore del cielo da azzurro a nero senza passare per altri colori
Forum - Javascript - Canvas html - Cambiare colore del cielo da azzurro a nero senza passare per altri colori

Avatar
dotNET (Member)
Rookie


Messaggi: 26
Iscritto: 13/09/2010

Segnala al moderatore
Postato alle 14:04
Venerdì, 09/03/2012
Ciao a tutti, sto facendo un gioco in html 5, il cielo lo disegno con un linearGradient che va da #36a8ff (azzurro scuro) a #c3e5ff (azzurro chiaro).
Nel gioco il sole scende lentamente, e vorrei riuscire a modificare i due colori limite del linearGradient in modo che il cielo diventi sempre piu scuro, non penso basti convertirlo in decimale e decrementarlo sempre di piu il colore, perchè così facendo cambiarebbe anche il colore di base (blu).
Qualcuno ha qualche altra soluzione?

Nel concreto mi servirebbe un algoritmo per una funzione che attriaverso i parametri, colore iniziale, finale e progresso mi generi il colore esatto.
http://www.flashandmath.com/howtos/colortrans/ questo è un esempio di quello di cui avrei bisogno in javascript



Risolto se servisse :
Codice sorgente - presumibilmente Php
  1. function interpolateColor(minColor,maxColor,maxDepth,depth){
  2.  
  3.     function d2h(d) {return d.toString(16);}
  4.     function h2d(h) {return parseInt(h,16);}
  5.  
  6.     if(depth == 0){
  7.         return minColor;
  8.     }
  9.     if(depth == maxDepth){
  10.         return maxColor;
  11.     }
  12.  
  13.     var color = "#";
  14.  
  15.     for(var i=1; i <= 6; i+=2){
  16.         var minVal = new Number(h2d(minColor.substr(i,2)));
  17.         var maxVal = new Number(h2d(maxColor.substr(i,2)));
  18.         var nVal = minVal + (maxVal-minVal) * (depth/maxDepth);
  19.         var val = d2h(Math.floor(nVal));
  20.         while(val.length < 2){
  21.             val = "0"+val;
  22.         }
  23.         color += val;
  24.     }
  25.     return color;
  26. }

Ultima modifica effettuata da dotNET il 09/03/2012 alle 14:53
PM
Avatar
subazu (Normal User)
Rookie


Messaggi: 35
Iscritto: 06/08/2011

Up
1
Down
V
Segnala al moderatore
Postato alle 17:46
Martedì, 20/03/2012
Ciao, in teoria se incrementi singolarmente le 3 coppie di caratteri che compongono il numero del colore questo dovrebbe scurirsi o schiarirsi...
Ti consiglio quindi, dato che il codice esadecimale è formato da #rrggbb di fare delle prove incrementando i valori singoli dei vari colori (magenta giallo e blu) prima in maniere uguale e poi proporzionale.

Il ragionamento di fondo è che se #FFFFFF è il bianco e #000000 è il nero, credo che il rapporto fra colori fondamentali  R = 1 G = 1  B = 1 determini il colore (il grigio in questo caso) e la loro quantità assoluta la tonalità....

questi solo uno spunti però, perché anche io non ho una precisa idea di come fare ;-)

Ultima modifica effettuata da subazu il 20/03/2012 alle 17:56
Come ho già scritto ho risolto il problema con il codice allegato sopra. - dotNET - 20/03/12 19:51
Ah, avevo letto il post tempo fa e quanto ho fatto questa scoperta ho risposto senza pensarci :-D - subazu - 21/03/12 15:33
PM