# Art with p5.js — Painting unorientable surfaces // Part0

A funky intro to topology and Processing.

That dancing character above is the shadow of the one of the weirdest surface that exist — a real projective space. This specimen is of dimension 2, and intimately known as RP². If you’ve never heard of this weirdo, it is the twisted cousin of the sphere, intimately known as S² and most commonly referred to a ball (more precisely its boundary). Most surfaces are easy to understand, at least intuitively, because we’ve seen them or made them. Take this old man for example, complex but simple to understand.

In our day to day life, what our eyes see is first and foremost surfaces, first 2d, then reconstructed to 3D by our brain thanks to having two eyes, then assumed full until proven wrong. That’s how we live in a world of volumes. That is why in common language, we don’t make the difference between a ball and a sphere. Until we kick it, there is virtually no difference between a football and a bowling ball. “Ouch” is the sound of that difference. In video games, CGI or 3D animated movies, nothing is ever filled — everything is empty, everything is a surface in R³.

In mathematics though, there is a very distinct difference between a volume and a surface in 3D space. One is two dimensional, the other three dimensional. That difference was artfully shown in the great novel Flatland, published in 1884, where the lives of beings living in a 2D space is described. For someone living in 2D, everyone is just a line….weird? Read the novel or check out this movie for entertaining mathematical fiction. On RP² things are even weirder. It is impossible for everyone to agree on what is right and what is left!

What we’re doing today is look at some very distinct 2D surfaces, embed them in 4D space and shine a literal projector onto them and move it around to see the weird ways in which their shadows move, all the while learning about Processing.

# The cast of characters — into to topology.

We’re going to take a topological view, i.e. two surfaces are the same if one can be stretched into the other. Surprisingly enough, the surface of a donut and that of a mug are then the exact same, which is commonly called the **Torus**.

With this rule in mind, the (closed compact) surfaces of every day reality are extremely easy to classify. They correspond to the top row here, where the list continues with triple torus, quadruple torus etc…

They are simply sphere with holes punched in them, the number of holes defining them completely, like their surface DNA. But the strange characters on the second row will never be the surface of an object we encounter. There are two reasons for it:

1 // The surface self-intersects unless it is in 4D space at least.

2 // The inside of that object would be the same as its outside, so it would be the whole universe itself.

How did we get there in the first place you ask? We lost orientation. Literally. Attempting to build them with stretchy fabric is the best way to understand. Take a rectangle, sew the long edge together, you’ll get a stretchy and hollow cylinder with two circles at both ends. Fill it up with cotton and sew the ends together and you’ll get yourself a donut pillow!

Point is that sewing the edges of a band shut gives us a Torus. Sewing them to discs make a non-hollow cylinder, which is topologically equivalent to a sphere. Now what if you started off by sewing parallel edges of the rectangle in opposite direction? take the band, twist it once to connect opposite corners together before sewing. You get a Mobius Strip.

The Mobius Strip has this crazy property that it’s easier to do a relay race than on a regular strip. Assume that you live on it and a friend of yours just moved over from a regular strip. They don’t know how cool/strange their new home is. To show them, you propose to do a relay race. You both stand at the starting line and will do one lap each. They start with the baton in their right hand, you stick your right hand back, ready to receive.

They start running, change hands so they can pass the baton properly but when they get there, they yell at you that you’re sticking the wrong hand out.

The magic of the Mobius strip is that after one lap your right hand became your left and you actually don’t need to swap hands.

The downside is that you’ll never be able to know agree with anyone what is right and what is left. There is literally no orientation defined on the whole band. Don’t be deceived by our calling it a band or strip though, it is closer to a disc than a band. Indeed it has just **one circle** as its boundary! If sewing two discs together gives a sphere, sewing two Mobius strips together gives the famed **Klein Bottle**. Sewing a disc to a Mobius strip gives RP².

There are other ways to obtain RP², such as the space obtained by gluing together the antipodal points S², or the space of all planes through the origin in R³, but I will let the interested reader search through youtube or actual literature for more.

The question we’re trying to answer today is the following, what would be the shape the shadow’s edge of these surfaces were we to shine a light on them? We’ll assume that they are semi-transparent, so that a shadow cast on itself propagates to the ‘ground’. The sphere gives a circle or an ellipse, depending on the angle of the projection. That is easy to visualise. The torus/donut can easily be seen as two concentric circles or ellipses when shining a light from right above them, but as soon as we set the light source at some angle, some surprises appear. These can be seen below. The interior curve suddenly ceases to be smooth and turn into two connected fishtails.

If the torus already has surprises for us. Take a minute to imagine what the Klein bottle and RP² have in store! We’ll have to do some coding to figure it out. Time to learn about Processing.

# Sources

Fantastic blog article by Kevin Binz: An Introduction to Topology