The Scroll Art Museum

Scroll art lets beginner programmers turn loops and print() into animated ASCII art.

PyTexas 2024 Talk: 20 GOTO 10

On April 20, 2024 I gave a talk on scroll art at the PyTexas Conference in Austin. The slides are available.

Here is an imperfect transcript created from Whisper:

Hello. OK, thank you for having me here. And thank you to all the Pytexes organizers who make this conference not only possible, but a delight. I know a lot of you have come from probably very far away. Texas is an enormous state. So thank you for coming here. I really appreciate being to speak at Pytexes 2024. I have a lot of information on these slides, but you can download them from bit.ly slash Pytexes 2024, Scroll Art, and also see the art at scrollart.org.

I'm Al Sweigart. I'm mostly known as the author of Automate the Boring Stuff with Python and a few other books. You can read them all online for free at inventwithpython.com.

So on the left is an artist who fills glass bowls with different colored sand and pushes the grains into place to draw portraits. In the center is an artist who arranges beads on a flat board and films herself in slow motion as she tosses them upwards. On the right is an artist who carves patterns into the skin of a watermelon, getting different colors as they carve deeper. On the left is an artist who draws portraits using only the circumference of various coins. In the center is an artist who completes their illustrations by using the shadows cast from common household objects. On the right is an artist who has several elaborate bubble making tools. On the left is an old flash game where you lay out roads and the cars play musical notes as they pass by these roadside flower pots. In the center is an artist who does elaborate dance routines as they fall off of and climb onto a ledge over a trampoline. And on the right are two musicians who use the screeching electronic noises from their barcode scanners as they scan different barcodes to make music.

A good friend of mine once said something that I will remember until the day I die, not only will humans continue to create new art, but there will always be new forms of art. I'd like to talk to you about something I call scroll art. So, scroll art is the output of a type of program that's easy for beginners to get into, but it's also fun for experienced software developers to explore. It's kind of like a minute to learn lifetime to master sort of thing. It's not exactly like ASCII art, but well, it's actually just easier to show you.

So, this is one that I call spike. It's just a simple repeating pattern of lengthening and shrinking dashes. And if you stare at the very bottom, I kind of get like a rhythmic thumping noise playing in my head as I watch it.

This next one is called Starfield. It's just random asterisk being played on the screen. But if you notice the density of the asterisk gets greater and greater until it reaches 100%, and then it starts reducing back down to 0%, and then it just repeats over and over again.

A quarter century ago, there was this movie that came out called The Matrix. Yeah, yeah, it's been that long. So it had this iconic visual of code falling down the screen like raindrops on a window pane. Scroll art can only scroll things upwards, but you can change this color scheme around into hacker colors. Yeah. Yeah.

And then a really common exercise for beginners to create is to write a function that will be given in integer size, and then you have to print out a diamond shape of that size. So I incorporated that into this. I just call it diamond sky.

And then computers do they can print out scroll art pretty fast. So you have to input these delays, but you can just remove that delay and just have it go as fast as possible. So this is just a random walk left or right of five different characters, but they always have to be within a certain distance of each other. So it kind of looks like the proton pack stream from Ghostbusters.

And then this one will take a while to kind of explain. So let me go ahead and click on stop here. Where's my cursor? Okay, so every column can display a period or an app symbol and randomly these togglers will appear when going left and the other going right that will switch it back and forth from a period to an app symbol. So if two togglers overlap each other, then they will cancel each other out. And some of these togglers will skip a column and some will skip two or three columns. And this is a very simple rule set, but the patterns that it creates tend to get really complicated really quickly, even though the code for this I think is like 20 or 30 lines of code.

So that's what scroll art is. It's the text output of a program that appears animated as it scrolls up the terminal window. Now these programs are usually short and they can be written in any language you want, but I found Python to be great for just playing around with ideas. Here's the Python source code for that spike program. Here's the Python source code for the matrix screen saver. Here's a Python program for the diamond sky program. It's a bit bigger, but you notice it still fits on a single slide. Here's that proton stream program and here's the toddler program source code in Python.

