Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Generowanie koloru i dodawanie do array
Forum PHP.pl > Forum > Po stronie przeglądarki
soliniak
9.11.2016, 08:28:23
Mam taki oto kod i chciałbym żeby każdy z narysowanych pasków miał kolor o jeden stopień wyższy.
Próbowałem zrobić to w arrayu ale nie wiem jak wyodrębnić kolory... (uczę się wink.gif )
Za pomoc z góry dziękuję wink.gif

https://jsfiddle.net/ta2z06fq/

[JAVASCRIPT] pobierz, plaintext 
  1. function rysuj(){
  2.   draw();
  3.   cooler();
  4. }
  5.  
  6. function draw(){
  7. var canvas = document.getElementById("canvas");
  8.  
  9. var ctx = canvas.getContext("2d");
  10. var rgb = 255;
  11. var rgb2 = 0;
  12. var rgb3 = 0;
  13. var rgbit = false;
  14. var rgbitmin = false;
  15. var rgb2it = false;
  16. var rgb2itmin = false;
  17. var rgb3it = false;
  18. var rgb3itmin = false;
  19. var speed = 2;
  20.  
  21. this.cooler = function(){
  22.  
  23. if (rgb == 255 && rgb2 === 0 && rgb3 === 0){
  24.   rgb2it = true;
  25. }
  26.   if(rgb2it === true){
  27.   rgb2++;
  28.     if(rgb2 >= 255){
  29.       rgb2it = false;
  30.     }
  31.   }
  32.  
  33. if (rgb == 255 && rgb2 === 255 && rgb3 === 0){
  34.   rgbitmin = true;
  35. } 
  36.   if(rgbitmin === true){
  37.     --rgb;
  38.     if(rgb <= 0){
  39.       rgbitmin = false;
  40.     }
  41.   }
  42.  
  43. if (rgb === 0 && rgb2 == 255 &&  rgb3 === 0){
  44.   rgb3it = true;
  45. }
  46.   if(rgb3it === true){
  47.   rgb3++;
  48.     if(rgb3 >= 255){
  49.       rgb3it = false;
  50.     }
  51.   }
  52.  
  53. if (rgb === 0 && rgb2 === 255 && rgb3 == 255){
  54.   rgb2itmin = true;
  55. } 
  56.   if(rgb2itmin === true){
  57.     --rgb2;
  58.     if(rgb2 <= 0){
  59.       rgb2itmin = false;
  60.     }
  61.   }
  62. if (rgb === 0 && rgb2 === 0 &&  rgb3 == 255){
  63.   rgbit = true;
  64. }
  65.   if(rgbit === true){
  66.   rgb++;
  67.     if(rgb >= 255){
  68.       rgbit = false;
  69.     }
  70.   } 
  71. if (rgb == 255 && rgb2 === 0 && rgb3 == 255){
  72.   rgb3itmin = true;
  73. } 
  74.   if(rgb3itmin === true){
  75.     --rgb3;
  76.     if(rgb3 <= 0){
  77.       rgb3itmin = false;
  78.     }
  79.   }
  80.  
  81.   setTimeout(cooler, speed);
  82.  
  83.   document.getElementById("r").innerHTML = rgb;
  84.   document.getElementById("g").innerHTML = rgb2;
  85.   document.getElementById("b").innerHTML = rgb3;
  86.  
  87.   toto = [rgb, rgb2, rgb3];
  88.   kolor = [];
  89.   kolor.push("rgb(" + rgb + "," + rgb2 + "," + rgb3 + ")");
  90.  
  91.   //ctx.fillStyle = "rgb("toto[0]+","+toto[1]+","+toto[2]+");";
  92.   document.getElementById("kolor").style.background = "rgb(" + rgb + "," + rgb2 + "," + rgb3 + ")";
  93.  
  94.   var a = 20;
  95.   var rH = 70;
  96.   var rX = 15;
  97.  
  98.   for (i = 0; i < 10; i++){
  99.   a += 20;
  100.   ctx.fillStyle = kolor[i];
  101.   ctx.fillRect(a, 10, rX, rH+i*2);
  102.   }
  103.  
  104. };
  105.  
  106. }
  107.  
  108. rysuj();
[JAVASCRIPT] pobierz, plaintext






rafkon1990
9.11.2016, 09:18:02
zdaje się że w pętli nic nie zmieniasz stąd też taki efekt

czy chodzi ci o taki efekt?

Kod
Edit in JSFiddle
JavaScript
HTML
CSS
Result
function rysuj(){
  draw();
  cooler();
}

