Client-Side Image Resizing in WebAssembly: A Technical Guide

[00:00:00]Yo yo yo, what's up? What's up? What's up everybody? Welcome back. Uh today I want to work on uh client side image down sampling in Wim in the browser. Uh context here is uh I'm working on this like little web app whose goal is to like track uh food that I have, right?

[00:00:22]And one of the things that we might do in here is we might have uh multiple types of bread, right? And so maybe um I'll have like a loaf of the Wonderbread from the store and a loaf of some other bread also from the store. And you know, I don't really know what their names are. I don't really want to think about it. Um but I I can identify by like picture pretty easily. It turns out that we look at a lot of pictures during the day. Probably like millions of them if you like to have some frame rate in your eye. I don't know, man. Um so I think that I want like picture of thing, right? But my phone, if I were to like just like take a photo on my phone and upload it, it would be like mega big.

[00:01:00]Way too big. I only need like a [ __ ] like 600 by 600 image. Probably even less, right? I just need like Which one is that? Is it blue? I like blue. Well, blue bread would be moldy as [ __ ] but maybe the packaging is blue or something, right? And I just want like picture see picture. Um, this is kind of like a stepping stone into some other stuff, too. Like what I also want to do is like client side barcode decoding.

[00:01:21]Um, so this is kind of like a nice little excuse to get uh an image into Womland and play around with it. Um, but yeah, so big picture, way too big.

[00:01:31]Before we upload to the server, I want to like make it small. Um, I will note that, you know, if you Google how to resize an image in JavaScript, people will tell you to use a canvas and it's like that's reasonable, right? The canvas will like, you know, the browser written in C++ will like do some efficient downsampling. Um, but I don't want to do that, okay? You can't make me. this is my stream. I can make whatever bad decisions I want. Um, and so that's the plan. Try to get some sort of image downsampling. So, plan of action is, you know, we need to like get little a little Wom hello world up and running. We need to like get the image data and get it into Womland, implement like a really stupid simple uh resize, and then we're done. So, let's just kind of like get moving and grooving and see what happens. Um, so I guess let's get a second little window open for uh a little test page. So let's do a little uh let's do a little copy paste of something into test HTML, you know, do a little test HTML read me.

[00:02:43]Thanks for tier one. Much appreciated.

[00:02:44]And uh I guess we're going to be like, "Hello world." And let's go there and see what happens. Uh okay. Boom. Hello world. Hello. Um so I guess we need to get Wom in here somewhere, right? So presumably we need some JavaScript.

[00:03:08]Uh test js probably deferred.

[00:03:16]And then we need to edit that thing. Uh console log hello world. Cool. And so now if we go in here and we refresh, hopefully we see hello world. Hype.

[00:03:30]We're running some JavaScript. Hello.

[00:03:32]Hello. Hello.

[00:03:35]Is that like Australian accent? Hello.

[00:03:37]kind of um okay so we need a WOM file to load from JavaScript land presumably uh which you can do in Zigg I just don't really remember how but it's okay we'll figure it out uh let's do wom test zigg here and we can just do like pub function export function probably uh and let's just do like a little quick little adder so we'll take in like two ins uh a i32 b i32 and he's going to return i32 and let's uh do a little return a plus b. That's a simple little hello world. Uh we need to compile this thing.

[00:04:20]So presumably we need some sort of like wom target to compile for which I think it's like parse target query or what is like what is a target in this world? I remember there's a way to like create one of these things. Resolved target from a query. Um, you know what? I'm going to cheat and I'm going to look at what we did for the ball machine.

[00:04:52]Uh, here we did. Oh, this is uh deprecated. Cool. Uh, use stood target query. Okay. Uh, but we did something that's like similar to this.

[00:05:04]Uh so can we do something like stood target query um parse?

[00:05:17]Yeah. Yeah. Yeah. Yeah. Yeah. Yeah.

[00:05:20]Uh no.

[00:05:23]Okay. Zigg Wom.

[00:05:26]Let's uh just see what someone else has done.

[00:05:33]Uh because I don't want to do this. Zigg wam build zig. Somebody somebody must have done this recently. What year is this? Last year feels like maybe out of date, but we'll see.

[00:05:48]Um here. Okay, this is what I want. Huh?

[00:05:53]This is what I want. Wom target huge for us. And then I remember that there's some sort of like options you have to set on this [ __ ] R dynamic sounds familiar and maybe entry disabled but we'll see.

[00:06:07]Uh, wom.exe is in uh create uh hello, I can't remember. Add executable.

[00:06:16]Okay. And we're going to be like b path uh source wom test. Nice. Uh target is equal to wom target hype. And optimize equal to this whatever our optimize level is.

[00:06:36]Uh, did you try Zig's self back end? I'm on I'm on the latest release, so I'll try it when it comes out.

[00:06:44]I'm kind of okay with that, you know.

[00:06:48]I'm okay with it. Okay.

[00:06:52]Uh, so if I build this, let's just see what happens. Uh, root source file, not path. My bad. My bad.

[00:07:05]I can do master branch if I want. I just don't. It's not worth the effort for me.

[00:07:10]I'd rather just be on Liz release. Uh, okay. So, we need to set that there's a entry, no entry, and then I think you need to specify R dynamic to get it to actually export the symbols if they're unused.

[00:07:24]I think I don't really remember what R dynamic does, but I seem to remember this being like a big deal.

[00:07:30]Um, and then there's like tools. Wom like dump wom to watt I think is the tool to like see what the [ __ ] it made.

[00:07:42]I think that sounds familiar. Sounds familiar.

[00:07:47]So, we should be able to see in here uh Wom to watt on zig out bin wom test.

[00:07:56]So, that is a really good sign. There's like stuff in here. lots of stuff. And specifically, there's an exported function add, which is huge for us, which looks, you know, there's a lot of extra garbage in here, huh? But it's fine. It's fine. Uh, okay. How big is that thing?

[00:08:19]700 678K. But I assume that if we did like uh if we set this to like release small, I bet you it's a lot more sane, right? I bet you that a lot of this is like lack of stripping and all that [ __ ] So we could probably tune our build options to get a little better.

[00:08:39]But yeah, if we look at the wom to what of this guy now look at that. That's way more sane, right? We have a function add whose function zero. And it's literally like get the first parameter, get the zero parameter, and then add.

[00:08:55]Uh, so yeah, I'm going to go back to debug mode though because I don't give a [ __ ] Um, but we could do it that way if we wanted. Uh, y back was your answer, XD. Yeah, I mean it was just that like I don't I don't run master and I could, but I don't. I'm like okay with being a little behind, you know. I'm okay with it. Uh, okay.

[00:09:19]So, can we instantiate this web assembly module in our test js?

[00:09:25]Um, so we probably want to do like uh async function in it so that we can do some async stuff. We do window onload is equal to init. And here we go.

[00:09:38]Uh, I missed like one stream and you're already adding Wows to the food website.