So you've seen what scroll art is, but let me go ahead and define it more clearly. Scroll art is similar to something called ASCII art, which was popular in the 90s as a way to make art out of text characters. Here's a cat and a dolphin made by prolific ASCII art is Joan G Stark. So scroll art is the output produced by a program that is displayed in a terminal window. So the text characters are all the same width. And scroll art is animated when the terminal window fills up with text and the text starts scrolling upwards. So the main limitations of scroll art are that you can't erase any text that you've already printed and you can't control where the cursor is. So if you're familiar with what a standard IO is, scroll art is limited to the stream output.

Now, I've named this scroll art, but I didn't exactly invent this. If you are like me and of a certain age, your first programming experience might have been something like writing this basic program. This just prints out the word hello. And then the second instruction is to go back to the first instruction, which then prints hello again and then it prints hello again and over and over and over again. This program would keep going until you press control C. But I didn't know about control C. So the way that I stopped an infinite loop was to turn off the computer and then turn it back on. Woo! Woo! Woo! Woo!

So I want to stress that scroll art isn't meant to be some kind of form of retro computing or anything like that. You know, a lot of people have a dim view of nostalgia. And I am one of those people. I'm interested in teaching people to code in the 21st century. So the text-based nature of scroll art isn't meant to be some kind of old school throwback. The text is a constraint that makes programming approachable. So it's computer art without complicated shaders or 3D vectors or AI. I mean, so much of computing today is this magical black box. And it's hard to connect how the code we write results in what we see on the screen. But scroll art is text and the source code is text. So it gives you a real sense of the cause and effect to connect the print function calls to the printed text on the screen.

But more importantly, sticking to text means that any computer can do scroll art. You don't need a modern laptop. You don't need a high-end graphics card. I even ported some of the scroll art programs to an Apple 2E and a Commodore 64. And it runs slowly, but it does run. And sticking to text means you don't need to install additional libraries. And that's a big one. If you've ever led a learn to code in Python workshop, you've probably had to do a pre-workshop workshop just to make sure that everybody has Python and all the libraries that you want to use installed on their laptop. Otherwise, you're going to spend the first hour and a half of your four-hour workshop trying to get Python running on people's computers.

But with scroll art, that's just print and loops. And that means you can do scroll art projects in browser-based repels as well. You don't even need Python installed. And that means you could even do scroll art programming from tablets and smartphones if you have to. You don't even need to have a laptop. And that's actually pretty important. You don't have to invent anything new. You can use these existing tools and platforms. And the text industry loves to talk about radical innovation and revolutionizing our world, especially when it comes to education. But a lot of what the tech industry produces assumes a certain level of affluence, or it assumes a certain level of sophisticated expert.

But a big part of Python's success has been making a free open-source programming language that is approachable for people outside of the software field. Now, don't get me wrong. I think there's a lot of great ways to get people into tech. But they can't get everyone into tech. So scroll art is not about retro computing. When I say any computer can do scroll art, I'm not really thinking about PCs from the 80s. I'm talking about the tablets and Chromebooks and old desk tops that parents have gathered for an after-school computer club. Or I mean, the computers used by career switchers who don't want to drop a lot of money on a new laptop when they're just starting out. So that's what scroll art is.

But why should you care about scroll art? Well, I have an interest in programming education, which is mostly about getting people interested in programming. Some of that is teaching concepts, but mostly it's about generating enthusiasm. And beginners want to make things. The worst feeling for beginners is mastering a bunch of abstract concepts and then staring at a blank editor, not knowing how to write an actual computer program. So their idea of software are the professionally made apps that they're using on their phones. And they don't really have the knowledge to make big things like that. But they do have a little bit of knowledge to make small things. And small things can still be interesting.

