How can I modify HTML Canvas colors using an interval loop?

Question!

I wrote this and I want to start and end the loop with certain colors (e.g. start with rgb 150,150,200; end with rgb 190, 160, 200):

<!DOCTYPE HTML>
<html>
 <head>

 </head>
 <body>

  <canvas width="400" height="100"></canvas>

  <script>

   var context = document.getElementsByTagName('canvas')[0].getContext('2d');


   var lastX = context.canvas.width * Math.random();
   var lastY = context.canvas.height * Math.random();


   var hue = 100;

   function blank() {
    hue = hue + 5 * Math.random();

    context.fillStyle = 'hsl(' + hue + ', 60%, 80%)';

    context.fillRect(0, 0, context.canvas.width, context.canvas.height);

   }
   setInterval(blank, 50);

  </script>

 </body>
</html>


How can I change the starting color?



Answers

The hue variable and the percentages in the hsl style controls the color.

To start with the RGB color 150, 150, 200, set the hue to 240, the saturation (the second parameter in hsl) to 25% and the brightness (the third parameter) to 78%.

To end at the RGB color 190, 160, 200, you need to loop until the hue value reaches 285. You also need a variable for the saturation value, as that should end at 20%.

HSL colors

Alternatively, use RGB colors instead of HSL colors...

Edit:
If you want to stop the interval, you need to store it's handle in a variable:

var interval = window.setInterval(blank, 50);

Then you can use it to stop the interval:

window.clearInterval(interval);

I don't know exactly why you would want to use a random value to change the color. For simplicity I just replaced it with a fixed value in this example:

var hue = 240;
var sat = 25;

function blank() {
   context.fillStyle = 'hsl(' + hue + ', ' + sat + '%, 80%)';
   context.fillRect(0, 0, context.canvas.width, context.canvas.height);

   hue += 0.9;
   sat -= 0.1;

   if (hue > 285) window.clearInterval(interval);
}

var interval = window.setInterval(blank, 50);

Edit:
If you want to repeatedly fade in and out instead of ending at a specific color, create a variable for the direction, and change it when you reach each ending color:

var hue = 240;
var sat = 25;
var dir = 1;

function blank() {
   context.fillStyle = 'hsl(' + hue + ', ' + sat + '%, 80%)';
   context.fillRect(0, 0, context.canvas.width, context.canvas.height);

   hue += 0.9 * dir;
   sat -= 0.1 * dir;

   if (hue <= 240 || hue >= 285) dir = -dir;
}

window.setInterval(blank, 50);
By : Guffa


Here is one way to do it. Tweak step as per your preference. Room for improvement by somebody who knows js better than me...

 var r1 = 150; var g1 = 150; var b1 = 200;
 var r2 = 190; var g2 = 160; var b2 = 200;
 var step = 0.02;
 var curr = 0;
 var blankIvID;

 function blank() 
 {
  var r = r1 + ((r2 - r1) * curr);
  var g = g1 + ((g2 - g1) * curr);
  var b = b1 + ((b2 - b1) * curr);
  curr = curr + step;
  context.fillStyle = 'rgb(' + r + ', ' + g + ', ' + b + ')';

  context.fillRect(0, 0, context.canvas.width, context.canvas.height);
  if (curr >= 1.0)
  {
    clearInterval(blankIvID);
  }
 }
 blankIvID = setInterval(blank, 50);
By : danio


You should check the hsl() function somehwere?

By : Ropstah


This video can help you solving your question :)
By: admin