W2263 Gradients
Prerequisites[edit]
Introduction[edit]
Gradients may be used to fill paths (and other objects). Unlike solid colors where the value of each pixel is specified explicitly, when using a gradient the actual color of a pixel is calculated at each point through the use of a formula, based upon specified parameters.
Filling Paths With Gradients[edit]
Paths may be filled with gradients as follows:
- . Declare the gradient as a property of the painter
- . Create the gradient (there are two types, linear and radial) and specify the coordinates over which it will range
- . Create the colors for the gradient (using either standard CSS names or creating your own color via RGB)
- . Add the colors to the gradient specifying its "stop" position
- . Setup the gradient
- . Specify the fill mode for the path after ensuring that the gradient is ready
For example:
// Painter Properties
// Declare the gradient
let linearGradient : Gradient
required init() {
// Create the gradient and specify coordinates
let linearGradientMode = Gradient.Mode.linear(start:Point(x:0, y:0), end:Point(x:300, y:300))
// Create the colors for the gradient
linearGradient = Gradient(mode:linearGradientMode)
// Add the colors to the gradient specifying its "stop" position
let purple = Color(.purple)
let orange = Color(.orange)
linearGradient.addColorStop(ColorStop(position:0.0, color:purple))
linearGradient.addColorStop(ColorStop(position:1.0, color:orange))
}
override func setup(canvas:Canvas) {
// Set up the gradient
canvas.setup(linearGradient)
}
override func render(canvas:Canvas) {
// When rendering, specify the fillStyle
if let canvasSize = canvas.canvasSize,
linearGradient.isReady {
let fillStyle = FillStyle(gradient:linearGradient)
// Create path
let path = Path(fillMode:.fillAndStroke)
...
canvas.render(fillStyle, path)
}
Key Concepts[edit]
Exercises[edit]
- Create a new project, W2263, using W2262 as a starting point.
- Fill the background (sky) with a gradient.
- Fill all other objects with various, gradient colors. You must use a total of at least eight different colors (excluding black and white) and at least four different gradients.
- Add an animated sun which rises in an arc above the eastern horizon in the morning and sets below the western horizon in the evening, moving across nearly the entire canvas. The sun must initially appear in reddish hues, becoming a bright yellow at its zenith, and again in reddish hues as it sets. The change must be gradual throughout the "day".
- BONUS: Alter the color of the buildings in accordance with the time of day
Getting started:
john-williams@codermerlin:~/Projects$ git clone https://github.com/TheCoderMerlin/IgisShellD W2263
john-williams@codermerlin:~/Projects$ cd W2263/Sources/IgisShellD
john-williams@codermerlin:~/Projects$ cp ../../../W2262/Sources/IgisShellD/main.swift .
To compile:
john-williams@codermerlin:~/Projects/W2263$ ./make.sh
To execute:
john-williams@codermerlin:~/Projects/W2263$ ./run.sh
Your associated url will be: http://www.codermerlin.com/users/john-williams/dyn/index.html