ICM 1: INTRODUCTION AND DRAWING

Assignment

Write a blog post about how computation applies to your interests. This could be a subject you've studied, a job you've worked, a personal hobby, or a cause you care about. What projects do you imagine making this term? What projects do you love? 

I like making. Machines, systems, experiences. It took me a while to realize that ideas are great, but it’s so much more rewarding to actually make them real. And once I have finished one thing, I want to do the next one. 

After working for the radio, DJing, teaching and educational technology, I slipped into programming last year while attending a machine learning for artists boot camp at School of MA in Berlin. We had to build one installation piece using neural networks in one month. Our teacher Gene Kogan told us: “Make the terminal your best friend because you’ll spend a lot of time with it”. So I ventured into my first explorations with python. And after a few days of total confusion I was able to appreciate its simplicity. I could finish my piece within the month of the bootcamp and was hooked - all of a sudden I had the tools in my hands to automate and facilitate pretty much any interaction between a computer and a human being on a physical and a digital level. Theoretically, at least. 

Since that I have been building a bunch of different experiences and installations. Some involve machine learning, some are performance pieces, some interactive sculptures. It’s been a great year of learning and playing for me since discovering the  strength of Python, pretty much all of my work I did in the past 12 months is facilitated by it.

There is only one limitation I discovered with my favorite programming language: It does not seem to be particularly good for visual stuff. So the last few months I discovered frontend programming, tried my ways around html, css, js, p5js, php. 

This year at ITP camp I got more into live web interaction (webcam, microphone), p5 makes things so much easier. I hope to build more connections with physical computing (ESP modules are my favorite) and the browser. I love the idea that with p5 I can now build digital and physical installations that can be accessed by everybody in every corner of the world with an internet connection. Earlier this year I built a simple tool that enabled users to send someone "real", physical hugs via Facebook messenger. Or at least a (pretty limited) physical representation of them. It was a very scrappy looking prototype involving straps around the chest attached to a servo … but it worked. I am so curious about these digital/physical interactions - you can move real things from everywhere, you can be to a certain extent physically present in two spaces - I love those global-digital-physical interactions / experiences and wanna build more of them in the next two years. 

 

I as well like conceptual pieces that are more situated on a meta level (is that the right word for it?) of media art. So much that my friend Jake Elwes and I built a homage-piece to Nam June Paiks “TV Buddha”:  A neural network is hallucinating images of buddha on a screen while a real sculpture of buddha is watching this process. The network is actually not at all accurate at this task and goes totally wild with its prediction due to the fact that we didn’t find enough images of Buddha to train the network properly. The results look a bit like Rothko paintings. I like these “imperfections” much more than total accuracy.

IMG_7496.jpeg

 

So hopefully I can as well continue with neural networks a bit here at ITP, so much is happening already with networks running just in the browser. That was unthinkable a year ago. So I am very excited about the future of browser based machine learning. 

Assignment: Create Your Own Screen Drawing (Use Basic Shapes, All In Setup)

But now back to basics and our assignment: While working on it I sometimes wished I would have been allowed to use for-loops to make drawing to the screen easier and less repetitive. But when doing the exercise I just realized how bad my orientation on the canvas really is. And how much better it gets when you have to draw a few shapes repetitively close to each other without using any loop-constructs. Limitation was a great learning experience!

For the main sketch I initially wanted to create some sort of tessellation as I am kind of re-discovering MC Escher via trying to understand multidimensionality in datasets. That said I scrapped the idea of tessellation pretty quickly after realizing that drawing without loops on a canvas would be really really repetitive. So I wanted to see how I can play with the limits of the exercise, namely that everything had to be out into the setup function. I asked myself how I can create some sort of motion and play with dimensionality and perspective. So I had the idea of creating some still-motion (what an inaccurate description), please forgive me for that …) that is inspired by building manuals an instructions and MC Eschers impossible physics.

 (via  wikimedia )

(via wikimedia)

For the aesthetics I looked at the minimalistic design of technical drawings.

 (via  NASA )

(via NASA)

The "motion" should be achieved through scrolling down the web-page. Like in a vertical comic but you scroll down to see the next scene. I used an extended canvas for this.

function setup() {
createCanvas(1400, 20200);
background(255, 170, 170);
// draw a lot of things
}

I came up with the idea of a surreal and utopian manual for a water-releasing object that morphs into different structures while the water is pouring down.

Screen Shot 2017-09-10 at 5.30.27 PM.png

It essentially pours water on itself, its different forms - which is a nod to MC Escher’s impossible perspectives in his drawings. Albeit a pretty basic one. And not that obvious when looking at it. After drawing it I realized that it probably took as well a few hints from the iOS game monument valley . But I focused on a more minimalistic visual language that should reflect the futuristic machine based vision of the drawing (maybe more a mix of Akira and Ghost in the Shell animes). The annotations that should hint at real manuals and technical drawings are inspired by Braille letters. 

 (via  wikimedia )

(via wikimedia)

I tried to explore non-letter encoded descriptions that look as if they are somehow alien but understandable (the simple dot at the last description marking the end of the story / explanation).

 

In my process I used mainly triangle, rectangle and circle function. I applied different opacity to the waterfall to create a see-through effect as a last argument to the fill function:

 //draw waterfall (part 3)
fill(191, 255, 249, 98)
noStroke();
quad(580, 10048, 590, 10048, 575, 10085, 560, 10081);
fill(191, 255, 249, 98)
triangle(520, 10079, 520, 10070, 550, 10079);
rect(520, 10079, 10, 9700);
rect(530, 10079, 10, 300);
rect(540, 10079, 10, 200);

It was a pretty smooth process and I had fun creating all the elements. Then I ran into a big difficulty: I wanted to round the edges of the annotation lines and (mistake! as I later found out by checking Chelsea's code - arc would have been so much cleverer) used the curve function for it. It took me a while to somehow understand the principle of the hidden start and end points of this curve. 

//draw illustration line 2 with end circles
stroke(230);
noFill();
line(140, 10000, 540, 10000); 
ellipse(545, 10000, 5, 5);
curve(140, 10160,120, 10020, 140, 10000, 140, 10000);
line(120, 10020, 120, 10160);
curve(120, 10200,120, 10160, 140, 10180, 280, 10150);
line(140, 10180, 430, 10180);
ellipse(435, 10180, 5, 5); 

I ended up trying to guesstimate the starting points - tedious, tricky and with a very low success rate.

Screen Shot 2017-09-07 at 5.12.42 PM.png

Apart from my difficulties with getting the curves right I really liked the simplicity of the p5 library: The shapes are easy to understand and to combine with each other. 

Regarding the storyline there is still lots of room for improvement in my sketch: the waterfall is too long and it is hard to understand what is going on while scrolling down the page. A few more narrative parts are missing here. I need to add hints for this downward-movement and maybe as well come up with something more interesting at the bottom of the page - lots to work on in the next few days. 

Screen Shot 2017-09-10 at 6.23.32 PM.png

 

I mainly used the classic offline editor for my work as I couldn’t figure out how to preview my sketch fullscreen in the online version without going via the sharing option. Maybe I should just always have one tab open with the shared sketch in there and use the editor in the other tab. Then it should work nicely. 

So far I really liked the exercise: Finally I learn things in a structured way and gain a solid understanding of programming without having to consult stackoverflow all the time.