Pictogenesis: Register Machine

Okay. First Pictogeneis machine: a register based machine. Today we’re going to create a very small language with a small number of registers that can read from the outside world, write colors, and act as temporary variables.

Something like this:

gt? t0 b y x r
add g y x
abs b x
inv t0 g
add r g x
sub t0 b r
mul x r b
abs y x

In each case, the first argument is the output and the rest are inputs. So:

# gt? t0 b y x r
if (b > y) {
    t0 = x;
} else {
    t0 = r;
# add g y x
g = y + x

# abs b x
b = |x|

Where x and y are the input point x and y mapped to the range [0, 1]; r, g, b are the output colors in the same range and t{n} are temporary registers just used during the program.


Pictogenesis: The Idea


I don’t know if I ever actually posted it publically, but one of the ideas I’ve had percolating for the longest time is combining tiny interpreters and genetic algorithms to make generative art.

The basic idea is to generate programs (in various styles) that can take x,y coordinates and return colors. Then apply that to every pixel on an image to make generative art. Once we have, figure out a way to mutate/breed the programs so that we can apply a genetic algorithm to them and make awesome images! Sort of like Electric Sheep (that brings back memories).

The evolution point of view was actually a pretty tricky problem, since programs can have a number of different representations. I could compile them to bytecode and mutate that, but how do I make most code at least potentially meaningful?


Backtracking Worm Coral

Let’s take [yesterday’s Worm Coral]https://blog.jverkamp.com/2020/11/19/worm-coral/ and turn it up to 11!

Now we have:

  • Whenever a worm gets stuck, it will ‘backtrack’: it will instead expand from the previous position recursively

That means that the initial 10 worms should always be able to fill the entire world! Even if one closes off an area, that one can eventually fill it up:

I like how occiasionally you get one spindly bit (usually early in the run) that another goes through. It reminds me of Blokus It does take a while.

In addition, I wanted to play a bit with simulationism:

  • Worms can potentially changeColor each frame
  • Every framesPerGeneration check if each worm dies deathChance or spawns a child worm (spawnChance)
  • If a worm dies, it is removed from the simulation
  • If a worm spawns, it creates a new child at it’s current location
    • If spawnIncludesHistory is set, the child can backtrack into the parent’s history
    • If spawnVariesColor is set, the child will (potentially, it’s random) have a slightly different color

Let’s check it out!


Worm Coral

Today, I’m going to work on using [worms](https://blog.jverkamp.com/2020/11/17/p5js-worms/ to generate coral, similar to what I did way back when I was generating omnichromatic images.

In a nutshell:

  • Spawn n worms
  • On each tick:
    • Each worm tries to randomly move one direction
    • If it cannot, increment that worm’s stuck counter
    • If it can, restart the stuck counter
    • If a worm is stuck long enough, kill it off and spawn a new worm

Eventually, we’ll fill the entire space with colors that end up looking a bit like coral. I’ll probably extend this later, since there are a lot of cool tweaks you can do with this general idea.


p5js Boids

Okay, sketch 2: Boids!

The basic idea is to create a bunch of particles (the Boids in this case) and apply to them each a series of simple, limited rules that rely neither on communcation between the Boids nor a global controller and see what behaviors you can generate. Specifically, can you replicate the flocking behavior found in birds, since birds can obviously fly together without hitting one another and also without some lead bird giving orders.

Something like this:

For this case, there are three rules:

  • seperation - Fly away from any Boids that are too close to you (to avoid collision)
  • alignment - Align yourself to fly in the same direction as any Boids in your field of vision
  • cohesion - Fly towards the center point of the Boids you can see


p5js Worms

One thing that I’ve been hoping to get into a bit more is the idea of Generative Art. Essentially, use any of a wide variety of algorithms to generate art. To do that, and so that the art can be generated right in front of you in the browser, I’m going to use the p5js library. It gives you a nice API of graphical primitives and takes a simple setup and draw function and does the rest.


Prevent JavaScript links by parsing URLs

If you have a website that allows users to submit URLs, one of the (many many) things people will try to do to break your site is to submit URLs that use the javascript: protocol (rather than the more expected http: or https:). This is almost never something that you want, since it allows users to submit essentially arbitrary code that other users will run on click in the context of your domain (same origin policy).

So how do you fix it?

First thought would be to try to check the protocol:

> safe_url = (url) => !url.match(/^javascript:/)
[Function: safe_url]

> safe_url('http://www.example.com')

> safe_url('javascript:alert(1)')


Listing and Downloading S3 Versions

Today I found the need to look through all old versions of a file in S3 that had versioning turned on. You can do it through the AWS Console, but I prefer command line tools. You can do it with awscli, but the flags are long and I can never quite remember them. So let’s write up a quick script using boto3 (and as a bonus, try out click)!


Simple LocalStorage Notepad

I have a large number of keyword bookmarks in whichever browser I happen to be using at the time that I’ve been building up over the years1. One of the ones I particular enjoy is text: data:text/html, <html contenteditable>. What that does is open a new tab where I can take notes, completely locally. It’s really handy… but there’s one big problem: I often accidentally close the tab and lose whatever I had been typing. So I decided to take a few minutes to write up a simple extension of the idea that would save the data to LocalStorage.


Inlining plaintext attachments in Gmail

When you send a text message to a Gmail email address (at least from an iPhone using AT&T), you get something like this:

It’s vaguely annoying to have to click through every single time just to see what the message is, especially when various extensions (such as uMatrix) break overlay rendering or when you have multiple attachments.

Much better would be to just display the plaintext attachments inline: