🐻

rreusser · Jul 14, 2020 · 64abe8f · 64abe8f
1 parent 35aa7e6
commit 64abe8f
Show file tree

Hide file tree

Showing 25 changed files with 180 additions and 315 deletions.
diff --git a/a-series-of-unfortunate-things-i-programmed-one-time/index.html b/a-series-of-unfortunate-things-i-programmed-one-time/index.html
@@ -12,7 +12,7 @@
     <link rel="stylesheet" href="../styles.css">
   </head>
   <body>
-    <div id="idyll-mount"><div data-reactroot=""><div class="idyll-root"><nav class="menu"><button class="menu__thumb"><span class="menu__hamburger"></span><span class="menu__hamburger"></span><span class="menu__hamburger"></span></button><div class="menu__content"><div class="menu__heading"><a href="/">rreusser.github.io</a></div><div class="menu__items"><a class="menu__item" href="/sketches/">Sketches</a><a class="menu__item" href="/projects/">Projects</a><a class="menu__item" href="https://github.com/rreusser">github.com/rreusser</a><a class="menu__item" href="https://twitter.com/rickyreusser">@rickyreusser</a></div></div></nav><div class="article-header"><div class="article-header__content"><h1 class="hed">A Series of Unfortunate Things I Programmed One Time</h1><div class="byline"><a href="https://github.com/rreusser">Ricky Reusser</a></div><div class="published-at">March 16, 2015</div></div></div><div class=" idyll-text-container"><p>I’ve been thinking lately about what makes good engineering. Actually, let’s be honest. As engineers, that’s not what we focus on. We get hung up on the failures—which always seem to outnumber the successes. Of course once you get out into the real world of programming for a livelihood, success is measured in terms of project completion and client satisfaction, but as easy as it is to put your head down and focus on the next ticket, that doesn’t absolve us of having to master our craft, to learn new things and better understand and utilize the old.</p><p>But I won’t try to say anything intelligent on good engineering. Instead, I’ll try to communicate the regrets that surfaced last weekend when I plugged in my old laptop and sifted through a decade-old folder called <code>projects</code>.</p><h2>How I started programming</h2><p>The first thing I went looking for was one of my first major programming efforts, the result of the reason I started programming. A pretty long time ago, I came across a paper called <a href="http://graphics.ucsd.edu/~henrik/papers/smoke/smoke.pdf">Visual Simulation of Smoke</a> by some pretty impressive people at Stanford. Research like this is what makes those Pixar movies possible. That you can simulate such complex dynamics from a set of simple principles fascinated me. This was about halfway through high school, so I decided to learn vector calculus and linear algebra just to make this happen.</p><p>It was a long, slow process. Timestamps indicate that I finally got something working five years later in about 2005 (Junior year of college). Frankly, I still feel pretty good about the result!</p><figure><video src="https://s3.amazonaws.com/rickyreusser.com/fluid.mp4" loop="" controls=""></video><figcaption>
+    <div id="idyll-mount"><div data-reactroot=""><div class="idyll-root"><nav class="menu"><a class="menu__item" href="/">rreusser.github.io</a><a class="menu__item" href="/sketches/">sketches</a><a class="menu__item" href="/projects/">projects</a></nav><div class="article-header"><div class="article-header__content"><h1 class="hed">A Series of Unfortunate Things I Programmed One Time</h1><div class="byline"><a href="https://github.com/rreusser">Ricky Reusser</a></div><div class="published-at">March 16, 2015</div></div></div><div class=" idyll-text-container"><p>I’ve been thinking lately about what makes good engineering. Actually, let’s be honest. As engineers, that’s not what we focus on. We get hung up on the failures—which always seem to outnumber the successes. Of course once you get out into the real world of programming for a livelihood, success is measured in terms of project completion and client satisfaction, but as easy as it is to put your head down and focus on the next ticket, that doesn’t absolve us of having to master our craft, to learn new things and better understand and utilize the old.</p><p>But I won’t try to say anything intelligent on good engineering. Instead, I’ll try to communicate the regrets that surfaced last weekend when I plugged in my old laptop and sifted through a decade-old folder called <code>projects</code>.</p><h2>How I started programming</h2><p>The first thing I went looking for was one of my first major programming efforts, the result of the reason I started programming. A pretty long time ago, I came across a paper called <a href="http://graphics.ucsd.edu/~henrik/papers/smoke/smoke.pdf">Visual Simulation of Smoke</a> by some pretty impressive people at Stanford. Research like this is what makes those Pixar movies possible. That you can simulate such complex dynamics from a set of simple principles fascinated me. This was about halfway through high school, so I decided to learn vector calculus and linear algebra just to make this happen.</p><p>It was a long, slow process. Timestamps indicate that I finally got something working five years later in about 2005 (Junior year of college). Frankly, I still feel pretty good about the result!</p><figure><video src="https://s3.amazonaws.com/rickyreusser.com/fluid.mp4" loop="" controls=""></video><figcaption>
 The finished product, five years in the making.</figcaption></figure><h2>Down the Rabbit Hole</h2><p>In hindsight, this shouldn’t really amount to more than a week or two of work, but learning is the process of making hindsight obvious. One way or another though, I had something special: knowledge. And experience. At this point, I had three options:</p><ol><li>Learn from what I’d done and improve</li><li>Learn from what others have done and improve</li><li>Go down the rabbit hole and see how complicated I can make things</li></ol><p>
 Given my experience at the time, it’s hard to say I chose the wrong option, but let’s be clear: I chose (3), and I didn’t just slowly wade into it. I sought out complexity. I enhanced the complexity. No, seriously. I took the basic method and made it as absolutely opaque as I could. I wanted to enter it into the <a href="http://www.ioccc.org/">International Obfuscated C Code Contest</a>:</p><pre style="display:block;overflow-x:auto;padding:0.5em;color:#abb2bf;background:#282c34"><code>  <span style="color:#61aeee">#<span>include</span><span style="color:#98c379">&lt;X11/Xlib.h&gt;</span></span>
 <span style="color:#61aeee">#<span>include</span><span style="color:#98c379">&lt;math.h&gt;</span></span>

diff --git a/a-series-of-unfortunate-things-i-programmed-one-time/index.js b/a-series-of-unfortunate-things-i-programmed-one-time/index.js
diff --git a/aligning-3d-scans/index.html b/aligning-3d-scans/index.html
@@ -15,7 +15,7 @@
     <link rel="stylesheet" href="../styles.css">
   </head>
   <body>
-    <div id="idyll-mount"><div data-reactroot=""><div class="idyll-root"><nav class="menu"><button class="menu__thumb"><span class="menu__hamburger"></span><span class="menu__hamburger"></span><span class="menu__hamburger"></span></button><div class="menu__content"><div class="menu__heading"><a href="/">rreusser.github.io</a></div><div class="menu__items"><a class="menu__item" href="/sketches/">Sketches</a><a class="menu__item" href="/projects/">Projects</a><a class="menu__item" href="https://github.com/rreusser">github.com/rreusser</a><a class="menu__item" href="https://twitter.com/rickyreusser">@rickyreusser</a></div></div></nav><div class="article-header"><div class="article-header__content"><h1 class="hed">Aligning 3D scans</h1><div class="byline"><a href="https://github.com/rreusser">Ricky Reusser</a></div><div class="published-at">July 28, 2018</div></div></div><div class=" idyll-text-container"><p>At <a href="https://www.standardcyborg.com">Standard Cyborg</a>, we use 3D scans from a number of different sources to design sockets for prosthetic devices (btw <a href="https://app.standardcyborg.com/careers">we’re always hiring</a> if this stuff interests you). Even in the best of circumstances in which we’re able to keep track of the physical “up” direction from acquisition through to the design phase, “physical up” isn’t really a useful direction since the limb could have been in any orientation during scanning (or any orientation <em>relative to the scanner</em>). We’d like to automatically orient incoming scans vertically so that they’re easy to work with.</p><figure><div class=" regl" style="width:100%;max-width:500px;height:300px"></div><figcaption>
+    <div id="idyll-mount"><div data-reactroot=""><div class="idyll-root"><nav class="menu"><a class="menu__item" href="/">rreusser.github.io</a><a class="menu__item" href="/sketches/">sketches</a><a class="menu__item" href="/projects/">projects</a></nav><div class="article-header"><div class="article-header__content"><h1 class="hed">Aligning 3D scans</h1><div class="byline"><a href="https://github.com/rreusser">Ricky Reusser</a></div><div class="published-at">July 28, 2018</div></div></div><div class=" idyll-text-container"><p>At <a href="https://www.standardcyborg.com">Standard Cyborg</a>, we use 3D scans from a number of different sources to design sockets for prosthetic devices (btw <a href="https://app.standardcyborg.com/careers">we’re always hiring</a> if this stuff interests you). Even in the best of circumstances in which we’re able to keep track of the physical “up” direction from acquisition through to the design phase, “physical up” isn’t really a useful direction since the limb could have been in any orientation during scanning (or any orientation <em>relative to the scanner</em>). We’d like to automatically orient incoming scans vertically so that they’re easy to work with.</p><figure><div class=" regl" style="width:100%;max-width:500px;height:300px"></div><figcaption>
     Not an actual scan of a knee, but the below the knee (BK) scans users process tend to look very similar and tend to enter the system in no particular orientation.    
   </figcaption></figure><p>Working with 3D models isn’t exactly new territory. Before throwing math at this, we should stop to consider whether a nice <a href="https://en.wikibooks.org/wiki/OpenGL_Programming/Modern_OpenGL_Tutorial_Arcball">arcball camera</a> (or—<em>shudder</em>—x/y/z rotation handles!) would allow users to orient scans as they see fit, removing orientation as any concern of ours. We know so much about this problem though! In a broad sense, we know what the scans look like and how users will be modifying them, and we know that even the most grizzled power users find extra degrees of rotational freedom cumbersome and frustrating when they’re not required for the task at hand. At the very worst, we find automatic alignment a great preprocessing step that helps users, doesn’t hurt what’s already arbitrary, and in many cases nails it right away.</p><p>The question remains then what alignment could possibly mean. There are an infinite number of valid meanings and corresponding solutions. The solution I describe here only addresses a particular meaning that happens to solve our little micro-problem quite well. It’s not new or novel—an alternate title for this article was “In which I discover the ellipsoid!”—and I’m only taking the trouble to describe it because I was so delighted to pick a heuristic out of the sky, find cause to break out some math, and actually end up with a function which runs robustly in a couple milliseconds.</p><h2>Choosing an axis</h2><p>Most of the scans for which people use our software (and limbs in general, really) are basically cylindrical tubes so that the longest axis makes a decent first cut for orienting the scan.</p><figure><div class=" regl" style="width:100%;max-width:300px;height:350px"></div><figcaption>
     Orienting a scan by the longest axis isn’t entirely without merit, but it’s not very robust.

