ICM | Week 1

Last week in class we discussed about how through computation, we can simulate and create things that are most of the time hard for humans. Unlike the human brain, computers are precise, tireless, and perfectly logical.

I have a wide array of interest that intersects with computation (sound sampling! games!) but for this post I want to highlight two things that I think are only possible through the precision and tirelessness of computation.

1) Making the Abstract Meaningful & Digestible

A few weeks before I flew to NY, I came across the blog of Mike Bostock , the ex graphic editor of New York Times. He wrote a very long (I only managed to read up until the first section) but super interesting essay titled Visualising Algorithm.

Now, visualising usually involves using algorithm to visualise data set, so visualising algorithms sounds very...meta.

But Mike's visualisations of different algorithms offer a very different framework of understanding widely used algorithms. He could show how manually tedious each iteration of algorithm is, how efficient, and how... interesting a computational algorithm can look. Like how a random-sampling algorithm could look so organic, almost like microbes spreading on a cultured petri dish.

Taken from Mike's blog. Please please read his essay if you have the time.

And I think it is amazing how we can use computation to illustrate or to translate very abstract concepts into something that our human brain can readily digest. As Mike aptly wrote:

"Visualization leverages the human visual system to augment human intellect: we can use it to better understand these important abstract processes, and perhaps other things, too."

2) Digital Art & Digitally-Enhanced Performance

This is somewhat a passion of mine. I have produced some shows professionally before, but I have always wanted to direct or choreograph a performance that, through the use of interactive media, could capture the curiosity and imagination of the audience.

(Note: the following reference is not exactly new or considered cutting edge in 2017, but anyway...)

When I saw this (back in 2013) I was like, "Whoa! I want to do that too!"

So the video above is the girlband Perfume performing in Cannes with fan-generated art projected onto their dresses. At one point the projection could even follow them dancing around.

Other than fanboy reasons, there are couple of things why I think this piece is particularly interesting and relevant for this post:

Through computation, the producer of the piece could facilitate fans to create "dresses" for the girls.
By recording them and then played back the "dresses" during the performance, it created a kind of anachronistic interaction between the girls and their fans.
Projecting onto moving bodies are definitely difficult, so I suspected they used sensors or some kind of algorithm to precisely calculate where to project the art.

Sketching on p5.js

Disclaimer: I had prior experience of programming, but the last code I wrote was probably back in 2014. So that's like... 3 years back.

I started by "drawing" the sketch I drew during class using the web editor.

It was a good refresher, and I liked that I did not have to install any IDE to compile my code.

One thing that I realised though, was that I had to precisely determine the coordinates of the shapes, and that proved to be quite the mind gymnastics in the subsequent drawing attempts.

For the next sketch, I had a very brief brainstorm on what I should draw. I decided that I should create something that has both geometric and organic shapes. Initially I thought on trying to replicate one of Picasso's painting, but yeah...

So I browsed behance.net and found a very cute icon of a planet by a couple of illustrators based in Kiev, Ukraine.

Very cute, very current, very relevant to ITP's recent classes. Click here for source.

I approached drawing the icon through the following steps:

Draw the simple shapes: big planets, smaller circles
Somehow create that gap in the planet outline
Somehow draw the ying yang looking shape
Somehow draw the sine wave
Randomly generate the mini rectangles, just for fun

Step 1 was pretty straightforward, and for step 2 I decided to draw a quad to cover the planet outline. I chose quad because I can freely modify the angle of the "cut" in the outline.

Step 3 was when I had to stop for a while. I had to choose between 3 different functions to draw the ying yang shape: (1) curve, (2) bezier, or (3) arc.

I ended up using bezier because I am very much used to using pen tool in Photoshop / Illustrator. I could picture bezier's control points more easily in my head, and was able to control the curving better.

In Photoshop you can drag and pull those orange lines. I had to do it in my brain instead.

Next up is the sine wave, and to draw this I broke the sine wave into several sections that I could replicate. Here is an excerpt of the code:

//sine wave, control point: +/-8 in x-axis... //...width of each line section: 20 bezier(100, 270, 108, 270, 112, 280, 120, 280); bezier(120, 280, 128, 280, 132, 270, 140, 270); bezier(140, 270, 148, 270, 152, 280, 160, 280); bezier(160, 280, 168, 280, 172, 270, 180, 270); bezier(180, 270, 188, 270, 192, 280, 200, 280);

So each line of the code is a section of the wave, and I had to make 2 mirroring sections that I could replicate and translate (high school maths to the rescue!) on the x-axis.

So far so good (Note: I ended up not using the arc function).

Finally I was left with the mini rectangles, and I intended to make the rectangles appear and disappear randomly, so that they somewhat simulated twinkling stars.

I wrote basic iteration function inside draw() function and...

The rectangles just kept appearing and not disappearing. My canvas was filled with white :(

So I moved the planet-drawing lines inside draw(), so that the background and the planet codes were also looped (and hence drew over the previous generated rectangles).

And it works! Here's the final result: