Generowanie koloru i dodawanie do array Opcje

[soliniak]

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ę )
Za pomoc z góry dziękuję

https://jsfiddle.net/ta2z06fq/

[JAVASCRIPT] pobierz, plaintext 
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 = 2;
 
this.cooler = function(){
 
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;
    }
  }
 
  setTimeout(cooler, speed);
 
  document.getElementById("r").innerHTML = rgb;
  document.getElementById("g").innerHTML = rgb2;
  document.getElementById("b").innerHTML = rgb3;
 
  toto = [rgb, rgb2, rgb3];
  kolor = [];
  kolor.push("rgb(" + rgb + "," + rgb2 + "," + rgb3 + ")");
 
  //ctx.fillStyle = "rgb("toto[0]+","+toto[1]+","+toto[2]+");";
  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];
  ctx.fillRect(a, 10, rX, rH+i*2);
  }
 
};
 
}
 
rysuj();
[JAVASCRIPT] pobierz, plaintext 

[rafkon1990]

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 »

Ten post edytował rafkon1990 9.11.2016, 09:34:13

[soliniak]

Efekt fajny, mogę go zastosować do swojego celu ale chodziło mi dokładniej o to żeby zrobić tablicę np.:

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

i potem wywołać:

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

Tylko mam problem z wypisaniem kolorów do tablicy automatycznie. I otrzymuję efekt jak w pierwszym poście.

[rafkon1990]

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).

Ten post edytował rafkon1990 9.11.2016, 10:03:03

[soliniak]

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 
kolor[6]
"rgb(0,255,45)"
kolor[6]
"rgb(165,255,0)"
kolor[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 :/

Ten post edytował soliniak 9.11.2016, 11:05:02

[rafkon1990]

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ęć).

Teraz za każdym razem jak wywołam w konsoli

kolor[6]
to zwraca mi różne wartości tj.:

[JAVASCRIPT] pobierz, plaintext 
kolor[6]
"rgb(0,255,45)"
kolor[6]
"rgb(165,255,0)"
kolor[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.

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]

Ślicznie dziękuję za pomoc
Z szerokością canvas'a przyszło mi do głowy ale uznałem za zbyt łatwe i nie sprawdziłem, heh.