Reacting to the Weird + Creative Corners of the Web

Welcome to Syntax. Today, we're gonna be talking about the weird creative corners of the web. There are a ton of these libraries, communities, projects out there that are some of the coolest stuff you will see using web based code, and we're gonna be talking all about different libraries or different areas of cool things that you might be interested in. So my name is Scott Tolinski. I'm a developer from Denver. With me as always, Wes Bos. What's up, Wes? Hey. I'm I'm stoked about this. So we're at GitHub Universe a couple weeks ago. And before the keynote, they had this DJ Dave. She's

a, like, a creative coder DJ, and I was, like, mesmerized by this. We'll show an example in just a second. But I was just like, man, I love these crazy creative corners of the web where there's just, like like, once you told me it, it's called Strudel. I went I looked into it. I was like, this is an entire world of people who are just creating things and are being creative.

Cool stuff. And I was like, let's go through. I think there's about seven of them here, and a lot of them are audio visual creative corners of the web. And let let's react to them. Let's talk about them and and how you can build this type of stuff your yourself.

Yeah. Let's do it. So let's get into the first one, which is Strudel. We saw, as you mentioned, DJ Dave at GitHub Vercel. I'm very familiar with her work before this. So when I saw her there, I was stoked to really see her perform in Vercel.

But she's modifying Node. She's writing code live, and it's creating electronic music. It's visualizing MIDI.

It is a really cool project, and, she's exquisite. So great follow on all the socials if you wanna check this out. But, man, this is a really cool little project.

What's really cool about this is if you can't see it, you're listening on audio, is that, like, the code is just, like, running. Like, you you code the loops, and then you you code all the notes. And I I know I'm looking like an idiot here, so I actually don't know how music works. But you see, like, the synth lines and and all of the notes being hit, they have, like, they have little sliders as to where they are or they're being, they have put a rectangle around it, and it's just, like, so mesmerizing to watch. And then, like like, a normal DJ would just, like, turn knobs or whatever, but she's literally just, like, commenting code in and out.

And unbelievable. It's so mesmerizing to watch. So DJ Dave, she's one of them, and then also Switch Angel seems to be a big one as well. Size nine zero nine with the scope.

Yeah. Yeah.

Let's make our base.

I love the visuals too. Node. They're doing it in, like, Jupyter Notebooks. Right?

60 Yeah. It's its own thing called, like, strudel. Scale.

And it is JavaScript except for this, like, one syntax here, the dollar syntax. I don't know exactly what that is, but seems a way to, like, define things. With a low pass filter of 200 Hertz pnpm an envelope.

And it's all very readable, I think. If you if you've done any music, it's very readable Wes you can say, I want, like, c four. That's, like, the fourth c on the keyboard. Right? So you have, like, real it it's Node, like, super esoteric and and odd.

Un unreal. And I thought that was, like, just a little sliders and stuff in line with the code. I thought that was a very neat way of of a UI for making music.

Yeah. The strudel REPL is really fun to mess around in. I'm gonna make some sick stuff. So they have strudel.cc

is where you can do it, and you can just go ahead and play.

Look at me.

You loaded the REPL and hit play. Nice.

I love it.

So kind of along the same lines is Hydra, which is a similar project but for video visualizations.

So you get to code a whole bunch of stuff, and you can do layer, mask, scale, mirror. This is more my I'm much more of a visual guy.

Wow.

Ah, this is awesome.

This whole episode, you're gonna wanna just, like, stop right now and and go ahead. So this is space tiger 3,000.

It seems like he's pretty good at it.

And it's just this nice chainable syntax Wow. Messing things inside of each other.

The syntax looks so similar to strudel.

Yep.

Wow. Hydra looks cool as hell. I am very interested in this. I actually people who don't know my background is in programming music. That's what I did in college. So I did a lot of Max MSP. I did jitter for video.

Some of my first projects were were building a lot of stuff like this using Max MSP. So, like, dang. This is so exciting for me right now.

Yeah. And so hydra.ojack.xyz is the website, and then you can just load up random ones here, and it will give you the code for it.

And it this is this is all using WebGL, and then you let it rip. And I'm assuming you can also hook this up to audio so that these can be programmatically fired off You bet you can. Yes. Analysis of the audio.

