How to draw a Space Invader

Building the invader #

Here's our grid. It will stay in the viewport and we'll draw an invader on it as we scroll down.

We should probably start with the body. If you look at my sketches above, you might notice the same pattern I did - almost all of the bodies resemble a low-resolution polygon. The plan is to generate a vector polygon. The low resolution of the grid will help hide our (vector) crimes.

Finding the center #

Having a central point for the body will help us draw the rest of it. Think of it as an anchor. Since we'll generate tentacles in the bottom part, it makes sense to shift the body slightly upward.

The original space invaders are symmetrical around the vertical axis, and we can use that to our advantage. It's enough to generate one side of the body and then mirror it.

Defining top and bottom #

To generate one side of the body, we start with top and bottom points. Both sit on the vertical axis of symmetry and are randomly selected.

Drawing the left side #

We only need to generate one side and then mirror it. On the left side, we'll randomly pick between one and five points.

At first I limited it to two or three points with a convex shape. Later I allowed more points and dropped the convex rule, which unlocked more interesting results. Lines sometimes overlap, but once pixelized, those imperfections disappear.

Mirroring it to the right #

Once the left side vertices are generated, we mirror them to the right.

Connect the dots #

Now we connect the points into a polygon. Side points are connected according to their vertical position.

That gives our invader a body! Now let's add some extremities.

Adding limbs #

In code, limbs generated on the bottom side are called tentacles, and the ones on the top are horns. They are generated the same way, just with different parameters.

Let's see how to generate one tentacle, and then we'll reuse the same technique for others.

Finding the root #

Since tentacles grow from the bottom, we start with the lowest side point of the body polygon. As usual, we do the left side first and mirror later.

Sketching the mid-line #

From the lowest point, we generate a few random points to form a polyline. Its length is random, and it serves as a mid-line for the tentacle.

Fattening the line #

On its own, the line is too thin. To turn it into a tentacle we need to give it width. The trick is to calculate points on both sides of the bisector line and connect them together. I like this technique and use it often for my drawings.

It feels natural that the tentacle is wider where it connects to the body and shrinks further away. To achieve this, we reduce the bisector length as we move outward.

Two notes on this "fat line" algorithm:

• Because the mid-line is random, we often get sharp corners, which create weird overlaps. To soften them we scale down the line width relative to how sharp the angle is.
• In the generator, you'll see an easing parameter for the width. Probably overkill, but it lets me fine tune the width along the tentacle and occasionally fill a missing pixel. I liked the control, so I kept it.

Our first tentacle #

Connecting the bisector endpoints gives us our first fat line, or rather, our first tentacle.

Now we're ready to generate more tentacles and horns the same way.

Growing more tentacles #

First we mirror the tentacle we just drew. Some invaders also have a middle tentacle. Let's randomly decideIf the invader you are looking at hasn't grown a middle tentacle, refresh the page to get a new one. if we should draw one.

For the middle tentacle we start from the bottom point of the body polygon. We draw a line just like before, but with one change - if we get close to a side tentacle we stop. This avoids overlaps that often create a blob of pixels.

To keep the middle tentacle symmetrical, we'll take the lazy route - draw it randomly and then mirror it.

Adding horns #

We draw horns the same way, except we start from the central point and shoot diagonally upward. Horns use a slightly narrower angle range to avoid overlaps. As usual, draw the left one and then mirror it.

At this stage we have a very crappy rough vector invader. With this rough outline in place, the next challenge is turning it into the pixelated look we all know and love.

Turning vectors into pixels #

By pixelization, I mean painting pixels on the grid based on the vector invader. My first idea was to calculate how much of each pixel lies inside the vector shape and paint it if it's over 50%. That would be the most accurate, but it felt over-engineered for such a tiny grid.

Pixelizing the body #

Instead, we'll keep it simple - check if the center of a pixel is inside the polygon. If it is, paint it.

This method isn't perfectly accurate, but it's easy and more than good enough. We're drawing tiny fictional space invaders, not building a universal rasterizer.

Pixelizing the limbs #

Tentacles can get thin, so often the center of a pixel won't fall inside them. That leaves only a few pixels painted. To improve this, we check if the center of a pixel is close to one of the tentacle points. If so, we paint it.

But if the points are far apart, that still leaves gaps. To improve it, I added a line splitting parameter that subdivides the mid-line into more segments. More points mean a higher chance that a pixel center will be near one. It is not essential, but it helps fine tune invaders you like.

Now it really looks like an invader - but it's still blind. Let's slap some eyes on it!

Adding eyes #

We could get clever with eyes, but a few predefined sets work just fine. I already drew some, so we just select one set. We'll place the eyes near the central point, since the body is built around it.

To keep eyes from ending up on the edge, I padded the predefined sets with a few extra pixels. To make it easier to seePun intended!, these extra pixels are shown lighter in the animation. Finally, if eye pixels overlap with body pixels, we remove them to create holes.

Coloring the invader #

Finally, we can apply some color and there is our invader! Let's talk about color a little.

To generate colors, I used the OKLCH color space. It's similar to HSL, but unlike HSL it has predictable lightness. That means if we keep the lightness parameter fixed and randomly generate the other two, all generated colors share the same lightness. This is practical for many reasons, but in our case it helps us create colors of similar vibrancy for each invader.

The code looks like this:

const l = random(0.55, 0.8, rng, 2).toString();
const c = random(0.2, 0.5, rng, 2).toString();
const h = (random(120, 420, rng, 0) % 360).toString(); // skip brownish tones 60 - 120

document.documentElement.style.setProperty('--theme-l', l);
document.documentElement.style.setProperty('--theme-c', c);
document.documentElement.style.setProperty('--theme-h', h);

Notice that for the hue I skip the range between 60 and 120 - yellow-brownish tones I didn't like.

Color tweaks with CSS #

One cool thing is that we can keep l, c and h as separate CSS variables. That makes it easy to mix and match or manipulate them with CSS calc method.

For example, I use this to fix lightness for controls in the generator so they always have enough contrast:

.controls {
  --controls-main: oklch(0.6 var(--theme-c) var(--theme-h));
  --controls-main-light: oklch(0.75 var(--theme-c) var(--theme-h));
}

I also use it in debug mode to make tentacle and horn pixels darker and less saturated:

.invader--debug .invader-pixel--l {
  fill: oklch(calc(var(--theme-l) * 0.8) calc(var(--theme-c) * 0.6) var(--theme-h));
}