DI-Colors

Digital Images - Colors - Changing Colors in Photographs

Change the Yellow Flowers to Red ones

Download the file below - "Digital_Image_Color_1"
Download the image - "flowers.jpg"

Start up LiveCode (You can use any version of LiveCode (6.5 on up) Load the "Digital_Image_Color_1" stack

Then click on the button "Load File" and load "flowers.jpg"

Look at flowers.jpg. Yellow is made or red + green, so we know that the yellow parts of the image have high red and green values. So what happens if, for each pixel, we set red to 0? What are the RGB values for a typical pixel on the yellow flowers look like before this loop runs? What about after?

Do the following:

For each pixel, set red to 0
Edit the button "Change Color" and for every pixel, set the red to 0, leave the other lines commented out so they do not run.

put numToChar (0 ) into char (pixelStart + 2) of image1 // Red

in the code on the button "Change Code"

         repeat with tPixel = 0 to (origHeight * origWidth ) - 1
            put tPixel * 4 into pixelStart

            // get the color values
           put charToNum (char (pixelStart + 1) of image1) into tAlpha
           put charToNum (char (pixelStart + 2) of image1) into tRed
           put charToNum (char (pixelStart + 3) of image1) into tGreen
           put charToNum (char (pixelStart + 4) of image1) into tBlue

            // Change the color values (uncomment the lines and change them)
  put numToChar (0 ) into char (pixelStart + 2) of image1 // Red
            //put numToChar (0) into char (pixelStart + 3) of image1 // Green
           //put numToChar (0) into char (pixelStart + 4) of image1 // Blue
         end repeat


What do you see when you run it??

Ans:

Since the yellow flowers are made with red + green light, setting the red to 0 for each pixel results is greenish flowers. The green leaves aren't changed much, since their red values were near 0 anyway.

Now do the following:

For each pixel, set green and blue to 0

Edit the button "Change Color" and for every pixel, set the green and the blue to 0.

//put numToChar (0 ) into char (pixelStart + 2) of image1 // Red
put numToChar (0 ) into char (pixelStart + 3) of image1 // Green
put numToChar (0 ) into char (pixelStart + 4) of image1 // Blue

What do you see when you run it??
What happens?

Ans:

The result is known as the "red channel"
Seeing an image of just the red light areas

Setting green and blue to 0 everywhere, all that is left is the area of red light that went into the original image, aka the "red channel" of the image. The red light is most prominent for the area of yellow flowers, which makes sense as we know that yellow = red + green.

Making less drastic changes

Set the Red to double the Red

e.g. in the Repeat loop:

put charToNum (char (pixelStart + 2) of image1) into tRed

//put numToChar (0 ) into char (pixelStart + 2) of image1 // Red

put numToChar (0 ) into char (pixelStart + 3) of image1 // Green

put numToChar (0 ) into char (pixelStart + 4) of image1 // Blue

put numToChar (tRed * 2 ) into char (pixelStart + 2) of image1 // Red

Does that make the photo more red? Do the yellow flowers change?

Set the Red to 50% of the Red already there (cut it in half)

e.g. in the Repeat loop:

put charToNum (char (pixelStart + 2) of image1) into tRed

put numToChar (tRed * 0.5 ) into char (pixelStart + 2) of image1 // Red

Does that make the photo less red? Do the yellow flowers change?

Examples to Try

Example #1

Example Suppose we want to change the yellow flowers to look orange
Set the green value to 75% of its original value (i.e. * 0.75)
(Try to work out the code, then look at the solution below)

Ans:

put charToNum (char (pixelStart + 3) of image1) into tGreen

put numToChar (tGreen * .75 ) into char (pixelStart + 3) of image1 // Green

Example #2

Set red, green, and blue each to be * 0.75 of their original values, then try 0.5 and 0.25
What is the code to do this?
What is the effect on the image?

Ans:

put charToNum (char (pixelStart + 2) of image1) into tRed

put charToNum (char (pixelStart + 3) of image1) into tGreen

put charToNum (char (pixelStart + 4) of image1) into tBlue

put numToChar (tRed * 0.75 ) into char (pixelStart + 2) of image1 // Red

put numToChar (tGreen * 0.75 ) into char (pixelStart + 3) of image1 // Green

put numToChar (tBlue * 0.75 ) into char (pixelStart + 4) of image1 // Blue

Example #3