[00:09:42]There there was kind of like a zero to 100. There was no leadup, so don't worry about it.

[00:09:49]Um, okay. Web Assembly instantiate streaming. This sounds right. Uh, how the [ __ ] does this work?

[00:09:58]We should look it up. Web Assembly MDM.

[00:10:02]Let's like look for like a quick little example.

[00:10:06]um guides.

[00:10:08]Uh loading and running Web Assembly using the Web Assembly JavaScript API. This sounds like what I want. Uh Web Assembly and Statate streaming with the result of fetch with an import object. Right? So import object is kind of like all the [ __ ] you want to inject into your web assembly module if I remember correctly.

[00:10:32]Um, but I think right now we don't need anything, so we won't.

[00:10:36]So, this is going to be like, uh, I guess our server needs to put this somewhere, huh?

[00:10:48]Yeah. So, we kind of need this to go. We need like we kind of need to like just make a custom endpoint for it. That's fine.

[00:10:56]That's fine.

[00:10:59]um with no import object and this guy is like uh we have our Wom equals this and then we want to call into this guy. So we have like instance exports and the export function is add. So we want to do like add one and two and console log that thing and we're hoping to get three out.

[00:11:23]Uh so before we do that we need to you know quickly just add a little getter for this thing. So what do we call it? We called it uh wom test wom. And if we have a get of test wom it's like a file system of uh zig out bin test wazom wom something right something like that okay so localhost 9990 test wom uh he doesn't like Um, weird.

[00:12:16]I would think that works. I would think.

[00:12:22]Okay. So, what's he complaining about for real? He's saying file not found.

[00:12:28]Um, is it because the file system stuff always prefixes it with like res? It might. It might uh Let's see. What are we doing here? Yeah, cuz we're like doing relative to the resource there. Fine.

[00:12:52]We'll do it like this.

[00:12:56]just copy paste whatever the [ __ ] we were doing there and use uh stood fs current working directory and then not think about it because this is not what we're trying to accomplish today. This is just a hack.

[00:13:12]We're [ __ ] hacking.

[00:13:16]Okay, let's try that.

[00:13:19]Come on. Just give me the [ __ ] [ __ ] wom, please. File not found. Are you kidding me?

[00:13:27]Why?

[00:13:31]Um, can we log this thing stood debug print wom time with this?

[00:13:43]Please God, this is not the interesting part of today. Just get it out of my way.

[00:13:50]Uh, so he does say wom with zig out bin test wom. Is that the wrong file?

[00:14:00]Uh, yeah, that would do it, huh? Wasn't test.

[00:14:05]Fine.

[00:14:07]Fine. If you want to be like that, if you want to be like that, I'll [ __ ] put the right file in. Um, okay. So, now that does exist, but he's still [ __ ] falling over.

[00:14:22]Did I do something wrong here?

[00:14:25]Current working directory read file.

[00:14:29]Uh yeah.

[00:14:34]Yeah, there's no like there's no like URL parsing to do. I see. We were doing some like intentional stripping stuff.

[00:14:40]Okay, cool. So, we can get the file now.

[00:14:42]We get the file now, which is hype. So, now if we go back to our little JavaScript land, test.js, notjson. Thank you. Uh, this guy should do something.

[00:14:55]Uh, okay. Uh, response has unsupported mime type expected application wisom.

[00:15:01]Fine.

[00:15:03]Are you serious? We need the right [ __ ] mime type.

[00:15:09]Uh, fine.

[00:15:12]Fine.

[00:15:14]If you want to be like that, we'll [ __ ] do it. We'll [ __ ] do it if that's what you need from me. There we go. Three. So huge.

[00:15:30]So huge.

[00:15:34]So we got number three right here. So what are we going to do now? We need to I guess uh get some image data into this thing, right? So WAM memory model is kind of there's like two models. One is that like the browser in JavaScript you like allocate a hunk of memory and you feed that to the executable. The other option is that like Zigg will generate some web assembly instructions that will ask the browser to give it some memory.

[00:16:06]And that's the world that like the default Zigg executable lives in. Um there's like this like instruction that you can emit that's like hey I need some memory. And then like the allocators kind of like call that instruction if they need to. Um and then that is exposed as an export.

[00:16:21]Um so if we are trying to like feed data into this thing, we need to like look at that chunk of memory and put like somehow parse the uploaded file and then put it in there. So let's do that. Um, I think what makes sense is to maybe like lazily load this thing. It really depends on like what the file API is. I guess what we can do is what we can do an async function upload file and this is going to take in like data probably as well as a I think it's like this as well as a size.

[00:17:07]Okay.

[00:17:11]And what wait why is it mad?

[00:17:16]Is this not the syntax for a pointer? Am I [ __ ] high?

[00:17:27]I thought that this was the syntax for multi-element pointer. Am I Oh, I'm in [ __ ] JavaScript. I'm a dumbass, dude.

[00:17:33]My brain just was not parsing.

[00:17:37]Okay. So, let's do something that's like a set file content and we'll take it a data and a size and we will return nothing. And then what we'll do is we'll probably have like some sort of like global buffer that we use um that we'll just replace the contents of. Um so can we do something like this global like content buff is you know u8 slice u8 yeah u8 slice of this by default right and what we'll do is we'll say like if content buff len is less than size uh we can free it and replace it with a new one.

[00:18:37]Yeah. Yeah. Alec. Alec. Uh size.

[00:18:45]Okay. And then can we just do like Alec is uh we need the stand library.

[00:18:56]Uh so we stood heap wom allocator I guess on both of these guys.

[00:19:08]And if this fails we just freak the [ __ ] out I guess.

[00:19:15]And then content buff, we equal this.

[00:19:17]Okay.

[00:19:18]Then we just do like a mem copy from data zero to size into the content buff, right?

[00:19:28]Uh this is actually probably the wrong way to do this. This is wrong because this means that like this pointer needs to exist in web assembly memory in which case the data is already in web assembly memory. So what the [ __ ] are we doing?

[00:19:40]Right? This should be uh set content size like this.

[00:19:51]And then we should copy the data in from JavaScript land. That makes more sense.

[00:19:56]So what we what we should do is we should have like a uh get content buff and this is going to return a pointer and this is just going to return content buff pointer. So I think the workflow here is we ensure that there's enough enough room for the file that we want to upload. Then we put it in here and then let's do like uh you know I don't know I guess having some sort of like print mechanism is ideal so that we can like print something about it. So I think to do that you do like export function or um extern function print and this thing is going to take a like data and len and we need to set up some JavaScript to print this stuff for us right so uh let's do a little uh this is going to be like let me think for a I want a function that will like format data and try to print it like that. So I think that we can just do something a little simple like have um print internal or something whatever that's going to take in like a format uh and args, right? And this guy's going to be like uh I'm going to have like a buffer here.

[00:21:36]Just like a 4K buffer.

[00:21:39]And we're going to do a buff print into this thing. So we're going to be like get into that bad boy with these args.

[00:21:47]Uh and we'll say like slice is this. And if this fails, uh we'll just return like the whole buffer.

[00:21:57]Um, and then we'll try to print this thing.

[00:22:02]Okay, cool. So, can we do like print internal just like the result of the ad and see what we get?

[00:22:16]That'd be kind of sick.

[00:22:18]Um, he's mad because this probably needs to try and then uh Oh, no. It's a catch here. That's why. catch buff.

[00:22:28]Okay, then this thing actually should never error. So we go like this and then we should be chilling.

[00:22:36]Okay, so that compiles supposedly if we did everything right. And when we refresh this thing, he says uh import object does not have m. So we need to in JavaScript like inject a print function.

[00:22:48]Uh, so we go.

[00:22:52]Oh my god, I'm gonna freak out about loading test JSON over and over again.

[00:22:56]So here we need like env. And I guess we'll just like kind of continue down this thing until it stops complaining at us.

[00:23:08]Uh, so print is not a function. So here I assume that we do like print, right? and then takes in a, you know, pointer and a len, right? So, we're gonna have to do something with this console log pointer len. Let's just see like what comes out of that thing. Okay, so that's good. So, we got a pointer into web assembly memory and a length of a string. Um, and so we just need to do something with that. So, I think what I usually do here is I make like a global WM object.

[00:23:45]uh that's null by default.

[00:23:49]Then here we assign it like this. And then when we call print we can like look at that thing. So we can look at uh this thing is uh web assembly or something. Or maybe it'll figure it out for us. Let's see. No.

[00:24:10]Uh I guess we can do like if wom object equals null return just to get like the the language server understanding what's going on. If I just do this do I get instance what is this thing? What does this return?

[00:24:34]Web assembly instantiated source.

[00:24:43]Yeah, here we go. So, we have this exports of memory if I remember correctly. If I remember correctly.

[00:24:52]Yeah. So, we have a memory chunk and so there's a way for us to like extract information from that memory. I just don't remember what it is. Maybe a buffer.

[00:25:00]That sounds familiar. Yeah. Okay. So, we can like look at this buffer and find the pointer in it. So, I think it's like UTFA.

[00:25:11]No h array from this I think.

[00:25:24]And then we should be able to like slice this thing from pointer to pointer plus line or something.

[00:25:32]Uh returns a section of the array. So from the start to the end. Yes. And so then we should be able to do something like make a text decoder and turn this into something.

[00:25:51]What does this take in input? So, like this. I think I'm not 100% sure on this.

[00:25:58]I might be like doing some unnecessary copies and stuff, but I think this is right.

[00:26:06]Let's just see what that does. Oh, let's [ __ ] go, dude. We guessed right. I'm We might be doing something like blatantly inefficient there. There might be some like copies there that I'm not seeing. Um, but at the very least, we have the ability to print from Zigglland now, which is hype. I'm not really too worried about if that's like super wrong right now.

[00:26:26]Um so what I would love to do is I would love to um print like the content buffer uh like like maybe do something like uh buff ready or something. Right. So, we're going to like set the content size from JavaScript land. We're going to put the content in there, and then we're going to be like, uh, buff ready. Like, do your thing.

[00:27:01]Do your [ __ ] thing, right? And so, here, let's just for now, um, print this thing.

[00:27:10]So, can we just like print internal some string, which is the content at content buff?

[00:27:21]You know what I mean? That seems kind of reasonable, which means that we can like kind of test the interfacing with memory. Um, okay. So, we're going to be like womob instance exports set content size to uh 50.

[00:27:41]Okay.

[00:27:42]Then we're going to get the content buff.

[00:27:49]So we go, "Hey, will you have some memory for me? Please get it."

[00:27:59]And then is this happy hour the full focus of the day? Uh, probably full focus. This seems very YouTubable.

[00:28:07]Uh, but I think that we might do we might we might transition into like a post this happy hour depending on how quick this goes. We'll see.

[00:28:15]slash how I'm feeling.

[00:28:18]Um, okay. So then we need to like put stuff in here. So this is where we have to like actually confirm what this like u array does, right? Can we just like construct a array and put stuff in there? You know what I mean?

[00:28:35]Uh so if we use the buffer constructor dude hello cyped array that's I don't think what I want because that would be this one right from an array buffer. Like where does it tell me what it does? Am I [ __ ] high?

[00:29:08]Like, okay, buffers. There are array buffers and shared array buffers. Both are level representations of memory span. They have array in their names, but they don't have much to do with arrays. Cool.

[00:29:17]That's sick. Love that. You cannot read or write them directly. Instead, buffers are generic objects contain raw data.

[00:29:23]Uh, so then, oh, copy is slices. Copy.

[00:29:27]That's not good.

[00:29:30]Views.

[00:29:32]Um, so typed array views in it array is a view into a thing. Okay. Uh, subarray creates a new typed array that references the same buffer. So we probably should have done like here this slice should have been like subarray probably.

[00:29:53]Probably. So let's make sure that does the same thing cuz that's kind of more analogous to what we're going to be wanting to do later. So here we're going to be like um this is a content buff pointer and we're going to want like the content buff as a unit and data array, right? So we're going to be like uh content buff is going to be um we're going to get the memory out of this guy.

[00:30:22]Memory buffer and we're going to like It's probably like this, right? And then we have like content buff is wom memory sub array from content buff pointer to content buff pointer plus the length.

[00:30:43]Right? So here we have len is 50 and we said that here and then can we put like can we do like uh like a text in code maybe?

[00:30:57]So let's like take some can we do like encoder encode into hello world into content buff then call wom ob instance exports buff ready I think that's what we called it uh subarray is not a function Uh yeah, true.

[00:31:31]Can I just like directly construct this unit data array using some slice of the buffer buffer bite offset length? Yeah, surely right. So surely we should be able to go like uh content buff pointer len like this just directly.

[00:31:52]Okay. So that's good. That's good. We do see the hello world make it in and out of Womland. So that's super big. Super big for us. These are probably all of the like zig standard like 0xa default allocation.

[00:32:06]Uh but this is looking pretty good. Uh yeah. So this we can actually do here as well. Pointer pointer plus len. Then we can just use array directly here.

[00:32:21]Out of bounds you 8 array. Whoa.

[00:32:25]Oh, because this should be uh len here, not pointer plus len. Nice. Okay, cool.

[00:32:30]I think we understand. So now the next thing is to uh get like image data into this thing.

[00:32:38]So we'll call that last section uh interface with wom memory.

[00:32:44]Uh and then we'll do uh what do we call it? Get image data.

[00:32:51]So, I don't really know how the [ __ ] this works.

[00:32:54]Uh, I think you do like file upload input hint like a like an input for file and then just like upload the file data directly. I think that's usually how like image upload works.

[00:33:06]Um, so that means that like we have two options here. One is trying to use browser APIs to like extract the pixel buffer. What you would do there probably is use like an HTML canvas um load it with image data and then read it back. But if we're going to do that, like we're trying to dodge the canvas.

[00:33:28]We already we're intentionally not using the canvas. So probably the other option here is like giving it PNG data and then asking STB image or something to decode it. As long as we can get STB image into Web Assembly land, that should be fine.

[00:33:45]So that's probably the first thing to try there. You know, SV image is like just like a raw C implementation of uh reading images.

[00:33:56]Uh that's like a nice little you can just like copy paste it into your project, which we love around here sometimes. And then I assume that we can I assume we can override things to the point where we don't need like lib C or anything.

[00:34:10]I'm pretty sure that's possible, but we should we should double check that.

[00:34:16]Um, okay. So, let's do uh how do you we do this in zigland?

[00:34:26]Usually it's like we do like a add c source file and his file is bpath uh stbb image C.

[00:34:43]We usually do this because um it's the Zigg C parser is like in my experience in the past hasn't been good enough to like compile full-on STB image.

[00:34:54]Uh so let's do this. And then we do STB image C. And this guy just includes STB image.h. Can you do like this?

[00:35:11]Uh I think this is fine. And then we we define uh hold on it tells you how define the implementation here.

[00:35:23]Okay.

[00:35:25]And then we have to do like wom exe add include path to uh be path root.

[00:35:33]And then we should be able to in our wom test do like uh you know stb image is a c import image.h okay so right now what happens I don't know.

[00:36:02]Okay. So, he's mad that there's STDI on here. That makes a lot of sense.

[00:36:11]So, let's try to like get this thing out of here. So, can we do like Wom exe?

[00:36:20]I think it's here.

[00:36:26]Um, we have to be careful about like matching the includes here. Oh, but maybe you only need this on the implementation. Some of these things you probably do. So, let's start there. Um, STBA image C. So we'll define SVI. No studio.

[00:36:55]Try building again. Stood lib not found.

[00:37:00]Looks like we can't get away with no standard library.

[00:37:07]Interesting.

[00:37:09]If we just comment this out. Let's just see how far that goes.

[00:37:14]This one maybe.

[00:37:20]I assume this will cause us problems, but yeah. Okay. Um, maybe this is not as simple as I would have liked.

[00:37:32]I assume that I can't just do this, right? Wasn't easy link lip. I assume that that'll fall over, but maybe not.

[00:37:37]If they're only using header stuff, then maybe it's okay.

[00:37:45]Uh stood live. Yeah, not so lucky.

[00:37:51]So how um is this kind of just unconditional?

[00:38:03]This looks like Okay, I'm down to try just commenting this out again and see where it goes.

[00:38:16]string.h as well. Yeah. So unlucky.

[00:38:22]Okay. Uh what do I want to do here? I could have sworn that this was like possible.

[00:38:28]But if it's not easy, um then we're going to have to try something else. We can we can I'm like almost certain this is possible, right? Because the vast majority of the stuff it needs should only be like headers, right? So, we must be able to like tell it that that's okay. I just don't know how to do that right now. Um because then you could also like like implement when it's like I'm trying to link me copy. We could just like write our own version of me copy and that'd be fine.

[00:39:09]Wait, have we done this before? This sounds really familiar. I think we did this in ball machine.

[00:39:17]Did we find dot dash name SCB image?

[00:39:23]No.

[00:39:25]Okay, maybe not then. Maybe not. So, okay, what we'll do for now is we'll cheat.

[00:39:32]We'll use the canvas API to get the image, but we'll do the downsampling in WOM. And then later, um, I'm going to loop back to try to figure this part out just because this isn't really like the like the interesting part necessarily.

[00:39:43]And I don't really want to fight with build systems right now.

[00:39:47]Um, but I do believe it's possible. I will I will make that clear.

[00:39:55]Um, okay. Are we back?

[00:40:03]home.

[00:40:06]All right.

[00:40:08]Uh we're still back. Uh so let's use canvas API to decode an image.

[00:40:16]Uh get image data. I think it's possible.

[00:40:21]Get image data uh returns an image data object which I assume that you can get a U and 8 array out of.

[00:40:33]Yeah.

[00:40:35]And then you should just be able to like copy this thing with that.

[00:40:39]So, can we do something like uh let's just do this canvas.

[00:40:54]Let's uh just paint a red blob on there.

[00:41:03]like this.

[00:41:08]Yeah. So, we'll be like in here.

[00:41:15]We'll do HTML canvas element. Boom.

[00:41:21]Uh document get element by ID canvas.

[00:41:26]And we'll just kind of paint something red there and see what happens.

[00:41:31]canvas uh get context 2D rendering context, right? Something like this.

[00:41:38]And then it's like ctx fill rect from 00 to 800 by 800. And we just want to fill this thing with uh fill style. I think like we're like this. I think this will make it red if I remember correctly.

[00:41:56]Uh yeah, hype. So we got a big red box.

[00:42:00]And we can hopefully feed this somehow.

[00:42:05]So they're claiming we can do this.

[00:42:10]Uh get image data mtn. What's the API here?

[00:42:20]Um top left. Yep. width and color space gives us sRGB. Uh this returns image data which we can look at. So can we do like image data dot data and can we like can we copy from like how does that work? 8 array copy JavaScript Um like co like me copy like am I [ __ ] stupid for this is the same [ __ ] page. So I want like copy into or something. Copy into 8 array. Copy into existing inate array.

[00:43:18]That must exist. I just don't know what the [ __ ] method is.

[00:43:22]Copy, dude. Surely, right?

[00:43:32]Um, dude, I mean, copy within is close probably, but this is in the same typed array. I want to go from like somewhere else.

[00:43:53]Is this really not [ __ ] possible?

[00:43:57]Yes. Well, please don't call me Shirley.

[00:43:59]It's a classic.

[00:44:04]Uh set set.

[00:44:08]Okay, let's look at that. Uh, u 8 array set MDN.

[00:44:23]Dude, what the [ __ ] is this? Like, does it inherit from something?

[00:44:33]Maybe it's in here.

[00:44:37]Looks like it's sorted by name. Set.

[00:44:40]Aha. Here we go. Instances stores multiple values in the typed array reading input from specified. Yep, nice.

[00:44:48]That's exactly what I want. So, we want to be able to do like uh we want to set the length of the stuff in web assembly land to image data data length bite length probably, right?

[00:45:05]Then I guess we can actually do it like this.

[00:45:12]Okay. And then instead of doing text encoding, we do like content buff set from image data data, right? Just [ __ ] like rip that [ __ ] Kind of down to see what happens.

[00:45:30]So, we do get a bunch of garbage. Um, but it might be interesting to see what that garbage looks like, right? So we probably have like here can we print out this thing as numbers.

[00:45:49]Okay, that's looking promising, right?

[00:45:50]FF00 FF FF 00 FF. So this is RGBA RGBA RGBA probably, right? So if we change this to uh red and blue makes or red and green makes yellow um we should figure out bite order, right? So if we go from wherever the [ __ ] we were filling this in with red and change this to yellow, we should see the first two.

[00:46:18]Yeah. So we're seeing RGBA.

[00:46:22]RBA. That's really big for us.

[00:46:27]Uh, I think Zigg image lib is often used instead of stb image. No libc as far as I know. That's pretty sick. That's pretty sick. A good a good fix.

[00:46:38]A good fix. But we'll start we'll start here since we're already we've already done it.

[00:46:43]Um, okay.

[00:46:45]So, let's do something with this. I don't know what yet.

[00:46:55]Um, it would be nice to get like a more interesting image in here.

[00:47:03]So, I think what you can do is you can like load image into canvas.

[00:47:13]You can like just draw image.

[00:47:19]Draw image like this.

[00:47:25]Sure.

[00:47:28]Uh new I think you like canvas draw image from file input. There's like a way to do it this way where you just have like the data directly.

[00:47:44]Uh I see.

[00:47:50]I see. Okay. So, if we want to do something like create object URL to get a URL referencing a blob.

[00:47:59]Nice. Okay. So, we do if we want to like upload a picture. We want to upload a picture. We go like this.

[00:48:06]Input type equals file.

[00:48:11]Uh ID is equal to like file upload or whatever.

[00:48:17]Uh I think it's actually just like thisump.

[00:48:23]Okay. So in here we should be able to do something like uh we have a HTML input element file upload is whatever the [ __ ] we called it which was the exact same thing here.

[00:48:47]Uh we can go like file upload.

[00:48:58]Uh it's like on something uh uh input HTML input element on probably on change, right?

[00:49:16]probably stood debug or console log evv target file zero. Let's just see if that gives me kind of what I expect which is some sort of content or something.

[00:49:33]Uh okay. So this gives me a file with name.

[00:49:38]Nice. And then how do I like convert that? He's saying I can just use URL create target. So he's saying like if I were to do something like inject uh an image element into the DOM here just as like a quick test. Um he's saying that I can do like URL.create object URL from this thing, right?

[00:50:03]Uh, and then that should like display if we do like document body append image if I understand this correctly. And then let's find a test image that doesn't suck.

[00:50:21]What if I what if I Google image picture?

[00:50:25]Uh, save image. Perfect. as in downloads and can we upload that thing now? If I refresh and I browse and I go to downloads and take that picture. Um, create element is not a function. That's true.

[00:50:42]You don't you're not going to do me like that. Okay. Huge. So, we know how to like uh extract the the image data from here kind of. This creates an object though and we need to feed this into the canvas.

[00:51:00]So you set the image like this instead.

[00:51:03]You go like this is a new image and then we're going to like fill or draw image with image. Right?

[00:51:17]So he's saying I have to do this with in a callback which is fine.

[00:51:25]Uh 800 800 maybe. What is CEX drawing to take?

[00:51:39]Maybe maybe where it's drawing maybe.

[00:51:44]Let's see what that does.

[00:51:47]Uh jack [ __ ] Huh.

[00:51:52]drawing.

[00:51:55]He is not doing anything.

[00:52:00]So, that doesn't do what I expected.

[00:52:06]Um, yeah. What the [ __ ] What the [ __ ] This feels reasonable. No.

[00:52:24]Um, you need to reset the file. That's a really good point. I did just not do that part. There we go. Okay, so he's in the canvas now. Hype. Thank you. Thank you. I was like felt like I was losing my mind.

[00:52:39]Okay, so now we have a thing that we can feed into Womland.

[00:52:48]Okay, cool.

[00:52:50]So, what are we going to do? I guess try to do a resize.

[00:52:56]So, [Music] I don't know. I haven't really thought about this part yet.

[00:53:05]I guess we're going to like maybe call this like do resize.

[00:53:11]And this is probably going to return uh I don't know if it's like trivial to get multiple return values out of here. It might make sense to do like get resize buff like this and get resize len right and in here we have like resize buff And we like calculate the size of this based off of that. Why is he mad here?

[00:54:00]Oh, just cuz we didn't return. Sure.

[00:54:06]Okay.

[00:54:09]Right. So then we can kind of do the resize. And what are we going to do there is like we're going to calculate the size of that thing based off the size of the content buffer probably.

[00:54:21]So we have like pixel format is RGBA.

[00:54:26]We understand that.

[00:54:29]Um so I guess here we're going to have like a desired width and height.

[00:54:41]Um and when we we're going to have like old width and old height probably, right?

[00:54:53]We actually can derive the height based off this. And we can derive we can probably derive the height based off only this, right?

[00:55:04]Yeah, I think so. You could also do like resize factor, right? You could do this.

[00:55:13]You could do this. Uh but let's do this for now. Old width, new width.

[00:55:18]And So now we know that like old height or maybe we'll say in and out.

[00:55:28]Uh the in height is content buff len over in width over four. Okay.

[00:55:38]Out height is uh out height is or I guess it's like out len is content buff len over times outwidth over inwidth I think.

[00:56:02]I think that's right.

[00:56:06]Yeah. Yeah. Uh out height is out len over out width over four.

[00:56:18]Yeah, sure.

[00:56:22]Um now what? We need to use these in some way, right? So I guess we like iterate the output pixels.

[00:56:32]uh out height and then we iterate the you know the width as well.

[00:56:49]And if we were to just do like the stupid thing and sample, then we can just do like out. We have like out x out of out width.

[00:57:08]Uh, hold on, hold on, hold on. I need to draw. My brain isn't getting there. Uh so we are like in small picture we're like here and so in big picture we need to be like here. So we have uh in width out width. So we want like the ratio of distance that we are in here in this right. So if we do like um x over out width that gives us a ratio times in width gives us the the position in in space and then we just need to like rearrange this so that we don't get [ __ ] by uh integer math. So we just do the times first.

[00:57:59]Yeah. uh in X and then in Y is the same here.

[00:58:10]Okay. Pipe.

[00:58:13]Um and then we need to do something with this, right? And if we're just like doing like the stupid thing and we're just like discarding all the pixels around, we're just like we'll look at that exact pixel. Um right. So like instead of doing something like intelligent like trying to average this space that takes up the new pixel size and like put that here, we're just like ah we'll just like pick the one in the middle, right? Whatever pixel happens to be right here, that's the one that we'll use.

[00:58:39]Um so we should be able to be like content buff.

[00:58:48]It's like a me copy of four bytes aliasing. to go crazy. Yeah, for sure.

[00:58:56]Uh we can maybe improve that later, maybe.

[00:59:01]Uh so what the [ __ ] are we doing?

[00:59:04]It's like, is it easier to reinterpret this stuff as unit 32s? Probably, right?

[00:59:18]Almost certainly.

[00:59:23]Uh, how do I do this? Can I just do like a pointer cast?

[00:59:32]Uh, bites as slice, I guess, is what I want.

[00:59:39]Resize buff picks is like this.

[00:59:45]And then why didn't like this?

[00:59:52]Oh, can I specify alignment of this guy then? Can I force it?

[01:00:04]Alec with options.

[01:00:09]So, LM size optional alignment optional sentinel. So, here can we do four like this?

[01:00:18]Okay.

[01:00:20]Then can we do this is like a line four like this.

[01:00:26]Does that kind of fix this?

[01:00:29]Yeah. Now the resize buff is mad which we can do the same thing here like this. Okay.

[01:00:39]Now he's just mad about unused local content. Hype pi pi pi pi pipe. Uh so also we have to actually uh make this thing.

[01:00:51]So this actually has to be like uh you know Wism allocator free the resize buff and then can we Alec this?

[01:01:17]Yeah. Yeah. Yeah. So it's like uh let's work in pixels units now.

[01:01:24]So no over fours anymore.

[01:01:29]Okay. And we have resize buff is equal to an allocation of the right size. Yes.

[01:01:42]Yeah.

[01:01:45]Yeah.

[01:01:50]Outland huge uh catch unreachable. [ __ ] it.

[01:01:57]What does he like? Uh probably this going to be Alec with options cuz we No, this can just be U32.

[01:02:07]This can just be U32. There's no reason for this to be a U8 buffer.

[01:02:11]Cool.

[01:02:14]Uh, okay.

[01:02:18]So, this needs to be like a pointer cast here.

[01:02:23]Okay, we're getting very close. So, if we're just sampling now, it's just like resize buff at in Y time uh times in width plus in X.

[01:02:42]Uh, this is all out.

[01:02:44]Content buff pixels.

[01:02:47]Resize buff at out Y* out width plus out X equals this.

[01:02:55]Yeah, pipe. That might work.

[01:03:01]That's like a nonzero chance that we would get something sane.

[01:03:06]Let's see what happens.

[01:03:08]So here in JavaScript land I guess we need to call the right functions right.

[01:03:12]So it's now do resize. So we upload this data and we call do resize.

[01:03:21]Uh unreachable executed. Nice. That makes sense. So can we log at the very least on those unreachables and see what's what's mad.

[01:03:33]Uh, so print internal failed to alloc this many bytes.

[01:03:46]Not that one.

[01:03:48]Oh, wait. I guess we have to build, huh?

[01:03:51]Where is the other unreachables? I guess they could be in like indexing.

[01:03:59]So, can we do like a if false here just to like double check that we're not like [ __ ] up something mega big there?

[01:04:09]Unreachable executed. Okay.

[01:04:12]Um, it would great be great to have a panic handler. Uh, do resize these uh parameters. True. Seems likely that's it, huh? So the input width is going to be eight uh 800 and the output width is going to be like 200. Let's do like a 4x down sample. Nice. Good eye. So that's probably in division here. I would love to get a panic handler here though just so we can like see what the [ __ ] is going on. Um, so I think you do like is it like this, you know?

[01:04:50]Is there a panic handler in here? No. Uh, zig set panic handler.

[01:05:04]There's like pub function panic. That sounds familiar.

[01:05:11]Uh, zigg panic handler. Is there a way?

[01:05:20]Uh, okay. So, panic invokes the panic handler function. By default, this calls the public panic function exposed in the root source file or if there is not one specified this thing. Hi. Okay.

[01:05:31]So, we need to look at the builtin. I guess if we do like pub function panic, he's going to get mad at us probably about the signature and we can just copy paste it. Yeah.

[01:05:43]Uh so it's message error return trace.

[01:05:46]Uh I guess we should just look at uh just look at the built-in panic function was it in stood builtin or builtin?

[01:06:02]stood built in. So we just don't go there.

[01:06:09]Okay.

[01:06:16]Uh here.

[01:06:24]No, dude. Where is the [ __ ] Oh, here maybe.

[01:06:34]Message is this ra is a u size. Okay.

[01:06:39]Yeah. Yeah. I see. I see. I see. I found it. I found it. It's message a uh stack trace which is like like this I think. Yep.

[01:06:55]And then a return address is a optional use size. And then so can we just do like this? And can we just do like a quick little do like print internal of the message at the very least?

[01:07:11]At the very least. So that if we call this thing, we go back to calling this thing incorrectly.

[01:07:18]Can we at least see a little failure, you know? So it was like this. We should see like a divide by zero or something.

[01:07:28]uh expected this it's a pointer uh error union is ignored does thing return uh no return true so here there if I type unreachable again here I think it like recurses into our panic handler which isn't good But we'll see. We'll see.

[01:08:08]Yeah. See, we're like recursing now, which is really bad. Um, so we need to do like I think it's Wom.

[01:08:16]There's like some sort of like wom panic built in I think that we can call instead there like to to just go straight to like the I can't remember.

[01:08:34]I can't remember. There's something about that trap builtin. That sounds right. That sounds right.

[01:08:43]This function inserts a platform specific trap jam. Yeah. Yeah. Yeah.

[01:08:47]Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. So, this goes dodges the rest of the panic handler, I think.

[01:08:55]What books do I read to get to the same level as you? Oh, I don't really read.

[01:09:00]So, unfortunately, I can't really help you there. I just do things and then like draw off previous experience.

[01:09:08]That's kind of the way this usually goes.

[01:09:12]division by zero, baby. Let's [ __ ] go.

[01:09:17]And then you can probably be like, um, if stack trace, I think you can just like [ __ ] log that [ __ ] No.

[01:09:38]Uh, empty string.

[01:09:42]Uh, how do I log these things? I feel like I've done this before. Format.

[01:09:47]Yeah. So, he has a formatter and then I guess uh has, you know, with stack trace.

[01:09:57]Maybe it's just like not available to us. Yeah, looks like looks like we can't we're not that we're not that fancy.

[01:10:06]Maybe there's a way to get it, but it's at the very least not trivial.

[01:10:11]Not trivial. Okay, so now we can go back to actually doing the resize and see if it actually works. Uh, unreachable executed division by zero because we didn't actually fix.

[01:10:25]We We do want to do this.

[01:10:30]Okay. So then, you know, maybe it worked. There's like a non-zero chance.

[01:10:35]Non-zero chance. It's hard to tell right now because we're just like logging like the big yellow [ __ ] So, I think what we want to do is we want to do this on the file upload, you know, like I think it's like on load we want to draw the image then do all this [ __ ] you know, and then maybe draw it back.

[01:10:57]Uh, so can we like kind of do this?

[01:11:02]Where is image data get used? Probably here, right?

[01:11:06]Probably.

[01:11:09]Probably.

[01:11:11]Then all of this can kind of go here after the WM object is initialized. So now we refresh and we upload our little picture. So that's in here now. And then what would be nice is if we could like print the resize stuff into like a second canvas, right? So if we were to go like or maybe we just p punch it in the same canvas.

[01:11:32][ __ ] it, you know.

[01:11:36]Uh so let's let's get the new buffer. So we'll say that we get like resize len is image wom instance exports whatever the [ __ ] we called our thing which I don't remember.

