Adam Argyle

Adam is be combining passions, music and CSS into a creative audio visual experience. All in the browser.

Build with him, jam with him, peep the beats with him; as CSS keyframes become driven by a K.O. II live on stage.

Transcription

(Applause)

What a cool conference. Thank you, Marc. Thank you, Toby. You all rule.(...)

So I'm doing something weird. I'm just going to have some fun up here. I watch a lot of the beyond tellerrand talks. I'm like, these folks are combining things that they love. And they're doing it because they're passionate and they make weird stuff. And weird stuff is cool. We have a phrase in our house which is weird is good. We like chant it. It's really fun. So I'm going to do weird stuff. I've never done this before. I'm going to be performing live songs. I have a KO2 here, which is like a, they look like this. It's like a big calculator.(...) I'm no pro. I'm no Toby. But I'm going to have some fun up here. And it's going to be awesome. So the first thing I'm going to do is I have a, well, let me get my camera here.(...) I see circle camera. So you can see what I'm doing down here. Let's make sure this all kicks on.

I'm sad it wasn't already started.

Let's see. Oh, circle camera. Where are you at? I swear. I just told you to turn on.

You saw me click that, right?(...) Oh, it thinks it's there. Show everywhere. Show on all desktops.

Where's my camera? Oh, I saw it there. It's right here. It has the wrong source.(...) Let's have some technical difficulties in the beginning, shall we?

Let's choose me and then back to the camera.(...) Hey, that looks like it's lighting up.

Okay. I just want you to see the tool. The tool's cool. Okay, all

right.(...)

So that way when I'm hitting buttons on here.(...) So what I did, I'll just go into it. The first thing I'm going to do is I'm going to perform a live little song. I'm going to be like a mini Toby. I'm going to sample myself. I'm going to chop myself and I'm going to kind of talk through what I'm doing here. I have a blank project to hear inside of this KO2 and I'm going to switch to group D here. I'm going to change the sound to 800, which is where I'm going to record my sample. I'm going to go into sample mode and I'm going to say, sup, beyond tellerrand, MIDI meets CSS.

All right. Let's go back here. Sup, beyond tellerrand, MIDI meets CSS. Sick. Okay. So now I'm going to chop that shit up. I don't chop it up just like this. I'm going to go sup beyond tellerrand, MIDI meets CSS. Cool. I probably screwed something up right there. Let's check them out. Sup, sup, beyond tellerrand, beyond, beyond, beyond. Yeah. Okay. So I'm going to edit that. I'm going to trim it. Beyond, beyond, beyond,

beyond, beyond, beyond, beyond, beyond,(...) beyond, beyond, beyond. Beyond, beyond, beyond, beyond, beyond tellerrand, tellerrand, tellerrand, tellerrand, MIDI meets CSS.

Yeah. CSS, CSS.

Okay. Sick. I think we're ready. So I'm going to go now to group A. There's nothing here. I'm just going to hit main and I'm going to pop a little beat in here. Let me get the tempo going like this.

It's going to be something like that. It looks like I'm at 127 BPM and let's hit record.

I don't think that recorded.(...) Oh, it did. All right, nice.(...) Okay. I'm going to turn on quantization here.

Sounds a little off, but you know what?

See? No? Give me some appreciation for this guy.

Told you I'm going to have fun.

All right, sick. Okay, so that was pretty much it. All right, sick. Okay, so that was my intro.

And I'm basically going to break down what I did and why it's so fun and weird and my style. So let's bring right on into our opening slide here. So at first, I was like, when people do really cool effects, oh, I don't have internet.

Yeah, that's going to be a problem. Maybe not like entirely.

Oh, it's okay. I mean, I was tethered earlier. Oh, look here. Yeah, do that. Tether to my personal hotspot. That'd be great. I'm a nerdy dork. Yeah. We're just exposing it here. Here, let's see that effect in the background. Yeah, okay. So at first, I was like, everyone who does a really bad-ass kind of like musical show usually uses WebGL. Because look at it. You got all these sick particles flying around and they usually just tie up their audio and the WebGL effects try to follow the song. It's like informed by the waveform. And you know, I could have done that. WebGL sounds like fun. But that's not my style. I write CSS.

You know? So I was like, if I'm going to do it my way and I've got to be my authentic self up here and I'm going to combine my passions. Because to me, yeah, I was like saying when I see people give these talks, when you watch a passionate weirdo, it just rubs off on you, doesn't it? And I just want to do that to y'all. So I'm going to do a weird CSS musical-powered thing. And I also want it to be like directly attached to the sounds that are happening here. Right? And so I've got all these facts. The harder I push a button, the bigger it is. And the softer I can get it in there. So I've got all these little things powering this kind of weird scenario here. So I don't write WebGL. I write CSS.

Now, I do want it to be cool. But like, I'm not that cool. And CSS is cool. It's got a lot of cool features. But like, have you ever heard of just shapes and beats?

This game is sick. Look at this.

I'm not doing this.

I'm not doing this. I'm not doing this. I'm not doing this. I'm not doing this. I'm not doing this. I'm not doing this. I'm not doing this.

Bring it back, yo. Bring it back. Let's see it. I offline to that video. Oh, here we go.

So these little characters, and you have to dodge the song.(...) And everybody that's like a higher musical artist, they'll make a whole level for the track. Super cool. There's a box.(...) Box, battles.

Yeah, I'm not doing that.

It's not me. I mean, I'd love to do that. That would be super cool. And then the other thing I was mentioning here is-- or Incredibox. Have you heard of Incredibox? It's old school. It's like 10 or 15 years old. And I'm going to do a mini Incredibox song for you just because it's so rad. So here's the app.

And I'm going to choose the alpha group here. It's like just a group of dudes you get to kind of employ.

And I'm going to drag them onto the stage here like this.

(Music Playing)

You can make it if you want it.

You can make it-- I don't have time to do all this, though.

That was a lot of work.

Really sick animations. They all do this cool stuff when they're in there. You can make it if you want it. Bringing more dudes.

(...) You can make it if you want it.

You can make it if you want it. You can make it--(...) You can make it if you want it.

I'm having fun. Anyway, there's all sorts of different groups in here. It's really cool. So like here, let's go back-- Just because this app is so fun. Look at all the different people you can like take on as personas. Let's look at the love. Yeah, let's do the love real quick just because we got time. And we're just having fun and being silly here. So here.

Yeah.

I don't even know what these guys do.

(Music Playing)

My kids and I love this. We sit around and we just make-- You can even record it. And if you-- oh, here, let's do it. If you find all the people that fit into this thing, you'll unlock a special music video. Let's see if we can find it. There's-- OK, that was fun. That guy's not in it. Although that guy, we're a huge fool.

All right, let's see. We're just trying on some people here. Waiting to fill up that circle up there. Mm-hmm. OK, yep. I don't know which one it is. Is it you? Oh, there's another one. Let's get rid of this guy. OK, who is it? Is it you? No, it's not you. Is it you?

Yeah. OK, so check this out. Here we go.

(Music Playing)

Unlock that video. Yeah, let's see it. Show me what you got. Incredi-box.

(Music Playing)

I can't dance. But I'm on.

Right?

So cool. I'm not going to make that, though. I'm not going to make it. That's just too cool.

So that's Incredi-box.

Yeah, I hope you liked Incredi-box. Pretty sweet.

All right, so I wanted something cool, but I wanted something that was more me. And so I have a little bit of a history making some of this stuff, but I watched Gavin Strange this year. Who watched Gavin Strange's less thinker-in, more tinker-in at Dusseldorf?

What an inspire-- His little opening video was like this punch in the face of all these funny videos and then a clown horn honked at the end. And he was like, I'm Gavin. And it was awesome. But his whole thing was less thinker-in, more tinker-in, which is just so British. I love it.(...) And I wanted to do that. His whole thing was like, it's really easy to get stuck in your own head. Have you ever noticed how weird it is that yourself stops you? Fear and laziness are some powerful assholes, but they're like in your brain. They're you, but not you. And you're like, get out of my head, things stopping me. And I didn't want to be stopped. I wanted to just follow whatever it is that I like to do.(...) And so for me, I was combining on the stage today my passions--

