Ali Alhaddad – 2022 Teddy Rocks Maths Essay Competition Commended Entry

[Note: any confusing concepts will be accompanied with a superscript¹, along with a full description at the bottom]

Introduction

Have you ever traversed the internet, then come across a design such as the one in Figure 1, and wondered, “How on earth did they make that?” Eager to find out, you hop on your IDE² of choice and begin programming such a design.

How might you go about it? Every colour on Madeon is obviously assigned another colour, in a continuous fashion (similar colours are assigned similar colours). But lets tackle this investigation by asking a few questions:

How are colours being assigned colours?

But how do we create such a design?

Is this even possible to do? (we’ll come back to this at the end)

It’s good practice when problem solving to decompose the problem into small, solvable parts, especially considering how complicated this may end up being, which is what I’ve done with this essay.

What is a pixel?

Let’s start with the most important part of this essay: the pixel. On your usual 1080p screen, with 1920 columns of pixels, and 1080 rows (Tom, 2022), there are 1920 x 1080 = 2,073,600 pixels. Pixels are composed of a smaller red, green, and blue diode. Most visible colours can be created by varying the brightness of the individual RGB diodes. For a programmer, the colour of a pixel can be defined in two (of many) ways.

RGB

The first way is by specifying the different intensities of red, green, and blue, emitted by the respective diodes. The intensity takes up a whole byte thus, is an integer between 0 and 255. But it’s just fine for the intensities to be a real number between 0 and 255, since we can round to an integer if needed. We can define a colour, c, as an ordered triplet of numbers c(R, G, B).

Where 0 ≤ R ≤ 255, 0 ≤ G ≤ 255 and 0 ≤ B ≤ 255. Some of you may recognise this as being a 3D vector, where c lies in a cube with a side length of 255 units, and starting at the point, (0, 0, 0). This “cube”, is in fact called the RGB colour space, and can be visualised like so:

Every colour that has, is, and ever will be displayed on your screen, lives inside this box. Pretty cool, huh?

HSB

A second way of defining a colour is by its hue, saturation, and brightness (Wikipedia, 2022). The hue of a colour is essentially a point on a colour wheel, like the one below:

A colour’s saturation is the colour’s intensity. A high saturation means that the colour strongly contrasts with white, whilst no saturation whitewashes the colour. The brightness of a colour is just as you expect: the brighter the colour, the more it contrasts from black. Without any brightness, every colour, regardless of its hue and saturation, becomes black.

A colour, c, in this form, would look like the ordered triplet: c(h, s, b).

Where h lies in between 0 and 360 (like angles on a circle), s and b lie in between 0 and 100 (from 0 to 100% saturation or brightness). What would a HSB colour space look like? Well, it could be visualised as a cube, like so:

But wait! Unlike the RGB colour space, the hue loops around, so that a hue of 0 equals a hue of 360. Is there a way to visualise that? Well, yes, there is. Imagine that the cube is made of play-dough, so that you can mould it into any shape you desire. Then imagine taking the faces of the cube with hue value 0 and 360, then sticking them together. Do this cautiously: it is specifically stated that just the hue loops back on itself; any colour, with HSB components, is equivalent to another colour with a hue value plus 360, but equal saturation and brightness values represented by the equivalence relation: (h, s, b) ~ (h + 360, s, b).

The space looks like:

Maps

This section will define some important concepts and notation.

One useful concept is the map. A map relates every point in a domain to a point in a co-domain, often with a specific rule, also known as the function. The domain of a map is where the inputs of the function can exist. Similarly, a point can only map to another point in the co-domain. Such a map is denoted f: D → R.

Where D is the domain, R is the co-domain (R stands for range), and f states the relationship between points from both sets³. Examples of common maps are:

sin: R → [-1, 1]
(Sine can take in any real number, but can only output a number between -1 and 1)

f: [0, 4] → [0, 16] where f(x) = x²

Length: set of all strings of letters → N
where Length(string) = number of letters in the string

The domain and co-domain can by any two sets. In our case, we can take the set of all possible colours, and output another colour. The RGB colour space can therefore be defined as being the set: RGB = {(R, G, B) | R, G, B ∈ [0, 255]}.

The left side of the curly brackets, (R, G, B), is the form of the elements in the set (they are an ordered triplet). The right-hand side, R, G, B ∈ [0, 255], places a condition on the variables, stating that the variables, R, G, B are in (∈) the interval, [0, 255], or in other words, are between 0, and 255, including the endpoints.

Similarly, the HSB colour space as a set of points is: HSB = {(h, s, b) | H ∈ [0, 360], s, b ∈ [0, 100] and (h, s, b) ~ (h + 360, s, b)}.

On top of restricting the range of the HSB component values, the equivalence relation from earlier is also put in, as a requirement the points must follow (the notation is not exact, though).

Tools from Topology we’ll need

First, we’ll define what makes two things equivalent in the eyes of Topology. Here, two objects are equivalent if there exists some way to continuously deform one into another. If such a deformation or transformation exists, that does not tear the object, or glue some part onto another part, it is called a homeomorphism.

Two objects, A and B, are called homeomorphic, if such a homeomorphism exists between them, stated as A ≈ B (or sometimes as A ≅ B). One well known example is a homeomorphism from the surface of a coffee mug to a torus⁴.

