Playdate Podcast

Christa Mrgan: On a warm night in June, 2019. The after-party for the layers design and technology conference was in full swing at an event space in San Jose, California. There was a top shelf open bar, a full breakfast buffet with bacon, eggs, and pancakes, and a DJ was mixing and remixing songs, creating the mood as people talk, then laughed and danced. A little over six months later, a global pandemic made parties like this feel like a dream from another life

The DJ, May-Li Khoe, found herself living in Colombia for most of 2020, where she happened to be when COVID-19 first began to spread around the globe. She continued to work on various projects remotely there, including a fun side project for music creation and choreography she’d been collaborating on, for Playdate.

Welcome to the Playdate Podcast, bringing you stories from game developers, designers, and the team behind Playdate, the little yellow game console with a crank! I’m Christa Mrgan.

Today. I’m talking with May-Li Khoe, who is now back in the Bay Area and who, along with Andy Matuschak created the endlessly remix-able music and dance maker, Boogie Loops! I’m not going to do my standard spoiler warning since this is an open-ended music and dance creation tool. So let’s get right into it, okay?

May-Li Khoe: Okay, cool. I’m May-Li Khoe. I worked on Boogie Loops. I did the pixel art and, you know, sort of conceptual stuff, mostly for it. I did muck about a little bit in some of the parameters in the code that Andy exposed to me, but Andy made the code do its thing.

Christa Mrgan: Andy Matuschak, who I unfortunately was not able to interview for this episode, was the software engineer behind Boogie Loops. Andy’s an independent researcher currently working on tools to augment human intelligence. He’s led research and design at Khan Academy, and worked on iOS at Apple, and was also once a Panic intern, so many years ago now that I feel a bit old thinking about it. He also sings complex choral harmonies and plays the piano. He’s a generally wonderful guy. So I was bummed. I didn’t get a chance to talk to him for this. But, we’ll celebrate him in absentia, and I’ll let May-Li tell you about herself!

May-Li Khoe: I am an interdisciplinary designer, artist, technologist, researcher… I also write and I DJ and I dance. And I make music, which is a lot of what contributes to Boogie Loops. Andy also sings and plays the piano. So there’s that. Both of us do stuff in music. I actually am in a band now. One sentence bio is what you asked for, right? Yeah!

I have a background in electrical engineering and computer science during the ancient times of the last century, and then went into full-time design, worked at Apple among other places , one to running a design team at Khan Academy and grew the team there for my day job. And then outside of work started a DJ coalition and have been dancing the entire time, but that’s probably the super quick summary.

Christa Mrgan: I mean, obviously May-Li is too awesome to be summarized in a one sentence bio, but that was pretty good. The DJ coalition she started is La Pelanga, whose members mix everything from cumbia, dance hall, and Afrobeat to salsa dura, hip hop, and a ton more. The band she’s in place Currulao music, which is an Afro Colombian tradition with poly rhythmic and multi-part vocal harmonies. And full disclosure: she is a friend of mine, but she also really is this cool.

Anyway, how did she and Andy end up working on a project for Playdate?

May-Li Khoe: I think I first heard about Asheville…

Christa Mrgan: Oh, “Asheville” was Playdate’s secret code name for a super long time. You can find out why in the first episode of this podcast, “The Story of Playdate.”

May-Li Khoe: I want to say Cabel actually reached out to Andy and I. I don’t remember if he reached out to both of us at the same time.

Christa Mrgan: Cabel Sasser is Panic’s co-founder and CEO. He’s known May-Li and Andy for years.

May-Li Khoe: Anyway, I think Cabel reached out to us-- that’s how we heard about it-- and invited us to work on something. It was a long time ago. I think it was like 2015 or something. I hadn’t had the chance to work on, the design of a game /toy and do all the artwork for it myself from beginning to end, also in a very long time. So I was really excited about that.

I think like many people, it reminded me of, little handhelds from many years ago and yeah, it’s, it’s hard not to feel some sort of affection for the thing. after that. Something I didn’t mention earlier is that in my past work, I worked on, on new inputs, new interfaces for new human input. So I love, weird input design also at GDC, there’s like the alternative input area of the floor, back when we did that in person. And that was always one of my favorite spots. And so just, yeah, the weirdness of the input and the, and the format were really attractive.

I think there’s something about the form factor that also felt like it gave us permission to be goofy with the thing. It felt like it gave us permission to do something strange and to do something really playful and irreverent, just because of the format alone.

Christa Mrgan: Yeah. So what kind of goofy playful idea did they arrive at?

