(Dis)connected by Tibout Shaik

An audiovisual series that explores the paradoxical nature of our over-connected world.

We are objectively moving more and more into the digital world. Increasingly connected through technology, and while its undoubtedly clear there are a lot of advantages to our interconnected world, it also seems to feel more dystopian. Soon we may no longer be able to realize what is objectively real. As if the more connected we become; the deeper we explore the possibilities of technology; the further we move away from the lives right in front of us. When was the last time you took time to observe a leaf falling from a tree, carried on the wind? Watched a beautiful sunray coming through a window? Listened to a gentle piano tune for a while? It feels like the whole world is collectively forgetting to enjoy moments like these. (Dis)connected tries to emulate the sentiment of those moments, while contrasting it at the same time with a darker, nostalgic undertone.

(Dis)connected is a series that invites you to take your time to really appreciate each piece. The visual artwork has soft swaying analog cables on a breeze,  with a play on light in the background, as if days are going by. Cables, for decades now have been used to connect appliances, transmitting either electricity or data. The cables in (Dis)connected are clearly connected to something and leading somewhere, but we do not know to what or where. 

The long form generative auditory work complements the soft swaying of the cables. At times the generated soundtrack is soothing, nearly meditative, at other times it becomes slightly off-tune and the sine wave changes. Forcing the viewer into the disconnected sentiment. The entire piece purposely glitches at times, disturbing both the auditory and visual state. Asking you to take a look at your own reality both in the digital and the physical realm.

For color palettes works from both traditional and crypto-native artists resembling the sentiment of (Dis)connected were incorporated. You may recognize palettes utilized by Van Gogh, Rothko, Picasso, XCopy, Grant Yun and more. There are also a handful of custom palettes that aren"t related to other artists.

One of the artist inspirations for the work was Ryan D. Anderson, who creates incredible moody animations often accompanied by piano music. Ryan really has mastered the duality of soothing animation and music in a usually quite dystopian or nostalgic world.

On a technical level, where (Dis)connected is really breaking new ground is in the melodies. Most generative art series working with sound use none or fairly simple music theory. The melodies in (Dis)connected are created by first selecting one of 60 different scales (a scale is any set of musical notes ordered by fundamental frequency or pitch) and combining them with one of 16 different chord progressions (a chord progression is a succession of chords). Every beat, the chord is matched to the scale and during the beat musical notes that fit that chord can be played as well. The number of notes varies per beat, per melody and per piece. For each piece there is a generative main melody which is repeated throughout the piece and between each main melody a new custom melody is generated. In essence creating a musical piece that can play into infinity, together with the animation, and will continuously sound slightly different. It"s also worth noting that the entire work is coded in vanilla JavaScript, meaning no external libraries were used.

Most browsers don"t support the auto-playing of sound. Once your piece has loaded in tap, click or press any key to start your (Dis)connected piece. As the animation can be quite heavy there is an option to set a "hq" parameter in your URL (you do this by adding "index.html?hq=false" at the end of your live URL), especially on mobile or high DPR screens (e.g.: retina screens), it is recommended setting hq to false.

(Dis)connected #18

(Dis)connected #19

(Dis)connected #20

(Dis)connected #21

(Dis)connected #22

(Dis)connected #23

(Dis)connected #24

(Dis)connected #25

(Dis)connected #26

(Dis)connected #27

(Dis)connected #28

(Dis)connected #29

(Dis)connected #30

(Dis)connected #31

(Dis)connected #32

(Dis)connected #33

(Dis)connected #34

(Dis)connected #35