WEBVTT NOTE This file was generated by switchtitle 1 00:00:14.125 --> 00:00:16.166 This is Self-Directed Research. Our 2 00:00:16.166 --> 00:00:17.375 hosts, James and Amos, 3 00:00:17.583 --> 00:00:18.708 entertain each other with 4 00:00:18.708 --> 00:00:20.625 weekly hyper-focused technical deep 5 00:00:20.625 --> 00:00:22.250 dives. Amos is up this 6 00:00:22.250 --> 00:00:23.708 week with "Black Magic Fusion 7 00:00:23.958 --> 00:00:26.083 is Weird." Make sure to like, follow, and 8 00:00:26.083 --> 00:00:27.041 subscribe wherever you find 9 00:00:27.041 --> 00:00:29.666 us, and visit sdr-podcast.com/episodes 10 00:00:29.666 --> 00:00:31.041 for all the presentations, 11 00:00:31.541 --> 00:00:33.250 videos, show notes, and transcripts. 12 00:00:34.083 --> 00:00:35.958 And as usual, stay tuned to the end to 13 00:00:35.958 --> 00:00:36.666 hear more about Depot, 14 00:00:37.000 --> 00:00:38.208 the sponsor of this episode. 15 00:00:42.000 --> 00:00:42.833 I am so ready. 16 00:00:42.833 --> 00:00:46.250 I am so ready. Amos, I am so 17 00:00:46.250 --> 00:00:48.375 ready. Well, I'm trying to look at what 18 00:00:48.375 --> 00:00:50.166 your slides are, but I've turned my my 19 00:00:50.166 --> 00:00:52.583 Jitsi performance all the way down 20 00:00:52.583 --> 00:00:53.500 because it was struggling 21 00:00:53.500 --> 00:00:55.500 and now yeah, the letters are-- 22 00:00:55.500 --> 00:00:56.916 I need to show the other screen. 23 00:00:56.916 --> 00:01:05.416 Yes. So. James. I have-- I have 24 00:01:05.416 --> 00:01:08.916 exactly one worry It's that we don't talk 25 00:01:08.916 --> 00:01:11.708 about things that are relatable enough on 26 00:01:11.708 --> 00:01:14.208 this podcast. And this I think-- I 27 00:01:14.208 --> 00:01:16.083 think that people want to hear about 28 00:01:16.250 --> 00:01:18.750 technologies that they use every day and 29 00:01:18.750 --> 00:01:20.375 this is why -- 30 00:01:20.375 --> 00:01:22.916 today's episode is about migrating from 31 00:01:22.916 --> 00:01:25.291 AppleScript to Lua. Something that I 32 00:01:25.291 --> 00:01:28.375 think everyone can relate to 33 00:01:28.625 --> 00:01:30.375 Two languages so many people 34 00:01:30.375 --> 00:01:31.333 have written I would argue a 35 00:01:31.333 --> 00:01:32.291 I would argue a 36 00:01:32.375 --> 00:01:34.000 bunch of people have that exposure to Lua 37 00:01:34.000 --> 00:01:37.458 if only to like mod a game or something 38 00:01:38.208 --> 00:01:39.250 Yeah, Lua. 39 00:01:39.500 --> 00:01:41.958 I feel like the two places it pops up are 40 00:01:41.958 --> 00:01:44.041 for me at least-- well I guess three 41 00:01:44.041 --> 00:01:48.250 because video games, Nginx and a lot of-- 42 00:01:48.250 --> 00:01:49.708 it's one of the few languages that 43 00:01:49.708 --> 00:01:52.083 people will put on embedded systems and 44 00:01:52.083 --> 00:01:54.000 Has a decent chance at running it like 45 00:01:54.000 --> 00:01:56.958 very very small embedded systems. So like 46 00:01:56.958 --> 00:01:59.208 it's a weird palette of places that I've 47 00:01:59.208 --> 00:02:00.833 seen Lua. But I guess it makes sense of 48 00:02:00.833 --> 00:02:02.666 like I need fast scripting 49 00:02:02.666 --> 00:02:05.000 glue kind of stuff. 50 00:02:05.000 --> 00:02:06.875 Yes. The actual title of the episode is "Black 51 00:02:06.875 --> 00:02:09.208 Magic Fusion is weird" and that's an 52 00:02:09.208 --> 00:02:11.666 understatement. I'm so excited James 53 00:02:11.666 --> 00:02:14.750 because finally we're gonna have a short 54 00:02:14.750 --> 00:02:17.708 Amos episode because I only-- can you guess 55 00:02:17.708 --> 00:02:19.416 how many slides I have? 56 00:02:19.416 --> 00:02:21.166 You said that at the front of some 57 00:02:21.166 --> 00:02:21.750 episodes that have 58 00:02:21.750 --> 00:02:23.625 gone a very solid hour. 59 00:02:23.625 --> 00:02:26.500 I only have 61 slides. So 60 00:02:26.500 --> 00:02:27.583 this is this is gonna be 61 00:02:27.583 --> 00:02:30.125 Whoopsie, again again-- quote.. I can 62 00:02:30.125 --> 00:02:31.958 quote this. I can splice it all together 63 00:02:32.000 --> 00:02:33.333 Be like, "It's gonna be short! 64 00:02:33.333 --> 00:02:36.875 I only have a bajillion slides." 65 00:02:36.875 --> 00:02:38.708 But you'll see there's this like little 66 00:02:38.708 --> 00:02:40.625 games we can play, we can try to guess 67 00:02:40.625 --> 00:02:42.708 things, there's like text encoding going 68 00:02:42.708 --> 00:02:45.125 on. It's very fun, but mostly it's 69 00:02:45.125 --> 00:02:48.625 because I can't help myself. And because I... 70 00:02:48.625 --> 00:02:50.083 We have a special guest today. 71 00:02:50.083 --> 00:02:52.916 His name is Sherlock, he is my white cat. He's uh, 72 00:02:52.916 --> 00:02:55.333 he's meowing at the window and I'm not 73 00:02:55.333 --> 00:02:57.583 gonna do anything about it 74 00:02:58.958 --> 00:03:00.750 Hello Sherlock! 75 00:03:00.750 --> 00:03:02.375 He's gonna calm down 76 00:03:02.375 --> 00:03:04.250 and also cannot hear you. I cannot be 77 00:03:04.250 --> 00:03:09.750 helped but I can be nerd sniped and so I.... 78 00:03:09.750 --> 00:03:11.375 I'm going to do something about the cat. 79 00:03:11.375 --> 00:03:12.291 What's the French 80 00:03:12.291 --> 00:03:14.750 onomatopea for cats meowing? 81 00:03:14.750 --> 00:03:19.333 Miaou, it's M-I-A-O-U, "miaou" 82 00:03:20.333 --> 00:03:21.416 Yeah, so it's kind of the 83 00:03:21.416 --> 00:03:23.541 same sound as meow. Yeah. 84 00:03:23.541 --> 00:03:26.166 You almost pronounce all of the vowels 85 00:03:26.166 --> 00:03:28.583 actually... surprisingly. 86 00:03:28.583 --> 00:03:30.250 So Amos, why do you find yourself 87 00:03:30.250 --> 00:03:32.833 understanding Lua for Black Magic Fusion? 88 00:03:32.833 --> 00:03:35.208 This is a sequel episode actually 89 00:03:35.625 --> 00:03:37.833 Previously on Self-Directed Research. 90 00:03:37.833 --> 00:03:41.166 See this is why I have 61 slides, because I 91 00:03:41.166 --> 00:03:42.875 have a slide "Previously, on SDR." James: 92 00:03:42.875 --> 00:03:44.416 Where can people find the slides? 93 00:03:44.416 --> 00:03:45.708 They can find it on 94 00:03:45.708 --> 00:03:48.208 sdr-podcast.com/episodes 95 00:03:48.208 --> 00:03:49.750 Good luck editing this Amanda 96 00:03:49.750 --> 00:03:50.333 Amanda. 97 00:03:50.333 --> 00:03:50.791 I'm sorry. 98 00:03:50.791 --> 00:03:51.375 We're gonna be a nightmare 99 00:03:51.500 --> 00:03:52.583 I'm ready 100 00:03:53.000 --> 00:03:55.250 So, previously on Self-Directed 101 00:03:55.250 --> 00:03:58.166 Research I talked about how I make videos 102 00:03:58.166 --> 00:04:01.208 because this is not a podcast. This is a 103 00:04:01.208 --> 00:04:03.958 thinly veiled marketing vessel for the 104 00:04:03.958 --> 00:04:07.458 both of us. And so I explained that I can 105 00:04:07.458 --> 00:04:11.041 make screenshots of code and import that 106 00:04:11.041 --> 00:04:13.291 into DaVinci Resolve and then in 107 00:04:13.291 --> 00:04:16.708 Fusion I can use like a 3D Keyer node to 108 00:04:16.708 --> 00:04:19.750 remove the background so that I can then 109 00:04:20.083 --> 00:04:23.041 composite that with some shots of my face 110 00:04:23.041 --> 00:04:25.000 and other backgrounds other elements and 111 00:04:25.000 --> 00:04:27.375 animations and whatnot. But that it's not 112 00:04:27.375 --> 00:04:32.041 ideal. Because you get kind of messy edges 113 00:04:32.041 --> 00:04:34.166 all around the text. It's already 114 00:04:34.250 --> 00:04:35.708 composited, the text is already composited 115 00:04:35.708 --> 00:04:38.083 on something, some color and so when 116 00:04:38.083 --> 00:04:40.333 you remove the color even when you choose 117 00:04:40.333 --> 00:04:42.791 your color wisely or black and you're 118 00:04:42.791 --> 00:04:43.833 putting a dark background. 119 00:04:43.833 --> 00:04:46.708 It's just not ideal. We talked about how 120 00:04:46.708 --> 00:04:49.958 actually in some browsers like Safari, we 121 00:04:49.958 --> 00:04:52.250 recently learned we had viewer mail but 122 00:04:52.250 --> 00:04:55.375 not-- listener mail? Like, we got some mail! 123 00:04:55.708 --> 00:04:57.750 Someone said, "Oh actually you can also do 124 00:04:57.750 --> 00:05:00.583 that in Chrome with the Puppeteer API and 125 00:05:00.583 --> 00:05:03.000 it's much simpler." But I would like-- the 126 00:05:03.000 --> 00:05:05.625 whole episode was actually on Safari. 127 00:05:05.625 --> 00:05:08.875 There's a capture screenshot command that 128 00:05:08.875 --> 00:05:11.458 takes a DOM node and then you can get 129 00:05:11.458 --> 00:05:14.166 that entire node no matter how big it is 130 00:05:14.583 --> 00:05:16.958 with completely transparent background 131 00:05:16.958 --> 00:05:18.791 and it's perfectly 132 00:05:18.791 --> 00:05:21.416 crisp and clean and nice 133 00:05:22.416 --> 00:05:23.666 Just what you wanted 134 00:05:24.166 --> 00:05:25.250 Totally unintentionally. 135 00:05:25.250 --> 00:05:27.791 Yeah... and so then we talked about 136 00:05:27.791 --> 00:05:30.750 AppleScript and Automator and all 137 00:05:30.750 --> 00:05:33.916 sorts of things like that. And how 138 00:05:33.916 --> 00:05:36.208 AppleScript is weird. It's a very 139 00:05:36.208 --> 00:05:38.166 entertaining episode actually. When 140 00:05:38.166 --> 00:05:39.041 reviewing it I was like, 141 00:05:39.041 --> 00:05:40.333 "Wow, we're-- we're interesting." 142 00:05:40.333 --> 00:05:42.958 This is the-- this is the "automating macOS" 143 00:05:42.958 --> 00:05:44.250 one if I remember correctly... 144 00:05:44.250 --> 00:05:45.541 Yes, it is. 145 00:05:45.541 --> 00:05:47.416 Here's the thing: some people have pointed 146 00:05:47.416 --> 00:05:50.041 out, and they are correct! And I am 147 00:05:50.041 --> 00:05:53.250 helpless that Fusion can render text, of 148 00:05:53.250 --> 00:05:56.750 course because... you can have titles 149 00:05:56.750 --> 00:05:58.916 you can just-- you can have a... what's called 150 00:05:58.916 --> 00:06:01.375 a Text+ node, so you can even get some 151 00:06:01.375 --> 00:06:02.583 formatting in there. 152 00:06:02.583 --> 00:06:04.375 So here we have cantaloupe 153 00:06:04.375 --> 00:06:06.750 salmon in the Berkeley Mono. 154 00:06:06.750 --> 00:06:08.541 Is this what you ate for lunch or is this just a 155 00:06:08.541 --> 00:06:09.958 like a diceware... 156 00:06:09.958 --> 00:06:13.333 It's the name of macOS colors from the picker 157 00:06:13.833 --> 00:06:15.416 Because the next thing I want to show-- 158 00:06:15.416 --> 00:06:17.125 Thos are two pretty colors, yeah. 159 00:06:17.125 --> 00:06:20.250 Yeah is that you can change a bunch of 160 00:06:20.250 --> 00:06:21.708 things in the Text+ node. 161 00:06:21.708 --> 00:06:23.416 You can change the size, the 162 00:06:23.416 --> 00:06:25.666 tracking, line spacing, various 163 00:06:26.708 --> 00:06:28.958 alignment properties, and you can animate 164 00:06:28.958 --> 00:06:31.000 writing on the text so that it comes 165 00:06:31.958 --> 00:06:33.958 progressively as if someone was writing 166 00:06:33.958 --> 00:06:36.833 it. And you can add multiple shading 167 00:06:36.833 --> 00:06:38.958 elements. And something that took me 168 00:06:38.958 --> 00:06:40.916 forever to figure out: you can also have 169 00:06:40.916 --> 00:06:44.208 character level styling. So the way it 170 00:06:44.208 --> 00:06:46.833 works is the least intuitive thing in the 171 00:06:46.833 --> 00:06:49.250 world. So you first type in some text in 172 00:06:49.250 --> 00:06:52.166 your text node and then you right-click 173 00:06:52.166 --> 00:06:54.833 in the text control in the sidebar 174 00:06:55.125 --> 00:06:57.875 inspector thingy, you right-click, you 175 00:06:57.875 --> 00:07:00.583 click character level styling and then 176 00:07:00.583 --> 00:07:03.875 you go in modifiers... And then in modifiers 177 00:07:03.875 --> 00:07:06.625 you then select- not in the text input 178 00:07:06.625 --> 00:07:08.500 that you just clicked, or the one that's 179 00:07:08.500 --> 00:07:10.291 a modifier that's an almost exact copy 180 00:07:10.291 --> 00:07:12.708 of that- you select in the preview window 181 00:07:13.041 --> 00:07:15.125 So you do like a rectangular selection in 182 00:07:15.125 --> 00:07:16.708 the preview window and you get those 183 00:07:16.708 --> 00:07:20.250 little green sci-fi highlights 184 00:07:20.250 --> 00:07:21.541 Like, I don't know... 185 00:07:21.541 --> 00:07:22.875 Character divider boxes? 186 00:07:22.875 --> 00:07:23.416 Outlines, yeah yeah. 187 00:07:23.416 --> 00:07:27.250 Yeah, and that's your selection. And so 188 00:07:27.250 --> 00:07:29.791 much of this will make sense in a minute, 189 00:07:29.791 --> 00:07:33.333 but when I first discovered it, I was quite 190 00:07:33.333 --> 00:07:35.583 puzzled. But yeah, you can-- in the same 191 00:07:35.583 --> 00:07:37.291 Text+ node you can have different 192 00:07:37.291 --> 00:07:39.250 colors, you can have different sizes, you 193 00:07:39.250 --> 00:07:40.750 can have different-- all the controls you 194 00:07:40.750 --> 00:07:42.916 see here. Even alignments and-- 195 00:07:42.916 --> 00:07:44.416 Instead of trying to make two text boxes 196 00:07:44.416 --> 00:07:45.958 that have different colors and you just 197 00:07:45.958 --> 00:07:48.041 like shove them next to each other and hope that they're aligned. 198 00:07:48.041 --> 00:07:50.125 Exactly, that would be my nightmare. 199 00:07:50.125 --> 00:07:51.333 Yeah. Editing this 200 00:07:51.333 --> 00:07:53.583 is really bad. Once you've added 201 00:07:53.583 --> 00:07:56.333 styles, if you then click in the middle of 202 00:07:56.333 --> 00:07:58.000 salmon for example, and you try adding 203 00:07:58.000 --> 00:08:00.250 more letters It will be the right color 204 00:08:00.250 --> 00:08:02.833 So it kind of extends the range that is 205 00:08:02.833 --> 00:08:05.000 styled but if you copy and paste for 206 00:08:05.000 --> 00:08:05.916 example, it does not 207 00:08:05.916 --> 00:08:07.083 retain styling or anything. 208 00:08:07.083 --> 00:08:08.375 This is not WYSIWYG, 209 00:08:08.375 --> 00:08:10.000 This is not what you see is what you get 210 00:08:10.000 --> 00:08:13.250 It is what you get is what you get. 211 00:08:14.083 --> 00:08:16.083 For anyone interested in debugging that 212 00:08:16.083 --> 00:08:17.375 can go back to our episode about 213 00:08:17.708 --> 00:08:19.041 clipboards where you could probably use 214 00:08:19.041 --> 00:08:19.791 one of the tools we 215 00:08:19.791 --> 00:08:20.916 mentioned in there to figure out exactly-- 216 00:08:21.125 --> 00:08:23.125 We're getting to-- James! No spoilers! 217 00:08:23.125 --> 00:08:24.791 Am I spoiling things? Okay. 218 00:08:24.791 --> 00:08:26.708 You absolutely are, but I like that. I 219 00:08:26.708 --> 00:08:28.250 think that that's the sign of a 220 00:08:28.250 --> 00:08:30.500 well-designed slide deck is that you can 221 00:08:30.500 --> 00:08:31.500 guess where I'm taking 222 00:08:31.500 --> 00:08:33.875 you. So can we automate that? 223 00:08:33.875 --> 00:08:36.083 Well, let's talk about the different ways 224 00:08:36.083 --> 00:08:38.958 DaVinci Resolve and 225 00:08:39.333 --> 00:08:43.125 Fusion can be automated. So: Yes. 226 00:08:43.250 --> 00:08:43.833 Yes. 227 00:08:43.833 --> 00:08:45.833 The short answer is yes, but there's many 228 00:08:45.833 --> 00:08:47.958 different ways you can do that. One way is 229 00:08:47.958 --> 00:08:51.583 Fuses. And this is essentially... Yeah, you 230 00:08:51.583 --> 00:08:52.916 can just script this thing with Lua. 231 00:08:52.916 --> 00:08:56.500 It wasn't always there in Fusion, I'm just 232 00:08:56.500 --> 00:08:59.583 now realizing that 'fuses' and 'fusion' are 233 00:08:59.583 --> 00:09:04.083 the same word. Wow. Coffee is a great drug. 234 00:09:04.083 --> 00:09:05.291 They're like... I 235 00:09:05.291 --> 00:09:06.750 forget what -phone it is. 236 00:09:06.750 --> 00:09:08.250 It's not a homophone, but they're like 237 00:09:08.916 --> 00:09:12.416 'fusion' and 'fuses' are... I don't even actually 238 00:09:12.416 --> 00:09:14.083 know if they share a root for anything, 239 00:09:14.083 --> 00:09:16.083 because fusion seems nuclear to me and 240 00:09:16.083 --> 00:09:18.708 then fuses sound electrical to me. 241 00:09:18.708 --> 00:09:19.666 Maybe? 242 00:09:19.666 --> 00:09:21.083 I don't... do we have time 243 00:09:21.083 --> 00:09:22.666 for an etymology break? 244 00:09:22.666 --> 00:09:24.208 No, I don't-- keep going. 245 00:09:24.208 --> 00:09:26.166 Well, we gotta run , we gotta run. 246 00:09:26.166 --> 00:09:28.583 Amanda will put the Wikipedia page in 247 00:09:28.583 --> 00:09:30.208 the links below and we'll never know the 248 00:09:30.208 --> 00:09:31.416 answer until we go 249 00:09:31.416 --> 00:09:32.208 and review the episode. 250 00:09:32.208 --> 00:09:32.750 All right. 251 00:09:32.750 --> 00:09:33.083 All right. 252 00:09:33.083 --> 00:09:37.000 All right, so I'm talking about Fusion 253 00:09:37.000 --> 00:09:40.500 and Resolve kind of interchangeably and 254 00:09:40.500 --> 00:09:42.708 that's because today they are integrated. 255 00:09:42.708 --> 00:09:45.791 DaVinci Resolve is like three or four 256 00:09:45.791 --> 00:09:47.958 different programs in a trench coat. 257 00:09:48.208 --> 00:09:51.625 One of them is Fusion. One of them is the 258 00:09:51.625 --> 00:09:53.666 audio thing... what is it called? 259 00:09:53.833 --> 00:09:55.875 Fairlight. The Fairlight audio tab. 260 00:09:55.875 --> 00:09:58.416 There's just different tabs or pages in 261 00:09:58.416 --> 00:10:00.750 the application. But they used to be or 262 00:10:00.750 --> 00:10:03.041 they also still are sometimes-- Fusion I 263 00:10:03.041 --> 00:10:04.791 think is still available as a standalone 264 00:10:04.791 --> 00:10:08.083 thingy. And Fusion is very very old. It was 265 00:10:08.083 --> 00:10:11.250 made for MS-DOS in 1987. 266 00:10:11.250 --> 00:10:14.666 It's older than me! By Eyeon. 267 00:10:14.666 --> 00:10:15.833 I thought it was a newer-- like for some 268 00:10:15.833 --> 00:10:17.500 reason, it registered as like-- it's 269 00:10:17.500 --> 00:10:18.958 probably because when it became a 270 00:10:18.958 --> 00:10:20.666 public tool or something like that, but 271 00:10:20.666 --> 00:10:22.708 it registers to me as the new 272 00:10:22.750 --> 00:10:25.083 one versus all the other ones. 273 00:10:25.166 --> 00:10:28.000 No, it's the first Windows version 274 00:10:28.000 --> 00:10:32.166 was in 1996. They only added a timeline so 275 00:10:32.166 --> 00:10:34.208 like you could do animated renders in 276 00:10:34.208 --> 00:10:36.458 1997. And then they 277 00:10:36.458 --> 00:10:39.458 added Lua Fuses in 2007. 278 00:10:39.541 --> 00:10:41.750 I don't remember-- I don't have it in my 279 00:10:41.750 --> 00:10:45.125 notes like what year Blackmagic, which is 280 00:10:45.125 --> 00:10:46.458 the company behind DaVinci Resolve, 281 00:10:46.458 --> 00:10:49.583 acquired the Fusion software. 282 00:10:49.583 --> 00:10:52.166 I think it's 2014 off the top of my head. 283 00:10:52.166 --> 00:10:54.625 But do not quote me on that. Now Fusion 284 00:10:54.625 --> 00:10:57.500 has been used in a ton of big movies and 285 00:10:57.500 --> 00:10:59.708 TV shows, including Sin City. 286 00:10:59.708 --> 00:11:02.000 I don't know if you... You know Sin City? And 287 00:11:02.000 --> 00:11:05.333 Lost and American Horror Story. I cannot 288 00:11:05.333 --> 00:11:08.291 not say American Horror Story in the FX 289 00:11:08.291 --> 00:11:11.166 voice. Like, "Next week on American Horror 290 00:11:11.166 --> 00:11:13.791 Story." That's just how I have to say it 291 00:11:13.791 --> 00:11:15.500 You can tell that Fusion is old because 292 00:11:15.500 --> 00:11:18.458 we're looking at this Wikipedia... Like 293 00:11:18.458 --> 00:11:20.916 early Wikipedia clone... like 294 00:11:20.916 --> 00:11:23.083 what is it called, MediaWiki? 295 00:11:23.291 --> 00:11:24.000 VFXPedia. 296 00:11:24.000 --> 00:11:25.625 Yeah, called VFXPedia. 297 00:11:25.625 --> 00:11:26.916 Well, we're actually looking at as a 298 00:11:26.916 --> 00:11:29.541 mirror maintained by the wonderful people 299 00:11:29.541 --> 00:11:34.125 at We Suck Less, a phpBB forum, hosted at 300 00:11:34.125 --> 00:11:36.791 steakunderwater.com, and which shows you 301 00:11:36.791 --> 00:11:39.416 a lovely SQL error if you try to 302 00:11:39.958 --> 00:11:41.125 register. But it still works. 303 00:11:41.125 --> 00:11:44.416 I got in. I got us a listing of what a 304 00:11:44.416 --> 00:11:49.458 Fuse looks like. And you can actually 305 00:11:49.458 --> 00:11:51.458 do quite a bit with it. In this 306 00:11:51.458 --> 00:11:52.833 example, you can draw some text. 307 00:11:52.833 --> 00:11:54.333 So this is what we're interested in 308 00:11:54.333 --> 00:11:55.666 actually. It's just Lua 309 00:11:55.666 --> 00:11:56.958 code as a font manager. 310 00:11:56.958 --> 00:11:59.916 You can scan the directory, you can assign 311 00:11:59.916 --> 00:12:02.208 things. And drawstring here that we see on 312 00:12:02.208 --> 00:12:03.625 the screen is-- you can get the slides at 313 00:12:03.625 --> 00:12:08.083 sdr-podcast.com/episodes or on YouTube 314 00:12:08.083 --> 00:12:10.166 if you're if you're listening to that 315 00:12:10.166 --> 00:12:11.708 elsewhere, you can just go on YouTube and 316 00:12:11.708 --> 00:12:12.875 have the slides synchronized. 317 00:12:12.875 --> 00:12:13.833 I do upload the 318 00:12:13.833 --> 00:12:15.208 videos to Spotify as well. 319 00:12:15.416 --> 00:12:16.375 We do? 320 00:12:16.375 --> 00:12:18.125 For a very long time now! 321 00:12:18.291 --> 00:12:19.125 I don't use Spotify. 322 00:12:19.208 --> 00:12:21.333 So drawstring, not like the pajamas. 323 00:12:21.333 --> 00:12:25.416 Drawstring is not a built-in. Drawstring 324 00:12:25.416 --> 00:12:29.958 is a Lua function that calls out to 325 00:12:29.958 --> 00:12:33.625 FreeType. And it has interesting comments like: 326 00:12:33.833 --> 00:12:37.250 'Get the character or glyph' which is 327 00:12:37.250 --> 00:12:38.625 followed immediately by a call to 328 00:12:38.625 --> 00:12:39.666 something called bite. 329 00:12:39.666 --> 00:12:41.291 So that does not... 330 00:12:41.291 --> 00:12:44.208 inspire confidence In terms of text-- 331 00:12:44.500 --> 00:12:46.041 It's-- it rings from a time 332 00:12:46.041 --> 00:12:48.500 before Unicode was... a thing. 333 00:12:48.500 --> 00:12:52.125 Yeah... Then it says 'Not really sure why we 334 00:12:52.125 --> 00:12:55.000 multiply this by 10, we just do' smiley 335 00:12:55.000 --> 00:12:57.041 face emoticon. Yeah, and then right 336 00:12:57.166 --> 00:12:57.875 Love that. 337 00:12:58.333 --> 00:12:59.291 Yeah. And then 338 00:12:59.500 --> 00:13:02.958 right before, the crucial bit: there's a comment 339 00:13:02.958 --> 00:13:05.208 that says 'I think this renders the shape 340 00:13:05.208 --> 00:13:07.333 we are interested in' and this is the code 341 00:13:07.333 --> 00:13:10.750 sample that Blackmagic gives you if you 342 00:13:10.750 --> 00:13:13.291 want to learn about Fuses. They also have 343 00:13:13.291 --> 00:13:15.708 like the unofficial PDF documentation as 344 00:13:15.708 --> 00:13:19.000 of July 2022. So it only 345 00:13:19.000 --> 00:13:21.375 took you know... you do the math 346 00:13:21.625 --> 00:13:22.875 25 years? 347 00:13:23.958 --> 00:13:27.958 No, 2007 to 2022 but they acquired it in 348 00:13:27.958 --> 00:13:30.916 2014- like okay sure. So Fuses could work. 349 00:13:31.083 --> 00:13:32.625 Right? Because you can you can do 350 00:13:32.625 --> 00:13:35.000 arbitrary rendering. But what are we gonna 351 00:13:35.000 --> 00:13:37.208 do? Are we gonna like design a control 352 00:13:37.208 --> 00:13:41.000 where we paste in some- some Rust code and 353 00:13:41.000 --> 00:13:43.875 then write some Lua code to parse the 354 00:13:43.875 --> 00:13:47.166 Rust into an AST and like... whatever? 355 00:13:47.166 --> 00:13:49.750 Or like have some sort of markup language? 356 00:13:50.083 --> 00:13:52.750 Like parse the HTML instead and then 357 00:13:52.750 --> 00:13:54.958 render that or...? There's still questions. 358 00:13:54.958 --> 00:13:56.500 I don't know. I watched you fall down the 359 00:13:56.500 --> 00:13:57.375 hole of AppleScript. 360 00:13:57.375 --> 00:14:01.166 I really... you could go so many ways with this. 361 00:14:02.708 --> 00:14:05.791 Yeah, but no. I decided not use Fuses. In fact, I 362 00:14:05.791 --> 00:14:08.625 got the source code and I got the manual 363 00:14:08.625 --> 00:14:11.125 text rendering and layouting thing as a 364 00:14:11.125 --> 00:14:13.750 last pass before we recorded this. I didn't 365 00:14:13.750 --> 00:14:15.708 actually pursue that avenue at all. 366 00:14:15.916 --> 00:14:17.708 Another way you can extend DaVinci 367 00:14:17.708 --> 00:14:19.708 Resolve is OpenFX filters, which is 368 00:14:19.708 --> 00:14:22.166 actually a standard as far as I can tell. 369 00:14:22.166 --> 00:14:26.166 And it's... a bit like VST, but for 370 00:14:26.166 --> 00:14:28.125 video. VST is for-- 371 00:14:28.125 --> 00:14:29.291 a standard for audio effects 372 00:14:29.500 --> 00:14:32.541 Yeah, I like audio effects in digital 373 00:14:32.541 --> 00:14:34.333 audio workstations and things like that. 374 00:14:34.333 --> 00:14:37.208 The one person I know who makes VSTs kind 375 00:14:37.208 --> 00:14:40.500 of hates VST or like every platform makes 376 00:14:40.500 --> 00:14:42.500 it hard to keep things portable. But it is 377 00:14:42.500 --> 00:14:43.708 the standard way of 378 00:14:43.708 --> 00:14:45.958 writing audio plugins basically. 379 00:14:45.958 --> 00:14:48.250 Yeah, and it's a really fun 380 00:14:48.250 --> 00:14:50.791 little microcosm because you buy a DLL 381 00:14:50.958 --> 00:14:53.375 essentially from someone and then they 382 00:14:53.375 --> 00:14:53.958 always have these 383 00:14:53.958 --> 00:14:56.541 wonky UIs, I don't know. 384 00:14:56.541 --> 00:14:57.583 It's a fun little 385 00:14:57.583 --> 00:14:58.791 universe. OpenFX filters: 386 00:14:58.791 --> 00:15:01.291 here's the, here's the read the docs 387 00:15:01.291 --> 00:15:04.458 Sphinx docs guide thingy. 388 00:15:04.458 --> 00:15:05.958 Here's what it looks like. 389 00:15:05.958 --> 00:15:08.166 It's the same thing as the Lua thing, but 390 00:15:08.166 --> 00:15:11.500 it's in C++ so you can actually do per 391 00:15:11.500 --> 00:15:13.708 pixel thingy. They're using in Fusion for 392 00:15:13.708 --> 00:15:15.541 like blur, box blur, directional blur, 393 00:15:15.541 --> 00:15:17.958 Gaussian blur, lens blur, mosaic blur, 394 00:15:17.958 --> 00:15:20.166 radial blur, zoom blur: all sorts of like 395 00:15:20.166 --> 00:15:23.583 color space transforms. All the basic 396 00:15:23.708 --> 00:15:26.916 visual effects are actually OpenFX 397 00:15:26.916 --> 00:15:27.875 plugins that are 398 00:15:27.875 --> 00:15:29.416 shipped with DaVinci Resolve. 399 00:15:29.416 --> 00:15:30.916 So it's not the 400 00:15:30.916 --> 00:15:33.291 best solution for that. 401 00:15:33.291 --> 00:15:35.500 I don't even know how it would work, 402 00:15:35.500 --> 00:15:37.666 because you would have to have some sort 403 00:15:37.666 --> 00:15:40.875 of like color generator node and then 404 00:15:40.875 --> 00:15:43.375 drag your effect on top of that and then 405 00:15:43.375 --> 00:15:45.000 you would have a separate kind of-- yeah 406 00:15:45.000 --> 00:15:47.500 sure you. I mean, it's native right? 407 00:15:47.500 --> 00:15:48.666 You could ship whatever you could have 408 00:15:48.666 --> 00:15:50.250 your own copy of FreeType in there. You 409 00:15:50.250 --> 00:15:51.791 can-- you could do all the rendering all 410 00:15:51.791 --> 00:15:54.125 the, um... you could link against some Rust code 411 00:15:54.125 --> 00:15:56.458 to actually do the highlighting... you could 412 00:15:56.458 --> 00:15:58.708 do everything. But at the end of the day, 413 00:15:58.708 --> 00:16:02.291 it's... it's awkward to composite because 414 00:16:02.916 --> 00:16:05.958 your output is something like a 4k canvas. 415 00:16:06.166 --> 00:16:08.791 Right? If you have code that is taller 416 00:16:08.791 --> 00:16:11.583 than that, then you need to have the 417 00:16:11.583 --> 00:16:14.166 scroll parameter or something be a 418 00:16:14.166 --> 00:16:15.958 parameter of your effect, of your plugin. 419 00:16:15.958 --> 00:16:18.916 You can't take that and put it into 420 00:16:19.041 --> 00:16:21.375 Fusion and like have it be part of the 421 00:16:21.375 --> 00:16:23.583 graph and animate it. I don't know, it's... I 422 00:16:23.583 --> 00:16:25.708 have not pursued this road either. 423 00:16:25.708 --> 00:16:27.250 If you wanted to do a giant Star 424 00:16:27.250 --> 00:16:29.375 Wars scroll of your code... 425 00:16:29.375 --> 00:16:32.916 I mean it happens more often than you think. 426 00:16:34.375 --> 00:16:35.208 I have a lot of code. 427 00:16:35.208 --> 00:16:35.708 I believe it. 428 00:16:35.708 --> 00:16:37.250 Can you write OpenFX filters 429 00:16:37.250 --> 00:16:39.625 in Rust? Of course you can someone made 430 00:16:39.625 --> 00:16:43.625 ofx-rs. And it's 431 00:16:43.625 --> 00:16:44.916 exactly what you'd expect. 432 00:16:44.916 --> 00:16:47.583 It's ugly because it it has to interface 433 00:16:47.583 --> 00:16:51.708 with C++ and uh... But it's better because it's-- 434 00:16:51.708 --> 00:16:52.875 it's more readable to me, 435 00:16:52.875 --> 00:16:54.125 let's say, because it's Rust. 436 00:16:54.125 --> 00:16:55.833 Hmm. Is it using like CXX 437 00:16:55.833 --> 00:16:56.791 or something like that? 438 00:16:57.000 --> 00:16:59.666 I have no idea. I just checked that it 439 00:16:59.666 --> 00:17:01.250 worked, glad that it existed-- 440 00:17:01.250 --> 00:17:02.958 That's the nice thing about of a crate: you don't 441 00:17:02.958 --> 00:17:03.875 have to think about it. 442 00:17:03.875 --> 00:17:05.000 It just worked and I did-- 443 00:17:05.000 --> 00:17:05.708 I don't have to. 444 00:17:05.708 --> 00:17:07.166 I'm sorry if I just cursed you with the 445 00:17:07.166 --> 00:17:08.041 desire for knowledge. 446 00:17:08.041 --> 00:17:10.500 No, no, no, I'm getting wiser James. And 447 00:17:10.500 --> 00:17:13.833 we are only halfway through. Another thing 448 00:17:13.833 --> 00:17:14.583 you can do is that 449 00:17:14.583 --> 00:17:15.875 resolve has a scripting API. 450 00:17:15.875 --> 00:17:18.083 So that's another place where you can use 451 00:17:18.083 --> 00:17:21.250 Lua or Python interchangeably. I'm not 452 00:17:21.250 --> 00:17:24.291 exactly sure how they did that but... and 453 00:17:24.291 --> 00:17:26.541 the documentation for that is 454 00:17:27.000 --> 00:17:28.958 non-existent. They have a readme.txt 455 00:17:28.958 --> 00:17:31.458 somewhere and someone parsed it and 456 00:17:31.458 --> 00:17:33.750 generated like a nice website out of it. 457 00:17:33.750 --> 00:17:36.416 And it still has almost nothing. I think 458 00:17:36.416 --> 00:17:38.041 the only thing that I've seen that uses 459 00:17:38.041 --> 00:17:42.250 it- that I've used- is AutoCut that does 460 00:17:42.250 --> 00:17:44.750 something like export your whole project 461 00:17:44.750 --> 00:17:48.875 to a WAV file, then analyze it elsewhere, 462 00:17:48.875 --> 00:17:50.958 generate cut points and like basically 463 00:17:50.958 --> 00:17:53.208 cuts out the silences. And it does that by 464 00:17:53.750 --> 00:17:56.208 using the scripting API to tell Resolve: 465 00:17:56.208 --> 00:17:58.333 Okay, move here. Do 466 00:17:58.333 --> 00:18:02.416 blade cut. Select this etc. 467 00:18:02.416 --> 00:18:04.708 So that's what it's for. 468 00:18:04.708 --> 00:18:07.083 It's for like moving clips around on the 469 00:18:07.083 --> 00:18:09.250 timeline, changing properties, automating 470 00:18:09.250 --> 00:18:10.791 stuff like that. So I imagine like big 471 00:18:10.791 --> 00:18:14.208 productions, if they have to mass retag 472 00:18:14.208 --> 00:18:16.166 some clips or something, that's what 473 00:18:16.166 --> 00:18:17.500 they would use. But you know what's fun 474 00:18:17.833 --> 00:18:20.958 It's that everything in Fusion- like every 475 00:18:20.958 --> 00:18:23.625 scene- is actually Lua. 476 00:18:23.625 --> 00:18:27.333 So this is also a callback to- and you 477 00:18:27.333 --> 00:18:29.458 called it James- but this is a callback to 478 00:18:29.458 --> 00:18:32.208 our clipboard episode. If you go into 479 00:18:32.208 --> 00:18:35.208 Fusion and you copy the the Text+ 480 00:18:35.208 --> 00:18:37.458 nodes that we were- like that I was showing 481 00:18:37.458 --> 00:18:39.541 earlier- you can see it doesn't 482 00:18:39.541 --> 00:18:42.541 immediately register to me as Lua, but 483 00:18:42.541 --> 00:18:44.625 it is. Actually-- 484 00:18:44.625 --> 00:18:47.333 Okay, yeah, I would say Lua-- I've had to tweak a 485 00:18:47.333 --> 00:18:49.458 couple times but I'm not really fluent in 486 00:18:49.458 --> 00:18:51.166 Lua, but it's got a very like somewhere 487 00:18:51.166 --> 00:18:53.208 between JavaScript and 488 00:18:53.416 --> 00:18:55.833 Python kind of... kind of vibe to it. 489 00:18:55.833 --> 00:18:58.208 Lua's weird. I had to use it a bunch 490 00:18:58.208 --> 00:19:00.916 when I worked at itch and I never really... 491 00:19:00.916 --> 00:19:02.625 just the one index 492 00:19:02.625 --> 00:19:04.458 arrays I just never could 493 00:19:07.666 --> 00:19:11.875 But it it has a jit. It's light enough to 494 00:19:11.875 --> 00:19:13.416 integrate, it's been around forever... 495 00:19:14.458 --> 00:19:15.666 Yeah, there's a reason 496 00:19:15.666 --> 00:19:16.791 it's almost everywhere. 497 00:19:16.791 --> 00:19:19.708 And yeah the scene description- like the 498 00:19:19.708 --> 00:19:23.250 node graphs in Fusion are Lua. 499 00:19:23.250 --> 00:19:25.541 So when you copy them you get a bunch of 500 00:19:25.541 --> 00:19:27.916 text readable things which explains a lot 501 00:19:27.916 --> 00:19:30.375 about the performance overall by the way, 502 00:19:30.375 --> 00:19:32.541 and the stability of the software, which 503 00:19:32.541 --> 00:19:34.666 is sometimes not ideal. But it's also very 504 00:19:34.666 --> 00:19:36.833 nice because you can see that cantaloupe 505 00:19:36.833 --> 00:19:39.458 salmon is here in the character level 506 00:19:39.458 --> 00:19:41.291 styling node. Kind of need 507 00:19:41.291 --> 00:19:42.208 to zoom in a little bit. 508 00:19:42.208 --> 00:19:42.666 There you go. 509 00:19:42.666 --> 00:19:44.666 And that's-- for the colors, 510 00:19:44.666 --> 00:19:46.708 we also have something that 511 00:19:46.708 --> 00:19:48.458 is pretty easily reversible. 512 00:19:48.458 --> 00:19:50.916 I think what happened there, the 513 00:19:50.916 --> 00:19:53.708 nerdsniping process, is that I just 514 00:19:53.708 --> 00:19:56.583 noticed that you got text out of it, and I 515 00:19:56.583 --> 00:19:58.333 figured you could probably paste it back 516 00:19:58.333 --> 00:19:59.625 in or like generate something and paste 517 00:19:59.625 --> 00:20:01.875 it back in. But I had no idea-- I saw all 518 00:20:01.875 --> 00:20:03.291 these numbers and I got scared and I 519 00:20:03.291 --> 00:20:05.750 posted it on Bluesky or something and 520 00:20:05.750 --> 00:20:06.791 someone was like: Wait a minute. 521 00:20:06.791 --> 00:20:10.916 It's not scary at all! 2401 is red, 2402 is 522 00:20:10.916 --> 00:20:13.833 green and 2403 is blue. As you can see. 523 00:20:13.833 --> 00:20:16.666 Like I put the color picker next to it 524 00:20:16.916 --> 00:20:20.083 And you can see: yeah, one is 255, 0.49 is 525 00:20:20.083 --> 00:20:24.625 126, 0.47 is 121. So yeah, okay. 526 00:20:24.833 --> 00:20:28.375 So the first element in the array 2401 is 527 00:20:28.375 --> 00:20:31.916 the attribute number or ID or something 528 00:20:31.916 --> 00:20:34.708 like the property ID. Then we have 11 and 529 00:20:34.708 --> 00:20:37.375 16 are start and end. And then value is 530 00:20:37.375 --> 00:20:39.458 the value. And you have different 531 00:20:40.000 --> 00:20:42.916 properties. You can have font, you can have 532 00:20:42.916 --> 00:20:45.208 font variants, you can have a bunch of 533 00:20:45.208 --> 00:20:46.833 different things. But we're just 534 00:20:46.833 --> 00:20:48.125 interested in colors right now. 535 00:20:48.333 --> 00:20:50.916 And so the plan becomes: okay, so we have 536 00:20:50.916 --> 00:20:52.375 an example scene, right? 537 00:20:52.375 --> 00:20:53.291 We've added some Text+ 538 00:20:53.291 --> 00:20:54.750 nodes in Fusion. 539 00:20:55.000 --> 00:20:58.250 We have had this complete Lua printout 540 00:20:58.250 --> 00:21:01.750 and we can just generate our own and then 541 00:21:01.750 --> 00:21:03.416 paste it back into Fusion. That's-- and then... 542 00:21:03.416 --> 00:21:07.000 and then profit. But there is a few issues... 543 00:21:07.208 --> 00:21:09.583 There's at least two important details 544 00:21:09.583 --> 00:21:11.875 that got in the way. Because this is 545 00:21:11.875 --> 00:21:14.041 exactly what I did. I'll show you what it 546 00:21:14.041 --> 00:21:15.125 looks like later, but 547 00:21:15.125 --> 00:21:15.958 We're falling down the 548 00:21:15.958 --> 00:21:17.125 hole with you right now. 549 00:21:17.458 --> 00:21:20.458 Yes yes yes. Um, can you James-- 550 00:21:20.458 --> 00:21:21.875 Can you predict what some 551 00:21:21.875 --> 00:21:23.458 of the details might be? 552 00:21:23.708 --> 00:21:25.208 Well, you said earlier that when you 553 00:21:25.208 --> 00:21:27.625 copied and pasted it back in, it didn't 554 00:21:27.625 --> 00:21:29.791 have the second one. So when you did the 555 00:21:29.791 --> 00:21:31.750 like fancy text box formatting, it was 556 00:21:31.750 --> 00:21:33.750 just cantaloupe and not cantaloupe salmon 557 00:21:33.750 --> 00:21:35.958 or the salmon was cantaloupe If that 558 00:21:35.958 --> 00:21:37.750 makes sense. So i'm guessing that's going 559 00:21:37.750 --> 00:21:38.541 to be an issue here. 560 00:21:38.541 --> 00:21:43.458 So... yes, and no. So you don't paste it into 561 00:21:43.458 --> 00:21:46.291 the text input. You paste it into the node 562 00:21:46.291 --> 00:21:48.500 graph editor. The way it works is that I 563 00:21:48.500 --> 00:21:50.416 generate my own entire node graph and 564 00:21:50.416 --> 00:21:52.333 then I have to select all the existing 565 00:21:52.333 --> 00:21:54.708 node graph, delete that... And then paste my 566 00:21:54.708 --> 00:21:56.333 own in place. But there 567 00:21:56.333 --> 00:21:57.416 is an interesting bug here. 568 00:21:57.416 --> 00:21:59.791 I didn't even think to document it. It's 569 00:21:59.791 --> 00:22:01.208 that when you delete the entire node 570 00:22:01.208 --> 00:22:03.125 graph and you paste another entire node 571 00:22:03.125 --> 00:22:06.625 graph: because the media output just disappeared 572 00:22:06.625 --> 00:22:08.625 It just never shows anything anymore in the 573 00:22:08.625 --> 00:22:10.375 preview tab until you switch to a 574 00:22:10.375 --> 00:22:11.666 different page and switch back 575 00:22:13.500 --> 00:22:16.000 So you don't get to see what it actually... 576 00:22:16.541 --> 00:22:18.416 You don't get a preview of what you just 577 00:22:18.416 --> 00:22:21.041 pasted in until you switch back to the 578 00:22:21.041 --> 00:22:23.625 edit page and then back to a Fusion. 579 00:22:23.625 --> 00:22:25.708 But uh, no the uh, the first detail that's 580 00:22:25.708 --> 00:22:28.291 annoying is that RGB doesn't really mean 581 00:22:28.291 --> 00:22:30.541 anything. You need to kind of have a 582 00:22:30.541 --> 00:22:32.958 reference. It goes from zero to one, 583 00:22:32.958 --> 00:22:36.958 sure. But... what does it mean? And there's 584 00:22:36.958 --> 00:22:39.458 three different places we can see color 585 00:22:41.333 --> 00:22:43.291 And none of them agree with each other. 586 00:22:43.291 --> 00:22:45.791 There's the macOS color picker, there's 587 00:22:45.791 --> 00:22:47.916 the Fusion color control, and then there's 588 00:22:47.916 --> 00:22:50.958 the Resolve render preview window. And 589 00:22:50.958 --> 00:22:55.458 they all show distinct values. This is my 590 00:22:55.458 --> 00:22:57.750 favorite slide. But we can see that. 591 00:22:58.041 --> 00:22:58.916 Oh goodness . 592 00:22:59.000 --> 00:22:59.875 On the preview 593 00:22:59.875 --> 00:23:01.666 We have 255, 175, 171. 594 00:23:01.666 --> 00:23:03.250 On the macOS color picker. 595 00:23:03.250 --> 00:23:06.875 We have 255, 148, 140. It's even darker on 596 00:23:06.875 --> 00:23:10.375 the-- in the Fusion inspector which is 255, 597 00:23:10.375 --> 00:23:13.666 115, 115. The preview is closest to the uh, 598 00:23:13.666 --> 00:23:15.250 actual export. Which is good. 599 00:23:15.250 --> 00:23:17.750 At least you can kinda trust that. If you 600 00:23:17.750 --> 00:23:20.708 export the video, the color-- I did color 601 00:23:20.708 --> 00:23:22.291 picking on the- on the final file and it 602 00:23:22.291 --> 00:23:23.791 is actually what the 603 00:23:23.791 --> 00:23:25.833 preview is. But if you remember-- 604 00:23:25.833 --> 00:23:26.375 We're gonna learn more 605 00:23:26.375 --> 00:23:27.500 about color spaces now? 606 00:23:28.458 --> 00:23:30.416 Not a lot. Don't worry. 607 00:23:30.416 --> 00:23:31.208 Let me get my slide. 608 00:23:31.208 --> 00:23:32.750 Yeah, the macOS color picker 609 00:23:32.750 --> 00:23:35.000 corresponded well with the values here, 610 00:23:35.000 --> 00:23:36.708 which does not correspond to what you 611 00:23:36.708 --> 00:23:37.583 actually see on screen. 612 00:23:37.583 --> 00:23:41.125 So I... Honestly almost gave up at this 613 00:23:41.125 --> 00:23:42.708 point because I was like I don't even 614 00:23:42.708 --> 00:23:45.083 freaking know-- and I made a whole freaking 615 00:23:45.083 --> 00:23:47.166 article slash video about 616 00:23:47.166 --> 00:23:49.166 color: "Color is best effort." 617 00:23:49.166 --> 00:23:49.833 Mm-hmm. 618 00:23:49.833 --> 00:23:51.500 Which is my worst performing video of the 619 00:23:51.500 --> 00:23:55.583 past 10 videos by the way. A good like humbling 620 00:23:55.583 --> 00:23:57.708 reminder that you know, not every video 621 00:23:57.708 --> 00:24:00.166 is a hit. But I like it. You think I would 622 00:24:00.166 --> 00:24:02.041 figure it out I would go like: is it red 623 00:24:02.041 --> 00:24:03.916 709 because that's the 624 00:24:03.916 --> 00:24:05.333 color space of the project. 625 00:24:05.333 --> 00:24:09.000 Is it SRGB that would make sense for a 626 00:24:09.000 --> 00:24:10.500 web, that would make sense for like a 627 00:24:10.500 --> 00:24:11.750 system color picker. 628 00:24:11.750 --> 00:24:12.583 Is it linear? 629 00:24:12.958 --> 00:24:14.250 I don't I don't know. 630 00:24:14.250 --> 00:24:18.291 Uh, what I know is I assumed that the RGB 631 00:24:18.291 --> 00:24:21.125 CSS properties that i'm converting from 632 00:24:21.125 --> 00:24:23.125 on my website-- this is some code for my 633 00:24:23.125 --> 00:24:26.083 website-- are sRGB and i'm assuming that 634 00:24:26.083 --> 00:24:28.875 Fusion wants something linear. And it's 635 00:24:28.875 --> 00:24:33.166 it's wrong by some measure. But not enough 636 00:24:33.166 --> 00:24:34.875 for me to care anymore. 637 00:24:34.875 --> 00:24:38.875 I have-- I have spent all my cycles on this. 638 00:24:38.875 --> 00:24:41.625 I have no more cycles to spend and uh, 639 00:24:41.625 --> 00:24:44.166 it's close enough. The second detail is 640 00:24:44.166 --> 00:24:46.750 how to define tech ranges and this one I 641 00:24:46.750 --> 00:24:49.875 did not expect because it's 2025 and I 642 00:24:49.875 --> 00:24:51.458 keep forgetting that some 643 00:24:51.875 --> 00:24:54.208 software is actually a 35 year old. 644 00:24:54.208 --> 00:24:56.416 This is gonna be bytes and not glyphs 645 00:24:56.416 --> 00:24:56.916 and which means 646 00:24:56.916 --> 00:24:58.708 terrible UTF8 things can happen? 647 00:24:58.958 --> 00:25:00.708 So glyph-- glyph is... glyph 648 00:25:00.708 --> 00:25:02.583 is making me sad angry. 649 00:25:02.583 --> 00:25:04.958 Glyph is not a thing really 650 00:25:05.125 --> 00:25:05.875 I'm using the 651 00:25:05.875 --> 00:25:07.583 incorrect Unicode word. There-- 652 00:25:07.583 --> 00:25:09.250 You're right, there's a-- there's a very 653 00:25:09.250 --> 00:25:10.583 specific word for what 654 00:25:10.583 --> 00:25:11.500 we should use for this 655 00:25:11.500 --> 00:25:12.458 Frapheme cluster. 656 00:25:12.458 --> 00:25:13.208 Yeah, it's a grapheme 657 00:25:13.208 --> 00:25:14.625 cluster That's exactly it. 658 00:25:14.625 --> 00:25:16.291 Is glyph the go word for--? 659 00:25:16.291 --> 00:25:18.708 No, no, no, no, no go has runes, which 660 00:25:18.708 --> 00:25:20.416 are different still. I 661 00:25:20.416 --> 00:25:21.375 forget what they are. 662 00:25:21.375 --> 00:25:24.291 But yeah, the question is like: how do 663 00:25:24.291 --> 00:25:26.625 we deal with emojis for example? 664 00:25:26.791 --> 00:25:28.833 Like text ranges will get into but emojis 665 00:25:28.833 --> 00:25:30.708 are another problem because normally 666 00:25:30.708 --> 00:25:33.000 operating systems... I don't know, if you 667 00:25:33.000 --> 00:25:35.625 have a text editor you say, "Okay I want 668 00:25:35.625 --> 00:25:38.708 Ariel font," and then you write some text. 669 00:25:38.708 --> 00:25:39.916 Okay, it's gonna render the text in Ariel 670 00:25:39.916 --> 00:25:41.416 But if you have an emoji in the middle 671 00:25:41.416 --> 00:25:43.416 it's gonna use the system emoji font 672 00:25:43.500 --> 00:25:45.833 Which is a color font in the middle of 673 00:25:45.833 --> 00:25:47.791 all that. It's gonna have different widths 674 00:25:47.791 --> 00:25:50.000 different like dimensions, metrics, whatnot. 675 00:25:50.000 --> 00:25:52.041 And it's gonna do that seamlessly and 676 00:25:52.041 --> 00:25:53.750 that's like emojis show differently on 677 00:25:53.750 --> 00:25:55.250 different platforms, and that's because 678 00:25:55.250 --> 00:25:57.125 the operating system knows how to render 679 00:25:57.125 --> 00:26:00.666 emoji. But Fusion does not. It will just 680 00:26:00.666 --> 00:26:01.458 render-- 681 00:26:01.583 --> 00:26:02.625 Excellent, excellent. 682 00:26:02.625 --> 00:26:03.291 garbage and it 683 00:26:03.291 --> 00:26:05.291 does not support color fonts either, so 684 00:26:05.291 --> 00:26:07.166 even if you bring your own like Noto 685 00:26:07.166 --> 00:26:09.500 color emoji font, it's just not gonna 686 00:26:09.500 --> 00:26:11.500 know what to do with it. I don't know what 687 00:26:11.500 --> 00:26:14.541 FreeType actually does with fonts like 688 00:26:14.541 --> 00:26:18.250 these but... It just doesn't work. 689 00:26:18.250 --> 00:26:21.500 Fortunately Noto Emoji exists and it's 690 00:26:21.500 --> 00:26:23.208 a version that is not a color font. 691 00:26:23.208 --> 00:26:25.541 It's a... what word i'm looking for... 692 00:26:25.541 --> 00:26:27.500 Black and white outline kind of? 693 00:26:27.500 --> 00:26:31.708 It's a monochrome emoji font... in, like, in 694 00:26:31.708 --> 00:26:34.416 text style. Another little detail: 695 00:26:34.750 --> 00:26:37.250 I have nerd fonts in my terminal and in 696 00:26:37.250 --> 00:26:40.125 my like text editor with um... 697 00:26:40.500 --> 00:26:41.916 This is Oh My Zsh or something? 698 00:26:41.916 --> 00:26:46.250 This is actually Starship. Starship.rs. 699 00:26:46.250 --> 00:26:47.208 Ah, okay. 700 00:26:47.208 --> 00:26:47.625 Yeah. 701 00:26:47.625 --> 00:26:51.083 And... same issue here. 702 00:26:51.083 --> 00:26:52.041 So is this using 703 00:26:52.041 --> 00:26:53.500 ligatures or things like that? 704 00:26:53.500 --> 00:26:57.666 Uh, it's not it's using private use area 705 00:26:57.666 --> 00:27:02.250 characters. So again, they would just 706 00:27:02.250 --> 00:27:03.916 show up as like the 707 00:27:03.916 --> 00:27:06.916 'don't have a glyph for that' 708 00:27:08.000 --> 00:27:10.041 glyph in DaVinci Resolve 709 00:27:10.041 --> 00:27:10.833 There's a word for that Unicode. 710 00:27:10.833 --> 00:27:12.250 It's not toasts, but it's 711 00:27:12.250 --> 00:27:13.833 the square that has like the-- 712 00:27:13.833 --> 00:27:16.166 Character replacement box or something? 713 00:27:16.208 --> 00:27:18.875 Yeah, yeah, but it's just got the the hex 714 00:27:18.875 --> 00:27:21.083 value of what-- what 715 00:27:21.083 --> 00:27:22.916 exists inside of that space 716 00:27:23.041 --> 00:27:24.333 I wish that were the case. 717 00:27:24.333 --> 00:27:26.000 That would be so much easier. But at least 718 00:27:26.000 --> 00:27:28.250 not in-- not in DaVinci Resolve. On my 719 00:27:28.250 --> 00:27:31.083 website I have a patched version of 720 00:27:31.083 --> 00:27:33.500 Berkeley Mono and so there's no need to 721 00:27:33.500 --> 00:27:36.083 do anything special. And also in CSS you 722 00:27:36.083 --> 00:27:38.291 can have like for this range like you 723 00:27:38.291 --> 00:27:40.000 know the range for nerd fonts characters. 724 00:27:40.000 --> 00:27:42.083 Just use that other font. It's all built 725 00:27:42.083 --> 00:27:43.625 in. The web is actually very good at 726 00:27:43.625 --> 00:27:46.500 rendering text surprisingly turns out. 727 00:27:46.500 --> 00:27:48.333 Yeah, there's a symbols nerd font which 728 00:27:48.333 --> 00:27:51.625 only has the symbols and so technically 729 00:27:51.625 --> 00:27:55.333 if you were to go through some text that 730 00:27:55.333 --> 00:27:58.708 I captured from the terminal you could 731 00:27:59.041 --> 00:28:02.083 detect what ranger are an emoji because 732 00:28:02.083 --> 00:28:05.041 an emoji is not just one right? 733 00:28:05.041 --> 00:28:06.125 That's never the case 734 00:28:06.208 --> 00:28:07.208 It's time for a game. 735 00:28:07.208 --> 00:28:10.208 The only way to learn is to play. Let's 736 00:28:10.208 --> 00:28:11.458 play a little game called. 737 00:28:11.458 --> 00:28:12.541 What's the length of this string? 738 00:28:12.541 --> 00:28:14.583 Oh, no. This isn't quite as bad as what 739 00:28:14.583 --> 00:28:15.875 date is this in JavaScript? 740 00:28:16.375 --> 00:28:17.375 Yeah, this one's pretty bad 741 00:28:17.375 --> 00:28:20.000 There's a bunch of like .wtf websites that 742 00:28:20.000 --> 00:28:22.708 popped up recently. One of them was 743 00:28:22.708 --> 00:28:25.083 about Python fstrings the other one was-- 744 00:28:25.083 --> 00:28:26.208 Yeah yeah, the date-- the 745 00:28:26.208 --> 00:28:27.375 JavaScript date thing is 746 00:28:27.375 --> 00:28:28.125 just like Sam 747 00:28:28.125 --> 00:28:28.833 Who did the 748 00:28:28.833 --> 00:28:30.416 JavaScript date library thing. 749 00:28:30.958 --> 00:28:32.166 Yeah, so we'll start easy. 750 00:28:32.166 --> 00:28:34.708 We'll start with a dollar sign and we'll 751 00:28:34.708 --> 00:28:35.791 count four different things. 752 00:28:35.791 --> 00:28:38.708 We'll count grapheme clusters, Unicode 753 00:28:38.708 --> 00:28:40.458 code points, UTF-16 754 00:28:40.458 --> 00:28:42.250 code units, and UTF-8 bytes. 755 00:28:42.625 --> 00:28:44.708 Uh, let's see if this is an ASCII dollar 756 00:28:44.708 --> 00:28:47.250 sign, it would be one grapheme 757 00:28:47.250 --> 00:28:50.833 cluster, one unicode code point, one UTF-16 758 00:28:50.833 --> 00:28:53.333 code unit and one UTF-8 byte? 759 00:28:54.000 --> 00:28:55.666 Yes, that is correct. 760 00:28:55.666 --> 00:28:57.708 So that's four points for you. 761 00:28:57.708 --> 00:29:00.416 Because we're in the ASCII subset of of Unicode 762 00:29:00.416 --> 00:29:01.750 Do you want a bonus point to 763 00:29:01.750 --> 00:29:03.166 tell us what the code point is? 764 00:29:03.166 --> 00:29:04.208 Oh, I don't know. 765 00:29:04.208 --> 00:29:06.291 No, I'd have to Google it. 766 00:29:06.291 --> 00:29:07.750 Well, it's plus 24. 767 00:29:07.750 --> 00:29:08.541 It's hex 24. 768 00:29:08.541 --> 00:29:11.125 But yeah, that's all correct. It's exactly-- 769 00:29:11.125 --> 00:29:14.000 the length of one dollar sign is one. 770 00:29:14.208 --> 00:29:15.000 Everybody agrees. 771 00:29:15.208 --> 00:29:15.875 Honestly, we should 772 00:29:15.875 --> 00:29:17.083 have stopped there probably 773 00:29:17.750 --> 00:29:18.416 Next one. 774 00:29:19.166 --> 00:29:20.041 Oh no. 775 00:29:20.333 --> 00:29:21.625 A crab emoji. 776 00:29:21.791 --> 00:29:25.000 Crab? It is gonna be one grapheme cluster 777 00:29:26.083 --> 00:29:30.250 One Unicode code point. It's gonna be 778 00:29:30.250 --> 00:29:31.000 Correct 779 00:29:31.000 --> 00:29:33.125 one UTF-18 code unit and it's 780 00:29:33.125 --> 00:29:35.333 gonna be three UTF-8 bytes 781 00:29:35.333 --> 00:29:37.666 Before you go any further, I want to tell 782 00:29:37.666 --> 00:29:39.958 you what the code point is so that it can 783 00:29:39.958 --> 00:29:41.208 help you. The Unicode code 784 00:29:41.208 --> 00:29:46.333 point for the crab is 1F980. 785 00:29:46.333 --> 00:29:50.041 1F980 yeah, so it'd be... I mean it's gonna 786 00:29:50.041 --> 00:29:51.500 be three UTF-8 bytes, right? 787 00:29:51.916 --> 00:29:55.416 No, it's gonna be two UTF-16 code units 788 00:29:55.416 --> 00:29:56.750 and four UTF-8 bytes. 789 00:29:57.416 --> 00:29:59.625 Because the code point is too big. 790 00:29:59.625 --> 00:30:02.625 It don't fit. It don't fit in one UTF-16 791 00:30:02.625 --> 00:30:04.625 code unit. So you have a surrogate pair. 792 00:30:04.625 --> 00:30:05.500 It's called that way. 793 00:30:05.500 --> 00:30:06.166 Oh goody 794 00:30:06.166 --> 00:30:08.291 And uh, a surrogate pair-- I just, i'm saying 795 00:30:08.291 --> 00:30:10.791 it weird and now I have the the fruit, the 796 00:30:10.791 --> 00:30:14.000 pear, like a surrogate pear on my mind. 797 00:30:14.000 --> 00:30:15.833 This is my surrogate pear! 798 00:30:16.541 --> 00:30:18.500 Amanda please edit a pear. 799 00:30:18.500 --> 00:30:19.500 It's a surrogate pear. 800 00:30:19.500 --> 00:30:21.916 Exactly. I should 801 00:30:21.916 --> 00:30:22.666 have used a pear emoji. 802 00:30:22.875 --> 00:30:24.166 [[James Munns] Yeah, there you go. 803 00:30:24.541 --> 00:30:25.833 And uh for UTF-8 it's 804 00:30:25.833 --> 00:30:26.916 a little bit more complicated. 805 00:30:26.916 --> 00:30:29.375 There's very good tools, there's UTF-8 806 00:30:29.375 --> 00:30:32.041 visualizers. I linked two of them. 807 00:30:32.041 --> 00:30:34.208 They're gonna be in the show notes 808 00:30:34.208 --> 00:30:36.875 because Amanda is the best. Yeah, we have 809 00:30:36.875 --> 00:30:39.708 four UTF-8 bytes because again, it 810 00:30:39.708 --> 00:30:40.458 doesn't fit in three 811 00:30:40.875 --> 00:30:43.083 Yeah, I always forget that the UTF-8 812 00:30:43.083 --> 00:30:45.375 format is slightly more complicated than 813 00:30:45.375 --> 00:30:47.666 like the Protobuf varint format. Like 814 00:30:47.666 --> 00:30:49.625 normally in Protobuf varints and actually 815 00:30:49.625 --> 00:30:51.541 the same way Postcard works, you just use 816 00:30:51.541 --> 00:30:53.708 one bit as the continuation bit whereas 817 00:30:53.708 --> 00:30:55.875 in UTF-8 they use what is 818 00:30:55.875 --> 00:30:57.250 it four bits in the first 819 00:30:57.625 --> 00:30:59.458 byte and then two in each of the 820 00:30:59.458 --> 00:31:01.166 continuation? Like it uses 821 00:31:01.166 --> 00:31:03.000 significantly more for metadata 822 00:31:03.125 --> 00:31:04.875 That's what it seems to show. 823 00:31:04.875 --> 00:31:05.166 Yeah. 824 00:31:05.166 --> 00:31:08.458 Actually the other UTF-8 visualizer 825 00:31:08.458 --> 00:31:11.750 seems to indicate that-- you get four bytes 826 00:31:11.750 --> 00:31:13.958 set to one and then one zero. 827 00:31:13.958 --> 00:31:15.208 Do you see it in the corner? 828 00:31:15.416 --> 00:31:17.583 They disagree on how many leading zeros 829 00:31:17.583 --> 00:31:19.458 we have that are part of the... 830 00:31:19.666 --> 00:31:21.625 Because it uses how many ones you have 831 00:31:21.625 --> 00:31:23.916 before the first zero to basically count 832 00:31:23.916 --> 00:31:27.041 there. So like the 1111 zero, the zero is 833 00:31:27.041 --> 00:31:29.000 the terminator for the string of one bits. 834 00:31:29.208 --> 00:31:31.083 So it does actually take five bits to say 835 00:31:31.083 --> 00:31:33.250 there are four bytes in this sequence 836 00:31:33.583 --> 00:31:35.708 But why do we need to know how many bytes 837 00:31:35.708 --> 00:31:36.708 there are in the sequence? 838 00:31:37.333 --> 00:31:38.833 Can we just use continuation bytes? 839 00:31:39.583 --> 00:31:40.708 Ah, well, no, okay. 840 00:31:40.958 --> 00:31:41.333 Well, no. 841 00:31:41.333 --> 00:31:41.541 Yeah. 842 00:31:41.750 --> 00:31:42.708 Yeah, I think it's 843 00:31:42.708 --> 00:31:43.875 probably a detection thing. 844 00:31:43.875 --> 00:31:46.083 I'm not entirely sure. It's like a clear 845 00:31:46.083 --> 00:31:47.041 way that yes, this is 846 00:31:47.041 --> 00:31:48.625 the beginning of a thing 847 00:31:48.791 --> 00:31:49.625 UTF-8 is fun. 848 00:31:49.625 --> 00:31:52.125 The hard part of UTF-8 is... I don't know. 849 00:31:52.375 --> 00:31:54.125 Normalization and stuff. Big Unicode 850 00:31:54.125 --> 00:31:55.416 tables, stuff like that. 851 00:31:55.416 --> 00:31:57.458 But UTF-8 itself is just, 852 00:31:57.458 --> 00:31:59.083 it's just pretty neat. All right. 853 00:31:59.083 --> 00:32:00.541 Next, next question. 854 00:32:00.541 --> 00:32:03.666 James: a pair, an emoji pair of scissors 855 00:32:04.291 --> 00:32:05.166 How many grapheme 856 00:32:05.166 --> 00:32:06.541 clusters, how many code points? 857 00:32:06.541 --> 00:32:08.500 I'm gonna guess all the same numbers as 858 00:32:08.500 --> 00:32:10.208 the crab Just to be wrong. 859 00:32:10.208 --> 00:32:11.875 Just to be wrong, of course! 860 00:32:12.041 --> 00:32:13.208 Yeah... yeah, yeah. 861 00:32:13.208 --> 00:32:14.833 So this time there's not one 862 00:32:14.833 --> 00:32:16.541 there's two Unicode code points 863 00:32:16.958 --> 00:32:17.666 Excellent, but it's a 864 00:32:17.666 --> 00:32:19.333 big Unicode code point 865 00:32:19.333 --> 00:32:22.791 Has two UTF-16 code units, but six UTF-8 866 00:32:22.791 --> 00:32:25.708 bytes for some reason. This time each code 867 00:32:25.708 --> 00:32:28.916 point fits in one UTF-16 code unit, but 868 00:32:28.916 --> 00:32:30.916 UTF-8 goes from like-- how many 869 00:32:30.916 --> 00:32:32.666 bytes do we have? Four to six. 870 00:32:33.500 --> 00:32:35.750 Because... Because it's like three and three 871 00:32:35.750 --> 00:32:37.583 I'm assuming? I don't know, I haven't 872 00:32:37.583 --> 00:32:39.416 decoded those. Do you know why there's two 873 00:32:39.416 --> 00:32:40.708 code points, you have any idea? 874 00:32:41.166 --> 00:32:42.458 Is it the left half of the scissors? 875 00:32:42.458 --> 00:32:44.833 Is it just two knives glued together and 876 00:32:44.833 --> 00:32:45.625 that's actually scissors? 877 00:32:46.083 --> 00:32:47.916 That's not as out there 878 00:32:47.916 --> 00:32:49.916 of a guess as it sounds 879 00:32:50.541 --> 00:32:52.791 It's not, it's not. UTF-8 does some weird 880 00:32:52.791 --> 00:32:54.708 things sometimes. 881 00:32:54.708 --> 00:32:58.000 But no. It's an image variation selector. The 882 00:32:58.000 --> 00:32:59.250 problem is that the pair of scissors 883 00:32:59.250 --> 00:33:02.041 existed before emoji. So if you just do 884 00:33:02.041 --> 00:33:04.208 pair of scissors, then you get the text 885 00:33:04.208 --> 00:33:06.791 version is sideways for some reason. 886 00:33:06.791 --> 00:33:09.083 Get the lo-fi-- lo-fi text scissors. 887 00:33:09.083 --> 00:33:12.125 The monochrome outline version the the Noto 888 00:33:12.125 --> 00:33:14.083 Emoji without color. And then you add an 889 00:33:14.083 --> 00:33:16.708 image variation selector after that, and 890 00:33:16.708 --> 00:33:18.500 you get an emoji pair of scissors with 891 00:33:18.500 --> 00:33:19.916 colors and everything instead. 892 00:33:20.000 --> 00:33:20.791 Is this how like 893 00:33:20.791 --> 00:33:22.250 things like the-- oh, okay. 894 00:33:22.250 --> 00:33:23.083 I won't spoil it 895 00:33:24.208 --> 00:33:27.791 You can also select the other-- like this 896 00:33:27.791 --> 00:33:29.708 is only one of the selectors. You can also 897 00:33:29.708 --> 00:33:31.958 select the text version if you wanted to. 898 00:33:31.958 --> 00:33:36.416 And so I guess if you only have 2702 like 899 00:33:36.416 --> 00:33:38.208 only the pair of scissors, I guess it's 900 00:33:38.208 --> 00:33:40.125 not wrong to render it as emoji? 901 00:33:40.125 --> 00:33:41.166 I'm not exactly sure 902 00:33:41.458 --> 00:33:42.750 Yeah, there's a bunch of stuff that like 903 00:33:42.750 --> 00:33:46.583 it's allowable fall downs in Unicode. We 904 00:33:46.583 --> 00:33:48.208 need to just have Manish on is what we 905 00:33:48.208 --> 00:33:50.833 need to have like... Someone who's in the 906 00:33:50.833 --> 00:33:53.291 Unicode Consortium and knows all of these 907 00:33:53.291 --> 00:33:55.208 things of like, there are certain things that 908 00:33:55.208 --> 00:33:56.583 are allowable and then there's certain 909 00:33:56.583 --> 00:33:58.166 ways to say something's not allowable. 910 00:33:58.166 --> 00:34:01.041 Yeah, this is beyond my ken. 911 00:34:01.041 --> 00:34:01.750 Well, don't worry 912 00:34:01.750 --> 00:34:03.041 because we're reaching the end. 913 00:34:03.041 --> 00:34:04.125 Here's the last one. 914 00:34:04.125 --> 00:34:05.166 This is the best one. 915 00:34:05.166 --> 00:34:06.625 Yeah, because this is-- Okay, okay. 916 00:34:06.625 --> 00:34:08.916 I know that the like combined family 917 00:34:08.916 --> 00:34:11.458 emoji is a modifier because it's like 918 00:34:11.708 --> 00:34:13.041 combining multiple emojis. 919 00:34:13.041 --> 00:34:15.333 I don't know if it's quite like person 920 00:34:15.333 --> 00:34:17.541 plus person plus child plus child. You're 921 00:34:17.541 --> 00:34:20.166 giving me the like Japanese symbol 922 00:34:20.166 --> 00:34:24.416 version. Not the like color emoji one that 923 00:34:24.416 --> 00:34:27.291 has like cartoon looking people 924 00:34:27.500 --> 00:34:28.500 I thought it would be 925 00:34:28.500 --> 00:34:29.458 cartoon looking people. 926 00:34:29.458 --> 00:34:31.666 I don't know why it shows this 927 00:34:31.666 --> 00:34:33.000 Interesting. 928 00:34:33.000 --> 00:34:34.458 Google Docs is just being weird. 929 00:34:34.458 --> 00:34:36.375 So i'm gonna guess this is i'm guessing 930 00:34:36.375 --> 00:34:40.625 this is four grapheme clusters and like 931 00:34:41.416 --> 00:34:43.208 seven unicode code points 932 00:34:43.208 --> 00:34:45.166 and like 14 bytes 933 00:34:45.166 --> 00:34:45.791 or something like that. 934 00:34:45.791 --> 00:34:47.541 Okay, you're already wrong on the 935 00:34:47.541 --> 00:34:49.000 first one. How many 936 00:34:49.000 --> 00:34:50.416 shapes do you identify? 937 00:34:50.416 --> 00:34:53.250 Is it four? because it's the four adults 938 00:34:53.250 --> 00:34:55.000 and two children or it's usually two 939 00:34:55.000 --> 00:34:55.791 adults and two children 940 00:34:55.791 --> 00:34:56.708 How many clusters do 941 00:34:56.708 --> 00:34:57.625 you identify? 942 00:34:57.875 --> 00:34:58.458 In a box? 943 00:34:58.458 --> 00:34:59.208 That's just the one. 944 00:34:59.208 --> 00:34:59.791 I don't know. 945 00:34:59.791 --> 00:35:00.833 This is one cluster, right? 946 00:35:00.875 --> 00:35:02.625 It's one, you can select it. 947 00:35:02.625 --> 00:35:03.666 Oh, right, right. 948 00:35:03.666 --> 00:35:06.333 It's one-- like if you do left or right 949 00:35:06.333 --> 00:35:07.958 you're not going to be in the middle of 950 00:35:07.958 --> 00:35:09.791 that thing. You can be on the left of it 951 00:35:09.791 --> 00:35:10.791 and on the right of it 952 00:35:11.000 --> 00:35:12.083 It's one grapheme cluster 953 00:35:12.083 --> 00:35:13.791 Doing like the zero width join of 954 00:35:13.791 --> 00:35:15.833 multiple emoji characters, it becomes 955 00:35:15.833 --> 00:35:18.583 one cluster is the join of all the things 956 00:35:18.583 --> 00:35:19.750 that have been joined together. So I guess 957 00:35:19.750 --> 00:35:21.333 that's why you were saying the difference 958 00:35:21.333 --> 00:35:23.666 between grapheme clusters and code points... 959 00:35:23.666 --> 00:35:26.333 because it's one cluster with like five 960 00:35:26.333 --> 00:35:27.583 Unicode code points? 961 00:35:27.583 --> 00:35:29.208 Does that include the zero width joins 962 00:35:29.208 --> 00:35:29.875 and stuff like that? 963 00:35:30.000 --> 00:35:31.208 I have- I have to zoom in 964 00:35:31.208 --> 00:35:32.541 my speaker notes to cheat 965 00:35:34.291 --> 00:35:36.208 No, there's so many so many freaking code 966 00:35:36.208 --> 00:35:38.791 points in there. So because you have to 967 00:35:38.791 --> 00:35:42.416 have some sort of joiner, right? Between them. 968 00:35:42.416 --> 00:35:44.083 The glue that holds the family together. 969 00:35:44.083 --> 00:35:47.375 Exactly and you have to repeat it between 970 00:35:47.375 --> 00:35:50.250 everything. So you actually have like dad, 971 00:35:50.250 --> 00:35:53.000 zero width joiner, mom, zero width joiner, 972 00:35:53.041 --> 00:35:56.083 child A, zero width joiner, child B and then 973 00:35:56.083 --> 00:35:58.833 a selector- a variant selector. You have 974 00:35:58.833 --> 00:36:01.083 eight Unicode code points because like 975 00:36:01.083 --> 00:36:03.125 four family members, three joiners, 976 00:36:03.125 --> 00:36:04.291 one selector. And then you have 977 00:36:04.291 --> 00:36:05.333 28 bytes 978 00:36:05.333 --> 00:36:06.000 And then you have 979 00:36:06.000 --> 00:36:09.000 like however many code units and bytes it 980 00:36:09.000 --> 00:36:10.583 takes to encode this freaking mess. 981 00:36:10.583 --> 00:36:12.125 Plus there's variants for all this like 982 00:36:12.125 --> 00:36:14.833 you can have adult man plus adult man 983 00:36:14.833 --> 00:36:18.083 plus female child plus male child or 984 00:36:18.083 --> 00:36:19.375 whatever for all of it. Like you can 985 00:36:19.375 --> 00:36:20.666 customize-- and then I think you can also 986 00:36:20.666 --> 00:36:22.875 add skin color variants and things like 987 00:36:22.875 --> 00:36:23.750 that? You can make the 988 00:36:23.750 --> 00:36:25.791 family emoji a lot of bites. 989 00:36:25.791 --> 00:36:26.500 Yeah. 990 00:36:26.500 --> 00:36:27.041 Yeah. 991 00:36:27.041 --> 00:36:29.750 Yeah, you can. I actually have no idea if 992 00:36:29.750 --> 00:36:32.458 the renderers allow all combinations or 993 00:36:32.458 --> 00:36:34.333 if they just hard-coded a bunch of them 994 00:36:35.125 --> 00:36:39.666 but yeah. So in JavaScript if you have an 995 00:36:39.666 --> 00:36:43.416 array literal and then you do ellipsis of 996 00:36:43.416 --> 00:36:46.750 like that string literal family emoji, you 997 00:36:46.750 --> 00:36:49.375 see the individual code points kind of 998 00:36:49.375 --> 00:36:52.083 you see the male face here with joiner 999 00:36:52.083 --> 00:36:54.083 female face here with joiner, etc, etc. 1000 00:36:54.291 --> 00:36:55.250 We're almost there. 1001 00:36:55.458 --> 00:36:57.291 We almost have something that works 1002 00:36:58.291 --> 00:37:00.166 We have only 10 slides left. 1003 00:37:00.625 --> 00:37:02.958 How do we identify emojis in a string? 1004 00:37:03.166 --> 00:37:05.083 We have to know the boundaries of an 1005 00:37:05.083 --> 00:37:07.125 emoji so that we can tell 1006 00:37:07.125 --> 00:37:10.958 Fusion to use our emoji font. 1007 00:37:10.958 --> 00:37:12.416 How do you do that? 1008 00:37:12.875 --> 00:37:14.875 Uh, since you have Rust code you just do 1009 00:37:14.875 --> 00:37:17.458 not is ASCII, is ASCII 1010 00:37:17.458 --> 00:37:19.416 character or something on each? 1011 00:37:19.708 --> 00:37:22.875 No because emojis are like a very small- 1012 00:37:22.875 --> 00:37:25.625 relatively speaking- subset of all 1013 00:37:25.625 --> 00:37:28.583 non-ASCII things. We still want like 1014 00:37:28.916 --> 00:37:31.583 diacritics, we still want... There's a lot of 1015 00:37:31.583 --> 00:37:33.791 things that are not in the emoji font. 1016 00:37:33.791 --> 00:37:35.083 How do we do this? 1017 00:37:35.083 --> 00:37:35.875 How do we do this? 1018 00:37:35.875 --> 00:37:37.208 First of all, I was pleasantly surprised 1019 00:37:37.208 --> 00:37:40.083 to learn that there's a standard browser 1020 00:37:40.083 --> 00:37:41.625 API. Also, this is not Rust code. 1021 00:37:41.625 --> 00:37:42.583 This is all TypeScript. 1022 00:37:42.583 --> 00:37:43.833 Uh, this is standard 1023 00:37:44.916 --> 00:37:47.875 segmenter API in the intl for 1024 00:37:47.875 --> 00:37:50.500 international namespace thingy. 1025 00:37:50.500 --> 00:37:52.500 You have to give it a locale. So I just 1026 00:37:52.500 --> 00:37:55.583 choose English but you can segment it. 1027 00:37:55.958 --> 00:37:56.500 Wait a minute. 1028 00:37:56.500 --> 00:37:57.458 When do we go from Lua 1029 00:37:57.583 --> 00:37:59.791 When do we go from Lua or Python or Rust 1030 00:37:59.791 --> 00:38:01.458 or C++ to TypeS cript? 1031 00:38:01.666 --> 00:38:03.708 How did-- how do we bring another language 1032 00:38:03.708 --> 00:38:05.250 into this uh, this cluster? 1033 00:38:05.250 --> 00:38:07.625 Well, we need to skip ahead so I can show 1034 00:38:07.625 --> 00:38:10.291 you. But basically the way it works 1035 00:38:10.625 --> 00:38:12.666 Is that on my website-- like I want to make 1036 00:38:12.666 --> 00:38:15.291 a video or rather my editor is now tasked 1037 00:38:15.291 --> 00:38:17.000 with making a video. All they have to do 1038 00:38:17.000 --> 00:38:18.875 is go on my website, run my website 1039 00:38:18.875 --> 00:38:20.958 locally and then there's a little button 1040 00:38:20.958 --> 00:38:24.458 on each code block. And it opens this 1041 00:38:24.458 --> 00:38:27.291 little preview with a transparent image 1042 00:38:27.291 --> 00:38:28.666 of my face for scale 1043 00:38:30.458 --> 00:38:32.375 In that-- this is still in the browser. So 1044 00:38:32.375 --> 00:38:33.958 you click the button and it whoop you 1045 00:38:33.958 --> 00:38:34.791 click the button and it 1046 00:38:34.791 --> 00:38:36.125 opens this preview here. 1047 00:38:36.125 --> 00:38:37.666 Oh, so your website... 1048 00:38:37.666 --> 00:38:39.000 And then this is content editable. 1049 00:38:39.000 --> 00:38:40.041 Yeah, you're in the browser. 1050 00:38:40.041 --> 00:38:41.416 You can still edit the thing-- 1051 00:38:41.416 --> 00:38:43.375 So your website is generating Lua 1052 00:38:43.375 --> 00:38:45.291 the describes text. 1053 00:38:45.291 --> 00:38:46.458 Exactly. 1054 00:38:46.708 --> 00:38:47.958 I love it! 1055 00:38:48.333 --> 00:38:49.500 Yeah, it could be done server 1056 00:38:49.500 --> 00:38:52.708 side. But here you get to remove things 1057 00:38:52.708 --> 00:38:54.500 that are not relevant because actually 1058 00:38:54.500 --> 00:38:56.750 Fusion is really slow at rendering text. 1059 00:38:56.875 --> 00:38:59.208 So you can just remove a paragraph that 1060 00:38:59.208 --> 00:39:01.166 you don't need or like a code block or 1061 00:39:01.166 --> 00:39:04.000 something. You can highlight something 1062 00:39:04.000 --> 00:39:05.875 like select something with a mouse and 1063 00:39:05.875 --> 00:39:07.833 then press space and it's gonna dim 1064 00:39:07.833 --> 00:39:09.375 everything else and just highlight that 1065 00:39:09.375 --> 00:39:11.500 bit. That used to take forever. In Fusion, 1066 00:39:11.500 --> 00:39:14.666 I used to have to like add rectangles for 1067 00:39:14.666 --> 00:39:16.708 masks and stuff like just to highlight 1068 00:39:16.708 --> 00:39:19.625 some bit of code, but now it's really 1069 00:39:19.625 --> 00:39:21.875 just that. And then you you copy it 1070 00:39:21.875 --> 00:39:23.125 without the highlight and with the 1071 00:39:23.125 --> 00:39:24.291 highlight, so you have two different clips 1072 00:39:24.291 --> 00:39:26.333 and then you do a cross fade between 1073 00:39:26.333 --> 00:39:27.750 those two different clips and it works 1074 00:39:28.208 --> 00:39:29.000 So this means your 1075 00:39:29.000 --> 00:39:30.291 website's now a compiler? 1076 00:39:31.083 --> 00:39:33.375 Essentially, yes, I think so? 1077 00:39:35.250 --> 00:39:36.166 Excellent! 1078 00:39:36.166 --> 00:39:37.500 Basically it was really hard to 1079 00:39:37.500 --> 00:39:39.666 like first you segment things into 1080 00:39:40.083 --> 00:39:42.208 grapheme clusters, and then for each 1081 00:39:42.208 --> 00:39:45.416 grapheme cluster you run that-- there's an 1082 00:39:45.416 --> 00:39:48.166 emoji regular expression, small version 1083 00:39:48.166 --> 00:39:50.916 that identifies emojis and then if it's 1084 00:39:50.916 --> 00:39:53.666 an emoji you get the Noto Emoji font. If 1085 00:39:53.666 --> 00:39:55.875 it's something that looks like a nerd 1086 00:39:55.875 --> 00:39:57.833 font thing, you get the nerd font symbols 1087 00:39:57.833 --> 00:40:00.166 font. I discovered that Berkeley Mono is 1088 00:40:00.166 --> 00:40:03.250 missing some Greek symbols. So it's just 1089 00:40:03.250 --> 00:40:05.291 things that-- there's a lot of fallbacks 1090 00:40:05.291 --> 00:40:08.625 everywhere, and it takes a freaking dumb 1091 00:40:08.625 --> 00:40:10.750 font renderer for you to realize that 1092 00:40:10.750 --> 00:40:12.458 you're missing them. 1093 00:40:12.458 --> 00:40:13.625 There's a lot of glue 1094 00:40:13.625 --> 00:40:14.875 There is. It's still kind of a nightmare 1095 00:40:14.875 --> 00:40:18.291 because the size of everything is wrong. 1096 00:40:18.291 --> 00:40:21.083 I have an actual preview here. Uh, which 1097 00:40:21.083 --> 00:40:23.458 I you would need to zoom in a lot to see 1098 00:40:23.458 --> 00:40:25.250 what's going on. Amanda! We'll do it in 1099 00:40:25.250 --> 00:40:27.041 post! But basically the emojis don't have 1100 00:40:27.041 --> 00:40:29.041 the same width as everything else if you 1101 00:40:29.041 --> 00:40:31.708 had an emoji in a table... That's a problem 1102 00:40:31.708 --> 00:40:33.875 for a lot of terminal emulators and code 1103 00:40:33.875 --> 00:40:35.666 editors and whatnot. Yeah, if you have an 1104 00:40:35.666 --> 00:40:37.416 emoji somewhere you can misalign 1105 00:40:37.416 --> 00:40:40.208 everything after it, but at least it works. 1106 00:40:40.208 --> 00:40:42.416 I ran into this not with uh... not 1107 00:40:42.416 --> 00:40:45.250 with emojis but Departure Mono in odd 1108 00:40:45.250 --> 00:40:47.500 font sizes- so like 17 1109 00:40:47.500 --> 00:40:49.208 point font, 19 point font- 1110 00:40:49.208 --> 00:40:51.458 there's a specific-- it's not even an emoji 1111 00:40:51.458 --> 00:40:55.208 It's the Unicode like filled arrow and I 1112 00:40:55.208 --> 00:40:57.208 use a diagramming tool called Monodraw 1113 00:40:57.208 --> 00:40:59.458 which makes diagrams and has arrows and 1114 00:40:59.458 --> 00:41:00.708 lines and stuff like that, but it it 1115 00:41:00.708 --> 00:41:02.583 makes it as text. But when I copied and 1116 00:41:02.583 --> 00:41:05.333 pasted it into my editor, all of the boxes 1117 00:41:05.333 --> 00:41:07.250 that had the arrows left or right in them 1118 00:41:07.250 --> 00:41:09.083 would become unaligned, even though i'm 1119 00:41:09.083 --> 00:41:11.000 using a monospace font in a monospace 1120 00:41:11.000 --> 00:41:13.000 text editor. But I realized that if 1121 00:41:13.000 --> 00:41:16.083 I change my font from 17 to 18 or 1122 00:41:16.083 --> 00:41:17.458 whatever, then all of a sudden they align 1123 00:41:17.458 --> 00:41:20.208 again! So, luckily Departure Mono is an 1124 00:41:20.208 --> 00:41:21.791 open source font, which means I went and 1125 00:41:21.791 --> 00:41:23.625 opened a GitHub issue and i'm like, "I 1126 00:41:23.625 --> 00:41:25.333 don't-- I don't know how fonts work, but 1127 00:41:25.333 --> 00:41:27.458 something terrible is going on..." So it's 1128 00:41:27.458 --> 00:41:29.458 not just emojis that run into this 1129 00:41:29.458 --> 00:41:32.416 problem. A character, even a monospace font 1130 00:41:32.541 --> 00:41:33.875 one character width 1131 00:41:33.875 --> 00:41:35.333 is not one character width. 1132 00:41:35.583 --> 00:41:36.875 I mean maybe... 1133 00:41:36.875 --> 00:41:38.375 For you, it's probably just 1134 00:41:38.375 --> 00:41:41.083 precision and calculation. 1135 00:41:41.083 --> 00:41:41.916 I think it's not right. 1136 00:41:41.916 --> 00:41:42.458 I'll send you a 1137 00:41:42.458 --> 00:41:43.291 link to the issue, and I guess we'll put 1138 00:41:43.291 --> 00:41:43.958 it in the show notes, 1139 00:41:43.958 --> 00:41:45.708 but it's a fun error 1140 00:41:45.833 --> 00:41:46.875 But I'm pretty happy with 1141 00:41:46.875 --> 00:41:48.375 the results of my thing. 1142 00:41:48.375 --> 00:41:50.625 You can see this is a screenshot of 1143 00:41:50.625 --> 00:41:52.583 Fusion. You can see that there's an emoji-- 1144 00:41:52.583 --> 00:41:55.416 The emoji is is rendered as an emoji in 1145 00:41:55.416 --> 00:41:57.250 the text input on the right like you see 1146 00:41:57.250 --> 00:41:59.708 the crab emoji with colors and everything 1147 00:41:59.708 --> 00:42:03.541 but that's because that's a qd text box 1148 00:42:04.083 --> 00:42:06.041 On the left you have the preview from Fusion. 1149 00:42:06.041 --> 00:42:07.833 So the operating systems rendering 1150 00:42:07.833 --> 00:42:09.250 can do it, but Fusion's 1151 00:42:09.250 --> 00:42:10.541 rendering can't do it. 1152 00:42:10.541 --> 00:42:12.750 Yeah, but it's very funny because now I 1153 00:42:12.750 --> 00:42:15.541 understand why we have this futuristic 1154 00:42:15.541 --> 00:42:19.625 Matrix green outline of the text. I put it 1155 00:42:19.625 --> 00:42:21.708 like to the left of the canvas on purpose 1156 00:42:21.708 --> 00:42:23.250 so we could see the outline and see that 1157 00:42:23.250 --> 00:42:24.291 It's actually vector. 1158 00:42:24.291 --> 00:42:25.625 Because it is actually vector. 1159 00:42:25.625 --> 00:42:28.083 This is what happens. It's using FreeTtype 1160 00:42:28.083 --> 00:42:31.666 to get a vector shape out of a font and 1161 00:42:31.666 --> 00:42:34.541 it's very slow, because for every single 1162 00:42:34.541 --> 00:42:36.333 character-- I imagine what the Text+ 1163 00:42:36.333 --> 00:42:40.333 node is doing is not too far from their 1164 00:42:40.333 --> 00:42:43.083 Fuse sample that we saw earlier, which is 1165 00:42:43.083 --> 00:42:46.208 a very basic and bad way to render text. I 1166 00:42:46.208 --> 00:42:47.375 imagine that's why it's slow because it 1167 00:42:47.375 --> 00:42:49.958 shouldn't be that slow to render text 1168 00:42:51.500 --> 00:42:52.416 I guess it's one of those things you 1169 00:42:52.416 --> 00:42:54.083 don't run into that-- there aren't that 1170 00:42:54.083 --> 00:42:57.083 many people putting a lot of text... on 1171 00:42:57.083 --> 00:42:58.208 there. Like, a little text. 1172 00:42:58.208 --> 00:42:58.583 Sure. 1173 00:42:58.583 --> 00:43:01.125 I wonder how bad people's... the credit 1174 00:43:01.125 --> 00:43:03.666 sequences are to render for a lot of 1175 00:43:03.666 --> 00:43:05.208 people. I feel like that's the most text 1176 00:43:05.208 --> 00:43:06.875 heavy part of an entire movie if people 1177 00:43:06.875 --> 00:43:07.916 are using this for movies. 1178 00:43:07.916 --> 00:43:10.333 That's true. I imagine there's specialized 1179 00:43:10.333 --> 00:43:12.166 software for that like they do the render 1180 00:43:12.166 --> 00:43:14.416 elsewhere. Like i've been watching a lot 1181 00:43:14.416 --> 00:43:17.625 of Corridor Crew, the VFX people react to 1182 00:43:17.625 --> 00:43:19.333 VFX in movies and they use a 1183 00:43:19.333 --> 00:43:21.541 patchwork of techniques. It's such a mess. 1184 00:43:21.541 --> 00:43:22.708 It's so practical. 1185 00:43:22.708 --> 00:43:25.708 It's like... I don't know. As a developer, 1186 00:43:25.708 --> 00:43:27.250 It hurts me, but I 1187 00:43:27.250 --> 00:43:29.166 also see how... I don't know. 1188 00:43:29.375 --> 00:43:30.833 It's fun to see them make 1189 00:43:30.833 --> 00:43:32.250 things happen with not much. 1190 00:43:32.583 --> 00:43:34.583 Anyway, it all works. It's already like-- 1191 00:43:34.583 --> 00:43:35.083 Hell yeah. 1192 00:43:35.083 --> 00:43:36.250 my solution for generating 1193 00:43:36.250 --> 00:43:39.041 Fusion node graphs. I've already used in 1194 00:43:39.041 --> 00:43:41.083 the video "Introducing facet: Reflection 1195 00:43:41.083 --> 00:43:44.583 for Rust" and uh, it's great! It's like that 1196 00:43:44.583 --> 00:43:47.416 plus wearing a cap so that I-- shooting 1197 00:43:47.416 --> 00:43:50.333 with green screen again is such a huge 1198 00:43:50.333 --> 00:43:52.666 time save. I like started working with 1199 00:43:52.666 --> 00:43:53.416 Sekun for video 1200 00:43:53.416 --> 00:43:54.708 editing who's credited now 1201 00:43:54.708 --> 00:43:56.750 Wait, is the cap just to keep your hair from 1202 00:43:56.750 --> 00:43:57.125 Yes. 1203 00:43:57.125 --> 00:43:57.791 causing like 1204 00:43:57.791 --> 00:43:59.041 fringing with the green screen? 1205 00:43:59.041 --> 00:43:59.375 Yeah. 1206 00:43:59.375 --> 00:44:01.208 Yeah, yeah, it's not a style choice. 1207 00:44:01.208 --> 00:44:02.208 It's not a statement. 1208 00:44:02.208 --> 00:44:04.375 Ah. Nice. 1209 00:44:04.375 --> 00:44:05.375 It's just for-- 1210 00:44:05.583 --> 00:44:06.583 It's like the video version of 1211 00:44:06.583 --> 00:44:07.958 hair nets for food prep. 1212 00:44:07.958 --> 00:44:08.750 You know what I mean? 1213 00:44:09.083 --> 00:44:11.375 Did you ever watch any Any Austin video? 1214 00:44:11.375 --> 00:44:13.166 The guy who's like 1215 00:44:13.291 --> 00:44:14.083 Austin video? 1216 00:44:14.125 --> 00:44:15.333 Any Austin. 1217 00:44:15.541 --> 00:44:16.375 I have yeah. 1218 00:44:16.375 --> 00:44:16.875 No. 1219 00:44:16.875 --> 00:44:18.583 Yeah, he um, I haven't 1220 00:44:18.583 --> 00:44:19.458 I like that guy. 1221 00:44:19.458 --> 00:44:22.125 He does restaurant reviews of Skyrim, he 1222 00:44:22.125 --> 00:44:23.791 asked like where does the 1223 00:44:23.791 --> 00:44:26.125 water come from in Zelda? 1224 00:44:26.666 --> 00:44:30.625 He's like can a 747 really land in the 1225 00:44:30.625 --> 00:44:32.791 GTA5 airport, and the answer is no. 1226 00:44:32.791 --> 00:44:35.083 Oh, I think I've seen clips from... yeah. 1227 00:44:35.083 --> 00:44:36.208 He's also from Minnesota. 1228 00:44:36.208 --> 00:44:37.291 He is! 1229 00:44:37.291 --> 00:44:39.583 And he's always wearing hair clips. 1230 00:44:39.583 --> 00:44:40.166 It's so great. 1231 00:44:40.166 --> 00:44:41.791 Yeah, hair clips, reppin'. 1232 00:44:42.166 --> 00:44:44.625 I stopped feeling bad about-- my wearing 1233 00:44:44.625 --> 00:44:47.333 a cap when I saw him wearing hair clips. 1234 00:44:47.333 --> 00:44:49.583 It's such a... I don't know. But who 1235 00:44:49.583 --> 00:44:51.166 cares, the content is amazing. 1236 00:44:51.166 --> 00:44:55.208 He's going around Delfino Plaza wondering 1237 00:44:55.208 --> 00:44:56.708 which NPC's have a job and 1238 00:44:56.708 --> 00:44:57.666 which don't. 1239 00:44:57.666 --> 00:44:58.458 Mario Sunshine? 1240 00:44:58.458 --> 00:44:59.125 Yeah. 1241 00:44:59.125 --> 00:44:59.583 Okay. 1242 00:44:59.583 --> 00:45:01.208 Yeah, he's measuring the unemployment 1243 00:45:01.208 --> 00:45:02.208 rate in various video 1244 00:45:02.208 --> 00:45:03.875 games. That's what he does. 1245 00:45:03.875 --> 00:45:05.125 It's amazing. 1246 00:45:05.125 --> 00:45:05.833 Alright, now 1247 00:45:05.833 --> 00:45:06.375 I have a bunch of 1248 00:45:06.375 --> 00:45:07.500 YouTube videos to go watch. 1249 00:45:07.583 --> 00:45:08.375 Yes you do. 1250 00:45:08.541 --> 00:45:09.708 Is there a special key combo 1251 00:45:09.708 --> 00:45:11.416 I can press on your website to see this, 1252 00:45:11.416 --> 00:45:13.250 or is it only on the local render view? 1253 00:45:13.666 --> 00:45:16.333 It's only on the local render view and 1254 00:45:16.333 --> 00:45:18.375 the TypeScript code that does all that is 1255 00:45:18.375 --> 00:45:20.125 not even bundled in the production 1256 00:45:20.125 --> 00:45:22.333 version. So... I'm sorry 1257 00:45:22.333 --> 00:45:24.416 Boo. In case everyone else wanted their 1258 00:45:24.416 --> 00:45:26.416 immediate Fusion node 1259 00:45:26.416 --> 00:45:28.250 text generator application 1260 00:45:28.458 --> 00:45:30.291 It's so custom made... 1261 00:45:30.291 --> 00:45:32.500 I thought it would be much more 1262 00:45:32.500 --> 00:45:35.375 work. I must admit, I vibe coded a bunch of 1263 00:45:35.375 --> 00:45:38.166 this. I had to stop when-- like for the two 1264 00:45:38.166 --> 00:45:39.708 details I mentioned, like for the color 1265 00:45:39.708 --> 00:45:42.083 and the text extense thingy. 1266 00:45:42.083 --> 00:45:45.333 I tried to debate with Claude code about 1267 00:45:45.916 --> 00:45:48.083 Like how Unicode works 1268 00:45:48.083 --> 00:45:48.916 and I was like: okay. 1269 00:45:48.916 --> 00:45:50.416 I have to actually understand 1270 00:45:50.416 --> 00:45:51.666 the code that's going on now. 1271 00:45:51.666 --> 00:45:53.750 You don't have like tree sitter in there 1272 00:45:53.750 --> 00:45:54.625 somewhere already or 1273 00:45:54.625 --> 00:45:55.541 is it already formatted? 1274 00:45:55.916 --> 00:45:57.541 I guess the website's already doing 1275 00:45:57.541 --> 00:46:00.166 syntax highlighting Using some kind of 1276 00:46:00.166 --> 00:46:02.125 Tree-sitter plugin or something? And then... 1277 00:46:02.125 --> 00:46:02.750 Yes. 1278 00:46:02.750 --> 00:46:04.041 You get the output of that and then 1279 00:46:04.041 --> 00:46:05.583 you know the colors and then you-- 1280 00:46:05.583 --> 00:46:06.166 Exactly. 1281 00:46:06.166 --> 00:46:07.291 you generate from that. So it's already 1282 00:46:07.291 --> 00:46:09.750 done by your website. So you just hop on 1283 00:46:09.750 --> 00:46:12.541 that train and just spit out from the 1284 00:46:12.541 --> 00:46:13.875 colored text to generate the 1285 00:46:13.875 --> 00:46:15.333 Lua that's necessary for this 1286 00:46:15.333 --> 00:46:18.958 Yes, so the various code blocks, including... 1287 00:46:18.958 --> 00:46:21.583 highlighting code is not that exciting. 1288 00:46:21.583 --> 00:46:23.125 Everyone's doing it. The thing I'm really 1289 00:46:23.125 --> 00:46:24.708 excited about is that I'm capturing 1290 00:46:24.708 --> 00:46:26.291 terminal sessions with color. 1291 00:46:26.291 --> 00:46:29.125 That's much harder. In both cases they end 1292 00:46:29.125 --> 00:46:32.750 up being a soup of like i tags I think 1293 00:46:32.750 --> 00:46:34.500 with different classes and those 1294 00:46:34.500 --> 00:46:35.750 different classes have different colors 1295 00:46:35.750 --> 00:46:36.708 in light mode and dark 1296 00:46:36.708 --> 00:46:39.458 mode. And so I force dark mode 1297 00:46:39.458 --> 00:46:42.416 I think in that preview thing. And I use 1298 00:46:42.708 --> 00:46:44.125 computed style map, I 1299 00:46:44.125 --> 00:46:47.125 think, to grab the CSS colors. 1300 00:46:47.125 --> 00:46:47.750 Nice! 1301 00:46:47.750 --> 00:46:49.291 I think I had a whole video or 1302 00:46:49.291 --> 00:46:50.208 episode-- at some point, 1303 00:46:50.208 --> 00:46:52.708 I talked about how display p3, blah, 1304 00:46:52.708 --> 00:46:55.125 blah, blah... I went back to sRGB for all 1305 00:46:55.125 --> 00:46:56.958 the colors just because of that 1306 00:46:57.333 --> 00:46:59.791 Yeah, because it works in more places or? 1307 00:46:59.791 --> 00:47:02.750 I moved from Catppucin to Melange and 1308 00:47:02.750 --> 00:47:06.708 from Iosefka to Berkeley Mono so... 1309 00:47:06.791 --> 00:47:08.333 Mmm. For fonts? 1310 00:47:08.333 --> 00:47:10.250 Lots of changes. Yeah. 1311 00:47:10.958 --> 00:47:12.791 I think it was you who for a long time 1312 00:47:12.791 --> 00:47:15.416 your Twitter profile was just, "The font is 1313 00:47:15.583 --> 00:47:17.708 Iosefka" or whatever and I know-- I think 1314 00:47:17.708 --> 00:47:19.250 Eliza started doing the same thing for 1315 00:47:19.250 --> 00:47:21.416 like, "The font is Berkeley Mono." 1316 00:47:21.500 --> 00:47:22.250 Mhm, yep. 1317 00:47:22.250 --> 00:47:23.166 think it was when you were maybe starting 1318 00:47:23.166 --> 00:47:25.041 to make videos and it was just probably 1319 00:47:25.041 --> 00:47:27.750 the most common question everyone had for 1320 00:47:27.750 --> 00:47:29.583 a video was, "What is that font?" 1321 00:47:29.583 --> 00:47:30.208 I still get it. 1322 00:47:30.208 --> 00:47:30.458 Yeah. 1323 00:47:30.458 --> 00:47:33.166 Yeah, you make like, uh, I don't know 30 1324 00:47:33.166 --> 00:47:34.833 minute video about something intense and 1325 00:47:34.833 --> 00:47:36.000 people are like, "What's the font?" 1326 00:47:36.000 --> 00:47:38.250 There's an old drawing-- or, not old, 1327 00:47:38.250 --> 00:47:40.250 it's still current. There's a tool on iPad 1328 00:47:40.250 --> 00:47:42.416 called Concepts which is really nice for 1329 00:47:42.416 --> 00:47:44.375 drawing things with like an Apple pencil 1330 00:47:44.375 --> 00:47:45.625 and things like that if you're drawing 1331 00:47:46.208 --> 00:47:48.166 actual diagrams and stuff, Concepts is 1332 00:47:48.166 --> 00:47:50.250 excellent. But every time I posted 1333 00:47:50.250 --> 00:47:51.708 something where I was excited, I just 1334 00:47:51.708 --> 00:47:53.000 figured out how something works and I 1335 00:47:53.000 --> 00:47:54.541 drew a diagram of it so I could remember 1336 00:47:54.541 --> 00:47:56.166 how it's supposed to work- the only 1337 00:47:56.166 --> 00:47:58.125 engagement I ever got on that was, "What is 1338 00:47:58.125 --> 00:47:59.166 that diagramming tool?" 1339 00:47:59.416 --> 00:48:01.500 And-- so I was just like, I need to just put 1340 00:48:01.500 --> 00:48:04.458 "It's Concepts," in every-- like no engagement 1341 00:48:04.458 --> 00:48:06.208 with the actual thing that I figured out 1342 00:48:06.208 --> 00:48:08.041 or I was excited about, it's just, "What is 1343 00:48:08.041 --> 00:48:09.166 that diagramming tool?" 1344 00:48:09.416 --> 00:48:10.583 It's really hard. 1345 00:48:10.583 --> 00:48:12.875 And so I feel deeply for the-- like you 1346 00:48:12.875 --> 00:48:14.208 spent all this time on it and it's like, "Oh, 1347 00:48:14.208 --> 00:48:16.000 what's the pretty font?" Yeah. 1348 00:48:16.000 --> 00:48:17.625 I occasionally, very occasionally... 1349 00:48:17.625 --> 00:48:18.916 it's not like everyone 1350 00:48:18.916 --> 00:48:20.416 asked me, "How do you be famous?" 1351 00:48:20.416 --> 00:48:22.333 No, it's like- occasionally people ask me 1352 00:48:22.333 --> 00:48:24.958 about making content and videos like that. 1353 00:48:24.958 --> 00:48:26.708 And I have no idea what to tell them 1354 00:48:26.708 --> 00:48:29.375 because even like at the scale that I'm 1355 00:48:29.375 --> 00:48:31.000 at, I'm really happy. It took a bunch of 1356 00:48:31.000 --> 00:48:32.666 work to getting to 50k subscribers. 1357 00:48:32.666 --> 00:48:34.583 I'm excited about color I figured about a 1358 00:48:34.583 --> 00:48:35.416 bunch of stuff about it. 1359 00:48:35.416 --> 00:48:37.083 I already said it's a complete flop. YouTube 1360 00:48:37.083 --> 00:48:39.750 algorithm is, uh, is harsh. Sometimes it just 1361 00:48:39.750 --> 00:48:42.250 doesn't want to show it to people. It 1362 00:48:42.250 --> 00:48:43.708 shows it to people a little bit, and if 1363 00:48:43.708 --> 00:48:46.041 it's not an instant hit, if everybody's 1364 00:48:46.041 --> 00:48:47.708 not immediately into it, 1365 00:48:47.708 --> 00:48:49.375 it's like, "Nah, it's not working. 1366 00:48:49.375 --> 00:48:51.041 Sorry." You get it 1367 00:48:51.416 --> 00:48:53.375 Yeah. The other thing that I see people do 1368 00:48:53.375 --> 00:48:55.166 all the time is changing the title like 1369 00:48:55.166 --> 00:48:57.625 seven times in the first like week that 1370 00:48:57.625 --> 00:48:59.208 it's out, and I'm sure that's just like 1371 00:48:59.416 --> 00:49:01.583 engagement hacking of seeing who clicks 1372 00:49:01.583 --> 00:49:03.375 on it immediately and things like that or 1373 00:49:03.375 --> 00:49:05.458 they change the thumbnail and whatever. We 1374 00:49:05.458 --> 00:49:06.666 just kind of publish it and we go, 1375 00:49:06.666 --> 00:49:08.250 "Oh, well, it'll do as it does." 1376 00:49:08.250 --> 00:49:10.000 Yeah... Well, that's all 1377 00:49:10.000 --> 00:49:11.000 I have for you today. 1378 00:49:11.000 --> 00:49:12.541 I'm glad you got text pretty. At some 1379 00:49:12.541 --> 00:49:13.666 point, your website is just going to 1380 00:49:13.666 --> 00:49:16.000 become the ultimate YouTube authoring 1381 00:49:16.000 --> 00:49:17.708 tool. Like it's just going to generate the 1382 00:49:17.708 --> 00:49:18.833 project for you and do 1383 00:49:18.833 --> 00:49:20.291 the recording at some point. 1384 00:49:20.291 --> 00:49:22.625 I've kind of given up the idea that it's 1385 00:49:22.625 --> 00:49:24.416 going to be useful for someone other than 1386 00:49:24.416 --> 00:49:26.208 me. At this point. And 1387 00:49:26.208 --> 00:49:27.875 it's been liberating. 1388 00:49:27.875 --> 00:49:28.625 Yeah! 1389 00:49:28.625 --> 00:49:29.916 But like I don't expect anyone to 1390 00:49:29.916 --> 00:49:32.041 use the Fusion thing. If anything, I'd like 1391 00:49:32.041 --> 00:49:34.125 to move to something else for motion 1392 00:49:34.125 --> 00:49:35.958 design, but I don't know. I'm just so 1393 00:49:35.958 --> 00:49:37.333 embedded into Resolve right now. 1394 00:49:37.333 --> 00:49:38.791 Anyway, that's all! 1395 00:49:38.916 --> 00:49:39.666 I love it. 1396 00:49:47.916 --> 00:49:49.416 This episode is sponsored by Depot, 1397 00:49:49.583 --> 00:49:50.375 the build acceleration 1398 00:49:50.375 --> 00:49:51.666 platform that's on a mission 1399 00:49:51.666 --> 00:49:53.291 to make all builds near instant. 1400 00:49:53.666 --> 00:49:55.000 If you're tired of watching your builds 1401 00:49:55.000 --> 00:49:56.208 and GitHub actions crawl 1402 00:49:56.208 --> 00:49:57.500 like the modern day equivalent 1403 00:49:57.500 --> 00:49:59.500 of paint drying, give Depot's GitHub 1404 00:49:59.500 --> 00:50:00.541 Actions runners a try. 1405 00:50:01.000 --> 00:50:02.416 They're up to 10 times faster with 1406 00:50:02.416 --> 00:50:03.666 unlimited concurrency, 1407 00:50:03.708 --> 00:50:05.041 faster caching, support for 1408 00:50:05.041 --> 00:50:06.541 Linux, macOS and Windows, 1409 00:50:06.833 --> 00:50:07.750 and they plug right into 1410 00:50:07.750 --> 00:50:08.833 other Depot optimizations 1411 00:50:09.083 --> 00:50:10.791 like accelerated container image builds 1412 00:50:10.916 --> 00:50:11.875 and remote caching for 1413 00:50:11.875 --> 00:50:14.083 Bazel, Turborepo, Gradle and more. 1414 00:50:14.500 --> 00:50:16.000 Depot is built by developers who are 1415 00:50:16.000 --> 00:50:17.000 tired of wasting time 1416 00:50:17.000 --> 00:50:18.500 waiting on builds instead of shipping. 1417 00:50:18.791 --> 00:50:19.583 It's made for teams 1418 00:50:19.583 --> 00:50:20.583 that wanna move faster 1419 00:50:20.833 --> 00:50:21.541 and stay focused on 1420 00:50:21.541 --> 00:50:22.416 what actually matters. 1421 00:50:22.916 --> 00:50:23.583 That's why companies 1422 00:50:23.583 --> 00:50:25.041 like PostHog use Depot 1423 00:50:25.041 --> 00:50:26.916 to cut build times from over three hours 1424 00:50:26.916 --> 00:50:28.041 to just three minutes, 1425 00:50:28.291 --> 00:50:29.375 saving tens of thousands 1426 00:50:29.375 --> 00:50:30.708 of build hours every week. 1427 00:50:31.000 --> 00:50:31.958 Start your free seven 1428 00:50:31.958 --> 00:50:33.333 day trial at depot.dev 1429 00:50:33.333 --> 00:50:34.541 and let them know we sent you.