Recreating the Past

Final thoughts:

  • impossible to find a visual artist i like (it’s mostly performance artists / choreographers / composers that i can think of – see below)
  • a new program for graphic design – tear up the syllabus and write your own RTP?
  • so i did a little reflection
  • main thing – the idea of “form driven content” // get to know your materials // why do it

My own takeouts / thoughts from each class:

pattern (vera monar)

  • hand computation vs computer
  • plotter aesthetics
  • how to use eyes better and not be restricted by default parameters and linear change

geometry (john and james whitney)

  • threshold of perception*
  • how to derive feelings from geometry
  • sine wave as change engine

typography (muriel cooper)

pixels (ken knowlton)

  • pixel kernels (for blurring and sharpening) / dilation, erosion
  • dithering
    Screen Shot 2563-07-22 at 23.26.36.png
  • image making technology*

image (jason salavon)

  • videos / series of images / sorting images
  • images as information* (titanic average frame color)
  • averaging / mod

body (myron krueger)

  • virtual body, reduced body
  • what interaction does digital bodies allow?
  • manipulation of time (delay) / space (scale)



Final reading:

This is how one pictures the angel of history. His face is turned towards the past. Where we perceive a chain of events, he sees one single catastrophe which keeps piling wreckage and hurls it in front of his feet. The angel would like to stay, awaken the dead, and make whole what has been smashed. But a storm is blowing in from Paradise; it has got caught in his wings with such a violence that the angel can no longer close them. The storm irresistibly propels him into the future to which his back is turned, while the pile of debris before him grows skyward. This storm is what we call progress.

—Walter Benjamin on Paul Klee’s Angelus Novus from Theses on the Philosophy of History, 1940

“What new cultures are emerging through the use of these media? What does it mean to be “socially” distant? And in a socially distant society, where does the burden of social responsibility fall and fail? How will media technology, and/or the related arts, change as a result of this halt?”

Implementation from class:

Artists I’d like to study:

Pending relating to class:

  • learn about jpeg*
  • windows of new york – generative building composition
  • screen print layers (how to separate layer?)

More from class:

*important points


If I must choose: Anne Teresa De Keersmaeker


Structure and choreography



Glitch / Deformation (Rosa Menkman / Steina and Woody Vasulka)

An Informal Catalogue of Slit-Scan Video Artworks and Research. Compiled by Golan Levin.

3D timelapse slitscan

Screen Shot 2563-07-15 at 13.53.48.png

selected sentences from reading –

“Beneath our eyes there is being solved the most complex problem of culture: utilitarian form becomes pure creative form.”

A glitch is a mess that is a moment, a possibility to glance at software’s inner structure, whether it is a mechanism of data compression or HTML code.

A glitch is stunning. It appears as a temporary replacement of some boring conventional surface; as a crazy and dangerous momentum (Will the computer come back to “normal”? Will data be lost?) that breaks the expected flow.

more reading – Rosa Menkman ‘A Vernacular of file formats’:

lines (try to work with web GL) :

Screen Shot 2563-07-16 at 11.18.03

delay (save frames) :

Myron Krueger

Reading:  dinner with myron


The point is…

Screen Shot 2020-07-09 at 12.10.22 PM

I got as far as detecting contours but wanted to do live interaction (between two people, using glitch).

My rendition (video by Pichet Klunchun):
At first wanted to do posenet but didn’t work.

Thai dance = high art // what if pop?

(how to make the colors pop?)

The important part is… getting a clear background

Screen Shot 2020-07-09 at 12.09.44 PM

code examples:

video source:

Jason Salavon

Created using frames from videos created using GANS. Original video with real humans×1080/

Unable to average the frames, I ended up drawing the frames on top of each other with very high transparency. Mathematically this should yield a similar result? If transparency level == number of frames.

I’ve worked with a similar technique in the past trying to replicate a pinhole camera image i.e. creating a digital pinhole (long exposure) image with a video.

There are digital artefacts that end up looking like paper texture in what is supposedly empty spaces (the background).

snap webcam every time button is pressed, then average:
snap every 60 frames from video,  then average:

download - 2020-07-02T122843.405.png

Muriel Cooper

Sentence from The Shape of Words reading  – “A poem only communicates if read slowly: only then does it have time to create a state of mind in which the images can form and be transformed.”

Other artists mentioned in class: Jacqueline Casey, Ralph Coburn, Dietmar Winkler, Aaron Marcus

Interesting points on Muriel Cooper from this Google Talk by David Reinfurt –

Screen Shot 2563-06-10 at 23.51.13

Screen Shot 2563-06-10 at 23.42.46

Screen Shot 2563-06-10 at 23.49.14


The article “Words, Images, Tools and Ideas” would try to fulfil the following criteria:

  1. It would make use of the tools, processes and technologies of graphic arts media as directly as possible and the tools would be integrated with concept and product. Many of these are in the workshop. In this case, they include a heavy use of all forms of photography and our computer graphics system for both images and typography
  2. The author would be the maker contrary to the specialisation mode which makes the author of the content the author, the author of the form the designer, and the author of the craft the typographer / printer
  3. Visual and verbal representation of the ideas would be synthesised rather than separate
  4. Time would remain as fluid and immediate as possible, leaving room for feedback and change

