# How does interpolate color work?

## Recommended Posts

I created a blue gradient for the sky in my game. I took code from the Phaser example and edited it to only the most important parts. I studied the functions of each part but I can't figure out what one of the values in interpolate color is.

The docs says the value I'm looking at is "steps" but I'm confused as to why it needs a value of 215. The canvas is 600 heigh and 215 seems totally unrelated. Why does it have to be 215?

``````skyGradient = game.add.bitmapData(game.width, game.height);

var y = 0;

for (var i = 0; i < 600; i++) {
var color = Phaser.Color.interpolateColor(0x007aff, 0x00aaff, 215, i);

y+= 1;
}``````

##### Share on other sites

Steps isn't a pixel amount, it affects the number of colors to use in between the specified start color and end color. so with less steps the color changes more abruptly, with more steps it's smoother, like how a graph with more data points is smoother.

##### Share on other sites

In this case I think using a currentStep value greater than 215 is wrong (it goes through 599).

##### Share on other sites

Yes any currentStep param greater than or equal to 215 (the steps param) would be color2 I think, since going past color2 would be extrapolation, not interpolation (actually I'm not 100% sure that it clips at the bounds instead of extrapolating past them, but would expect to honor bounds and stay between color1 and color2).

From the docs: "If the interpolation will take 100 steps, a currentStep value of 50 would be half-way between the two."