Placeholder Image

字幕列表 影片播放

  • Welcome to my talk, recreating retro computer Art with JavaScript.

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

  • This was before laser printers.

  • You couldn't print a highdefinition image really easily like we do now.

  • In order to create really detailed images, people would use mechanical plotters.

  • Think of it as a drawing robot.

  • It has a pen and can move on the Y or X axis across the surface of the paper and draw on

  • it.

  • This is a drum printer.

  • It moves the Y which is paper and the X which is the pen.

  • And so, the limitation with plotters is that all you have is literally a robot arm that

  • draws lines.

  • And so, you had to describe your graphics in terms of vectors.

  • So, you had to provide coordinates in which to move around.

  • Can't do colors or gradients or fancy things.

  • So, a lot of the esthetic back then had to do with lines, especially close together to

  • have the effects.

  • Here is one I saw a lot of.

  • The basic idea is you take a geometric shape and nest it and get the cool, swirly effect.

  • Okay.

  • Interesting.

  • Like it's just nested squares, whatever.

  • And in fact, it was so popular that it was the esthetic for cybernetic serendipity which

  • is the first ever computer exhibition that focused on computer art and held in the institute

  • of contemporary arts in London.

  • It was a really big deal at the time.

  • And the fact that they chose this for the graphics, I guess it must be really popular.

  • Inspires some imagination.

  • A little side note about Cybernetics Serendipity, it was by a Polish woman, Jasia Reichar