recreating retro computer art

with p5.js

by Sher Minn Chong / @piratefsh / EmpireJS 2018

Sher Minn

Malaysian

Recurse Center

Web Platform Engineer

Retro computer art

Recode Project

[link]

[source]

Grace C. Hertlein

Editor of Computer Graphics and Art, 1976-1978

no code published
-> can I reverse engineer it?

🤔🤔🤔

Computer art

💻🎨

any art in which computers play a role in production or display of the artwork

computer as a digital canvas

computers to generate graphics

machine learning art

Retro computer art

1950s to 1970s

(before personal computing, color screens, laser printers, 3D graphics)

Computers back then

📼📺🗃

IBM 7090
Data Processing System

introduced in 1959 at the price of USD 3 million

Featured in Hidden Figures, 2016

[source]

"...I would go to the computer center and look at the information and then type it out, resulting in the punched cards.

I'd give it to the little man behind the door, and five minutes later, I'd get this drawing back...


- Frederick Hammersley interviewed by Lawrence Weschler

[source]

Mainly used for scientific & mathematical applications

boeing company

Animation of human limbs to determine possible movements in cockpit for easier instrumentation reach

Source: The Computer in Art by Jasia Reichdart, 1971

Seattle-Tacoma airport graphic used for animation of landing simulations

Source: The Computer in Art by Jasia Reichdart, 1971

Coined term 'computer graphics'

🖼

bell laboratories

One of the First Computer-Generated Films

Simulation of a Two-Gyro Gravity Gradient Attitude Control System by E. E. Zajac, 1963 [source]

Show me the vintage art

🙌

Oscilloscope art

📸🌀📺

Cathode-ray oscilloscopes

[source]

[source]

Ben F. Laposky

pioneered oscilloscope art in 1950s-1960s

Various Oscillons [source]

Oscillons #41 [source]

Cover of Recreational Mathematics magazine [source]

Colored oscillons [source]

[source]

None of the negatives remain, much less the algorithms for them

😢

Demo: Oscillons

based on Processing

🙋🏻🙆🏽‍♂️💁👨🏿‍💻

designed to make drawing with code
accessible for non-programmers

https://p5js.org/
in-browser p5.js editor -- good place to start

Demo: Oscillons

```js function draw() { // use center of canvas // as origin 0, 0 translate(width / 2, height / 2); // draw a tiny circle ellipse(0, 0, 10, 10); } ```
```js // add counter let t = 0; function draw() { translate(width / 2, height / 2); const x = t; ellipse(x, 0, 10, 10); // increment counter after // every drame t++ } ```
```js // size of figure const radius = 200; // formula for circle // x = r * sin(theta) // y = r * cos(theta) const x = radius * sin(t); const y = radius * cos(t); ellipse(x, y, 10, 10); ```
```js // mess around with theta const x = radius * sin(t/4); const y = radius * cos(t/3); ```
```js // add another point const x2 = radius * sin(t/3); const y2 = radius * cos(t/3) * 0.5; ellipse(x2, y2, 10, 10); ```
```js // draw line from two points line(x, y, x2, y2); ```
```js // draw line from two points line(x, y, x2, y2); ```

Plotter art

🤖➡️✏️

Mechanical plotter

Four flies problem

Four flies sit at the corners of a card table, facing inward. They start simultaneously walking at the same rate, each directing its motion steadily toward the fly on its right. Find the path of each.

[source]

Vera Molnar

made algorithmic art before computers were a thing in the 1960s

[image source]

Distribution Aleatoire De 4 Elements (Pour Prog. Ordinateur) / Random Distribution of 4 Elements (for the computer), 1970 [source]

A la Recherche de Paul Klee, 1971.
Material: felt tip pen on paper [source]

A la Recherche de Paul Klee, 1970.
Material: ink on paper, plotter drawing [source]

Structures de quadrilatères (Square Structures) [source]

In preparation for Frieder [source]

towards the 70s, computers became more accessible to artists

144 Trapèzes (144 Trapeziums) [source]

Text-based art

🖨✨🔡

IBM 1403 line printer.
Source: The Computer in Art by Jasia Reichdart, 1971

[source]

Frederick Hammersley

artist who got into programming

Equal Tea Talk, 1969 [source]

Undernourished, 1969 [source]

Jelly Centers, 1969 [source]

Jelly Centers Detail, 1969 [source]

Family #2, 1973, Lithograph [source]

With English, 1975, Lithograph [source]

ASCII art ?

not quite, more like EBCDIC art

(Extended Binary Coded Decimal Interchange Code)

Punched card with the EBCDIC character set.[source]

ART 1 Programming language

by Katherine Nash and Richard H. Williams at University of New Mexico

"...to teach students to make simple computer graphics"

"...notable for its simplicity and intended primarily as an introduction to the use of computers for those without any technological background"

source: The Computer in Art by Jasia Reichdart, 1971

ART I

p5.js

art made with limited technology

First ever computer art exhibition in the US

😱

Howard Wise Gallery, 1965

by Michael A Noll and Bela Julesz with the IBM 7094

Source: Michael A. Noll, Leonardo, Volume 49, Number 3, 2016, pp. 232-239

Source: Michael A. Noll, Leonardo, Volume 49, Number 3, 2016, pp. 232-239

...so far the means are of greater interest than the end, this revolutionary collaboration resulting in bleak, very complex geometrical patterns excluding the smallest ingredient of manual sensibility.

NY Times review of the first ever computer art exhibit in the US [source]

[source]

[source]

Exhibit celebrating 50 years
of computer art

at the V&A Museum in London

end

tweet at me
@piratefsh