Recreating the Past

A collection of computational art studies from the past decades, along with my recreations and homage to their works using contemporary techniques.


Duration:  January 2022 - Present
Role:  Interaction Engineer
Team:  Kenny Kim
Tools Used:  JavaScript (p5.js), Processing, openFrameworks
Category:  MIT Media Lab | MAS.S66 - Recreating the Past

1. Vera Molnár's 'Lent mouvement blue, orange, rouge et noir,' 1955


Lent mouvement bleu, orange, rouge et noir, 1955, by Vera Molnar consists of 4 different colored circles in a 8 x 8 grid. I wanted to capture Molnar's sensibilities in her selection and composition of the colors, and I chose to assign specific color on each geometry within the grid. The code was created using an array, designating and assigning each ellipse/circle with the colors list. Random changes to the colors were added as a twist to the original by using mouseMoved(event), which was assigned to shuffle the colors list.

Tools Used: Javascript (p5.js)
Original Artwork: https://www.freshpressedart.com/post/76098828810/archiveofaffinities-vera-molnar-slow-movement/amp
GitHub: https://github.com/k-yr-k/rtp-VeraMolnar
Source Code: https://editor.p5js.org/k-yr-k/full/vU7cTZ8Ra


2. John Whitney 's 'Experiments in Motion Graphics,' 1968


John Whitney's "Experiments in Motion Graphics," 1968, was a relatively forward and modern masterpiece for the time. The artwork can resemble a Microsoft Windows screensaver in the 90s. Yet, the number of generative calculations that went behind creating this piece was what I wanted to re-create.

Using Processing, I first recreated the similar aesthetic of the 4:3 aspect ratio and the dark gray/black backgrounds. Assigning a number for the total lines, which in Whitney's art piece was 31, this number was referenced when creating the 'snake'-effect that follows the first line drawn. Next, Whitney assigned specific points to generate sine and cosine functions to create various geometries, mimicking Whitney's way of animating as closely as possible. Adjusting the movement speeds added a detail that he often used when transitioning from one animation to another.

I faced some challenges when trying to separate the delay in each yellow and orange line separately. Also, controlling how the geometry is drawn was the most challenging part of this recreation. Finally, Whitney used multiple 'scenes,' where his monologue explained that he did not create his animation in real-time but stitched between various scenes.

Tools Used: Processing
Original Artwork: https://www.youtube.com/watch?v=jIv-EcX9tUs&t=264s
GitHub: https://github.com/k-yr-k/Recreating-JohnWhitney


3. Muriel Cooper’s ‘The Mathematical Sciences: A Collection of Essays,’ 1969 

Tools Used: Javascript (p5.js)
Original Artwork: https://eyeondesign.aiga.org/no-164-cruz-novillos-ubiquitous-logos-a-stylish-political-magazine-50-years-of-national-theatre-posters-more/
GitHub: https://github.com/k-yr-k/rtp-MurielCooper
Source Code: https://editor.p5js.org/k-yr-k/full/X7KB9i6F7


4. Anni Albers’ ‘Untitled,’ 1969


Anni Albers' "Untitled" piece from 1969 is a grid of squares with two triangles in each, rotating in a random manner through the grid. I first counted and assigned the x and y axis to get square counts, and defined the size of the square. In Albers' work, there were never the same color assigned in each square, and the rotate occurred constantly. This allowed me to make nested for loops within each squares, and after assign random rotations between 0, 90, 180 and 270 degrees. Finally, I added shuffle function to change the angles with tracking the mouse movement event in the canvas for a personal manipulation.

Tools Used: Javascript (p5.js)
Original Artwork: https://nmwa.org/art/collection/albers-untitled/
GitHub: https://github.com/k-yr-k/rtp-AnniAlbers
Source Code: https://editor.p5js.org/k-yr-k/full/AFguiEPo2


5. Ken Knowlton’s ‘Untitled. Ceramic Tile Fragments,’ 2002

Tools Used: Javascript (p5.js)
Original Artwork: https://www.knowltonmosaics.com/pages/Jesus.htm
GitHub: https://github.com/k-yr-k/rtp-KenKnowlton
Source Code: https://editor.p5js.org/k-yr-k/full/n950L07MB


6. Jason Salavon’s ‘Every Playboy Centerfold,’ 2002

Tools Used: openFrameworks, Shotdeck.com
Original Artwork: http://salavon.com/work/EveryPlayboyCenterfoldDecades/
GitHub: https://github.com/k-yr-k/rtp-JasonSalavon



7. Camille Utterback’s ‘Liquid Time Series,’ 2000-2002

8. Woody and Steina Vasulka’s ‘Reminiscence,’ 1974


Tools Used: openFrameworks, Logitech BRIO
Original Artwork: https://www.moma.org/collection/works/118540
GitHub: https://github.com/k-yr-k/rtp-WoodySteinaVasulka


9. Victor Vasarely’s ‘Vega-Nor,’ 1969



I recreated Victor Vasarely’s “Vega-Nor,” an oil on canvas piece created in 1969.  I came across Vasarely’s work as I was researching the Op Art movement, and he is known to be a pioneer/leader in this particular movement.  I first identified each of the colors associated in the back-most layer of the box, and I was able to assign it to a number identifier.  After that, each quadrant was rotated, mimicking Vasarely’s art piece.  Finally, I kept the proportion of each box to the 2nd and 3rd layer when the squares became more significant due to the spherical collider.  

My first attempt was taking a more 2D approach to the recreation, which allowed me to manipulate the actual sphere that follows my mouse movements.  

The second attempt was to stay true to the actual manipulation in the squares where the sphere was colliding.  I took the vertices to create a grid of points and have them connect, creating the effect or illusion of the actual manipulations.

Tools Used: Javascript (p5.js)
Original Artwork: https://www.albrightknox.org/artworks/k196929-vega-nor
GitHub: https://github.com/k-yr-k/rtp-VictorVasarely
Source Code A: https://editor.p5js.org/k-yr-k/full/m50Y97rsJ
Source Code B: https://editor.p5js.org/k-yr-k/full/0nlgMj-PH