CSS, banjo, and sequencers like the KO2. These are just silly things I love to do in my free time. I play banjo every night for my kids. I have a mountain banjo. It's really soft and cute. I play that one all the time. I've been learning a Tetris on it and some really old-school songs. So I'll play-- So when I sequence a couple songs later, it's me playing the banjo. And I'm not playing that, but anyway, you'll see. And so I'm combining these weird things on stage for you just to let you know that you can do less thinkerin' and more tinkering, too. You could be a dork. Dorks are cool. Weird is good, right? Weird is good. So I wanted to create something authentic. And to do that, I needed to combine things that were unique to me. And this is my weird set of unique shit. So enjoy. This is the first song.

So let me switch to this project here. Make sure I got this down here. And...

This song is called "Rippin's Tree." And it's like 100 years old, y'all.

Boy, that sounds a little blown out. It's all good.

(Guitar Playing)

The says go here.

Turn that sound down.

(Guitar Playing)

So every time I program a button in here, it triggers a different animation. And the way that I pushed it and the way that I sequenced it plays into each of these animations and are triggered by the actual sound,(...) which is kind of unique in comparison to what WebGL would do. WebGL follows the song. And in this case, the audio follows this. And look, I got that screen shake in there. Pretty fun and crazy.

And let's get back into here and just calm it down.

There's our first song. I did something weird.

Kind of honestly surprised that it worked out so good. I mean, I was hoping it did, but...

So, Banjo, CSS,(...) Sequencer, weird. It was great. So some of the things I've done prior that kind of led up to me having an experience that looked kind of like that was I was on Jason's Learn with Jason show. He's here somewhere. He's back there. Take a bow. No, you don't have to. Anyway.(...) I just want to be Austin Powers in my second life, I guess. And I wrote a blog post about how I made this thing. Let's all go to noisy.netlify.app. If you have this open right now, you'll see a site that looks like this. And what I wanted to do was something weird again. This is last year. I wanted to make noise you could see. And you could see it across spaces. So everyone who connects to-- let's go to room number one.

And I'm just going to jam. I'm going to enable my mic.

Yeah, allow this time. Okay.(...) My audio triggers a gradient animation. So it's another CSS fun, silly thing. It doesn't have to be all business. Oh, look, other people are joining.(...) That's their noise. It actually looks like all of our noise is combining. I can change my gradient style to a linear one. Now we see chaos. And this was noisy. I wanted to see noise combined together. You can't hear anyone else. So if you were in your house and I'm in my house or you're at work and I'm at work, all you could do was see the noise that's happening around somebody. Why? It's weird. It's weird and fun. Plus, I got to play with a whole bunch of fun little animations in CSS. And what I do is I take the audio stream that's coming in. Actually, I think I break it down on the slides here.(...) So anyway, this was noisy, which was pretty cool I thought. I'm back out of here.

And this one was I took the navigator and I got the user media. So I need to get access to the audio that's coming in through the mic. And that's when you got requests. You saw requests like, hey, is that cool if I record your audio? And you're like, yeah, that's fine. You're not going to do anything weird with that, right? I'm like, no, I'm just going to make noise visible. It's all good. So you take the audio and then I split it. I split it into a low and a high frequency. And I take those and I make little audio streams out of them. You can see right down here, I'm kind of splitting those out.(...) And with those split out, I set them as custom properties on the HTML.

Right? OK, so now I have a real time set of data on request animation frame here. So every time the browser wants to animate, it's looking at the state of these two split streams. Takes them, puts them into custom property. I type the custom property with app property and make it a percentage. That way it's kind of hardened and it will never break. The browser is anticipating a percentage to come in. I do that for both the low and the high. And then I stick that right in a gradient like this. Here's frequency low and frequency high. And now as the sound grows and contracts, I'm animating different gradients with percentages.

Weird, fun. I love that project. It was really fun. So watch the stream on YouTube. Jason and I break down the entire thing. I go much more step by step and build these little prototypes that are like little proofs of concept. And then we put it together and it's really fun. And there's four bugs. No, they're Easter eggs.

Because, right, you can just leave that stuff in there if you want. And so if you're in there later, look for these. One of them is called life after death. Plus I just have fun naming stuff. So once life after death, one is turquoise. You saw it was mostly black and white. Where's turquoise? I don't know. You have to find it.(...) Give it the time of day, which is AKA I'll give you a hint. And that one's a change your system theme from light to dark. And you'll see a little Easter egg. And this last one is called take me with you, which is where-- well, I'm not going to tell you. See if you can find those four. Can you take it with you? Can you give it the time of day? Find the turquoise. And can you figure out what life after death means? Life after death is also inspired by-- what was it? There was an E-ink phone.

And if the battery died, it had the pixels permanently on the screen because it was just E-ink. And I thought that was just so cool that even after it was dead, it was life after death. It still held something. I think kindles even do that, right? There's like an ad on there. You're like, you're dead and it's still trying to serve me ads. What a turd bucket.

Jeez.

Okay, so I did the noisy thing. That was really fun. I wanted to do something kind of more like that. I just liked this random organic chaos of blending colors on top of each other. So I wanted to plug in the KO2 because I was kind of dancing around with like using Canvas or WebGL. I kept trying these things that followed the audio and it just wasn't the same.(...) And so I plugged in my KO2 and things started clicking. When I realized that like the harder I pushed, I could get bigger raindrops than if I did a light push. I could do a really big laser. I could do a really big little random circles that pop in. And I just could have a lot of fun. So I got physical buttons, which was cool for me. Velocity sensitivity comes from this. And this is over the MIDI API. I have press and release. Like where's this one? So this one I push it and until I break it or until I let go, it breaks,(...) which is cool. I can also screen shake until I let go.

And these are just like fun little things. This little device has these like three little tiny capabilities. And I was like, "Boo-ya! Let's make something weird."

And then I could connect it right to the visuals. And that was really fun. And that was how this unique talk was born. I was more tinkering, less thinkering, and it was really fun. It was very satisfying to kind of do this. It's also very risky to do all this live on stage.(...) But I'm having a blast already. Hopefully you all are feeling the energy.

All right.

(Applause)

I want you to be able to do something like this too. So let me break down some of what I did. So a lot of my talks are really heavy CSS. And a lot of what the result is is just JavaScript writing CSS. So all those animations are CSS animations. And we'll get into that. So let's talk about Web MIDI and what's going on here. So at first, we'll do an API introduction. We can all read that. Yeah, that looks pretty good. So you got to ask for access. You're going to request some MIDI access from the browser. And that's even going to prompt the user. And it's like, "Are you cool with that?" And you're going to say, "Yeah, that's cool." And then it's going to list all of the different MIDI devices. So it's like immediately frustrating right off the bat. I guess you're like, "Okay, give me the one MIDI device." And it's like, "There's probably a lot." And you're like, "I only have one." And it's like, "There might be more." And you're like, "But there's not." So anyway, you have to figure out which one is connected, you know, and reduce it down to the one that you want. Okay. So you look at all the inputs. And then you can handle messages. So once you've identified the MIDI device that you want, you've accepted the user's permission to get access, you can start listening to messages. And this is like a message here that's popping in.(...) Okay. So we've got messages coming in. Pretty cool. And I made a quick little web component that could handle connecting and disconnecting and showing the connected device name. And I did that. And here's a little MIDI status component.

And it's, you know, I'm overly simplifying here. But I'm just making it like, "Hey, you need to know if you're connected or not and what the device name is. Then render and set up events so that I know when the messages are coming in." Pretty self-explanatory.(...) And so where is that component? It's actually right up here. There it is. So I'm connected to the EP 133. And I just--the web component is not handling that animation. It's just the little circle thing. But in my presentation, I have a little box in the top right. And when you hover over the little box, it swoops in the child.

It's just kind of fun. So anyway, there's the component.

Maybe I'll open source it. Probably won't. It was fun to make, though. And so now we can listen to MIDI events. We've got messages coming in. And these messages from this particular MIDI device, not all MIDI devices are the same. It has the status, a note, and velocity coming in off that data. So I'm going to destructure that using the array destructure syntax, which is super cool. In that message, I'm then going to do this really weird thing, like, "What is 0xF0?"

