
I need people to see my [404 page](/404), I couldn't just leave it to chance!

![404 page screenshot](/kitty-404/screenshot.png)

What's special about it you ask? It's freaking adorable, that's what. The cat's shy, so if you try to touch it, it hides behind the `0`! It's a simple effect, but there's a few subtle details to it that need trickery to work:

1. The `0` is transparent, how does the hidden cat not show through?
2. If the cat hides after you hover, that should take your cursor outside the cat's hit-area, right? Why doesn't the cat come back up then?

### Hiding behind transparency

The solution to this is good ol' `z-index` stacking. You create a dummy `div` that only serves to hide the cat, and stack things this way:

![Page layer stacking order](/kitty-404/stacking.svg)

The `border-color` around the `div` in the illustration is only for clarity, you wouldn't actually want it. What happens here is that the cat hides behind the div, which is the same color as the background, so it looks like the cat hides behind the text. There's small detail here though: your `div`'s `border-radius` needs some value so it doesn't poke from behind the text. This depends on your text, the font, and even the character you're hiding behind. In my case, I had to manually match the `border-radius` to `IBM Plex Mono`'s `0` (which is the font I use for headings on this blog).

### Extending the hit-area

This is a common problem with hover-based translation effects: you translate an element on hover, but that causes the element's hit-area to no longer intersect the cursor's position, which means the element is no longer hovered, which causes it to return to its initial position. But now it intersects the cursor's position again, so it gets translated again, and the cycle continues: the element keeps jumping around. There's a simple fix for this, add some padding around the element so that it keeps intersecting the cursor.

My rule-of-thumb is to add the same amount of padding as the element's dimensions. This has the effect of "replacing" the element with empty space (the padding). It usually works pretty well for small elements. Of course, this will only work if the element's `box-sizing` is `border-box`, but you should be doing that anyway. If you're only translating in one direction, you don't need padding all around it, just in one direction.

---

The cat's colors are, of course, my IRL cat's colors. Fair warning: I might deliberately leave broken links scattered across this blog just so people stumble across the 404 :D



I've been giving monochrome themes a try on VSCode. I don't quite remember where I saw it first, but for some reason I associate them with [tj](https://github.com/tj), so I guess they'll get credit for it!

### Why?

IDK man, it just looks so slick! Isn't that what editor themes are all about anyway? I don't think I've ever used editor token colors for anything. Here's what my editor looks like right this second:

![Screenshot of a monochrome editor theme](/monochrome/editor.png)

The theme I'm using is (aptly) called [Monochrome](https://marketplace.visualstudio.com/items?itemName=anotherglitchinthematrix.monochrome) (I'm using the `Monochrome Dark` variant). I also like to run a fairly minimal editor setup, so I think this is right up my alley. Not sure how long I'll stick with this, but this theme has been on for about a week now, and that's usually the threshold for me; anything that lasts that long usually stays for good!



I've been seeing this art style _everywhere_, especially in brandings. When I started planning out this blog on Figma, I had to give it a shot. I didn't really want a static image (I tried it, and it looked really dull). Here's how it is built:

![Finished product against real page](/webgl-topographic/final.png)