diff --git a/aligning-3d-scans/index.js b/aligning-3d-scans/index.js
diff --git a/from-nothing-to-something-in-webgl-with-regl/index.html b/from-nothing-to-something-in-webgl-with-regl/index.html
@@ -12,7 +12,7 @@
     <link rel="stylesheet" href="../styles.css">
   </head>
   <body>
-    <div id="idyll-mount"><div data-reactroot=""><div class="idyll-root"><nav class="menu"><button class="menu__thumb"><span class="menu__hamburger"></span><span class="menu__hamburger"></span><span class="menu__hamburger"></span></button><div class="menu__content"><div class="menu__heading"><a href="/">rreusser.github.io</a></div><div class="menu__items"><a class="menu__item" href="/sketches/">Sketches</a><a class="menu__item" href="/projects/">Projects</a><a class="menu__item" href="https://github.com/rreusser">github.com/rreusser</a><a class="menu__item" href="https://twitter.com/rickyreusser">@rickyreusser</a></div></div></nav><div class="article-header"><div class="article-header__content"><h1 class="hed">From Nothing to Something in WebGL Using regl</h1><div class="byline"><a href="https://github.com/rreusser">Ricky Reusser</a></div><div class="published-at">December 7, 2016</div></div></div><div class=" idyll-text-container"><p>I’ve been telling all my friends how great and easy <a href="github.com/regl-project/regl">regl</a> is. In short, regl is a wrapper for the WebGL API, written by <a href="http://github.com/mikolalysenko">Mikola Lysenko</a>. WebGL is a giant state machine that quickly gets fairly difficult to manage. regl threads the needle and adds just the right amount of abstraction in order to remove the statefulness but without adding many of its own features. There hasn’t been much development activity in a while because, for the most part, it’s complete and does what it intends to do.</p><p>So I’ve been telling all my friends how great and easy it is, but the truth is it’s only easy if you already know the ins and outs of setting up a modern development environment in the first place. Which really sounds like way more than it is. But it’s taken me a couple years to figure out a lot of this stuff, and I’m still not there. So here’s a quick walkthrough on setting up regl in a nice and simple and modern JavaScript environment. It’s *a* setup. It’s not the perfect setup, but it’s super simple and it’ll get you off the ground. I use it all the time. Enough talk. Let’s go.</p><h2>Initialize it</h2><p>First we’ll make a project. Let’s start from the beginning. <a href="https://yarnpkg.com/">Yarn</a> is great for managing JS dependencies. <a href="http://blog.npmjs.org/post/85484771375/how-to-install-npm">npm</a> too. <a href="https://www.freebsd.org/doc/en_US.ISO8859-1/books/faq/misc.html#idp60510056">Don’t bikeshed</a>. So let’s use npm at the moment. You can create a new project from the command line with:</p><pre style="display:block;overflow-x:auto;padding:0.5em;color:#abb2bf;background:#282c34"><code>$ mkdir cool-project
+    <div id="idyll-mount"><div data-reactroot=""><div class="idyll-root"><nav class="menu"><a class="menu__item" href="/">rreusser.github.io</a><a class="menu__item" href="/sketches/">sketches</a><a class="menu__item" href="/projects/">projects</a></nav><div class="article-header"><div class="article-header__content"><h1 class="hed">From Nothing to Something in WebGL Using regl</h1><div class="byline"><a href="https://github.com/rreusser">Ricky Reusser</a></div><div class="published-at">December 7, 2016</div></div></div><div class=" idyll-text-container"><p>I’ve been telling all my friends how great and easy <a href="github.com/regl-project/regl">regl</a> is. In short, regl is a wrapper for the WebGL API, written by <a href="http://github.com/mikolalysenko">Mikola Lysenko</a>. WebGL is a giant state machine that quickly gets fairly difficult to manage. regl threads the needle and adds just the right amount of abstraction in order to remove the statefulness but without adding many of its own features. There hasn’t been much development activity in a while because, for the most part, it’s complete and does what it intends to do.</p><p>So I’ve been telling all my friends how great and easy it is, but the truth is it’s only easy if you already know the ins and outs of setting up a modern development environment in the first place. Which really sounds like way more than it is. But it’s taken me a couple years to figure out a lot of this stuff, and I’m still not there. So here’s a quick walkthrough on setting up regl in a nice and simple and modern JavaScript environment. It’s *a* setup. It’s not the perfect setup, but it’s super simple and it’ll get you off the ground. I use it all the time. Enough talk. Let’s go.</p><h2>Initialize it</h2><p>First we’ll make a project. Let’s start from the beginning. <a href="https://yarnpkg.com/">Yarn</a> is great for managing JS dependencies. <a href="http://blog.npmjs.org/post/85484771375/how-to-install-npm">npm</a> too. <a href="https://www.freebsd.org/doc/en_US.ISO8859-1/books/faq/misc.html#idp60510056">Don’t bikeshed</a>. So let’s use npm at the moment. You can create a new project from the command line with:</p><pre style="display:block;overflow-x:auto;padding:0.5em;color:#abb2bf;background:#282c34"><code>$ mkdir cool-project
 $ <span style="color:#e6c07b">cd</span> cool-project
 $ npm init -y</code></pre><p>That made an empty directory with a <code>package.json</code> in it. Let’s create a file called <code>index.js</code> and start with the JS developer’s favorite sanity-check:</p><pre style="display:block;overflow-x:auto;padding:0.5em;color:#abb2bf;background:#282c34"><code>alert(<span style="color:#98c379">&#x27;hello, world!&#x27;</span>);</code></pre><p>Technically we have a functioning project, but there’s no way to see it just yet. To use it, we’ll have to add a couple scripts. Let’s use the <a href="https://github.com/ahdinosaur/es2040">good parts of ES6</a> and fire it up with a development server. <a href="https://github.com/mattdesl/budo">budo</a> is awesome for this. budo lets you run javascript files in the browser without having to write any html. To install budo and some other great tools we’ll want, run:</p><pre style="display:block;overflow-x:auto;padding:0.5em;color:#abb2bf;background:#282c34"><code>$ npm install -D browserify es2040 budo indexhtmlify uglify-js</code></pre><p>I added <code>indexhtmlify</code> and <code>uglify-js</code> since we’ll want those when it comes time to build this. Instead of typing out long commands on the command line, let’s add a development server script and a build script to <code>package.json</code>:</p><pre style="display:block;overflow-x:auto;padding:0.5em;color:#abb2bf;background:#282c34"><code>{
   <span style="color:#d19a66">&quot;name&quot;</span>: <span style="color:#98c379">&quot;cool-project&quot;</span>,

diff --git a/from-nothing-to-something-in-webgl-with-regl/index.js b/from-nothing-to-something-in-webgl-with-regl/index.js