<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/">
  <channel>
    <title>#webassembly posts — Ben Crowder</title>
    <link>https://bencrowder.net/blog/tag/webassembly/</link>
    <atom:link href="https://bencrowder.net/blog/tag/webassembly/feed/" rel="self" />
    <description>Feed for blog posts tagged with #webassembly.</description>
    <lastBuildDate>Thu, 16 Apr 2026 02:21:36 GMT</lastBuildDate>
    <language>en-US</language>
    <generator>https://bencrowder.net/</generator>

    <item>
      <title>Learning WebAssembly, part 2</title>
      <link>https://bencrowder.net/blog/2023/learning-webassembly-part-2/</link>
      <guid isPermaLink="true">https://bencrowder.net/blog/2023/learning-webassembly-part-2/</guid>
      <pubDate>Sat, 18 Mar 2023 12:00:00 GMT</pubDate>
      <dc:creator><![CDATA[Ben Crowder]]></dc:creator>
      <description><![CDATA[<p>Continuing on with the AssemblyScript <a href="https://www.assemblyscript.org/concepts.html">concepts chapter</a>.</p>
<h2 id="concepts">Concepts</h2>
<p>No <code>any</code> or <code>undefined</code> — interesting. And good, I think. But no union types yet? A little sad.</p>
<p>Okay, so module imports and exports are the main way (possibly the only way) the host communicates with the Wasm script. I knew about exports but didn’t know about <code>declare</code> and module imports. Nice.</p>
<p>The tree-shaking approach to compiling is interesting — dead code doesn’t get type checked, for example.</p>
<h2 id="types">Types</h2>
<p>Not as much type inference as TypeScript. Good to know.</p>
<p>Oh, interesting: WebAssembly has distinct operations for signed and unsigned comparisons. (<code>gt_s</code> vs. <code>gt_u</code>, for example.) Also, <code>== === ===</code>. (Couldn’t resist. But yes, given that the basic types aren’t nullable etc., makes sense that <code>==</code> is also doing strict equality.)</p>
<h2 id="standardlibrary">Standard library</h2>
<p>I think the reason I like reading through standard library docs is the same reason I like reading through dictionaries — both open up a world of possibilities. And each time I go exploring, I find something new. Need to do more of both.</p>
<p>I like that the low-level WebAssembly instructions are available to AssemblyScript.</p>
<p>Nice, there’s manual memory management when you need it.</p>
<p><code>StaticArray</code>s for C-like arrays with better performance, got it.</p>
<p>The <a href="https://www.assemblyscript.org/stdlib/string.html#considerations">string considerations section</a> was interesting.</p>
<h2 id="implementationstatus">Implementation status</h2>
<p>Some drama with <a href="https://www.assemblyscript.org/standards-objections.html">WASI and the component model</a>. I don’t know enough about the situation to comment, but I hope things get sorted out in a way that’s good for standards and the web platform.</p>
<p>Ah, there aren’t closures, Promises, exceptions, or rest parameters in AssemblyScript. That’s very good to know.</p>
<h2 id="usingtheruntime">Using the runtime</h2>
<p>A few different runtime options, including support for a custom runtime. Interesting.</p>
<p>Reading about the memory layout was fun. Reminds me of writing C twenty-some years ago. I need to come up with a low-level project to work on sometime.</p>
<hr />
<p>And that’s a wrap on the documentation. I’ve decided that my learning project for AssemblyScript will be a small convex hull implementation. Notes on that coming soon!</p><hr class="feed-extra" style="margin-top: 48pt;" /><p class="feed-extra feed-mail"><a href="mailto:ben.crowder@gmail.com?subject=Re%3A%20Learning WebAssembly, part 2">Reply via email</a></p>]]></description>
    </item>
    <item>
      <title>Learning WebAssembly, part 1</title>
      <link>https://bencrowder.net/blog/2023/learning-webassembly-part-1/</link>
      <guid isPermaLink="true">https://bencrowder.net/blog/2023/learning-webassembly-part-1/</guid>
      <pubDate>Thu, 09 Feb 2023 12:00:00 GMT</pubDate>
      <dc:creator><![CDATA[Ben Crowder]]></dc:creator>
      <description><![CDATA[<p>I’m having so much fun learning Elixir that I’ve decided to do a similar thing with web technologies I haven’t used yet. Similar to the 12in23 posts, these will be long and informal and more stream-of-consciousness, and I will say “interesting” and “looks like” far too often.</p>
<p>First up: WebAssembly. Other things I’m looking forward to trying out afterwards: WebGPU, WebRTC, WebGL (I’ve used Three.js on several projects but haven’t used WebGL directly if I recall correctly), WebSockets, service workers, web components, and a number of smaller things (primarily CSS features I haven’t yet used).</p>
<p>So, Wasm. I’ve read bits and pieces about it over the years but haven’t yet actually tried it on anything. I’m going to start arbitrarily with AssemblyScript. Later on I’ll use Rust, and I want to try writing the Wasm text format manually, too.</p>
<p>To begin, I’m going through the <a href="https://www.assemblyscript.org/getting-started.html">AssemblyScript Book</a>.</p>
<h2 id="gettingstarted">Getting started</h2>
<p>I generated a new AS project with <code>asinit</code> and have been exploring the files it produced, starting with <code>release.js</code> (to get a feel for how the Wasm code gets pulled in). This sample project just adds two numbers together, by the way. The actual AssemblyScript source is straightforward.</p>
<p>In <code>release.js</code>, I initially wasn’t sure what <code>compile</code> meant (in this context) since the example is compiling <code>release.wasm</code> which is already a binary. Looked up the <a href="https://developer.mozilla.org/en-US/docs/WebAssembly/JavaScript_interface/compile">compile page</a>, which explained that the Wasm binary needs to be compiled into a <code>Module</code>, which the <a href="https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts#webassembly_key_concepts">MDN key concepts page</a> tells me is executable machine code. And it’s stateless. Okay, that makes sense.</p>
<p>I also wasn’t sure what <code>instantiate</code> did in this particular context. Found the <a href="https://developer.mozilla.org/en-US/docs/WebAssembly/JavaScript_interface/instantiate">instantiate page</a>, which said it turns a <code>Module</code> into a stateful <code>Instance</code>. That also makes sense now. I imagine the reason one might want to instantiate a Wasm module more than once would be splitting the work up across workers, but I haven’t verified that. Also, looks like <code>instantiateStreaming</code> is now preferred, which simplifies things a little, so you don’t need both <code>compile</code> and <code>instantiate</code>. (That won’t matter for this AssemblyScript experimentation since I’ll be writing AssemblyScript and not finagling with the final JS unless I really can’t resist.)</p>
<p>Looking now at <code>release.wat</code>, because I’m intrigued and I also sometimes like to go in blind and figure things out on my own.</p>
<p>I completely forgot that the Wasm text format is Lispy.</p>
<p>Hmm, I  see the <code>$i32_i32_=&gt;_i32</code> type defined. (By the way, seeing a type defined in an assembly language that looks like Lisp is kind of trippy but also quite cool.) I don’t see that type being used anywhere, though. Must be implicit. I imagine it applies to the exported function. If there’s more than one exported function, maybe they apply in order?</p>
<p>There’s a <code>memory</code> being exported alongside the <code>add</code> function. Interesting. I imagine this gives access to the memory the Wasm script is being executed in (the sandbox), but I’m not entirely sure why — what the host would use it for, I mean. Something to look into when I get back to the text format later.</p>
<p>The function definition itself looks fairly straightforward. Arguments and result type followed by the body of the function. Based on the <code>i32.add</code> instruction not taking any arguments, I’m guessing <code>local.get</code> pushes things onto a stack which <code>i32.add</code> then pops from.</p>
<p>I’m excited to dive deeper into the text format! But back to AssemblyScript proper.</p>
<h2 id="usingthecompiler">Using the compiler</h2>
<p>Okay, looks like memory can be both imported and exported, and the size can be specified as well. Interesting that this is set here (where the AssemblyScript is being compiled into a Wasm binary) rather than in the host when the Wasm is instantiated. My mental model of WebAssembly is more patchy than I realized — it’s been a while since I read an intro — but I’m having fun figuring things out archaeologically right now, so I’ll keep going like this for a bit longer.</p>
<p>Looks like there are several small runtimes that can be compiled in, some with garbage collection. Interesting, didn’t know that. (Looks like it’s a WIP.) And there are threads now. Wow.</p>
<p>Ooh, the compiler API can be used programmatically. I guess I shouldn’t be surprised.</p>
<p>Looks like it’s still just low-level data types that can be passed across module boundaries. Nice that AssemblyScript generates bindings for strings, arrays, and objects, though. That makes it far more usable.</p>
<p>Transforms are intriguing. Probably not useful for most projects, but still intriguing.</p>
<hr />
<p>I’m going to stop here for this post, to try to keep things from going on too long in any given post. Looking forward to working through the concepts chapter next!</p><hr class="feed-extra" style="margin-top: 48pt;" /><p class="feed-extra feed-mail"><a href="mailto:ben.crowder@gmail.com?subject=Re%3A%20Learning WebAssembly, part 1">Reply via email</a></p>]]></description>
    </item>
    <item>
      <title>Introducing Cirque</title>
      <link>https://bencrowder.net/blog/2020/introducing-cirque/</link>
      <guid isPermaLink="true">https://bencrowder.net/blog/2020/introducing-cirque/</guid>
      <pubDate>Thu, 05 Nov 2020 12:00:00 GMT</pubDate>
      <dc:creator><![CDATA[Ben Crowder]]></dc:creator>
      <description><![CDATA[<p>As schoolwork starts to wind down, I’m finally starting to make progress on the creativity tools and HCI explorations I talked about <a href="https://bencrowder.net/blog/2020/1001/">back in September</a>. This week I’ve also realized that graphical tools for art and design are what I want to focus most on. (I do still intend to explore textual interfaces, but they’re on the backburner for now.)</p>
<p>In the spirit of working in public, then, <a href="https://bencrowder.net/cirque/">Cirque</a> is a small WIP web app I’m building for making patterns via circle packing:</p>
<p><figure>
        <img src="https://cdn.bencrowder.net/blog/2020/11/cirque-01.png" alt="cirque-01.png" title="cirque-01.png" />
        
      </figure></p>
<p><figure>
        <img src="https://cdn.bencrowder.net/blog/2020/11/cirque-02.png" alt="cirque-02.png" title="cirque-02.png" />
        
      </figure></p>
<p><figure>
        <img src="https://cdn.bencrowder.net/blog/2020/11/cirque-03.png" alt="cirque-03.png" title="cirque-03.png" />
        
      </figure></p>
<p><figure>
        <img src="https://cdn.bencrowder.net/blog/2020/11/cirque-04.png" alt="cirque-04.png" title="cirque-04.png" />
        
      </figure></p>
<p>This is very much a rough initial MVP. You can tweak some settings, generate new patterns using a simple circle-packing algorithm, and export SVG (with the turbulence/displacement filters enabled by default), but that’s it. Some of the features I’m planning to build next:</p>
<ul>
<li>Replace the settings text box with, you know, good UI (I’m also excited to explore color picker design here)</li>
<li>Add the ability to manually place both circles and anticircles (so artists are able to create intentional negative space)</li>
<li>Add a way to programmatically set the circle colors (probably via something like shaders, so you could say all circles smaller than a certain size get one color and the rest get another, or circle color is dependent on position or something else)</li>
</ul>
<p>I’ve also thought about moving the circle packing code from JavaScript to Rust, to be able to play around with WebAssembly, but it seems overkill, at least at this point. (Instead I think I’ll plan to Rust and WebAssembly on the graphical type design tool I want to build.)</p><hr class="feed-extra" style="margin-top: 48pt;" /><p class="feed-extra feed-mail"><a href="mailto:ben.crowder@gmail.com?subject=Re%3A%20Introducing Cirque">Reply via email</a></p>]]></description>
    </item>
    <item>
      <title>Mozilla just announced their Pyodide project, built with WebAssembly and emscripten: Pyodide gives y...</title>
      <link>https://bencrowder.net/blog/2019/691/</link>
      <guid isPermaLink="true">https://bencrowder.net/blog/2019/691/</guid>
      <pubDate>Tue, 16 Apr 2019 12:00:00 GMT</pubDate>
      <dc:creator><![CDATA[Ben Crowder]]></dc:creator>
      <description><![CDATA[<p>Mozilla just announced their <a href="https://hacks.mozilla.org/2019/04/pyodide-bringing-the-scientific-python-stack-to-the-browser/">Pyodide</a> project, built with WebAssembly and emscripten:</p>
<blockquote>
  <p>Pyodide gives you a full, standard Python interpreter that runs entirely in the browser, with full access to the browser’s Web APIs.</p>
</blockquote>
<p>WebAssembly has a lot of potential. I’m excited to see where it goes.</p><hr class="feed-extra" style="margin-top: 48pt;" /><p class="feed-extra feed-mail"><a href="mailto:ben.crowder@gmail.com?subject=Re%3A%20Mozilla just announced their Pyodide project, built with WebAssembly and emscripten: Pyodide gives y...">Reply via email</a></p>]]></description>
    </item>
    
  </channel>
</rss>