Topology is essentially the study of properties of objects, or sets, that do not change under a homeomorphism. Volumes and lengths are properties of objects, but are not invariant under homeomorphisms, for obvious reasons. Some invariants include the boundary of an object, and its Euler Characteristic.

There are many beautiful theorems in topology, each worthy of a full essay. But for this essay, I’ll just bring out one theorem:

The Brouwer fixed point theorem (BFPT)

Generally, a fixed-point theorem (FP theorem) states that for a given map, under very specific conditions on the domain, co-domain, and characteristics of the map, there will be one point that maps onto itself. A fixed point follows the rule: f(c) = c for c ∈ D and c ∈ R.

The Brouwer fixed point theorem is a powerful, and applicable, FP theorem. In the case of three dimensions, it states that, for any map, f: D → D, where D is an object that lives inside the three-dimensional Euclidean space (your usual 3D space), if D ≈ B³, then there exists a fixed point in the map. B³ denotes the 3-dimensional ball, three-ball, or just the ball, formally defined as: B³ = {(x, y, z) | x² + y² + z² ≤ 1}.

One slight issue

It can be seen in Madeon’s videos, that every colour gets mapped to a new, different colour. But, using the tools brought up earlier, you can prove that no possible colour map can achieve this, without making some assumptions, because there will always exist a colour that maps back onto itself. The proof of this is surprisingly simple.

As discussed above, in three dimensions, the theorem can guarantee a fixed point, if:

1. The function maps from the domain onto itself,
2. The function is continuous (small changes in colour imply small changes in mapped colour), and
3. The domain is homeomorphic to a ball

We are interested in a map from the RGB colour space onto itself, so the first condition is automatically satisfied. But is the RGB colour space homeomorphic to a ball? Well, consider the following deformation:

This is, by definition, a homeomorphism. Hence, the RGB colour space is homeomorphic to the ball, and therefore, a fixed point will always exist in the map, by the Brouwer fixed point theorem (which is not good).

What about the HSB colour space? It turns out that this space, too, is homeomorphic to a ball. This is because when the saturation of a colour is 0, the colour becomes a shade of grey, regardless of its hue value, so the toilet roll shape in figure 5 collapses into a cylinder, which is also homeomorphic to a ball.

So, let’s assume that both components are non-zero. We can justify this by noticing that colours recorded on video may at least have a slight amount of saturation and brightness, regardless of how dark or desaturated the material is. Under this assumption, the HSB colour space (called HSB from now on) really does become the one outlined in figure 5. I’ll refer to the image in figure 5 whenever talking about HSB.

Now how do we show that this space is not homeomorphic to a ball? Well, recall that Topology is the study of properties that are invariant under homeomorphisms. If the invariant properties of two objects are not equal, they cannot be homeomorphic. One differing invariant (of many) does exist between both objects.

This invariant property is their boundary of the objects. The boundary of the ball is the sphere, by the sphere’s definition. I’ll leave it to you as an exercise to show that the boundary of HSB is in fact homeomorphic to a torus. It turns out that the Euler characteristic, another invariant property, of the sphere is 2 but is 0 for the torus. Since that property is invariant under homeomorphisms, the sphere and torus are not homeomorphic to each other. They are the boundaries of HSB and B³, and boundaries are an invariant property, thus HSB ≉ B³.

Summing everything up

In this essay, we went through two methods programmers define a colour displayed by a pixel: in RGB form or HSB form. We then looked at the visualisation of both methods, as the RGB and HSB colour spaces, which differed quite a bit, because of the equivalence relation for the HSB colour space.

We ventured into the world of maps, and defining terms such as:

• The domain and co-domain,
• A general function,
• The set definition of the RGB and HSB colour spaces.

Then we took a detour into the world of Topology, covering:

• What a homeomorphism is, and what makes two objects homeomorphic,
• Fixed points and the BFPT, and
• What the 3-ball is

Then used the BFPT to show that normal colour maps, like the design in Madeon’s music video, will always have some point that will stay the same under any possible map. By making a simple assumption however, we’ve shown that when using the HSB colour space, a fixed point is not guaranteed to exist (still might, but not guaranteed by the BFP theorem).

Thus, to answer the question I asked, we know now that all we need is a map from the HSB colour space onto itself. One such map includes: f: HSB → HSB where f(h, s, b) = (h + n, s, b) for any integer n. Which is something we can apply to every colour on the screen.

[The title of this essay is a reference to how overkill it was. As robust, and intriguing, as the math was in this essay, it was impractical. It’s often better practice in programming to mess around until you’re close enough to solving the problem.]

Appendix

Further reading (watching)

If you want to learn more about Topology, I highly recommend these playlists:

Full descriptions

¹ Like this one

² An integrated development environment; this is where code is written and run

³ A set is any collection of things (that may be easy to comprehend, or very abstract). For example, a cube, with side length 1 unit is the set of all points (x, y, z) such that x,y, and z run from 0 to 1.

⁴ A torus can be thought of as being just the surface of a doughnut, with a completely empty inside. A 2-torus, or torus for convenience, is defined as the following:

T² = S¹ x S¹ = {(x, y) | (x, y) ~ (x + 2π, y) and (x, y) ~ (x, y + 2π)}.

This can be visualised the HSB colour space, by joining the edge with x = 0 to the edge with x = 2π, and then the edge with y = 0 to the edge with y = 2π: