W2263 Gradients

Within these castle walls be forged Mavens of Computer Science ...

— Merlin, The Coder

Prerequisites

• W2262 Filled Paths

Introduction

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

Paths may be filled with gradients as follows:

1. . Declare the gradient as a property of the painter
2. . Create the gradient (there are two types, linear and radial) and specify the coordinates over which it will range
3. . Create the colors for the gradient (using either standard CSS names or creating your own color via RGB)
4. . Add the colors to the gradient specifying its "stop" position
5. . Setup the gradient
6. . 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)

}

Exercises

Exercises

• 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