May-Li Khoe: This is a rhythm, melody, bass and dance machine. So as the author, you hop in, you can make yourself a little rhythm section , sort of in the bottom row. And in the middle row, you can turn fish and birds on and off essentially.

The birds are the high notes and the fish are bass-- bass, the bass notes.

Christa Mrgan: The visual puns in Boogie Loops make me so happy.

May-Li Khoe: So you can make a bass line. One thing that’s a little harder to find. If you actually move your selection all the way over to the keyboard, you can switch to different tunings, which I do recommend doing cause it’s fun. And then on the top row you can control the choreography and on the stage you can choose your characters.

Christa Mrgan: Yes, there are four adorable characters to choose from: a bunny, a Panda, a cactus, and a pizza, and five slots on the stage. And they will perform whatever dance moves you assign to them.

May-Li Khoe: I think a lot of people are also intimidated by dance and they feel like it’s unapproachable to dance. And there’s two things that I’m really hoping from this: one is that people realize that once you learn one simple move or two or three simple moves, you can combine them in almost and so many different ways, to the music.

And so you can do that in real life, too. I did a lot of dancing to figure out how to position the characters. I’d get up and like do the move in my mirror and then sit back down and draw the characters doing those moves.

Christa Mrgan: Maybe this is like a universal thing for character animators! Years ago, I did motion graphics and compositing at an animation studio, and it seemed like most of the character animators around me had little mirrors at their desks. And occasionally I’d look over and see someone doing like a big goofy expression, and then they’d turn back to their computer. Anyway!

May-Li Khoe: But yeah, that’s a description of it. You can also save and come back to stuff. There’s like a library screen. So if you hit the lower right-hand button and you can come out to the screen and see all of the compositions you’ve worked on. All of them, are set up like little mini stages, like, little platforms strung between two trees. As you select each one of those you’ll, you’ll see little mini mini clips of your composition play out.

But one thing I forgot to mention is that the other, the other fun thing is that there’s a button in the middle at the bottom of the controls, you know, or there’s a couple of controls at the bottom one where if you hit it, you’re actually controlling the d-pad to do live sound effects of samples, all of which are surprised over top. So I definitely encourage people to hit that middle button and start matching a launch with a rhythm once they’ve got something set up. And you can also adjust the swing in the speed. The swing you control by, moving a slider between a clock and a martini glass. And the speed is the good old turtle and bunny.

Christa Mrgan: The design is so charming and delightful. I love it. So how did Andy and May-Li come up with this idea?

May-Li Khoe: You know, at the time that Andy and I started working on this, it was, I think very early in the stages of Playdate before it was called Playdate. And I think at that time, the timeline was a lot shorter. And we were asked to work on something that would take a couple of months.

Christa Mrgan: Yeah. May-Li and Andy were among the first people outside of Panic to get a chance to make something for Playdate… And at the time most people at Panic who were working on the project figured it was probably less than a year from shipping. Again, for more on Panic’s adventures in hardware development, check out this season’s first episode.

May-Li Khoe: So we did a quick brainstorm. We went to a restaurant, I usually carry teeny tiny sticky notes with me. And we did a teeny tiny miniature sticky-note brainstorm. And narrowed down the ideas that we thought would be fun for us to do within the scope of what we had and the ideas dropped out of that. I think that both of us have always been drawn to creative tools, both Andy and I, I make other creative tools.

I’ve got other projects I’m involved in-- Scribble Together and MakeSpace–

Christa Mrgan: Scribble Together as an online tool that lets you add an instant shared whiteboard to any call, and MakeSpace is like a community browser collaboration tool which makes really interesting use of spatial audio effects. There are links for both in the show notes.

May-Li Khoe: Andy and I had worked on sort of creative and learning tools together, both just for fun as well as at work. So yeah, I think that, that it sort of fell in into line there. And I think we wanted to do something that was going to be a little unexpected, like a twerking pizza.

Christa Mrgan: Nobody expects a twerking pizza. But how did they arrive at this very whimsical interface?

May-Li Khoe: I mean, we were inspired by Mario Paint and no lies, but, I think when we created the initial architecture, our minds were still a little bit in like, okay, what’s the architecture of a tool? And then as we progressed each step, we were like, okay, what is the kookiest thing we could possibly make to control this? And it just kind of went from there.

Christa Mrgan: Oh, if you thought you were getting through this bit without an aside about Mario Paint, guess what? Mario Paint was a Super Nintendo game released in 1992. It came with its own mouse and featured a fly swatting game, a coloring book, an animation tool, and a music composition tool, which was the best part. You’d compose a song by placing different icons on a treble staff, like a mushroom for a drum sound, a game boy for a little a goose for some horns, etc.