I don't know, but apparently it's a bit mask.

And so what this does is this targets the upper four bits of the status byte, and then it isolates just the MIDI command that I was looking for, and it ignores the rest, and also that I can do something like this, and switch between is the note on or is the note off. So here's my two little flags. So MIDI, we're transferring really tiny little data packets that are old school,(...) and here's how I'm deciphering between a note being on and a note being off. And then other pieces of the data will tell me what note and the intensity.

We're cooking with oil now, or gas. Gas. Cooking with gas.(...) Awesome.(...) All right, and so then I'm going to-- which is now really cool. Anyone see the Remix 3 announcement? And they're like, "We're going to use the event API of the browser." Everyone's like, "There was an event API," and I was already using it. I was like, "The event API is really cool. Look, I can just emit a new custom event that says MIDI note is on, and then any of my current effects that are currently going can register and listen for a MIDI note being on. So if I'm pushing a button-- anyway, it's also going to be nice when I want the MIDI note off, so that I can easily listen in these different effects based on the button that's pushed, and then trigger things, and know when they're coming in and out.(...) Cool stuff. So now what do we got? We got buttons that are being pushed. We have the data coming in. We have some sensitivity. What are we going to do? Well, we want to do some cool stuff when the button is pushed. How about some explosions? That was like the first thing I wanted to do. When I first was making this, when I was doing all the tinkering, I was like, "It's got to be colorful." Everyone knows I love color. Color is cool. Let's do something colorful. And-- well, here. I mean, it worked. Here was the colors. We got some explosions.(...) But what I really liked about this particular demo-- so here's the explosions in the initial demo I made. But they're sliders. They allow you to kind of increase the distance and increase the number of particles, and then you get different effects. Really cool stuff. And also, here's a fun little test we're going to do. This particular version is using P3 colors, which is an HDR color space, and then so is this demo, but it's using OKLCH. Each of them-- I did a different technique for identifying like an analogous color set, something that hue shifted but still stayed within a nice harmonious range. But if we look at what's happening in this demo, it's where I click, does it, and I have to click to initiate it. And so what I wanted to do was port that, this whole particle effect kind of concept, and make it so that it was powered by this. So that now when I push a button, I wanted to have a random position get sent, like here. We got to go back to this.(...) If I push this-- See, I got a random position.

And I'm triggering it with my buttons.(...) And so the explode effect that we saw, which is-- I think it's pretty cool, looks great. It has three different parts to it. There's the particle little bubbles that you see. There's a seismic set of rings that burst out from the center. And then it's kind of hard to see on the screen. But if you look really closely, there's another really big dark saturated circle that grows to the entire thing. So every time you click, there's three different animations that trigger. So we've got the explosion, the burst, and the shoot. And then I cycle through the different hue sets that I have for the colors. So every time you push it, you get a different color set.(...) So kind of cool.(...) Here was the basics of that animation. So I'm returning and-- So I'm targeting this particular explosion. I'm animating the div. So every time you push the button, I create a div. I give it some sizing and some colors. And then I create this animation. The animation syntax is really nice, too, because when it's done, you can wait for it-- Well, when it's done, you can remove the elements off the page, which saves you, as you continue shooting multiple explosions, you're not overwhelming the browser. And so it's perfectly timed when the animation's done. You rip those things right out of the DOM, and then you can just send out some more. Notice I do fill mode forward and iteration one and a really fun, strong easing on there. So that's the explode animation. Here's the burst animation. So they scale up and fade out. They go like that.

And we have an inner and an outer.

And we have the shoot. This is where I would iterate over a random number of particles based on the slider configuration. And then I would shoot out a bunch of particles. And here's that finished function.(...) And then it looks at the container for all those particles and removes the particle that just finished.(...) Really cool and-- I could be clean and write my CSS. If I was doing this in pure CSS, I still would have had JavaScript events that would have been listening for animation and events on each particular element. And it's just a little bit messy and compared. Looks like I have a typo. You didn't see that.