Dude. It's they got Winamp or Winamp at the end of when Wes Winamp? Winamp at the end of the day. They got Winamp? Dude, I yeah. I'm a big Winamp head.

Dang.

You're officially going to lose me in this episode because I'm gonna start, really just, like, playing with all this stuff. Yeah. The next one is p five j s. They actually launched a new beta site recently, beta.p5js.org.

And, Wes

Sorry. I was too loud for you?

And, p five is really, really interesting. It is a huge massive community.

It's for working in essentially visual art, working in shapes, working in even, like, shaders and and and transforming, making animations.

It is a whole community of making, like, really awesome stuff. And p five uses, does it use three JS? I think it might use three JS.

It it's in that same kind of world, but a nicer API. It's in a more friendly API for making art on the web, visual art. Yeah. And, their their little tutorials and examples are really good. You can go through and you can, make various different things. But, yeah, like p five strands, an introduction to shaders. So, using p five for animation, p five for shaders. The this is another one where you'll go through the demos, interactive stuff, and just be like, wow. This is really pretty readable, really pretty consumable, but at the same time, very powerful for the type of stuff you can Node, making

all kinds of even, like, physics based animations and stuff. It's a neat, neat package and a huge community of people behind this. When I first started WebDOM, it was all about processing JS, but it seems that people have moved over to this type of thing. So, like, three JS would be more like like primitives for doing three d. Three d. And then p five is explicitly for doing things that are a bit more artistic. Not not necessarily just because it it also is helpful. Right? Like, I know a lot of, data vis people love p five because it's a great way to make custom data visualizations.

Yeah. Performant, all those types of things. And I have found the API to be more consumable than many other things. Like, I don't know if you've ever tried to get ESLint, man, if you try to get into, WebGL or any of that stuff, Man,

it JS, Wild. I've tried to get into it many times. Shaders and WebGL.

Yeah. I've been, beta testing this shaders.com, which is by Simon. I forgot his last Node, but he's building, like, a, like, a GUI and an NPM package for building custom shaders, and he's got a whole bunch of things like add noise, add grunge, add gradients,

mix blend mode them all together. It's just like, man, people that understand shaders are Which is great. Level. Shaders Node is crazy, Wes, because the code, it operates on every pixel at once. So you have to think when you're writing the code, you're not, like, making a loop to do this Vercel, then this pixel, then this pixel. You're writing code that is processing every pixel at the same time because it's using your graphics processor to write every pixel at the same time. That is a very paradigm shifting way of thinking. And I've been spending so much time writing shader code using, was it the the GLSL? And, dude, like, no matter how much I write, sometimes I just get into moments where I'm like, I don't know. I have no idea. Like, my brain conceptually cannot handle

it the right way. I I think I just need more time, but it is something I'm very, very interested in. So let's keep talking about shaders then. Shader toy is another one that people really like. So I just you just load this up here. And, like, what? Look at this code here. You know? That's what I'm saying. I look at it. This code operates on every pixel at once.

Yeah.

So just to even, like, blow your mind even more, Shader Toy is one of these sites that when I look at it, I get immediate imposter syndrome.

Because I look at this stuff. I know it's a very specialized technique, and it's a very specialized, understanding of things, but nothing will make me feel insignificant, like looking at Shader Toy code and just being like, man, this is beyond.

Here, you wanna see a cool one, Wes?

Well, look at this one for a sec. Seascape.

This is the world. You can pan around, and it looks like water.

And this is, what, a 100 and 204 lines of Node? What what the hell? Where does the water come from? Where where does the water?

I think it came from Mars or an asteroid or something.

Wes, here, I'm sending you one in Slack right now, or I can send it in here. This one is another one that will blow your mind for its simplicity.

This one here is 26 lines of code.

Oh, man. These, like, loops.

And it's a freaking cool marble. Oh my god.

Cool marble.

Using o instead of c would be plus Node. Just a bit more formatting for better so the people are, like, reading this and being like, I think you can do that you can do that better.

This is so infuriatingly cool.

Unbelievable.

This it this seems like a really old school website as well. It's a it it has, like, a kicking community. Is this lobster? Yeah. Oh, man. Lobster.

That was a lot of lobster. Lobster alert, folks.

And if you want to see all of the errors in your application, you'll want to check out Sentry at century.io/syntax.

