 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.

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. #### Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
Tagged with: , ,