So I teach Python because Python is so widespread. But I need programming projects that I can use in any programming language without a lot of setup. And also, no matter what hardware they have access to. But let's say that you're a senior software engineer and with the latest Macbook, scroll art is still something for you. Scroll art's limitations force you to come up with ways to apply your wide skill set in very specific ways. And there are endless numbers of ways to make scroll art. So let's examine some of them. But first, I'm going to say something incredibly pretentious.

Scroll art creates the illusion of movement and infinity. Wow. That's like, deep. No, here's what I mean. So scroll art is animated. But you're not writing any animation code. You're just calling print over and over again. But you've seen it. It looks like it's scrolling upwards. It has the illusion of movement. And if you add in random numbers, then your scroll art program will never repeat. It's the digits of pi. And then you put all of that in an infinite while loop and it goes on forever. So it's kind of like a lava lamp. It moves. It never repeats. But it has this simplicity and it's kind of neat to stare at.

Those are the kinds of programming projects you can make with scroll art. And there's some different types of scroll art. There are periodic scroll art programs that just do a simple repetition. So this one is on scrollart.org. I call this zigzag. You can see it just goes to the right. And that just goes to the left. And then it repeats. Now, what I really like about this one is that you can just look at the output and kind of figure out how the code works.

You can think, oh, OK, it has zero indentation and then one space of indentation and two spaces of indentation up to a maximum. And then it starts subtracting that back down to zero. So you need a variable to keep track of how much indentation there is. Another variable to keep the track of which direction is going put all that into a loop. And then you can just make this little thing. That's kind of fun to look at.

And then if you know about sign and cosine, you can kind of make a fancier version of that. And again, this is just print being called over and over again. I have never actually used sign and cosine in programming unless it was for some silly artistic thing like this. Just in case you were worried that you need to be good at math. So a much simpler example is what I call wall paper scroll art. These are just static images. The code for this is all the same. It's just changing the pattern that you're doing. So it's a fun way to just create test-related ASCII art programs. I have a whole bunch of examples right here.

So the main way that I get inspiration for these sorts of programs is by just googling for a tessellation and doing an image search for that. It really helps if you just limit yourself to black and white images or line art images. Another thing you can do is just do a search for Islamic geometric art. There is an entire history of art behind this that you can read up about. And I spend a lot of time instead of working on this talk just like looking at Wikipedia pages for this.

You can also just do ASCII art that has several variations. So the example I have here are these ASCII art ducklings. And so these ducklings can face to the left or to the right. Their mouths can be open or closed. They have three different directions that their wings can be pointed and three different types of eyes and two different sizes. And I can just write a program that just goes through all the various combinations of these. And it looks absolutely adorable, especially when you have two ducklings line up so it looks like they're kissing each other. I have a type of scroll art that I call varying density.

You saw this with the Starfield example. But really you can do this with any sort of tessellated pattern. Here I just have this triangular grid that fills out. And then it starts emptying itself over and over again. OK, so before graphical user interfaces, a lot of software just used characters that looked like lines. And we call these box drawing characters. And we still have access to this today. So you can print out these text characters but get sort of like a graphical look. This, the art here looks very elaborate. But the rules that I came up with are just like I don't want to have any dangling loose ends for the lines. And then I accidentally added some bug to it that made them stretched out vertically. And I thought actually that looks pretty nice. So I have both versions up here.

A few years back, you might have seen there was this like three rotating ASCII art donut program that came out. And I realized, hey, that just uses these 12 different characters for different shading and textures. You can use that to go from lightest to darkest. So yeah, I found that scroll art is just really great for practicing new programming languages that I want to learn or I want to have more experience with.

And eventually I created the scroll art.org website. And I had to create this JavaScript terminal, that JavaScript library that lets you treat a text area HTML element as a sort of terminal window so that you can just call a print function and it'll just display text in there. And that's how all the animations that you've seen work. I really encourage you to get into scroll art and also see if you want to contribute anything, especially if it's in JavaScript using this library. And we can put it on the website for other people to see it in their browser. I've spent a lot of the last two months working on this.

