And my name is Sher Minn.

It's a little bit of an unusual name.

Downside is online forums don't like it when you have a space in your name.

I'll be here working on clientside validation, keep that in mind.

On the bright side, my SEO is really great.

If you look up my name, it's the first result and I didn't have to do anything.

So, life is good.

I am from a small country in southeast Asia called Malaysia.

And yeah.

We have actually another Malaysian in the house here that was on the stage at CSSconf.

Proud to represent my country.

And I live in New York right now where I initially moved to attend something called the recurse

Center.

RC in the house.

For those who don't know what the recurse Center, it's based in New York City for programmers.

6, 8 or 12 weeks and you can rediscover can the joy in programming.

If you want to take time to learn something you have been meaning to learn, this is a

great place to do it.

And I plug it because this is the reason why I'm giving this talk here today.

Everything they have provided me has enabled me to pursue creative programming.

Creative programming.

I like art a lot.

I learned thousand draw before I learned how to code.

Here are some of the pieces of work that I've made in the past year.

And I really enjoy using programming to create code.

And most recently I have been really inspired by retro computer art.

So, what happened was that I discovered this magazine from 1976 to 1978.

And it was edited by a computer artist, Gracie Hertlein based in California in the United

States.

This was the first ever computer magazine entirely dedicated to computer graphics and

art.

You can see the title, inexpensive graphics in the storage category, really dates it.

And I got these images from a website called the recode project.com.

The site is no longer up.

But it was a great resource to look through what was cutting edge graphics back then.

And as you can see, it's mostly black and white, textbased, lines, geometric shapes.

Today we would call it minimalist or Lofi as an esthetic.

It was fun to look at and think about because most of the times the work published is just

the artwork itself.

There wasn't a lot of algorithms.

Most of the time there would be some description of the technology used and maybe some of the

techniques, but no actual algorithms.

So, the whole purpose of the website that posted this magazine, the archive for this

magazine were like, can we try to reverse engineer it.

Can we look at a piece and figure out how it was made?

And so, this exactly what I sort of fell into.

And so, this entire talk will be about the research that I did and also some of the attempts

at recreating these works.

Let's first talk about computer art.

What is computer art?

A lot of us have an idea what have computer art is.

It's probably right.

In my definition, computer art is the art that computers play a part in the creation

of the artwork.

That's using Photoshop or Illustrator or 3D graphics, AR, VR, the latest hottest thing,

deep learning art, AI art.

But we're not talking about that today.

We're going it be talking about the really, really early years of computer graphics.

This is when computer graphics became accessible and it will be about how people took those

technologies and used it to make art.

So, the decade I'm focusing on is the 1950s it 1970s.

This was really the crucial part where computer art was just becoming a thing.

So, everything's in black and white.

So, to talk about retro computer art, we first need to talk about what computers were like

back then.

The reason being that context really matter when is you're talking about history.

And if you understand the tools and the techniques that are available to people at the time,

you can understand why certain pieces had a certain esthetic or, you know, why was it

done that way.

It helps you appreciate a lot of the work a little bit better.

Here is a computer that was introduced in 1959.

This is the IBM7099 data processing system.

Not just a computer, a data processing system.

Really fancy.

It would take up the entire room.

You can see the magnetic tape readers at the back, console and punch card readers.

And it was introduced at a really cool price of $3 million.

Back then.

If you converted it to currency today counting for inflation it would be something like $19

million US which is really, really expensive.

What this meant was that computer were really difficult to come by.

The people who could afford it were in universities, research labs, the military, government agencies.

They are very scarce as a resource.

Can you imagine calling IBM up and saying I would like to buy a computer for $19 million.

I'll write you a check, you know?

And most of the time people wouldn't interface with the computer.

They would write programs for it using a punch card writing like a typewriter.

And you punch the code and punch it into a punch card.

Take the stack of punch cards and hand it to a little old man behind the door and you

would get the results back five minutes later.

If you get impatient waiting for Webpack to building with think of this.

It takes a lot of time.

And there were many uses for scientific and mathematical applications mostly by scientists

or mathematicians in research labs or, you know, universities.

So, I want to show you some examples of companies that really converted to the field of computer

graphics.

The first coined the term computer graphics and they were one of the first few people

to use computer graphics in design work.

They used it to design cockpits to animate the different reaches of the limbs for the

pilot in the cockpit.

Simulations.

Here was the first airport that was made using computer graphics, the Seattle Tacoma Airport

in the United States.

And Bell Labs in the US, they made one of the first ever computergenerated films.

First what that might look like and then I'm going to show it to you.

Here it is, it is a simulation of a control system from 1963.