function draw(){
var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");
var dec = 9;
var paskow = 10;
var limit = 255-(dec*paskow);
var r = limit;
var g = 0;
var b = 0;
var rit = false;
var ritmin = false;
var git = false;
var gitmin = false;
var bit = false;
var bitmin = false;
var speed = 20;
  
this.cooler = function(){

if (r == limit && g === 0 && b === 0){
  git = true;
}
  if(git === true){
  g++;
    if(g >= limit){
      git = false;
    }
  }
  
if (r == limit && g === limit && b === 0){
  ritmin = true;
}
  if(ritmin === true){
    --r;
    if(r <= 0){
      ritmin = false;
    }
  }
  
if (r === 0 && g == limit &&  b === 0){
  bit = true;
}
  if(bit === true){
  b++;
    if(b >= limit){
      bit = false;
    }
  }

if (r === 0 && g === limit && b == limit){
  gitmin = true;
}
  if(gitmin === true){
    --g;
    if(g <= 0){
      gitmin = false;
    }
  }
if (r === 0 && g === 0 &&  b == limit){
  rit = true;
}
  if(rit === true){
  r++;
    if(r >= limit){
      rit = false;
    }
  }
if (r == limit && g === 0 && b == limit){
  bitmin = true;
}
  if(bitmin === true){
    --b;
    if(b <= 0){
      bitmin = false;
    }
  }
  
  setTimeout(cooler, speed);
  
  document.getElementById("r").innerHTML = r;
  document.getElementById("g").innerHTML = g;
  document.getElementById("b").innerHTML = b;
  

  document.getElementById("kolor").style.background = rgb;
  
  var a = 20;
  var rH = 70;
  var rX = 15;

  for (i = 0; i < paskow; i++){
  a += 20;
  var rgb = ("rgb(" + (r+i*dec) + "," + (g+i*dec) + "," + (b+i*dec) + ")");
   document.getElementById("kolor").style.background = rgb;
  ctx.fillStyle = rgb
  document.getElementById("rgb").innerHTML = rgb;
  ctx.fillRect(a, 10, rX, rH+i*2);
  }

};
  
}

rysuj();

var dec = 9;
POLSKI
var grudnia = 9;
OPCJE ROZSZERZEŃWIĘCEJ »
soliniak
9.11.2016, 09:36:24
Efekt fajny, mogę go zastosować do swojego celu ale chodziło mi dokładniej o to żeby zrobić tablicę np.:

[JAVASCRIPT] pobierz, plaintext 
  1. kolor[0] = rgb(255.15,0);
  2. kolor[1] = rgb(255.30,0);
  3. kolor[2] = rgb(255.45,0);
  4. kolor[3] = rgb(255.60,0);
  5. kolor[4] = rgb(255.75,0);
  6. kolor[5] = rgb(255.90,0);
  7. kolor[6] = rgb(255.105,0);
[JAVASCRIPT] pobierz, plaintext


i potem wywołać:

[JAVASCRIPT] pobierz, plaintext 
  1. for(i = 0; i < kolor.length; i++){
  2. ctx.fillStyle = kolor[i];
  3. ctx.fillRect(a, 10, rX, rH+i*2);
  4. }
[JAVASCRIPT] pobierz, plaintext


Tylko mam problem z wypisaniem kolorów do tablicy automatycznie. I otrzymuję efekt jak w pierwszym poście.
rafkon1990
9.11.2016, 09:55:28
Zobacz ten kod.

Wypełniam tablicę kolor 10 elementami (w pierwszej pętli) i później z nich korzystam w drugiej pętli rysując prostokąty.