During playback, your composition would scroll to the left and Mario himself would run across each beat, jumping on your notes to play your song.

It was pretty limited. There were only 15 sounds. You can only put three different notes on a single beat. You were restricted to using quarter notes, and there were no sharps or flats. but it was super fun to play with. And you may have heard me say this before, but constraints can be really useful when it comes to creativity.

May-Li Khoe: When we’re talking about creative constraints, I guess there’s the creative constraints that we had in making it, which I loved, of having just black and white, tiny pixels. I think I’ve always been somebody who looks at tiny details. Like I have a tendency to rabbit hole on tiny details, and I felt like this entire platform and its constraints was like, oh, do that. Rabbit hole on the details because this is pixel art on tiny screens. So you are welcome to do this thing that you compulsively do anyway, which I thought was great.

You know, I feel like we live in this era where everybody’s trying to beef up and optimize, you know, maximum poly, everything, maximalist, , et cetera, et cetera. And this little creature of a handheld device that was so kind of nostalgic and cute. I knew it was going to be well crafted. I love the creative constraints of it being black and white and a tiny screen. And having this crank and the teeny tiny pocket size-ness of it.

And then once you’re in Boogie Loops there’s a bunch of constraints, but it’s interesting because my partner is a mathematician and the part of math that he’s in is combinatorics. And as a combinatorialist, you know that even with just a few variables of changing things, You can wind up with more possibilities in there in the universe, like for example, a deck of cards, like I think that there’s more different orders of shuffles of the 52 card deck of cards than there are atoms in the universe or something like that.

I don’t remember the specific comparison of like order of magnitude, but it’s something like that.

Christa Mrgan: Yeah, I have a dim recollection of learning about factorials in school-- mostly that they were written as a number followed by an exclamation point, so they seemed very enthusiastic. But I looked it up and a standard deck of cards can be shuffled in roughly 8.1 times 10 to the 67th power ways or 52 factorial, meaning 52 times 51 times, 50 times 49, et cetera, et cetera. And according to the internet, that’s roughly the number of atoms in the Milky Way. So yeah, a lot of possibilities.

May-Li Khoe: And so, you know, with Boogie Loops, there’s, you know, a fairly short scale, but there’s bass and there’s treble and there’s a drum machine. And then you’ve got five slots for four characters and a bunch of dance moves that are all represented by–

If you know the name of the dance move, you might understand why it is represented with the icon that we chose to represent it, maybe the most obvious one is the Kleenex. Did you get that one?

Christa Mrgan: I didn’t get it, but I’m also aggressively unhip

May-Li Khoe: No. Okay. Well it’s a dab.

Yes, exactly. Exactly. Yeah. So there’s sort of limited possibilities, and at the same time there aren’t, because there’s when you can combine them in so many different ways that you’re going to wind up being able to create your very own thing.

Christa Mrgan: Yeah, I think that’s exactly right. But what was the development process like? Andy and May-Li came up with their idea pretty quickly and their original timeline was just a few months, but obviously the Playdate ended up shipping a few years later, after lots of changes to both the hardware and the software and like other developers that Panic approach super early on, it was a while before May-Li and Andy even had a physical prototype to work with.

May-Li Khoe: I mean, it’s definitely been an adventure.

I think it was kind of a wild ride because we started so early thinking it was going to just be a few months and then it was just a few more months. And then it was just a few more months.

Christa Mrgan: Oh, that’s what people said about the pandemic, too.

May-Li Khoe: And then at some point in time, like things that had been working weren’t working anymore because of changes to the APIs is and the SDK. And that was definitely a challenge. So sort of when things started solidifying this last half a year, we hopped back in and tightened things up. But but yeah, I mean, it wound up being far longer of a journey than we expected.

I think that there was something magical about finally getting it out of the simulator and playing with it on device. Just playing with the device for the first time in general, I think was kind of a moment. You know, seeing the actual display and all of that. I think I’d seen a render pretty early on. And I I’m trying to remember when it was the, we actually got a device. It was definitely a little ways in that we got one in our hands. And then there was an updated version that we got a little bit later and I think pre- pandemic, I had a chance to visit the office and see a bunch of the physical prototypes.

And that was fun, sitting in the back. And I think that might be the first time I saw the concept for like the speaker and the pen holder. I’m not sure. I just remember there was piles of plastic stuff and the speaker was definitely something that was being talked about back then, too.

But you know, one of my favorite things is getting started and having a conversation with Neven about what his process was, really, really early on.

Christa Mrgan: Neven Mrgan is a designer at Panic. He developed the interface design for Playdate’s operating system, and has worked on a bunch of Playdate games, too.

