Gradient Animation

In this challenge we are going to create some animated gradients by progressively changing the colour of the screen from one colour (e.g. red) to another (e.g. yellow).

RGB Colour Codes

Did you know that every colour on the screen can be represented using an RGB code (Red, Green, Blue) code. This code consists of three numbers between 0 and 255, indicating how much red, green and blue are used to recreate the colour.

For instance the RGB code for:

• Red is (255,0,0)
• Green is (0,255,0)
• Blue is (0,0,255)
• Yellow is (255,255,0)
• Orange is (255,165,0)

Check the following RGB Color picker to see how RGB codes work:

Learning Objectives

By completing this code we will investigate how for loops work to iterate through the code a fixed number of times.

We will use an increment in our loop that will go up (increment) by 1 after each iteration, to count from 0 to 255. We will see that we can also use a negative step to count down from 255 to 0.

Gradient #1:

Our first animation will be based on the following gradient:

It will consist of:

• 256 frames to shade from red (255,0,0) to yellow (255,255,0)
• + another 256 frames to shade from yellow (255,255,0) back to red (255,0,0)
• It will repeat the above steps 3 times so in total will consist of (256 + 256) x 3 = 1536 frames!

Check the code below: If this code does not work in Internet Explorer, try to access this webpage using Google Chrome.

Gradient #2: From red (255,0,0) to blue (0,0,255) to red (255,0,0)

This code is slightly different as we want the red code to decrement from 255 to 0 while the blue code increments from 0 to 255. Check how it’s done in the code below:

Gradient #3: From cyan (0,255,255) to magenta (255,0,255) to cyan (0,255,255)

Tweak the code in one of the trinkets above to implement this gradient.

Gradient #4: From cyan (0,255,255) to yellow (255,255,0) to cyan (0,255,255)

Tweak the code in one of the trinkets above to implement this gradient.

Gradient #5: From green (0,255,0) to yellow (255,255,0) to magenta (255,0,255) to cyan (0,255,255) to green (0,255,0)

Tweak the code in one of the trinkets above to implement this gradient.

Gradient #6: From black (0,0,0) to white (255,255,255) to black (0,0,0)

Tweak the code in one of the trinkets above to implement this gradient.