So, OK, so how many buttons? Right, so at this point, we are triggering something fun. We've got buttons doing things. And the KO2 has nine buttons. I don't know if you can see it down here. I mean, you can kind of see it. Actually, there's more than nine. Yeah, that's 6 times 2. That's 12. So there's 12 buttons on here. And so in this particular case, I wanted to make a map. So something that could map these buttons to an effect.(...) And I did that making this nine button MIDI map. Or in this case, I have a MIDI map and a keyboard map. And the MIDI map looks like this. So first, I had to connect the MIDI device, right? Get all these buttons firing, push a button, and then see what number it said it was. Because it doesn't match what you see. That would be too easy.

So I push the button, and 36 shows up. I'm like, sweet. When I push dot or period on this thing, it shoots the number 36 out. So then I go through all the numbers. It's kind of handy. It does 36 through 38. And I map all of those to an effect. And then for local development, so that I didn't have to always have this plugged in while I was testing all my effects, I did it for the keyboard as well. Which I think I passed. Yeah, here's the keyboard one. So if I push one, I can still shoot the lasers. If I push two, and that way I could trigger these things from my keyboard, which was nice. So that was another good part about the map. And having this mapping was that I could just easily keep these things shooting the same effects and unite my kind of work here.(...) And so then I had a particle mapper. And it would take the button that you pushed, and the effect that you wanted, and put them all together, and send the key code, and whether it was pushed by the keyboard or your MIDI device. And that was crucial because there's intensity coming through. You don't get intensity off the keyboard of your computer. It's just a binary thing. It's on or off. You pushed it or you didn't. You released it or you don't. And on here you do. You get like a wild amount of pressure sensitivity. And we'll see in one of the songs, as I push and really lean into the button, it triggers the effects to either be stronger or lighter. Both in the effects that this has, and the effects that I put on the screen. And so I'm finding this like organic, fun intersection between like this thing's capabilities and then all of those sliders that I had in my animations. Right? So I had, you could increase the particle size or increase the scale, and I could use these to my advantage in my animations. And so the particle mapper kind of takes care of that. And at the end of this, I needed to use the wake lock API, which is a way for you to tell the browser, "Hey, don't go to sleep.(...) I'm touching keys over here." And so what originally happens was, I was hitting buttons, having a blast. My kids were like, "Yeah, Dad, you're doing it, yeah." But then my screen would fall asleep.(...) And it would be like, "Well, that's going to be a bummer on stage. I got to use the wake lock API." And so every time you hit a button, it requests the wake lock API to be active. And it monitors that. And after a certain amount of time of inactivity from the MIDI device, it undoes the wake lock and restores my computer back to its own ability to put it to sleep. The web is very cool.

So, okay, so we had buttons pushing, but what about button release? We had this one where you can release a button, and if I push it lightly, it's a tinier box than release. If I got this one, you can hit it and release. Really push it and release.(...) And so, again, I'm just using that custom event. So we saw my switch that was looking at the weird 0x0f thing that was a mask of sight. I don't even remember the words anymore. But anyway, when that happens in the off state, I emit the event. And so any active effect can wait as soon as the button hits down, it causes the animation, repeats the animation until you lift your finger, and then it cancels the animation, cleans up all the work, and restores the browser back to a state that there's no particles on the screen. Super cool stuff.(...) And then over here, this is how the different events or the different effects listened for that event. Very self-explanatory, cool API to just pub, sub, or publish and subscribe different events through the browser. You can do this at any time. So you could have components that are just like, I've been clicked. And then anything else on the page can be like, was he clicked? And then they could do something. It's kind of fun.

So we have mapping effects to buttons. We have the effect map, and that ended up looking something like this. So that way, this is where I started to get into a design system. The design system was, you look at the KO2, and it's got four rows. And what a lot of people do when they use a sequencer is they put kick-- I'll see how I go to the kick.

They put the kicks down at the bottom.

(Music Playing)

Oh, sick.

OK, anyway, the kicks are on the bottom, right? Snares and things that kind of shoot.(...) I put them on row two.

And this is like my little visual design system I made. And I have like, these are things that you can-- well, this one's push and release. This one's really fun. Oh, look, there's a line in the middle. That's too bad.

