For this first experiment, I made the squares in Figma and set the colors there, which was pretty laborious. Exported to SVG and added turbulence/displacement filters to get some variation. When exporting to PNG via Inkscape, I ran into the perennial issue where the filters sometimes only work on the top and left sides of the shape. (Someday I’ll figure out what’s going on there, since the filters look fine in Finder via Quick Look. In this case, from a distance, it still kind of looks okay.) Finally, I added some textures in Affinity Photo with opacity set to around 20% and blend mode set to soft light or overlay.

Second experiment: making things easier. I made a 48x48 image in Procreate Pocket on my phone and painted the scene using the oil paint brush. (Which is why the eyes are crazy and there isn’t a ton of definition on the characters. Like I said, not great pixel art.) I then wrote a quick command-line script (JS/Node) to take a PNG and export an SVG where each pixel of the PNG is a <rect> in SVG. Way faster than making the squares in Figma. The script shrinks each square a little and adds some jitter to the points as well. And I changed the background color to be more ground-like. Exported to PNG and textured as in the first experiment.

Some ideas for future exploration:

• More subdivision on the tiles, for a little more geometric variety
• Programmatically export masks from the SVG so that each tile can look more different from its neighbors, texturally (a masked tile would be next to an unmasked one, basically, with some randomness thrown in)
• Rounding the edges of the tiles a little
• Rendering the tiles in Blender (either with heightfields or by generating actual geometry with Python), ideally with some procedural texturing

Anyway, a fun afternoon diversion.

Reply via email

Colophon: I made these with JavaScript/Node, generating SVGs that I then converted into PDFs with Inkscape.

Reply via email

Matthew MacDonald on whether Canvas rendering might replace the DOM. I like Canvas a lot, but I hope this potential future is far from the timeline we’re living in.

Astro is an intriguing newish static site builder.

Tom MacWright on alternatives to SPAs, also in a similar vein. I need to look more into the projects he links to.

Tim Daub on how he builds JavaScript apps in 2021, which I suppose is also in a similar vein. Sensing a theme here. (And much of this resonated with me. The more minimal the build process, for example, the happier I am.)

Reply via email

Outside of art, my project time lately has primarily been swallowed up by some internal tooling changes. I alluded to this back in June, though the plan changed along the way. Rather than merging all those apps into one behemoth conglomerate, I decided it would be better (along at least a few axes) to follow the Unix philosophy and stick with smaller tools that do one thing well. Which conveniently lines up with the set of tools I’ve already built. Fancy that.

Arc is (was) my notes app, written using FastAPI. I wanted an app that felt more a wiki, and I wanted to move it to Django (easier to maintain, considering most of my other tools are also in Django). And I didn’t really like the name anymore. Thus Codex was born. Heretically, I built it using hardly any JavaScript — just a bit for keyboard shortcuts and another bit for the autosuggest when linking to another page. Everything else uses plain old HTML forms.

In fact, it was so liberating and fun that I plowed onward and decided to ditch Vinci (my internal blog/notebook app) and build a new app, Leaf, using the same technique; the only JS it uses is for keyboard shortcuts. It’s simpler, easier to maintain (I think? it’s still early on), and in a way it feels more in line with the grain of the web.

One other thing I did differently with both apps was to wait to write any CSS until after the functionality was all in place. It was disconcerting and delightful, building something with bare browser styles, and it certainly helped me focus on functionality first rather than getting distracted by layout.

Conclusion: while I doubt I would ever build apps at work this way, this old-school mode was invigorating and absolutely worth it for these personal projects.

Reply via email

In the spirit of working in public, then, Cirque is a small WIP web app I’m building for making patterns via circle packing:

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:

• Replace the settings text box with, you know, good UI (I’m also excited to explore color picker design here)
• Add the ability to manually place both circles and anticircles (so artists are able to create intentional negative space)
• 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)

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.)

Reply via email

Reply via email

Reply via email

So this morning I threw together Alphabet:

Super simple. Click, tap, or hit a key to move to the next letter. It works on phones and tablets as well.

Reply via email

But the original was kind of boring. So we tweaked the game mechanics a bit and made a number of other modifications (multiple bots per team, extensible rulesets, etc.). And now we present Botswana 2.0, a culmination of rampant nerdiness.

The thing that interests me most about the game now is the customizable rulesets. For example, it took all of ten minutes to change the game so it’s played on a series of conveyor belts that move the bots up and down:

It likewise took less than half an hour to make the bots orbit the Death Star instead:

Since the drawing code is part of the ruleset, it’s fairly easy to get a radically different look:

Switching between the rulesets is just a matter of changing the URL in the ruleset box and starting a new tournament.

Anyway, as before, the release is on GitHub, with a README that explains how to write bots and customize rulesets and stuff.

Reply via email

I’ve been thinking for a while about a clean way to deal with this (as well as giving a nice visual indication of the surname instead of just slashes), and here’s what I’ve got so far, which I’m dubbing (rather unimaginatively) the Javascript name box:

When you click on the name, it becomes editable:

How it works

Basically, you give it an input.namebox element and it creates a corresponding div tag for displaying the highlighted surname. It then flips back and forth between the input and the div, parsing the name field and changing the highlight appropriately.

Live demo

Javascript name box

Reply via email