You don't want a production application out there that, well, you have no visibility into in case something is blowing up, and you might not even know it. So head on over to century.io/syntax.

Again, we've been using this tool for a long time, and it totally rules. Alright.

Next one is something that I stumbled upon on TikTok the other night, and I was like Yes. Damn it. I get these served to me all the time. Yes. So you you're mister projection. You wanna explain what this is? Yeah. So hey. I actually believe it or not, Wes,

in college, one of my courses was projection installation art. That was a class that I took in college. And your whole thing was you had to create an installation with projectors. Now this type of software did not exist. What this is is projection mapping Wes you're able to take video, essentially, and project it onto a specific surface. So when you have your projector pointed at something, you can take an image and you can say, this actually only applies to this corner or this face or this face. This actually, really became a thing when people were projecting light shows onto buildings, and they wanted to have certain things go up into certain places.

But with software like this, they're able to do such outrageous things. My projection installation class, Wes, I could just project a single shape. I made a a a, keyboard on the wall that you could run through the Node, and it would play notes. And how I did that is I had a projection, and I knew what that image was supposed to look like, and then I had a camera pointed at that projection, and then I did a diff. If you're standing and breaking this enough of this note, then it will play a note on MIDI. And if you're breaking enough of this note by doing a diff between those two images so, like, video projection installation stuff has gotten crazy.

MadMapper, allows you to, again, take a a surface in in three d or a photo, whatever, and Yeah. You are taking your video and putting it on places. You combine this with something like Hydra or something, you're gonna be crazy town doing some cool stuff. You know who does this kind of stuff? It's Cassie Evans. She mentioned that they they set up some, like, devices in their living room and just, like, project and make art and music in their living room or something. That's wild. Wild. It's so cool. So, like, you basically turn your projector on, and then you create different, like like, screens,

and then you just drag them around so that the corners line up with things like your cabinet or, like, the windows. Like, you could also do this for, like, Christmas lights as well. You could just project onto your house, and then you can you can specify what each of the windows are. So cool.

I wanna do that so bad.

Yes. I want to do that as well. Kind of in a similar vein as well JS this thing called TouchDesigner.

This is a piece of software Wes you can do, I don't know, pnpm, output. Basically, you're just taking data in, whether that's video or sound or whatever, and then you are just based on that, you are changing it. Right? You Mhmm. In in the example I'm showing right now is, the guys made an ASCII version from the video of himself.

But there the it knows no bounds as to what you could possibly do with it. So a lot of, like, interactive installations are based on this. You know? Like, the input could be sound. It could be people touching buttons. It could be I think I have an example here, which is this one's using, Xbox Kinect Jeez. As an input and a video. So and then and then you apply different shaders on top of that.

The Xbox Kinect is so cool. And then this is another neat one where it's obviously using some sort of three d camera because it it knows depth.

And then based on the depth, it's changing the, density of the pixels.

Gosh.

People are so cool.

Yeah. This makes me wanna go like, we used to have this thing in Toronto. What we still do. It's called, and it's just an entire evening. You stay up all night, and you go to just these random installations in, like Yeah. Churches and and random buildings, and then people are just doing weird stuff like this. I think I have Sanity myself into some kind of drug induced coma here with this Hydra. I I've, like, made this kaleidoscope

the tab open from the one five years ago. It JS, like, completely transfixed my brain. I I actually Wes, I've been working on a fun little project, and, like, there were some, like, audio tones playing in my ears and stuff while I was doing this, and it, like, sent me into another universe. I felt like I was on another planet. I had to stop working on it. I was like, I feel like this is hypnotizing me or something. I don't know what's going on.

Kaleidoscope color Colorama rotate, modulate, rotate.

Man. And then, usually, what I do with these things, they just start changing values.

Yeah. I'll show you the one I made just by changing values. They look ESLint

Riverside Chase. Wait. You you just made this while you're we were talking?

It was based on another one, but I've modified it enough. Yes. Oh, I see. Woah. So I I didn't I don't know what I'm doing here. I'm just updating values. And now I'm just like, woah.

Woah. Oh, that's so cool. Yeah. Alright. Last Node. And this is something that I'm starting to get into. It's called X Lite. X Lite is a piece of desktop software Wes, basically, you you cover your entire house in Christmas lights.