[01:11:55]Wom test it was get resize buff and get resize when so we have resize pointer and we should be able to like look at this stuff by doing like something like this uh resize pointer resize len and can we just like look at this thing Like what the [ __ ] in here?

[01:12:30]Hello. Resize pointer. I spelled that wrong. So we upload our file and we do see what we should see is like a picture in the top left kind of followed by like a [ __ ] ton of yellow. So if we go into like the kind of like end segment, we do see some yellow down here. Yellow, yellow, yellow, yellow. That's good. Um, what do we expect the length to be? We expect the length to be 200 by 200 * 4, right?

[01:13:06]200 by 200. Uh, no, cuz the aspect ratio of this thing is not 1 one.

[01:13:14]So, it's like what is like the dimensions of Oh, it's Oh, no. This is one. This is 800 by 800 pixel buffer that we're sending in. So it's yeah 200 * hello hello 200 * 200 * 4. We're looking for 160,000 which we do see here. That's really good. That's really promising. So can we convert this thing back into an image?

[01:13:45]like can I do like uh yeah let's just draw it on top.

[01:13:52]So we'll do draw image. So I guess we need like new can we do like a JavaScript draw pixel buffer canvas or something?

[01:14:05]Is that like a thing we could do?

[01:14:09]Um write an array buffer canvas. That's what I want.

[01:14:13]uh image data from this uh so we want from resize buff 200 200 uh resized is this and then we can do ctx draw image resized at like let's draw it in the bottom right okay so we load this guy uh argument one does not implement interface uate clamped array. Oh, so do we have to do like can I make a clamped array from a date array?

[01:14:50]Uh can I just like do this instead? Does that do the same [ __ ] thing?

[01:15:01]Uh argument one could not be converted to any of these from testJS 53.

[01:15:09]What the [ __ ] This guy's a liar.

[01:15:12]Oh, put image data. I didn't read.

[01:15:15]I can't read. It's a hard life out here.

[01:15:18]I always say reading is for [ __ ] nerds.

[01:15:22]Okay, that's close.

[01:15:27]That's really close. So, I think that what we've seen here is that we just didn't resize height correctly.

[01:15:31]That seems likely, right? So, it looks like we've kind of clamped the width down, but not the height.

[01:15:39]Um, so let's look at that. Resize buff out y time in in y is out y * in height over out height.

[01:15:50]So it must be that our out height is just wrong here.

[01:15:56]No.

[01:16:01]Uh outland over out is this over four content buff pixels.

[01:16:12]Uh print internal uh output size is going to be this by this.

[01:16:21]Like what the [ __ ] are we doing wrong here? Out width out height.

[01:16:28]Should we out y times out height?

[01:16:34]No, because we're going like we have like n rows of stuff, right? So if you're going like if you're trying to like index into this pixel buffer that's going like this, it's like your offset is like this many rows of width, right?

[01:16:50]So that doesn't feel like it. It feels like the units are all right here. I'm more interested to see Yeah, maybe we [ __ ] up.

[01:16:59]Uh on Oh, okay.

[01:17:07]Uh 200 by 800. Yeah, we're just [ __ ] idiots. Why is this wrong?

[01:17:13]Why is this wrong?

[01:17:17]Oh, Len is What the [ __ ] dude? Am I mental out length?

[01:17:42]Hold on. Hold on.

[01:17:46]I'm sure it's like really obvious, but I'm not seeing it. So, our outlength is 200 by 200 by 4.

[01:17:56]Oh, wait. But this is the wrong unit.

[01:17:58]This is in uh this this is in this is in pixels, not bytes.

[01:18:08]So, how the [ __ ] did we manage to [ __ ] that up?

[01:18:16]I'm lost.

[01:18:19]Outlet is only calculated using the width modifier. No.

[01:18:23]Well, we have like the total length of the input buffer times the ratio, the resize ratio, right? This resize ratio is supposed to be applied in both width and height.

[01:18:36]But I mean, we could just do like width over in width, right? Like this is kind of what we're trying to do here.

[01:18:45]And then maybe we do this instead. We do like out width times out height, right? That's like maybe more correct.

[01:18:57]And then here we need to make sure that we do like over four here for the resize length.

[01:19:04]Okay, let's see if that kind of does more what I expect.

[01:19:11]Uh, output size 200 by 200, which is 40,000 pixels. And then index or size is negative or greater than the allowed amount at test.js 52 uh test.js 52. So that's here.

[01:19:32]So, we logged the resize buffer here, which is only 10,000 buff bytes. Probably because here it was supposed to be times four, not over four, right? Cuz we're going from 32 to 8.

[01:19:47]Oopsies, wrong file.

[01:19:51]Okay, that looks promising.

[01:19:54]That looks like we kind of have like a small version in the bottom right.

[01:20:00]that I'm pretty sure that's right.

[01:20:03]Pretty sure that's kind of cool.

[01:20:06]So, we have pixel data here. And now the last piece is trying to do the the like file conversion from within WM land instead of relying on the canvas to do it.

[01:20:20]Uh, ideally we completely ditch the canvas.

[01:20:30]Boo canvas. Let's get that [ __ ] out of here. So, uh, one option. So, two-step suggested zig image.

[01:20:42]Um, usually I'm a little hesitant to just pull in libraries, but [ __ ] it, you know? I'm down.

[01:20:50]Um, so I assume we do. How do you build Ziggs on again?

[01:21:00]build Zigg on.

[01:21:08]Uh, I guess I kind of just want this.

[01:21:13]Uh, I guess we can kind of just like touch build Ziggs on and see where it gets angry. Nowhere.

[01:21:23]Oh, we already have one. That's why. U, okay. Dependencies.

[01:21:30]Oh, we already have one. We've we've we've been here before, right? So, can we look at um Zig image?

[01:21:37]We did write a PNG decoder by hand ourselves at one time, but I'm not willing to go through the work of like making sure it's correct.

[01:21:47]Um, dependencies. Oh, yeah. There is just like a Zigg thing to do that, is there not? Huh?

[01:21:55]Uh, so you're saying I can do like copy here. You're saying I can do zigg fetch save get plus this or something.

[01:22:15]Oh, that's kind of cool.

[01:22:18]That's cool indeed.

[01:22:21]Okay. So here if we're like uh b dependency zig image.

[01:22:33]Uh okay. And then like what the [ __ ] does this thing export?

[01:22:39]We have a module zigg image.

[01:22:47]Zig image is this. And then we say like wom AC add module uh root module add import. Yeah.

[01:22:58]Okay.

[01:23:00]So he's going to do some [ __ ] Uh dependency. We need options here.

[01:23:05]Probably just like I don't give a [ __ ] We might like it might be correct to propagate target and optimize.

[01:23:14]Uh but he seems happy for now.

[01:23:18]Wom test. So, can we do like zigg image is equal to import zig image? That'd be kind of cool. Looks like it. And how the [ __ ] do I use this thing?

[01:23:30]Image. Surely.

[01:23:34]Uh, in it with an opator from file from memory, right? Like this. Like this. And then we have like from raw pixels as well, but we can probably just do from memory.

[01:23:46]Does this thing are they gonna cheat? Do they have resize in here for me? I hope not. Looks like no.

[01:23:56]Cool.

[01:23:59]Wow, they got all sorts of stuff in here. Okay, cool.

[01:24:03]Uh let's go back over here wherever our like wom test is. And can we do like um zig image image from memory with stood keep wom allocator and content buff.

[01:24:27]And then we should be able to be like this probably can fail, right?

[01:24:38]And let's just kind of go here.

[01:24:45]Um I'm I'm hoping like what is like the pixel format here? Uh can we like ask him for a specific pixel format?

[01:25:01]Let's see.

[01:25:06]read image.

[01:25:08]So, this gives me like a format interface.

[01:25:12]Oh, that's fancy.

[01:25:14]Uh, fancy. So, he goes all for each interface function. Wow, that's cool.

[01:25:23]That's some [ __ ] dude.

[01:25:26]Uh, okay.

[01:25:29]Let's see if they have some form of like it feels like um pixel format converter. Here we go.

[01:25:42]So we can convert this to some desired pixel format.

[01:25:51]Okay.

[01:25:53]So this is in pixel format converter.

[01:25:59]Right. So we should be able to be like uh zig image pixel format converter convert from image pixel pixels.

[01:26:22]This guy wants a pointer to pixel storage. This guy is not a function. I see. So we can kind of go like this into like RG BA32.

[01:26:43]Right.

[01:26:45]Nice.

[01:26:48]Um maybe not unreachable because it might just fail as you code. Yeah, true.

[01:26:52]But I mean the the crash will just the unreachable is kind of like an exception. which is kind of funny, right? Because like it'll just bubble up to like the Wom boundary.

[01:27:02]Um, quick question. Do you use WM in HTML?

[01:27:07]If yes, how do you pass the image WM side? Is it like a big clone of the JS buffer or your pointer placing some we're we have memory in zig wom allocated memory exported by zig. And so we have a function here that says please create a buffer of this size and then we will copy in from JavaScript whatever we need. You do your stuff and then we copy out.

[01:27:32]Um, I think there's a way to like load data directly into the Wisom buffer, but it's fine, right? I I think that I've done this before where like you do like bat you do like 4K chunk fetches of like whatever resource you're fetching and then like inject that directly into like the Womland or whatever. But this is probably fun for now. Uh, can we So, if we have this thing now, what does this return? Pixel storage. And if we pixel storage, we can just take out the RGBA 32 here and probably just do like a pointer cast on this thing to get the same thing we were doing before.

[01:28:22]Uh, so we should be able to be like image 32.

[01:28:28]Uh, catch unreachable.

[01:28:32]Uh, RGBA32.

[01:28:38]Uh, can we do like pointer cast?

[01:28:41]I don't know like how much he'll like this, but we'll see.

[01:28:48]We will see. Okay. Uh, increases point alignment.

[01:28:52]a line cast.

[01:28:54][ __ ] it.

[01:28:57]Uh, okay. So, this thing's pissed that uh we are trying to compile Zigg image and he's trying to use some Pix [ __ ] That's like a pretty reasonable expectation of this guy, right? So, we would need to like fork this guy.

[01:29:19]uh or something. So this is kind of happening in formats SGI, right?

[01:29:33]So we're seeing seek at 153.

[01:29:42]So he's like doing some sort of like seek from stream.

[01:29:50]Yeah.

[01:29:56]Um, okay. So, he does have this.

[01:30:13]So what's Wait, why is this freaking out then?

[01:30:22]So he thinks that we're going into like pix mode here for some reason at SGI zigg 153. Oh, target. I probably need to pass the target along. No.

[01:30:37]Uh, no, because it's it's like a module.

[01:30:42]H it looks like it is supposed to handle this.

[01:30:54]Oh, this is Yeah, this is a stream source in the Zigg standard library.

[01:31:02]Yeah, which should be fine. No, this is Zick, which makes me think that the target isn't being set correctly, but it has to be.

[01:31:15]Maybe I [ __ ] up WM32 freestanding in my build, Zigg.

[01:31:23]It does say freestanding here, so I don't really see how it could be wrong.

[01:31:30][Music] But it does seem to think it's using the PZIX version, right? It says here.

[01:31:41]Oh.

[01:31:48]Oh, wait. There's also this. Oh, these are two different things.

[01:31:54]Oh, these are two different things. Hold on. Hold on. Hold on. Hold on. So this is he's trying to do system write on standard error unsupported operating system free standing on thread.

[01:32:15]Yeah. Okay. So it's not that easy. It's unfortunately uh not that easy. So, I think that I'm I'm more likely to find success at this point trying to get STB image to compile correctly. And I just think that's like not a very interesting thing to be doing um at the very least in the YouTube segment. So, I might take a run at that after this. Uh, but for now, I think I'm happy to kind of call this segment of the stream here. So, what do like, you know, we did like the world's most naive resize in Web Assembly land. So, what do we do? We have like our WOM test. This guy has uh some functions to like uh manage memory from JavaScript land to say, "Hey, here's a content buffer. Let me know when you've got some stuff in there and we'll do a resize from this width to that width. All we do here is like the world's simplest resize. We just sample the existing buffer and then copy paste it down. Um and then we say okay here's like the stuff that we uh here's the stuff that we resized and then in JavaScript land we just instantiate the web assembly module. We use the canvas to turn uh image data into pixel data, ask for a resize, and then render it back to the canvas. Seems like it was working. Um, pretty exciting stuff. So, yeah, I think we call it there. Uh, Twitch, stick around. I think we're going to keep going on some other stuff.

[01:33:58]Um, but YouTube, if you like we saw, we stream most days 12:30 Pacific time to 4:30 Pacific time. It is two I guess the live people it's 2:15 now. So two hours ago to two hours from now is approximately when we're live. Um if you want to keep up with the projects we're working on swing by catch us swing by if we're if you're around um on Twitch but also uh you know some segment of the stuff ends up on this YouTube channel.

[01:34:24]Um, some segments don't, right? Because basically we're like at the whims of the uh of the algorithm. And so the stuff that goes on this channel is stuff that we hope um is clickable, right? But we do a lot of streaming here that's not necessarily in that category. And so that stuff gets posted on Patreon or under YouTube members or um in Twitch VODs where you pay in the appropriate places to get access to that stuff. Um, you know, we do that because it's an excuse to uh give something to people who want to support the stream. The stream will die uh when I run out of money and so it's like a way for, you know, to slow that death. Um, so if you want the stream to continue, please consider supporting in those places. But if not, no sweat. Um, I think that's it.

[01:35:11]YouTube, peace out. and Twitch. Let's uh let's pivot.