W2263 Gradients

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

Merlin Merch

@codermerlin

Newsletter

Designed with pride in Silicon Valley, CA, USA