0

Can someone explain why this code isn't showing blue in the last column?

var frame = 0;
var frame_counter = 1;    
var draw_rainbow = function(){
for (var i = 1; i <= 6; i++){
  color_picker = i + frame;
  if (color_picker > 6) {
      color_picker -= 6;
  }
  switch(color_picker){
    case 1:
      color = "red";
      break;
      case 2:
      color = "orange";
      break;
      case 3:
      color = "yellow";
      break;
      case 4:
      color = "green";
      break;
      case 5:
      color = "blue";
      break;
      case 6:
      color = "purple";
      break;   
  }
  var x = canvas.width / 6 * (i-1);
  var y = 0;
  var width = canvas.width / 6;
  var height = canvas.height;
  ctx.fillStyle = color;
  ctx.fillRect(x,y,width,height);
}
};
var frame_update = function() {
if(frame_counter >= 0) {
  frame++;
  }
if (frame > 4) {
  frame -= 5;
}
frame_counter *= -1;
};

with my interval underneath calling the draw rainbow and the frame update function. I shows all the other colors fine but in that one column at the right end of the screen it never shows blue.

http://jsfiddle.net/isherwood/g5BP3/

isherwood
  • 46,000
  • 15
  • 100
  • 132
TheMagicalCake
  • 177
  • 1
  • 3
  • 12
  • I've added a fiddle. All the colors are there. Why would the last be blue? – isherwood May 17 '14 at 03:24
  • blue is added at number 5 and number 6 is last - so last is purple. @user3236691 ...I think you need a break :P..Also, for rainbow you need 7 colors ...you need to add one more...VIBGYOR in reverse order. – Ani May 17 '14 at 03:26
  • Is this what you want http://jsfiddle.net/g5BP3/2/ – Ani May 17 '14 at 03:33
  • The backround cycles through the colors using a setInterval function but when blue never shows up in the last column – TheMagicalCake May 17 '14 at 05:50

1 Answers1

1

Here is a different, but easier way to achieve what you want -

First define the colors in an array:

var colors = ['red','orange', 'yellow', 'green', 'cyan', 'blue', 'purple'];

Have an update method which draws the current order to canvas. As we can use the length of the array to determine how many colors we need to draw as well as the width of each bar, the method will be dynamic and you can add or remove colors to the array and the method will adopt.

The method also rotates the array for each update:

function update() {

    var i = 0,                             // iterator for array
        dx = canvas.width / colors.length; // width of each bar

    for(; i < colors.length; i++) {        // loop through array
        ctx.fillStyle = colors[i];         // set color
        ctx.fillRect(i * dx, 0, dx, h);    // fill that bar
    }

    // rotate array
    colors = colors.slice(1, colors.length).concat(colors.slice(0, 1));
}

(see this answer for more details on how rotation is used).

And lastly, start animation by calling the update method n times per second.

As you can see there is no need to check conditions which would require you to update those checks each time you change the number of colors, and their overhead is also removed.

FIDDLE

Community
  • 1
  • 1