BTW the source of this website is open, so you can look at the final result [here](https://github.com/madebysid/website/blob/6ef63d6694e0530fa5f5d2a68097fa7597bd3880/lib/canvas/canvas.ts). If you're totally new to 3D graphics, I'd recommend doing some research before you dig into this!

The first thing I did was research; how were designers making this? It seemed too complex to build out by hand, and yet too organized to be random. It had to be procedurally generated, right? I found [this tutorial](https://www.youtube.com/watch?v=S_vZ-TAAg3c&t=313s), among others. The general idea seemed to be to start with some Perlin noise, blur it, adjust levels to increase contrast, and then detect edges. We're not _quite_ doing that, but we'll go a similar route.

[three.js](https://threejs.org/) is synonymous with WebGL, so we'll start there. I set up a simple scene with an orthographic camera and a single plane. The camera's `left` / `right` / `top` / `bottom` parameters were set so that the plane was the only thing you saw, and it spanned the entire screen. Next up, we'll give this plane a `ShaderMaterial` (remember to set the material's `side` parameter to `DoubleSide`), and wire up simple vertex & fragment shaders that do nothing. The vertex shader does the standard world-space to screen-space conversion:

```glsl
void main() {
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
```

and the fragment shader sets a static color for all fragments:

```glsl
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0)
}
```

If everything went well, you should see a red canvas on your screen.

---

Alright, moving on to the cool stuff: let's create some Perlin noise. Now, we could do this on the JS side of things (on the CPU), but since we plan on animating the noise, doing this would get expensive real quick, especially for large screen sizes. So we'll do this on the GPU. You should never have to write a Perlin noise function from scratch, so I went out [looking for one](https://github.com/ashima/webgl-noise/blob/master/src/noise3D.glsl). From there, it was a matter of copying the whole thing to my fragment shader, and using the `snoise` function's return value to generate the fragment color:

```glsl
void main() {
  float noise = snoise(vec3(gl_FragCoord.xy, 1.0));
  gl_FragColor = vec4(vec3(noise), 1.0);
}
```

You won't see much yet, because the noise is far too small. Let's multiply `gl_FragCoord.xy` by `0.005` to "zoom in" a little:

![Noise-only fragment shader](/webgl-topographic/frag1.png)

You might notice that there's more black than white though, and that's because our `snoise` function returns values between 1 & -1. Fragment shader output is clipped to be between 0 & 1, so we'll need to "normalize" it. Normalizing is just fancy talk for scaling a value from whatever range to between 0 & 1.

```glsl
void main() {
  float noise = snoise(vec3(gl_FragCoord.xy, 1.0)); // get noise
  noise = (noise + 1.0) / 2.0; // normalize it
  gl_FragColor = vec4(vec3(noise), 1.0);
}
```

![Normalized, noise-only fragment shader](/webgl-topographic/frag2.png)

Next up, we want to change the noise so that it isn't continuous like that. We want "bands" of colors. This is exactly what [posterization](https://www.adobe.com/creativecloud/photography/discover/posterize-photo.html) is. A lot of graphics programming is kinda just knowing _exactly_ what you want to do I've realized, especially for beginners. [This](https://lettier.github.io/3d-game-shaders-for-beginners/posterization.html) is a great resource for learning about posterization (and tons of other stuff). I've also written a small [post](/posts/posterization) describing it, so I won't go into too much detail.

Let's posterize:

```glsl
void main() {
  float noise = snoise(vec3(gl_FragCoord.xy * 0.005, 0.0));
  noise = (noise + 1.0) / 2.0; // normalize it

  float levels = 5.0;
  float lower = floor(noise * levels) / levels;
  float lowerDiff = abs(noise - lower);
  float upper = ceil(noise * levels) / levels;
  float upperDiff = abs(upper - noise);

  float color = lowerDiff <= upperDiff ? lower : upper;

  gl_FragColor = vec4(color, color, color, 1.0);
}
```

![Normalized, posterized noise-only fragment shader](/webgl-topographic/frag3.png)

Hey, now we're getting there! What we want though aren't bands of colors, we want the _edges_ of these bands of colors. Instead of implementing a fancy edge detection algorithm, we can use the fact that posterization just rounds colors to the nearest (upper or lower) band color. **A band's edge is any pixel where this rounding error is less than 0.01 (or any threshold)**. Let's try that out:

```glsl
void main() {
  float noise = snoise(vec3(gl_FragCoord.xy * 0.005, 0.0));
  noise = (noise + 1.0) / 2.0; // normalize it

  float levels = 5.0;
  float lower = floor(noise * levels) / levels;
  float lowerDiff = abs(noise - lower);
  float upper = ceil(noise * levels) / levels;
  float upperDiff = abs(upper - noise);

  if(lowerDiff <= 0.01) {
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
  } else if(upperDiff <= 0.01) {
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
  } else {
    gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
  }
}
```

![Edges of posterized noise](/webgl-topographic/frag4.png)

There we go! We could end here, but there are a few obvious performance improvements we can make here. For one, we don't need to check for the difference between _both_ the upper and lower bounds. This is because the "bands" share an edge. Finding one means we've found the other.

Also, instead of painting a fragment black, we can just discard it, or tell WebGL to not paint it at all. This also has the advantage that our final material becomes transparent. You'll have to enable `alpha` in the `WebGLRenderer` constructor call to see this.

And with that, here's our final shader:

```glsl
void main() {
  // `levels` is the number of distinct "bands" you want
  float levels = 10.0;

  float noise = snoise(vec3(gl_FragCoord.xy * 0.005 , 0.0)); // get noise value
  noise = (noise + 1.0) / 2.0; // normalize it

  float lower = floor(noise * levels) / levels; // find the lower band/level the noise matches at
  float lowerDiff = noise - lower; // and find the difference

  // if the difference between the lower level is within some range, paint the fragment, otherwise ignore it
  if (lowerDiff > 0.015)
    discard;

  gl_FragColor = vec4(color, 1.0);
}
```

![Finished product](/webgl-topographic/frag5.png)

That's it! To animate this, you can use the second parameter of the `snoise` function. Pass in a `time` uniform from three.js, and use that value in there! Let's compose this into our page, and here we go:

![Finished product against real page](/webgl-topographic/final.png)

---

I have a few more ideas that should make the effect massively better, but I'll explore them in a [part 2](/posts/webgl-topographic-2) or something.



My last attempt to build myself a LAN [video streaming service](https://github.com/madebysid/nas) didn't go too well. Sure, it kinda worked, but it was _far_ from perfect. I don't really know why, but I've always wanted a NAS. TBH I don't know what I'd do with it.

So as is customary, I got distracted yesterday and dusted off the ol' Raspberry Pi that was bought but never used (to be fair I did install Arch on it, but that was literally it, I just installed Arch on it, unplugged it and packed it back up). What I wanted was apparently called a Media Server, so I went out looking for it. I found a couple of things, but none of them really told me what they did. They just had instructions on how to install, and that was it??

Let's start at the beginning. I had to install an OS on the Pi, and then get SSH access to it. I discovered a couple of really neat tricks to do this without ever attaching it to a monitor, a keyboard, or even an ethernet port.

I wasn't really into installing Arch today, so first thing I did was clear out an empty SD Card, attached it to my Macbook and flashed Raspberry Pi OS on there. It's _really_ simple, thanks to [Raspberry Pi Imager](https://www.raspberrypi.org/software/). I just selected the Lite version (without a desktop environment) and that was it! Took about a couple of minutes to ready the SD Card.

But here's where the tricks were:

1. In order to let the Raspberry Pi connect to my Wifi on boot, I created a `wpa_supplicant.conf` file on the boot partition with these contents:

```
ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
country=US
update_config=1

network={
  ssid="<My SSID>"
  psk="<My Password>"
  key_mgmt=WPA-PSK
}
```

Unfortunately, I can't remember where I found this, but [this SO answer](https://raspberrypi.stackexchange.com/questions/67649/raspberry-pi-zero-w-headless-using-wpa-supplicant-conf-not-working) mentions it as well.

2. In order to enable SSH on boot, you just have to create an empty file with the name `ssh` on the boot partition. Apparently the OS will see this file, enable SSH, and then delete it.

Anyway, once I did that, the Pi booted up, and I connected to it via SSH from my Macbook. So delightful! (I had reserved an IP from my router way back, so I knew what it was). Set up an SSH alias for it and you can get to your pi in seconds by just typing `ssh pi` in a terminal.

---

Next step was the media server. [Kodi](https://kodi.tv) seemed to be the top choice, so I started looking into it, but got very confused. So you install this server on your Pi, and then what? Where's the UI? How do I add stuff to it? Eventually I found out that apparently the server is on the Pi, so you have to physically connect a monitor to the Pi to be able to access it. I think it's built for TVs and stuff, but this is absolutely not what I wanted.

Looked around some more, and I came across [openmediavault](https://openmediavault.org), which sounded extremely promising. I installed it on my Pi, and it exposed a web server with a UI I could acess from anywhere on my home network. Perfect!

Next up was file sharing. I learned about [SMB](https://en.wikipedia.org/wiki/Server_Message_Block), which is a protocol that lets devices on a network talk to each other. Some quick openmediavault configuration later, I had the perfect UI: macOS's Finder!

![NAS on macOS Finder](/openmediavault/finder.png)

openmediavault even supported video streaming right out-of-the-box, so I literally did not have to do a single thing extra. Sure, it's a little slow when configuring, but finding software that "just works" is so rare these days, I'm very impressed!


Posts

Kitty 404

August 25, 2021

Monochrome editor themes

August 24, 2021

Topographic Line Art with WebGL

August 24, 2021

Getting NAS-ty

August 23, 2021