And it's supercute.

It's a satellite revolving around a planet.

The early graphics were mostly designed to model or maybe just, you know, demonstrate

some diagrams.

And so, like this really simple graph of straight lines, geometric shapes, black and white,

that was sufficient for their purposes.

This is wonderful.

No fancy colors or gradients or anything like that.

And yet, you know, art happened anyway.

People look the limited technology they had and did something really wonderful with it.

So, I'm going to talk about three different types of art.

I just chose examples from each category.

And I'll show you some oscilloscope art, some graphics and some textbased art and my attempts

at recreating them.

Let's start with oscilloscope art.

So, cathode ray oscilloscopes.

If you have been in a lab or school, played with one.

And this is what an oscilloscope is, or this is what it looked like in the 1950s.

It is a device that takes electrical signals and converts them into a visual over here.

So, here we have an example of a sine wave on an oscilloscope.

This is like a little bit before, you know, the IBM7090.

And here on the left is a picture of Ben Laposky, credited to be one of the first few people

who created electronic graphics.

And so, what I mean by that is he would plot interesting patterns on so the oscilloscope

and he would then photograph them and here is some of his works.

And what's really interesting about them is they look really ghostly.

Really kind of organic a way.

But you can sort of tell they had this sort of mathematical quality to it.

A few more.

Around the same time actually in Europe also there was a movement getting started in computer

art.

Herbert W. Franke, we created his own electronic artwork using oscilloscopes.

Here is some of his work.

So, the interesting thing to note about this, oscilloscopes don't have a screenshot button.

You don't press screenshot, and this is going to come out.

So, in order to capture these images, what they would do is set the camera in front of

the screen and leave it on long exposure.

It captures the movement of lines and graphics on the screen.

What you're seeing here is not just a single snapshot.

It is a combination of events on a screen over time.

And so, here actually is an example of the same like event, but two different phases

of it.

And I think it looks really beautiful like a ghostly jelly fish.

And more works by him.

And how to do this, draw sine waves on an oscilloscope.

But how to get from that to that?

There was a little bit of an explanation in recreational math mat irks and he used the

sine waves and others in combination.

Applying operations to create composite waves that had really interesting patterns.

Here is an example of the work that makes is really obvious that there is a bit of a

sine wave thing going on.

And I was like, how okay.

I get it.

But how well, how are these really made?

I attempted to create it.

I'm going to show you a demo here of creation of Lapsoky's Oscillons.

And I'm going to use P5JS, which is a graphics drawing library based on processing.

The processing language was designed to make drawing with code accessible for nonprogrammers.

It's super great if you're interested in trying out graphical things, I highly recommend checking

it out.

It's great reference and documentation, and it's an online editor.

Really easy to use so a good place to start.

Jump to demo.

In P5, off global draw function that will get called to draw a frame of your animation

or visual.

And so, in this I'm just doing something really simple.

Just setting the center of the canvas as zerozero and drawing a tiny circle here at zerozero

with the width and height of 10 pixels.

And that's not superinteresting.

What's more interesting is that you can animate things.

So, here I'm adding a little counter.

And incrementing it at every frame that's being drawn.

And using that value to position the coordinate of the little circle.

I can draw a circle, and the formula is R sine theta, what X equals, and R is R cost

data, and R is the circle.

Drawing circles in circles.

Circles are cool, but not superinteresting.

What's more interesting is you can mess around with theta and multiply it by two different

fragments, and you get a pretzel.

This is an example of a figure.

It's when your sign and cause functions are at different phases.

It creates interesting loopy effects.

All right.

So, what I can do now is I can have the pretzel and then draw an additional point.

Pretzel is one point.

And draw the ellipse over here.

And I can draw a line between those two points, and you get kind of that, but not quite still

because this overlaps.

And it keeps on getting brighter and brighter.

So, what you can do is that whoops.

You can fade out the lines as they're being drawn.

And this, I imagine, would be what that might look like on the oscilloscope screen.

A close approximation of it.

So, I have actually the code here in P5 demo.

I will send out a link to the slides on my Twitter after this so you can play with it

and you can sort of mess around with some of the values and run it and see how that

changes the movements or the effects.

It's kind of interesting because you never know what you're gonna get.

You just punch in stuff, that looks good.

Or not.

And you just have to figure out what you're looking for.

You can also add color here.

Instead of straight lines, I drew curves, same idea.

And, yeah, so, that's it for oscilloscope art.

Next, vector graphics.

Vector graphics has a special place in my heart.

I really enjoy working with it.

To understand why vector graphics are really important and they're mostly lines and geometric

shapes, we need to understand the output available in the computers.