recreating retro computer art

with javascript!

by Sher Minn Chong / @piratefsh / JSConf EU 2019

Sher Minn

Malaysian ❤️🇲🇾

Recurse Center

programmer's retreat in New York City

I 💖 programming + art

Retro computer art

Edited by Grace C. Hertlein

[source: recodeproject.com]
[source: recodeproject.com]

No code published
-> Can we reverse engineer it?

🤔🤔🤔

Computer art

💻🎨

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

Today we are focusing on the birth of computer art

1950s to 1970s

Computers back then

📼📺🗃

context matters

IBM 7090
Data Processing System

introduced in 1959 at the price of USD 3 million

"...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

Coined term 'computer graphics'

🖼

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

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]

Art happened anyway

🙌

Oscilloscope art

📸🌀📺

Cathode-ray oscilloscopes

Ben F. Laposky [source: Wikipedia]

[source: n6cc.com]

Various Oscillons by Ben Laposky [source: Recreational Mathematics magazine, August 1961]

Oscillons by Ben Laposky [source: Recreational Mathematics magazine, August 1961]

Herbert W. Franke [source: spalterdigital.com]

top: Elektronische by Herbert Franke, 1961
[source: zi.biologie.uni-muenchen.de]

Electronic Graphics by Herbert Franke, 1960s
[source: Computer Art Computer Graphics]

Oscillons #39 and #11 by Ben Laposky
[source: Recreational Mathematics magazine, August 1961]

The building blocks of Laposky's Electronic Abstractions
[source: Recreational Mathematics magazine, August 1961]

Electronic Graphics by Herbert Franke, 1960s
[source: Recreational Mathematics magazine, August 1961]

How where these made??

sine waves + ??? -> art?

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 frame 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); ```

Vector graphics art

🤖➡️✏️

Mechanical plotters

CalComp 565, early drum plotter introduced in 1959

[source: Calcomp 565 Plotter by Phillipp Hatchtmann]

[source: Computer Graphics and Art, May 1978]

[source: Computers and Automation, Aug 1968]

Cybernetic Serendipity

...happy chance discoveries with the computer.

-Jasia Reichardt, curator of Cybernetic Serendipity [source: ICA on Youtube]

[source: Smithsonian Science Service Archive, 1968]
[source: Computers and Automation, Aug 1967]

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]

Text-based art

🖨✨🔡

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

[source]

Equal Tea Talk by Frederick Hammersley, 1969 [source]

Undernourished by Frederick Hammersley, 1969 [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

Jelly Centers by Frederick Hammersley, 1969 [source]

Jelly Centers Detail, 1969 [source]

art created by making the most of available technology

ASCII art ?

not quite, more like EBCDIC art

(Extended Binary Coded Decimal Interchange Code)

Punched card with the EBCDIC character set.[source]

What was it like working with the language?

ART 1 had literally seven drawing subroutines

✨🌈art1.js🌀✨

[source code: github.com/piratefsh/art1.js]

Unicode diacritcal marks to achieve detail
[source: Wikipedia]

✨ ASCII Unicode art 👍

there is so much more history

Frieder Nake (Germany)

Matrix multiplication, 1967
[source: Computer Graphics Computer Art]

Georg Nees (Germany)

Schotter by Georg Nees, 1968
[source: vam.ac.uk]

Vera Molnar (Hungary)

In preparation for Frieder by Vera Molnar

New Tendencies (Zagreb)

A Little-Known Story about a Movement, a Magazine, and the Computer’s Arrival in Arts
New Tendencies and Bit International, 1961-1973
[photo source: copyrightbookshop.be]

why?

For more vintage computer art history: https://piratefsh.github.io

end

keep in touch!
@piratefsh