Linear and Radial multi-gradients

This activity has the following desired goals:

• Learning about linear multi gradients (A, M).
• Learning about radial multi gradients (A, M).
• Learning to apply the above ideas to make pleasing drawings (M, T).

Step 1

Type in the following code and run it:

clearOutput()
val numbers = List(1, 5, 3)
println(numbers(0))
println(numbers(1))
println(numbers(2))

Q1a. What do you think the above code is doing?

Explanation

A List is a sequence of data values arranged one after the other with a well defined order of elements. e.g. List(1, 5, 3).

Every element in a sequence can be located based on its position or index within the sequence. Positions (or indices) start from 0 and go upto sequence-length - 1. For a sequence s with three elements, the first element can be accessed as s(0), the second element as s(1), and the third element as s(2).

If you want to arrange some data in your program in a List (which is an unchangeable sequence), you can use the List function to construct the list.

Step 2

Type in the following code and run it:

clear()
setSpeed(fast)
val cb = canvasBounds
val clr = cm.linearMultipleGradient(cb.x, cb.y, cb.x + cb.width, cb.y + cb.height, List(0, 0.7, 1), List(red, yellow, orange))
setBackground(clr)

Q2a. What do you think is a linear color multi-gradient?

Q2b. The above code creates a multi-gradient from which point in the canvas to which point?

Q2c. What are the colors in the multi-gradient? How are these colors distributed between the start point and the finish point?

Explanation

Function description:

• cm.linearMultipleGradient(x1, y1, x2, y2, distribution, colors, cyclic) - Creates a linear color multi-gradient between position (x1, y1) and position (x2, y2). The gardient is spread across this range as per the distribution and colors; distribution is a sequence of fractions, and colors is a sequence of colors. Both sequences should have the same number of elements. So, for example, if the distribution is List(0, 0.4, 1) and colors is List(red, blue, green), then the multi-gradient will be made out of red at the beginning of the range, blue at 40% of the range, and green at the end of the range. The cyclic parameter specifies whether the gradient should be repeated or not.

Exploration

Create a linear multi-gradient to fill a rectangle.

Step 3

Type in the following code and run it:

clear()
setSpeed(fast)
val cb = canvasBounds
val clr = cm.radialMultipleGradient(0, 0, cb.height / 2, List(0, 0.7, 1), List(red, yellow, orange))
setBackground(clr)

Q3a. What do you think is a radial color multi-gradient?

Q3b. The above code creates a gradient from which point in the canvas to which points?

Q3c. What are the colors in the multi-gradient? How are these colors distributed between the start point and the finish points?

Explanation

Function description:

• cm.linearMultipleGradient(x, y, r, distribution, colors, cyclic) - Creates a radial color multi-gradient between position (x, y) as the center of a circle with radius r and the boundary of this circle. The gardient is spread across this range as per the distribution and colors; distribution is a sequence of fractions, and colors is a sequence of colors. Both sequences should have the same number of elements. So, for example, if the distribution is List(0, 0.4, 1) and colors is List(red, blue, green), then the multi-gradient will be made out of red at the beginning of the range, blue at 40% of the range, and green at the end of the range. The cyclic parameter specifies whether the gradient should be repeated or not.

Exploration

Create a radial multi-gradient to fill a rectangle.

Exercise

Write a program to make the following drawing. The linear gradient background colors are – red, cm.darkOrange, and orange. The radial gradient colors are – cyan, blue, and black.