Notes and questions regarding concept:

  • Emphasise on process
  • Mix digital and analog; print room next to dark room
  • What does it mean now that we’re on screen? How do we emphasize on process?
    • How do we think in code when code isn’t visual?
    • Do we approach it with the abstraction? e.g. What’s an ‘if’ statement? What’s a for loop? What are the mathematical paradoxes? // Or do we draw/sketch out first?
    • Media is always influenced by medium? // Infinite loop between our perception and medium?
  • Muriel Cooper influence on David Reinfurt – Doing the work and being aware of doing the work; interrogating what it means to be doing the work — questions assumptions that exist

Notes and questions regarding technical parts:

  • How to get fill of each character? Calculate midpoint between all points?



e08e4629c4eac317677b60c278cb77ecdownload - 2020-06-10T184832.522



download - 2020-06-10T184040.305

download - 2020-06-11T100711.230

Rite of Spring cover can only be seen from far away

Screen Shot 2563-06-11 at 13.00.41

Screen Shot 2563-06-11 at 13.00.41

More reading:

Screen Shot 2563-06-11 at 08.37.24Screen Shot 2563-06-11 at 08.38.23


Other recommended websites and studios:

This week’s reading:


Vera Molnár

CONCEPTS (copied from class notes)

Recreating her past- 

Constructivism. During this period, she also took the work of Piet Mondrian and Paul Klee as starting points for her own investigations.

Rules –
#combination #permutation #purposefullyrandom #aestheticshock

For her, art was not about starting over or making a break. It was about pushing it forward into new areas of perception. Basic to this investigation was the relationship between the line and mathematics — what kind of rules could be used to make a drawing? Rules, of course, are central to three-point perspective and to Islamic geometric design. Josef Albers worked according to rules to learn how color interacted. LeWitt set up rules so that others could make his drawings.

Mystics > rationalists- 

The journey she undertook is dazzling. Although there is nothing in the show to indicate Molnar’s beliefs, other than her devotion to establishing and following a strict set of rules, I was reminded of the opening statement in Sol LeWitt’s Sentences on Conceptual Art (1969): “Conceptual artists are mystics rather than rationalists. They leap to conclusions that logic cannot reach.” The fact that she was a pioneer in the use of the computer and, by LeWitt’s definition, can be considered a conceptual artist gives us a glimpse into the unique terrain that Molnar occupies.



This week’s homework is to recreate some of her work. I especially enjoyed the rectangle series because of their bold and minimalistic qualities. The composition (position and rotation), size, color saturation become very apparent when there is less to look at. As a result I chose to create the studies below.

For this first week I used p5.js

My personal takeout from recreating her work:

  • It’s not the expected parameter to change because it’s not to achieve a perfect composition or symmetry
  • Wonder if she starts by hand / learning to look closer at what parameters make it feels like she did this by hand?





download - 2020-05-27T172453.221

Code (click for variations):

Surprising line of code (key ingredient?):

  • The random number of squares in each of the 9 squares
  • The difference in tightness between columns and rows

Feelings: shakey, vibration, buzzy, much like sound visualisation



download (71)


download - 2020-05-27T170450.380

Code (click for variations):

Surprising line of code (key ingredient?):

  • The perception of tightness comes from both sizes and positions, how to balance?

Feelings: abstracted waves, order in chaos, trying to make sense





download - 2020-05-27T212406.142

Code (click for variations):

Feelings: cracked, movement, unstable, trying to hold together





download - 2020-05-27T195640.631

Code (click for variations):

Feelings: overwhelming, pattern finding, lost, dizzy



Screen Shot 2563-05-28 at 10.10.38


Feelings (very different for each variation): 1 watching it fall, 2 chasing, 3 holding tight in position while the other falls, 4 falling together


Other experiments: having done a few copies I tried my own. Here I tried to visualise the feeling of a tight fit that is almost perfect. And the two squares trying to fit together.

This may have been better if the square was actually different from the hole?

More favorites:

Screen Shot 2563-05-27 at 21.40.51

Relationship between the left and right side? What if these were off slightly?

Screen Shot 2563-05-27 at 21.42.56

Very right. Different levels of tightness gives different feelings? Left: rigid, fitted, can’t move, perfect. Middle: calculated rightness, structural integrity. Right: breathable, crunched. (are these all just relative?)

Screen Shot 2563-05-27 at 21.52.58

How to create this sense of depth in 2D?

Screen Shot 2563-05-27 at 21.57.08

Perfect overlaps. Unexpected blend? The high contrast makes me more dramatic. I got started on this last one but realised it needed to be drawn with points for the perfect overlaps. How does blend mode work?


Computer Grass is Natural Grass:

Sentences from reading:

  • It may take a life-time to develop a computer program to make one new communicating pen line which is meaningful for us.
  • What my hand-eye draws is different from what the computer draws. A computer helps by offering new visual ideas. These ideas in turn enrich new hand work which generates additional ideas which extends my thinking about computer generated lines.
  • That it is possible to use mathematical formalism and pure geometry while attempting a humanistic exploration to us is one of the primary advantages of the use of the computer as a drawing medium.