Anyway, it's going to be a gill. And this one is just like a little sine wave. You can push it hard and get bigger little particles to shoot across. And the ones at top are meant to be things that you can do something like this.

(Music Playing)

Or--

(Music Playing)

Right?

The KO2 also has this cool thing. If you hold timing and hold the button, it has a little counter on top that'll tell you what rate that you want to fire this out at, like, 4, 8, 16, 32. And that was the knob I twisted, was to increase the rate or decrease the rate. So then I've got this one up here.

(...) (Music Playing)

And this one.

This one kind of reminded me of Star Fox. It's like I'm playing an old Super Nintendo video game. Anyway, cool. Thanks. Someone's born in the 80s.

Yeah. So that's the effect map. And so I got to play for a long time making all sorts of animations. I wanted something that was a little bit like Bauhaus inspired. I wanted something simple that could be dynamic and very expressive and bold. And so that's why a lot of these animations are simple shapes, is I wanted--(...) I knew a lot of chaos would happen. And if I had too much chaos, it would be too-- we'll see a little too much chaos here later.

OK. So then we have multiple-- here's some of the different effects that I did. We have the single triangle that shoots out.

And that one's just a scale and an opacity.(...) So at the end of the day, so much of my CSS knowledge could play into what I was doing here. It was really fun. OK. So we've got the scaled triangle. We've got the rotated line. So that's the one we were just looking at here.

Awesome.

And we've got the audio bars. Oh, that was-- which one? This one? No, this one. This one. This one here. So you can put--(...) something like that. It just kind of seemed fun. So it's just like a little preview of some of the effects that I put in there. And just all my CSS little animations were there. So here, this is where I'm looking at you. I'm going to switch to my K02 medieval eye contact.

He's doing it. He's doing it. OK. So I'm going to unplug this. And here, a little bit of that. So the K02 medieval is a really silly device.

It doesn't have kick drums or anything cool on it. It just has old school fighting and medieval and weird-- so I'm going to make a weird little song for you. I called it the intermission because I'm like, this is a little bit like Monty Python,

where we're just going to have a weird little moment with the K02 medieval.(...) So let's hope everything connects. I can check my little device up here to see. It looks like the EP1320 is already connected. My web component was watching for disconnections and reconnections and establishing new ones for me. Let's test.

Let's see.

(Yelling)

Yeah.(...) OK.

We'll see. Where's my-- yeah.

(Music Playing)

Oh,

then I'm on.

Ready

for a sword fight?

Oh, geez. Let's go here.

Yeah.

I'm just going to kick the beat in. Here we go.

(Music Playing)

I'm having fun. Whoa.

(Music Playing) (Yelling)

How about an audio gain just for silliness?

(Music Playing)

Chun-Li.

(Music Playing)

Anyway, that was a part of the medieval introduction there. And here, let's do one other song that I made.

(Music Playing)

What a silly little tool, huh? This one, though, is not emitting the events to cause the thing. The device, by default, had them in the box.

(Music Playing) (Yelling)

But it didn't cause the thing. The device, by default, had them disabled, which was really annoying. And I had to go in and tell each particular MIDI which note to be. And I just didn't fix it for that particular project. But I thought that was pretty funny. It's actually a--

(Music Playing)

Anyway, that's our Bardcore intermission. If you didn't know what Bardcore was, that was basically it.

I'm going to switch back.

(Applause)

All right.

Oh, this talk is so funny. I'm so glad you all are entertained.(...)

OK, I'm going to go back to here because I got one more banjo song I'll play in a little bit once I recap some of the final stuff here. Oh, and me and my kids have a lot of fun putting Legos on here.(...) It comes with Lego-enabled spots. Really fun stuff.(...) OK, let's see.(...) This one goes into the output.

This one gives me juice.

Hopefully, everything is still happy.

