¶ Welcome to Syntax!
Welcome to syntax today, we're going to 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 going to be talking
talking all about different libraries or different areas of cool things that you might be interested in. So my name is Scott Tulinski. I'm a developer from Denver. With me as always, Wes Boss. What's up, Wes? Hey, 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's react to them. Let's talk about them and how you can build this type of stuff 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 Universe. I'm very familiar with her work before this. So when I saw her there, I was stoked.
to really see her perform in person. But she's modifying code. She's writing code live, and it's creating electronic music. It's visualizing MIDI. It is a really cool... project and uh she's exquisite so great follow on all the socials if you want to 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 know i'm looking like an idiot here's 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 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 here's one with the scope yeah yeah let's make our face i love the visuals too they're doing it in like jupiter notebooks right yeah it's its own thing called like strudel and
it is javascript except for this like one syntax here the dollar syntax i don't know exactly what that is but it seems a way to like define things with a low pass filter of 200 hertz in an envelope And it's all very readable, I think. If you've done any music, it's very readable where you can say, I want like C4. That's like the fourth C on the keyboard, right? So you have like real...
It's not super esoteric and odd. Unreal. And I thought that was just the 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 ripple 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. 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 going to want to just like stop right now and go ahead. So this is Space Tiger 3000. It seems like he's pretty good at it.
And it's just this nice chainable syntax. Wow. Nesting things inside of each other. The syntax looks so similar to strudel. Yeah. 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 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 this is all using WebGL. And then you let her 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. Given analysis of the audio. Dude. They got Winamp at the end of the day. They got Winamp? Dude, yeah. I'm a big Winamp head. Dang.
You're officially going to lose me in this episode because I'm going to start really just playing with all this stuff. Yeah. The next one is P5JS. They actually launched a new beta site recently, Bated. dot p5js dot org and Wes sorry is it too loud for you And P5 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 transforming, making animals.
It is a whole community of making like really awesome stuff. And P5 uses... Does it use 3.js? I think it might use 3.js. 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.
uh their their little tutorials and examples are really good you can go through and you can uh make various different things but um yeah like p5 strands an introduction to shader so um using p5 for animation p5 for shaders the this is another one where you'll go through the demos uh 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 do 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 Web Element, it was all about processing JS, but it seems that people have moved over.
to this type of thing so like 3js would be more like like primitives for doing 3d 3d um and then p5 is explicitly for doing things that are a bit more artistic not not necessarily just because it also is helpful right like i know a lot of data viz people love p5 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 into, man, if you try to get into... WebGL or any of that stuff. That's wild. I've tried to get into it many times. Shaders and WebGL. I've been beta testing this shaders.com.
is by Simon. I forget his last name, 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 next level. Shaders code 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 pixel, 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 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 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'll just load this up here. And like, what? Look at this code here, you know? That's what I'm saying. Every time 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 very special.
specialized technique and it's a very specialized uh understanding of things but nothing will make me feel insignificant uh like looking at shader toy code and just being like man This is beyond. You want to 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 hundred and... 204 lines of code? What the hell? Where does the water come from?
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 one, just a bit more formatting for better. So the people are like reading this and being like, hmm, I think you can do that better. This is so...
Infuriatingly cool. Unbelievable. This seems like a really old school website as well. It has like a kick in community. Is this lobster? Yeah. Oh man, lobster. We got 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 sentry.io forward slash 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 forward slash syntax. Again, we've been using this tool for a long time and it totally rules. All right. 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're mr projection you want to explain what this is yeah so hey i actually believe it or not wes uh 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 where 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.
I could just project a single shape. I made a keyboard. on the wall that you could run through the notes 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 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 mad mapper allows you to again
take a surface in 3D or a photo, whatever, and you are taking your video and putting it on places. You combine this with something like Hydra or something, you're going to be... crazy town doing some cool stuff you know who does this kind of stuff is 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. 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 want to do that so bad. Yes, I want to do that as well. Kind of in a similar vein as well as this thing called Touch Designer. This is a piece of software.
where you can do I don't know input 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 um in in the example i'm showing right now is the guy's made an ascii version from the video of himself uh but there the it knows no bounds as to what you could possibly do with it so a lot of like interact
Active 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 a Xbox connect as an input. And a video. 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 3D camera because it knows depth. And then based on the depth, it's changing the density of the pixels.
people are so cool yeah this makes me want to go like we used to have a thing in toronto what we still do is called nuit blanche 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 random buildings. And then people are just doing weird stuff like this. I think I have sent myself into some kind of drug-induced coma here with this Hydra.
I've like made this kaleidoscope thing. You still have the tab open from the one five years ago. It is like completely transfixed my brain. I actually was 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 is I just start changing values. Yeah, I'll show you the one I made just by changing values. They look cool. into Riverside. Wait, you just made this while we were talking? It was based on another one, but I've modified it enough. Yes. Oh, I see. I don't know what I'm doing here. I'm just updating values. And now I'm just like, whoa, whoa. That's so cool. Yeah. All right. Last one.
And this is something that I'm starting to get into. It's called Xlights. Xlights is a piece of desktop software where basically 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 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.
What X-Lights does is you can map them in a 3D 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 hear me
Yes. Ah, yes. This is so obnoxious, but so cool. Look at the wipes. The whole house is being wiped. 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 doing the permanent ones this year right now.
where i'm installing them like in the soffit in like aluminum track and then i'm working on uh 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 it. Like, I went to a light show last year, and I, like, I left that being, like, I'm doing this. Yeah. Probably not the music. I think the neighbors would hate me. Yeah, yeah, the music. Mostly just, like, nice, warm white. Or you could do it for, like... a moment and then yeah yeah take a video of it and then be like all right 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 Is cool, so that's X lights you can check out those desktop software seems relatively easy with a lot of the stuff when I look into it the X lights is mostly like um like an 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 could make something sick hook it up to that what's the one that you really like Hydra. Hydra? Hydra. I'm going to hook up Hydra to Strudel, and I'm going to turn off all the lights in my office and then hook up my projector, and then I'm just going to veg out here. It's going to 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 a crazy world. You're going to lose an eye. 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 going to have no more time this week after he starts building things
I actually, Wes, we're working on a fun little video here. I'm definitely going to hook Hydra up to my video now. Oh, that's a great idea. It's going to work so well. Folks, I'm working on something that is very fun. So... Just a little teaser there. So yeah, let's get into the part of the show where we talk about sick pics and shameless plugs. Stuff that we pick is stuff that we like, stuff that we think is sick, stuff that we're just generally...
¶ Sick Picks + Shameless Plugs
enjoying in life right now. I have a sick pick for us and it's a podcast app called new cast. 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 casts. 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 podcasts, but not putting them on my up next playlist.
and stuff so i've just been getting a little annoyed with it and this one is just minimal enough that it's not unusable, but at the same time, I really do like 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 can't i just can't commit to using it for podcasts i just can't new cast
Cool. I'm going to 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 unify setup and the there's only one 10 gigabit out port that i can do 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, um, it actually only gives me 2.5 gig because that's what my, my doc 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 bucks, you can get like a USB NIC. for your Synology and you can install the drivers. And now I have, I think I got a 10 gig one 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 did it. All the other ports on my routers are one gig. So I bought this little $30 switch. It's called Nick Giga, which is a crazy name. I was a little concerned for you, yes. Yeah, I had a very... Equally pronounced that it has two 10 gigabit SPF ports and then for two and a half gig just regular RJ 45s for 33 bucks to have for us prices
Why is it so cheap? For $33 a US. Yeah. Unbelievable. And it worked great. I downloaded a Linux distribution yesterday, and it was like four gigs. And it downloaded in like... Like 22 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 little switch, I was 50 bucks in and it was well worth it. What is the USB thing you got again? All right. So... There is, let me find it right now. When you told me how to install 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 7 router and everything.
For those who were 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 transferring between my your nas does my nas yeah so
Here's the USB thing. This is a Ugreen. And it doesn't matter that it's Ugreen. You need to make sure that it has a real tech chip in it. And then what you do is you go to the Synology store and there's like a Git repo. with the drivers and you just install it via the GUI. And then I did how to SSH in and run one command once. And then it started working immediately.
I don't mind that. I'm SSH-ing into my notes all the time. I was thinking I had to get, like, crazy with it. So if I'm going to get 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 uses that one from there on. And I also put some.
We should do a whole Synology show because I recently upgraded the SSDs, the read and write caches, and man, did that make my apps faster. you know all the stuff running on it got way faster not transferring didn't really get faster but the actual apps like the just like thumbnails um that were 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 completely. 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 like
I got to 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 know why it's so slow. Probably not. But maybe you got to look at like your resource monitor and see what's hogging and everything. You know, 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 poor little Synology NAS to handle. It was taking too much memory. You're supposed to run those on proper servers. I've moved all that stuff to Mac Mini. Yeah. Home server. 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. I'm running all my stuff. Yeah. Maybe that's the move. But everything else is super fast right now, except that I'm not running... 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. Yes, word. Cool. All right.
Thanks for tuning in. Catch you later. Peace. Peace.