1234, Tuning-In


“Music is the pleasure the human mind experiences from counting without being aware that it is counting.” Gottfried Leibniz

Peeling apart the layers between our sensorial experiences and our cognition.

Working with numbers I started being interested in the act of counting. It is one of the most basic forms of structure we take for granted. Did you know children have to learn to count in one to one correspondence? As if it isn’t obvious that counting is one to one.

1234 is an installation which asks people to count together. It is about deep listening.

So how does it work?

There are two groups: L and R, everybody is connected to the same sketch


The interface looks like this.

Screen Shot 2563-05-06 at 06.41.38.png

They can’t see each other’s screen. But they can hear each other. One ear Group A, the other ear Group B (optimised for maximum confusion).

Demo video (STEREO):

Last notes on fabrication (MAKE 8)

Milling to every bit of material I had on hand


Able to fit in threaded inserts with a little bit of super glue and sanding. I adjusted the holes to be closer to the middle, leaving more room for the edges.


Everything came together in the end!


I then assigned each participant a specific channel for the experience.


Delivered to people by foot (great break, great fun interacting with physical humans, even from a distance).


And the time is here!

Screen Shot 2563-05-06 at 06.53.34 copy.png


Screen Shot 2563-05-06 at 06.55.48.png

(tease) 0:00 – 1:05 // (end) 2:10 – END

This is after 5 tries:

It is about the interaction, do you choose to lead? Follow? Create a unison? Counterpoint? 

People usually stop when there is a distinct pattern of rhythm.

The response “Visceral, the stereo setup makes it very disorienting, you don’t know whose is whose, it’s restrained which amplifies the satisfaction when a pattern appears.”


masstuningArtboard 2.JPG

Thank you Ada, Wenjing, Louise, Jake, Matt, Noah, Arnab

More on slides:

First One Done, 8 To Go

A Single-Channel MIDI Instrument

IMG_0250 2.jpg

IMG_0252 2.jpg


The many steps before that…

Prototyping and fabricating week!

The goal here is to make it as thin as possible in all dimensions, width, height, depth.

I started off by taking apart one of the slides to see what it’s made of and how I can make it thinner.


Turns out there is no way to make it thinner except if I make the slide itself a circuit board…

But, that’s not happening! Too risky and no parts.


I then tried different ways to stack all the components together to find the best solution.


What’s the best way to package them all?


After trying a few variations, I made a sketch of the ideal scenario.


Once I had the idea, I tried out with the cardboard prototype to get a sense of scale (the PCB here is used to represent the board + wires).

IMG_0172 2.jpg

I was quite happy with how thin I got it to be.

IMG_0173 2.jpg

I then tried milling with leftover materials I had to get a sense of the depth of the pocket for the slides and boards.


Once I had the pockets I then worked on the wiring.


And this is the compilation of everything I tried before finalising the design and parts.

IMG_0267 2.jpg

Finally I put all the best pieces together …

IMG_0260 2.jpg

Once put together, I was satisfied with the outcome.

Only 7 mm (around 5/16″) gap between top and bottom pieces! And the width x height is 10 x 2 cm.

IMG_0250 2.jpg

IMG_0252 2.jpg


Yay, this worked:

Sadly, the pictures are not what they seem…

This is the reality


Once I decided on the optimal measurements and fixed the files, I started shopping on McMaster-Carr. SO MANY OPTIONS! SO OVERWHELMING! I must have spent around two hours on this website.

Screen Shot 2563-04-21 at 17.58.25.png

Waiting for parts to arrive. These are the expected dates:

  • Soldering paste: April 24 // I have this problem where the very tip of my soldering iron doesn’t heat up (but it’s new and not oxidised, what’s wrong?)
  • Boards: April 24
  • Screws and threaded inserts: April 21
  • Black rubber feet: April 28

To do next:

  • Assemble parts this weekend
  • Screen Shot 2563-04-21 at 23.31.01.png
  • Program the ‘mass tuning-in’ software
  • IMG_9588.JPG
  • Playtest with people who live around Downtown Brooklyn

Random questions (note to self):

  • Milling pocket, CAD? Illustrator? Is there a reason they move? Re-home?
  • Best practices?
  • Add channels on top?

More stuff…


Eagle SCH and BRD


^ (Project using Beetle board instead of custom PCB)

Custom PCM Eagle files and PDF:


  • Do we need to connect GND and VDD on each side of the chip together?
  • How much warning is allowed regarding the wire touching (the pins on the chip already has warning)
  • What are the 5×2 pads on the sides of the micro USB? Are they to lock the cable? Or should they be connected to something?

NOTE: the 3 headers are to connect to the slide // I tried to model the slide but doing it this way saves space because the USB connector is at the same spot as the pins on the slide

Screen Shot 2563-04-18 at 18.49.56.png

(Maybe I want to make cut-corner edges to make them fitted to the wood/acrylic underneath)

This is the sketch of each layer of the device. The PCB in this case will replace the Beetle board (at the bottom).


Once assembled, the device will look like this