It looks like it. Cool. OK, Bardcore intermission. That's funny. So then what about velocity and sensitivity? This is how much you push it, you get different effects. And that's like a-- well, you'll see what I did in a second. And this comes in as the intensities were between 1.4 and 2. And then there was also some that came in somewhere around 127. So I had to kind of deal with this variety of sensitivities that were coming in from the device, and I had to figure out how to handle it. And then the keyboard, since it has no pressure sensitivity, has a default of 1.7, which was like somewhere in the middle.(...) So then I have inside of each of my animations a little intensity configuration so that I could set how much and how hard it would change and change the size of things or change the power or speed of the animations. And I got to use all of those and set a min and a max.(...) With that min and the max, I could use that intensity to get the size and set something random or use the intensity. Use the intensity for the duration so things happen faster or slower. And these are just a few examples or how many of something. Sometimes when you push it harder, it shoots more pixels or particles than it does if you just push it kind of lightly. And that was really fun. So here is all the different buttons that are on here. Let me see if I might want to-- yeah. All right, so we've got the period here, which is our triangle.

And we've got a burst. And this was the burst from those particles. So I got to reuse some of my fun animations that I've made in the past and just kind of do something clever here, which is fun. The harder I push it, see it's like larger than if I go kind of soft.

What a cool little tool. This is the shake.

Gosh, that sounds great.

Okay, sorry. That was fun.(...) We've got the laser, which obviously has like a random rotation. It has a random amount of glow, and it has a random thickness to it. So depending on how hard you push it, you get a different kind of snare. And I liked that one because you needed something that shot across the screen. It didn't make sense to have a snare do a shake.(...) Here's the different-- what I call this one-- circles. These ones, every time you push it, it picks a random side and chooses whether or not to come in from the top or the bottom. So this is, again, a lot of unpredictable stuff is happening inside of here. I could only prepare so much for this presentation today, which is fun. Here's the bars, just some audio bars. Here's the rain, which is currently hooked up to-- I sampled a record player and stole-- well, I didn't steal, but I stole the crackling noise just because it sounds cool.(...) Here's this one. This looks like a chomp, chomp, chomp, chomp. But it's also nice because as you do all the different effects, it stays that way, which I felt like-- So the K02 is also often called a live device because there's so much showmanship that you can put into it. So people don't tend to record full songs and then just hit play and stand back and bump their head at it. No, they're in here putting on a performance with this thing. And I wanted some stuff that could really change up the dynamic aspect of what was going on in here. And here's the-- what did I call this one? That's number six.

Bubbles. Oh, yeah, little bubbles. They're like little soda bubbles flying in sideways. And here, let's really make it go fast. Let's see what happens.

Let's see. Yeah. Oh, yeah. Cool. And if I push it harder, they should go bigger than if I let go a little bit. Look at that.(...) Isn't that fun?(...) I'm having fun still. Okay, let me drop that back down to a regular 16th interval. There we go. We've got the meteors that just kind of fall down. I thought that would be fun to see. The stripes that are there until you break them.(...) And then lastly, the stripes-- well, the lines being sent from F0-- well, not F0. Okay, so now we're on the final song. This is an original banjo song by me. Well, the banjo playing. And I tried to do something cool with it. I sat in front of my computer. I recorded it to a click track. I put it on this device, and then I just played. I quit thinkering-- or I quit-- I started tinkering with less thinkering. Whatever. You know what I mean. It's been the theme. Okay, so let me change my project. I'll go here to project two.

And I'll kick it off like this.

Ooh, that's not playing anything.(...) I am on project two, right? Yes. Here, let's

see.

(Music)

It's so fun. Banjo and CSS and the sequencer. All right, let's go to the next scene. Scene 5.3. Add a little bit of energy to the song.

(Music)

Yeah, we got some drums in there. Nice.

Okay.

A little low pass, a little high pass, a little back and forth.

I slay D.

Nice. So this is what I mean. This is like a little performance device. There's so much low-- I don't even know what buttons I'm going to push right now. But I do want to go to the next scene.

Oh, yeah, there's a little 8-bit sound in there. I like video games. I might as well do that, right? It's my song.

It's just cool.

Harder.

So cool.

All right, let's dial it back down to one.

Oh, thank you. Thank you. I hope you're feeling it. I love playing this on the porch. I'm just jamming by myself. I'm like, "Yeah, the banjo."

And then we'll just kill it with the--

(Applause)

[Marc] Adam Argyle, ladies and gentlemen.

[Adam] I can't believe that all works.

Thank you.

(Applause)