And then x lights, you take all of the inputs for each of those lights. And in in my case, I'm covering my house in addressable LEDs, so every single LED can be turned on or off, brightness, whatever color you want at any given time.

And then what x lights does is you can map them in a three d space, and then you can create these, like, wipes of your entire house. You can do it to music. You can do shows. You can buy shows, and it's just this wild, wild world. Like, once I got into it, I joined a couple Facebook groups where these guys are are doing stuff, and it's just, like, all year long, they're just, like, working on their Christmas light show. There's music to it as well. Wes hear me?

Yes. Oh, yes.

This is so obnoxious, This is so obnoxious, but so cool. Look at the wipes. Like, the whole house is being a wipe wiped.

Yeah. Man, I don't even put lights up, which is shocking that I don't. I don't know why I don't put up lights. I think it's just so much of an effort for me. It's a pain in the butt. So I'm I'm doing the permanent ones this year right Node, where I'm installing them, like, in the soffit in, like, aluminum track.

And then I'm working on, window frames for all the windows. I'm gonna put them around the garage. I'll see how far I get this year because it's it's quite a bit of work. But then once you have them, you can do like, I went to a light show last year, and I, like, I left that being, like, I'm doing this. This is Yeah. Probably not the music. I think the neighbors would hate me. Yeah. Yeah. The music. Warp white.

Or you could do it for, like, a moment and then do it. Yeah. Take a video of it and then be, like, alright.

Yeah.

Oh, like, some of these guys have, like, FM AM transmitters. So they'll be like, to turn your radio to this this station, and it'll play the music over your car.

That is cool. So that's x lite. So you can check out this desktop software. Seems relatively easy. With a lot of the stuff, when I look into it, the x lite is mostly like, like, a enthusiast area, and, like, a lot of people are not technical. You know? So they they have a lot of trouble doing it. But then I jump into it, and I'm like, man, I I'm fairly technical. I understand this stuff. I bet I can make something sick.

Hook it up to that. What's the one that you really like? Hydra. Hydra? Hydra. Hydra. Hydra. I'm gonna hook up Hydra to Strudel, and I'm gonna turn off all the lights in my office and then hook up my projector.

And then I'm just gonna Wes veg out here. It's gonna be great.

Oh, that's one we didn't even do is, like, the people that do the laser light shows as well. Laser light shows. That's crazy world. Gonna lose an eye. Yep. Yeah. Freaking lasers.

Yeah. But

that is the world of cool, creative, and weird on the Internet. Let us know down below in the comments if we missed anything because I would love to dip into a few more of these, and poor Scott is gonna have no more time this week after he starts building things.

I actually Wes, I we're working on a a fun little video here. I'm definitely gonna hook Hydra up to my video now. It's Oh, that's a great idea. It's gonna work so well. Folks, I'm working on something that is very fun.

So just a little little teaser there. So, yeah, let's get to the part of the show where we talk about sick picks and shameless plugs. Stuff that we pick is stuff that we like, stuff that we think is sick, stuff that we're just generally enjoying in life right now. I have a sick pick for you, Wes, and it's a podcast app called NewCast.

And it's a minimal style podcast app, and I love the minimal UI for this. I think it's really nice. It is not as full featured as something like Pocket Cast, I will be honest, but it does most of the things that I wanted to do. I've been noticing Pocket Cast has been, like, being very odd for me lately. Like, it's downloading podcast, but not putting them on my Up Next playlist and stuff. So I've just been getting a a little annoyed with it. And this one is just minimal enough that it's not, like, unusable, but at the same time, I really do like this this app. So Newcast is a really nice and minimal podcast app. I cannot get down with Apple Podcasts. I can't get down with any of these over bloated, overcast type of apps. And I I certainly as much as I do love Spotify and I use Spotify for music, I I just can't commit to using it for podcasts. I just can't.

Newcast.

Cool. I'm gonna I'm gonna check that out.

That's nice and pretty.

I am going to sick pick a tiny little switch that I just added to my server rack. So I have, like, a whole UniFi setup, and the there's only one ten gigabit out port that I can Node, and I have I've got three gigabit Internet. So I've I wanted to make use of that, so I piped it right to my desk. And that's the one thing in my house that can get, it actually only gives me 2.5 gig because that's what my my dock does.

