Concept
I grew up around my father’s paintings, he is a cubist, so when this assignment asked for a work of art made out of loops, my first instinct was to try and get something of his work into it.
His paintings have a similar touch. An Emirati figure in traditional clothing, but the face is never a face. In one it is a Pepsi cap and a cola glass. In another it is a Jumeira Road sign with a traffic light on top. In a third the whole scene is an arcade cabinet, Pac-Man and Space Invaders. The body stays traditional and the head is always something imported. That contrast is the thing I wanted to borrow.
What I ended up making is a hand doing the three fingers salute that H.H Sheikh Mohammed bin Rashid does three fingers up for win, victory and love. The whole canvas is broken into irregular shapes that slide up and down against each other, the way a cubist face is broken into planes that do not line up. The hand is made of exactly the same shapes as the background, so most of the time you cannot see it at all, I also got inspiration from one of the sources to create an illusion effect with the hand and implemented it.
Then it comes out. And as it appears, it also stops moving. Everything around it keeps sliding but the hand holds completely still. It is the one fixed thing in a field that never settles. Then it fades back in and rejoins, and comes back in the next color of the flag; red, then green, then white, then black.
Code Snippet
quad(
x + random(-j, j), y + random(-j, j) + d,
x + s + random(-j, j), y + random(-j, j) + d,
x + s + random(-j, j), y + s + random(-j, j) + d,
x + random(-j, j), y + s + random(-j, j) + d
);
This part of the code is where I was most proud of, creating those irregular shapes and making that motion of sliding against each other with the slide function, it took time and effort searching through references and working with the p5.js tutorials but I was finally able to get it. The quad() is what makes the shapes look shattered instead of like a grid. If you take out all four random() calls you are left with the plain corners of a square: x, y then x+s, y then x+s, y+s then x, y+s. Adding a small random nudge to each corner is the entire difference between a pixel grid and something that looks like a broken plane. That was the closest I could get in code to how my dad breaks a face into flat angled pieces.
Embedded Sketch
How This Was Made
This was made with a lot of references that were new to me. Most of them came from the p5.js reference site, where I found quad(), noise(), randomSeed(), lerpColor(), constrain(), and abs(). Each one ended up doing a specific job.
. quad() is what let me draw a four sided shape with corners anywhere I wanted, instead of rect() which is always a right angled box. Without it there is no fractured look at all.
. noise() gave me smooth randomness rather than the jumpy kind, so neighbouring facets get similar colours and the background reads as planes instead of static.
. randomSeed() solved a problem I did not see coming. The shapes flickered violently until I understood that random() runs fresh every frame, and resetting the seed at the top of draw() makes every facet keep the shape it had.
. lerpColor() mixes two colours by a proportion, which is what lets the hand fade out of the background rather than being switched on and off.
. constrain() clamps a number between two limits. I used it to flatten the top and bottom of the sine wave so the hand holds still at each end instead of permanently mid fade.
Reflection and Future Work
The thing I did not expect is how much of the piece is decided by numbers rather than by drawing. I never drew a hand. I wrote six conditions and tuned numbers until the silhouette matched a photo. That felt strange at first and then it felt like the point.
It also lined up with the Reas talk more than I thought it would. The shapes are random, but I chose the palette, the grid size, how far a corner can wander and how fast the fade runs. The randomness does the part I could not be bothered to do by hand, and it produces small irregularities I would never have thought to draw. That is the balance he was talking about.
For the future, I would use the mouseX to control how far the shapes wander, so the viewer decides how broken the image is, make the hand disappear in a better fade look than just fade without a proper effect.