May-Li Khoe: I think that helped me understand a lot of things that I, that I didn’t understand. So I think it really made a big difference for me to be able to kick off that way.

You know, to be transparent with y’all I, this is my first time doing this much pixel art in a very, very long time. It’d been many years. And so that was really fun, doing the character design and coming up with the movements and talking about sound and music as well. All of it was great. But it meant that I didn’t go into it with knowing what style I was going to stick to. Cause I, I wasn’t at that level of fluency when I started out.

And Andy made the thing-- Andy was the technologist on this, so he made the thing go. Some of the ways that were really fun that we worked together, he set things up so that I was really able to adjust the animations just by using like numbered lists so that I was just pulling out individual sprites from the sheet and ordering them. That let me experiment a lot.

Especially in those early days, there was a lot of like, oh, what if we did this? Oh, okay, cool. Yeah, that would be funny. That kind of thing. And just like giggling whenever we, I don’t know, drew something or made some interaction that made us laugh. For example, when we were like, what is our selection state going to be?

You know, it was like, well, what have we made things sparkle? So I remember sitting with Andy and him, like making the little sparkles, animate. The little shooting fireworks and making the animations that move the spotlights back and forth on stage, all that type of stuff. Yeah, so it was really great to have that synchronous time. It was a couple of years ago now, but it was really fun.

Christa Mrgan: Boogie Loops definitely feels like it was fun to make. And it’s truly a joy to make songs and choreograph dances for these adorable characters. And if you’re looking for some examples to get you started, don’t worry, like Mario Paint, it comes preloaded with some sample tracks. And you can even duplicate and remix them.

May-Li Khoe: Yeah. So at the very end we thought it would be nice to have somebody help tune up some of the samples. And make a few sample tracks. And so I brought in my friend Andres Velasquez who co-founded/works with a sound studio, a sound brand studio called 1000 Birds and Andres Velazquez himself is a musician who’s recorded multiple albums and just an all around wonderful person.

He actually is based in Colombia and he helped us fine tune stuff. It’s also amazing just to watch him create with the toy. Because he’s a professional musician who has worked with tons of sequencers and whatever, he just wouldn’t stop and he was making something and like laughing at it and making something else and just cranking out a bunch of tracks. So yeah, the example tracks that we have are, are made by Andres Velasquez.

I actually really would love to get it into the hands of a couple more musicians. I mean, Andres is fantastic and I would love to see more, more folks get ahold of it and make some stuff that’s unexpected. I don’t know, maybe if a band like Lullatone could take a hold of it and make something fun.

Christa Mrgan: Yeah. I’m excited to see what people make with Boogie Loops. Here’s part of a track I made. I asked May-Li what she’d like to see.

May-Li Khoe: I would love nothing more than to see people’s creations online. I would love that. I would love, I would love it if people did the dances that they choreographed alongside their Playdates.

Christa Mrgan: Yes. And you can, and totally should do this by the way : you can download the free Playdate Mirror tool for Mac, Linux, and PC to stream and capture audio and video from your Playdate. And then you can take a video of yourself doing the dance you made.

May-Li Khoe: And another thing I hope is that just people make really fun stuff and share it and film it and, you know if people just love making stuff in it, then that would make me happy.

Christa Mrgan: So if you end up making something you want to share, please show it off to @Mayli on Twitter, and be sure to tag me and @playdate, too. My Twitter handle is @antichrista.

May-Li Khoe: I would love that so much. It would warm my heart and make my day.

Christa Mrgan: Thanks so much for listening, and we’ll be back in your feed with more Playdate stories soon.

The Playdate Podcast was written, produced and edited by me, Christa Mrgan. Cabel Sasser and Simon Panrucker composed the theme song. Additional music was composed by Andres Velazquez and myself using Boogie Loops. And I also made that song at the very beginning of the episode that I used to create the party soundscape, because I was worried about copyright issues! So just FYI May-Li would spin better music in real life. Okay.

Huge thanks to Tim Coulter and Ashur Cabrera for wrangling the podcast feed and working on the website as well as to Neven Mrgan who created the podcast artwork and ,site design.

And thanks as always to everyone at Panic. Playdate is shipping now and available to order at play.date.

May-Li Khoe: Oh, fun fact about my collaborators. Okay. So one of them is Andy Matuschak. The other is Andres Velasquez, and both of them are married to people named Sarah. And they’re both named Andres slash Andy Andrew. So there’s two Andy Sarahs in the background here.

Christa Mrgan: Weird. I know three different Andy/Sarah couples. What are the odds? Actually I bet May-Li’s partner could tell us.