But I recently added a USB to Ethernet to my NAS, my Synology NAS. Somebody told me on Twitter, they said, hey. You can instead of having to fuss with the two Ethernet ports, which are one gig on your NAS, you can just for, like, $20, you can get, like, a a USB NIC for your Synology, and you can install the drivers. And now I have, I I think I got a 10 gig one or or five gig, but, basically, I have that throughput from my desk to my NAS now. However, I needed I didn't have enough ports that would did it. All the other ports on my routers are are one gig. So I bought this little $30 switch called the it's called Nick Giga, which is a crazy Node, but is I was a little concerned for you. Yes. Yeah. I would had it very equally pronounce that, and it has two ten gigabit SPF ports and then four two and a half gig just regular RJ 40 fives. Four. $33

too for US prices.

What's this for cheap? $33 US.

Yeah. Unbelievable. And it it worked great. I downloaded Tolinski distribution yesterday, and it was, like, four gigs. And it downloaded in, like like, twenty two seconds or something like that. It was nuts how fast it went. And I was like, man, I am not used to having these speeds on my NAS. And then also just, like, transferring my video files over, it's it's two and a half times faster. And for between that little USB thing and the the little switch, I was $50 in, and it was well worth it. What is the USB thing you got again? Alright. So there is let me let me find it right now. One sec. I

Wes you told me how to install, like, custom firmware for this thing, I got a little concerned, but I really, really should get on this now that I have a Wi Fi seven router and everything. For those who are wondering why I said that, my router has 10.

You got 10 gigabit.

Yeah. I have 10 gigabit out, but then the rest of my router is just I don't have all of those ports. And, mostly, it doesn't matter because no devices in my house actually need that. Yeah. But But transferring between my Your NAS does. My NAS. Yeah. So here's the USB thing. This is a UGREEN, and it it doesn't matter that it's UGREEN. It just you need to make sure that it has a Realtek chip in it. And then what you do is you you go to the Synology store, and there's, like, a Git repo with the drivers, and you just install it via the GUI. Oh, video GUI. Okay. I did had a I did had a SSH in and run one command once, and and then it it started working immediately. Okay.

I, I I don't mind that. I, I'm SSH ing into my Node all the time. I was thinking I had to get, like, crazy with it. So if I'm gonna be crazy with it, oh, yeah, baby.

And then it just it just shows up in the, like, Ethernet devices. And then just like a Mac, you go into set source order, and then I set the 2.5 gig one to be the first. And then it it uses that one from there on. And I also put some Wes should do a whole Synology show because, like, I I I recently upgraded the SSDs, the read and write caches, and, man, did that make my apps faster.

I got it too. All the stuff running on it it got way faster.

Not transferring didn't really get faster, but the actual apps, like, the just, like, thumbnails, that we're loading from the apps were way faster.

My SSD or my Synology has been dog slow lately, and I don't know why. I think it's I don't know if it's because it's, like, full. I actually just filled it up comp completely. It's 20 terabytes, and it's full now. So I'm, like, having to go into nuclear mode and deleting a bunch of old raw footage from my like, I have raw footage going back from 2012 on level up tutorials. Oh, yeah. So, like, I gotta delete so much of that stuff, but still, it's like,

is that why it's so slow? I don't have enough open space available? I don't I don't know why it's Probably not. But Yeah. Maybe. You gotta look at your, like, your your resource monitor and see what's hog and everything. You Node? For me, it was I was running COOLIFY on there as a VM or no. I was running COOLIFY as a Docker image, and it was just too much for the the poor little Synology NAS to to handle. It was taking too much memory. You Node? You're supposed to run those on proper servers. I ran the I've moved all that stuff to Mac mini. That's why it. Yeah. Home serve that's that I that's what I was doing. I was like, should I just build a home server? You know, I've got this I have a Mac Pro here. I've got, like, a couple decent older MacBook Pros.

Do I just run those instead?

Yeah. Mine's right here. I'm running Minecraft on there. I'm running Plex. Yeah. I'm running all my stuff. Yeah.

That's that's not the maybe that's the move. But I my everything else is super fast right now except that I'm not running the, I am running a lot of home server stuff. Right? And then I'm running a CloudFlare tunnel on there all the time. We'll do a whole show. We'll do a whole show on home servers because there's some fun stuff to talk about. Wes. Warp. Cool.

Alright. Thanks for tuning in. Kajalaya.

Peace. Peace.