Blending Colors

Something else you may want to do with colors is blend one color gradually into another. Let's say we have a zombie in a horror game that is normally a sickly shade of zombie green but has recently emerged from a lava pit and is currently glowing a bright shade of fireball orange. Over time the zombie will cool down and return to its usual color. But how do we calculate the intermediate colors to make the transition look smooth?

We can use something called linear interpolation, which is a fancy term for moving from one value to another in a straight line. It is such a mouthful that game programmers prefer to use the acronym lerp. To lerp between two values, you find the difference between the second and the first value, multiply it by a factor between 0 and 1, and then add that to the first value. A factor of 0 or 1 will result in the first or second values, but a factor of .5 gives a value that is halfway between the first and second. Any other factors will result in a proportional value between the two end points. Let's see an example in Python code to make it clearer. Listing 4-5 defines a function lerp that takes two values and a factor and returns a blended value.

Listing 4-5. Simple Lerping Example def lerp(value1, value2, factor):

return value1+(value2-value1)*factor print lerp(100, 200, 0.)

This results in the following output. Try to predict what the result of lerp(100, 200, .75) will be.

To lerp between colors, you simply lerp between each of the components to produce a new color. If you vary the factor over time, it will result in a smooth color transition. Listing 4-6 contains the function blend_color, which does color lerping.

Listing 4-6. Blending Colors by Lerping import pygame from pygame.locals import * from sys import exit pygame.init()

screen = pygame.display.set_mode((640, 480), 0, 32)

color1 = (221, 99, 20) color2 = (96, 130, 51) factor = 0.

def blend_color(color1, color2, blend_factor): red1, green1, blue1 = color1 red2, green2, blue2 = color2 red = red1+(red2-red1)*blend_factor green = green1+(green2-green1)*blend_factor blue = blue1+(blue2-blue1)*blend_factor return int(red), int(green), int(blue)

while True:

for event in pygame.event.get(): if event.type == QUIT: exit()

tri = [ (0,120), (639,100), (639, 140) ] pygame.draw.polygon(screen, (0,255,0), tri) pygame.draw.circle(screen, (0,0,0), (int(factor*639.), 120), 10)

x, y = pygame.mouse.get_pos() if pygame.mouse.get_pressed()[0]: factor = x / 639.

pygame.display.set_caption("PyGame Color Blend Test - %.3f"%factor)

color = blend_color(color1, color2, factor) pygame.draw.rect(screen, color, (0, 240, 640, 240))

pygame.display.update()

If you run Listing 4-6, you will see a slider at the top of the screen. Initially it will be at the far left, representing a factor of 0 (fireball orange). If you click and drag toward the right of the screen, you can smoothly change the blending factor toward 1 (zombie green). The resulting color is displayed in the lower half of the screen.

You can experiment with blending between other colors by changing the values of colorl and color2 at the top of the script. Try blending between completely contrasting colors and shades of similar colors.

+1 0

Responses

  • sampsa
    How to use lerp to smooth colours?
    7 years ago

Post a comment