Kod
    function rysuj(){
        draw();
        cooler();
    }

    function draw(){
        var canvas = document.getElementById("canvas");
        
        var ctx = canvas.getContext("2d");
        var rgb = 255;
        var rgb2 = 0;
        var rgb3 = 0;
        var rgbit = false;
        var rgbitmin = false;
        var rgb2it = false;
        var rgb2itmin = false;
        var rgb3it = false;
        var rgb3itmin = false;
        var speed = 200;
        
        this.cooler = function(){
        kolor = [];
            for(j=0; j<10; j++){
                if (rgb == 255 && rgb2 === 0 && rgb3 === 0){
                    rgb2it = true;
                }
                if(rgb2it === true){
                    rgb2++;
                    if(rgb2 >= 255){
                        rgb2it = false;
                    }
                }
                
                if (rgb == 255 && rgb2 === 255 && rgb3 === 0){
                    rgbitmin = true;
                }
                if(rgbitmin === true){
                    --rgb;
                    if(rgb <= 0){
                        rgbitmin = false;
                    }
                }
                
                if (rgb === 0 && rgb2 == 255 &&  rgb3 === 0){
                    rgb3it = true;
                }
                if(rgb3it === true){
                    rgb3++;
                    if(rgb3 >= 255){
                        rgb3it = false;
                    }
                }
                
                if (rgb === 0 && rgb2 === 255 && rgb3 == 255){
                    rgb2itmin = true;
                }
                if(rgb2itmin === true){
                    --rgb2;
                    if(rgb2 <= 0){
                        rgb2itmin = false;
                    }
                }
                if (rgb === 0 && rgb2 === 0 &&  rgb3 == 255){
                    rgbit = true;
                }
                if(rgbit === true){
                    rgb++;
                    if(rgb >= 255){
                        rgbit = false;
                    }
                }
                if (rgb == 255 && rgb2 === 0 && rgb3 == 255){
                    rgb3itmin = true;
                }
                if(rgb3itmin === true){
                    --rgb3;
                    if(rgb3 <= 0){
                        rgb3itmin = false;
                    }
                }
                
                
                
                document.getElementById("r").innerHTML = rgb;
                document.getElementById("g").innerHTML = rgb2;
                document.getElementById("b").innerHTML = rgb3;
                
                
                kolor.push("rgb(" + rgb + "," + rgb2 + "," + rgb3 + ")");
            }
            
            document.getElementById("kolor").style.background = "rgb(" + rgb + "," + rgb2 + "," + rgb3 + ")";
            
            var a = 20;
            var rH = 70;
            var rX = 15;
            
            for (i = 0; i < 10; i++){
                a += 20;
                ctx.fillStyle = kolor[i];
                document.getElementById("rgb"+i).innerHTML = kolor[i];
                ctx.fillRect(a, 10, rX, rH+i*2);
            }
            
            setTimeout(cooler, speed);
            
        };
        
    }

    rysuj();


Odcienie różnią się o 1 wartość r/g/b zatem jest to prawie niezauważalne (zalecam zwiększenie różnicy do najmniej 5).
soliniak
9.11.2016, 10:40:36
A co zrobić żeby na stałe przypisać wartość do tablicy?
Teraz za każdym razem jak wywołam w konsoli

kolor[6]
to zwraca mi różne wartości tj.:
[JAVASCRIPT] pobierz, plaintext 
  1. kolor[6]
  2. "rgb(0,255,45)"
  3. kolor[6]
  4. "rgb(165,255,0)"
  5. kolor[6]
  6. "rgb(255,0,135)"
[JAVASCRIPT] pobierz, plaintext


A chciałbym żeby za każdym razem kolor[6] zwracał mi swoją jedną stałą wartość.

I jeszcze jedna kwestia, nie mogę wypisać więcej niż 13 prostokątów i nie rozumiem dlaczego. Zwiększam wartość j oraz i ale maks to 13 :/
rafkon1990
9.11.2016, 10:58:34
Cytat(soliniak @ 9.11.2016, 10:40:36 ) *
A co zrobić żeby na stałe przypisać wartość do tablicy?

Możesz utworzyć drugą tablicę (globalną) i tam dodawać wszystkie wygenerowane kolory rgb (szybko zapcha dostępną pamięć).

Cytat(soliniak @ 9.11.2016, 10:40:36 ) *
Teraz za każdym razem jak wywołam w konsoli

kolor[6]
to zwraca mi różne wartości tj.:
[JAVASCRIPT] pobierz, plaintext 
  1. kolor[6]
  2. "rgb(0,255,45)"
  3. kolor[6]
  4. "rgb(165,255,0)"
  5. kolor[6]
  6. "rgb(255,0,135)"
[JAVASCRIPT] pobierz, plaintext


A chciałbym żeby za każdym razem kolor[6] zwracał mi swoją jedną stałą wartość.

Potrzebujesz tablicy o zasięgu globalnym, bądź przekazywać ją do funkcji.

Cytat(soliniak @ 9.11.2016, 10:40:36 ) *
I jeszcze jedna kwestia, nie mogę wypisać więcej niż 13 prostokątów i nie rozumiem dlaczego zwiększam wartość j oraz i ale maks to 13 :/


Ależ możesz mieć więcej niż 13 takich prostokątów - wystarczy że zwiększysz szerokość obszaru canvas.
soliniak
9.11.2016, 11:03:06
Ślicznie dziękuję za pomoc wink.gif
Z szerokością canvas'a przyszło mi do głowy ale uznałem za zbyt łatwe i nie sprawdziłem, heh.
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.