And I've come up with several little tips that I've uncovered. I'm not going to read them off here. You can just download these slides later. I've also come up with just a lot of new ideas that I want to try out later on. And so you can just read those later. But the main thing that I want to stress is that scroll art is really simple. That's sort of the core of all scroll art. It's not some bright, elaborate, colorful processing, P5JS thing or those 64 kilobyte demo scene demos.

If you're making scroll art, you can just go with simple ideas. And actually, simple ideas are better. I've spent hours with some elaborate idea that I had just to find out that when I actually ran the code, the output wasn't that cool looking. So just start small and then build up from there. Take a look at other projects and try to get ideas from that. And I think probably the best example of this is something that I created where it was just sine waves and five different sine waves. They're moving at different speeds. And I realized, wow, there's really not much to this code. But the output looks pretty amazing. I was thinking it made me think of the path of the moon orbiting around the earth is in a circle. But if you realize that the earth itself is also moving, you realize that the moon is actually drawing out a helix path around it. And that's just what I thought about this thought about when I saw this. So I called this orbital travels.

But anyway, I really hope that you found this at least somewhat interesting. Maybe it gives you ideas for programs that you can make on your own or programs that you can use to teach other people how to code. I just love looking at the output of some of this stuff, because then it makes me think about, oh, how does the code work behind all of this? And that's my favorite kind of art, is the art that you look at, and it gives you ideas. So as I said in the zen of Python, beautiful is better than ugly and simple is better than complex. And you can get a lot of beauty from simplicity. Thank you very much.

Believe it or not, Al, we do have scroll art questions. So by the way, Lauren, our next speaker, if you were here, I don't know why I just turned that off. Lauren, if you're here, if you'd come over to the side and Josh will help you get set up while we're doing that. OK. So the first question. "Can you run scroll art on a smart fridge?"

Sure. I'm now thinking about how you would make that happen. I'm incredibly curious. I mean, it's a little bit more complicated than Doom, but yeah, I guess you could make that happen.

The next question. Can you make Doom a part of this appropriately? OK. Set that up too nicely. So that recurse center thing that I talked about yesterday during my lightning talk, they're having a talent show. And I kind of want to do something like this. So I've also thought about making it interactive by having the JavaScript track the mouse position to make it slightly interactive, and then also opening up the browser developer tools and controlling it from there like a DJ. So yeah, there's, I mean, I'm not one of those people that says, oh, real origami is when you use a square sheet of paper and you don't make any cuts and you have all these. No, no, just make whatever you want. I'm not going to gatekeep scroll art. It's really just animated ASCII art and try to keep it simple and fun. So this has me thinking now, you've seen the Textual library, right? I'm going to be able to see the idea of using that with mouse tracking to have scroll art that reacts to the mouse as you. That could be fun. Yes. I mean, so like the main thing about limiting yourself to just print and not being able to move the cursor around, is that it really does force you to think more simply. Because once you start moving the text cursor around and doing all this really fancy ASCII art, then it's just not that far away from just doing regular computer art. And it's super complicated. And the expectations are just set way higher. So that's why I like just sticking with print. You can add in different colored text as well, but I just like to stick with just printing out characters.

It's the high coup of textual art, right? Have you explored Stephen Wolfram's cellular automation rules?

Oh, yes. That was actually a slide that I had cut. There's a book called A New Kind of Science, which is like 1,000 pages long, and short story is it's not a new kind of science. But it does cover cellular automata, which you can also use as inspiration for a kinds of art. You can also look up like dithering algorithms, which is sort of how a lot of monochromatic screens would simulate shading as well.

Last one, just for fun. So did ASCII art start on printers and the follow-up comment, thanks Dave. That's also hard to erase.

That is not a question. But yeah, no, there is a thing called typewriter art from 100 years ago where people just use typewriter keys to print out and try to make art that way, and which is kind of like the predecessor of ASCII art, which, yeah, I mean, there's always going to be new forms of art.

Yeah. Awesome. All right. Thanks again, Al Sweigart, everyone. Thank you.

Thank you.