Gain insights into computer graphics with Python's Pycairo library. Learn about pixel vs. vector graphics, create complex shapes, work with transforms, text, gradients, and more for VR and game development.

Computer graphics in Python by Martin McBride_468 x 60.png

pycairo.tar.gz

Pycairo

In this course, you will use Python’s Pycairo library to draw complex shapes. So if you have an appetite for virtual reality, or game development, then this course will serve you well.

You will start with basic concepts like: What is the difference between pixel and vector graphics? After that, you will learn to make basic drawings and then you will move on to complex shapes. Throughout, you will cover important concepts like transform and state, working with text, gradients, and a whole lot more.

By the time you finish this course, you will have a powerful new library at your disposal, and you’ll be able to construct beautiful graphics that users will love.

Computer Graphics in Python and Pycairo

# What is a linear gradient?

A **linear gradient** is a gradient that blends smoothly from one color to another. Here is an example of a circle filled with a linear gradient:

The source is a **gradient pattern**. As with the solid pattern, this fills the whole user space. When this is applied to the path, the resulting output is a circle filled with the gradient. The top of the circle is red and the bottom of the circle is blue. The color gradually changes from red to blue, as we move down the circle.

This is the code to draw the gradient:

import cairo
import math

# Set up surface
surface = cairo.ImageSurface(cairo.FORMAT_RGB24, 400, 400)
ctx = cairo.Context(surface)
ctx.set_source_rgb(1, 1, 1)
ctx.paint()

pattern = cairo.LinearGradient(200, 100, 200, 300)
# Position 0
pattern.add_color_stop_rgb(0, 1, 0.5, 0.5)

# Position 1
pattern.add_color_stop_rgb(1, 0.5, 0.5, 1)
ctx.set_source(pattern)

ctx.arc(200, 200, 100, 0, math.pi*2)
ctx.fill()

This code is similar to the one given in the previous example, but instead of a solid pattern, we created a linear gradient.

The `LinearGradient` accepts two points: `(x0, y0)` and `(x1, y1)`, which determine the extent of the gradient. In our case, we will use the points `(200, 100)` and `(200, 300)`. These are marked on the source image of the diagram above.

The solid black line from point `(x0, y0)` to point `(x1, y1)` defines the direction of the gradient and also its width. If we draw a band, at right angles to this line, the band will define the entire area of the gradient. The gradient is defined between the two dashed lines. This is the area in which the color varies.

> **Note**: The area that is outside the gradient band takes a solid color, (red above and blue below, based on the start and end colors of the gradient). There are other options, as we will see later. For example, we can make the gradient repeat outside the band.

The color of the gradient is controlled by adding stops. A stop sets the color at a particular place on the gradient. The rest of the colors are created by interpolating between the stops. The `add_color_stop_rgb` function takes four parameters:

```
add_color_stop_rgb(position, r, g, b)
```

The `position` 0 corresponds to the value of the gradient at the start point `(x0, y0)`. We set it to an RGB value of `(1, 0.5, 0.5)` which is a light red.

The `position` 1 corresponds to the value of the gradient at the `(x1, y1)`, and we set it to an RGB value of `(0.5, 0.5, 1) `which is a light blue. We will learn how to add extra stops for multi-colored gradients later on in the course.

One important thing to notice is that the position of the control points `(x0, y0)` and `(x1, y1)` is defined in the current userspace. This makes it easy to create a gradient that extends across the whole circle. We choose points that match the top and bottom points of the circle. Since the circle is centered at (200, 200) and shows a radius of 100, the points are `(200, 100)` and `(200, 300)`.

> **Note**: To be precise, the control points are defined in userspace using any transforms that were applied when the gradient was declared.


In this lesson, we'll learn about `LinearGradient` in Pycairo.

Introduction

Introduction to Vector Graphics

Basic Drawing Operations

Paths and Complex Shapes

Computer Color

Transforms and State

Working with Text

Gradients and Image Fills

Clipping, Masking and Compositing

Surfaces and Output Formats

Integration with Other Libraries

Conclusion

LinearGradient

What is a linear gradient?