How to Draw a Space Invader
muffinman.io489 points by abdusco 21 hours ago
489 points by abdusco 21 hours ago
I've also made a space invader generator.
live version: https://abetusk.github.io/iao/vadfad_1gen/
source: https://github.com/abetusk/iao/tree/main/vadfad_1gen
Inspired by Jared Tarbell (linked from another comment here from levitated.net).
I found it surprisingly easy to get good results. The major components are the eyes, bilateral symmetry and otherwise random pixels within a small rectangle, if I remember correctly.
> Inspired by Jared Tarbell
Such a huge part of my early dabbling with computers. A jewel of the early internet, along with the later http://complexification.net, though sadly most of the examples don't run any more due to both Flash (Levitated) and Java (Complexification) dying off.
At least for Complexification, you can copy-paste the Processing .pde source to https://hello.processing.org/editor/#editor and see it run.
Wow, the results are really good: https://muffinman.io/invaders/
Much better than you'd expect from the article.
Also, TIL about [oklch](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...).
Thanks, when I started experimenting I was pleasantly surprised with results I was getting. After some polishing and adding UI I think it really came together nicely.
As for OKLCH, it is a big upgrade. Working with color from code is hard, and it really makes things easier. I also like HSLuv [1], but unfortunately it is not supported natively in browsers.
The uniform lightness looks nice, but it's a shame that the easily memorable hue values of HSL (0 = red, 120 = green, 240=blue) are lost.
This is one of the best mobile experiences I’ve had reading an article.
Yeah, what a tiny joy when it "picked up" the canvas as it went
Thank you both, it means a lot. I try to make it clean, but fun and personal too.
Can say the effort you put in setting that up was worth it. Fantastic work in both making the generator and sharing it!
Apparently someone drew a space invader on this pigeon walking in front of me the other week ;-) https://files.catbox.moe/pzwgr8.jpg
Really fun read. Love how it tracks where you are to do specific things in the drawing and I'm surprised I don't see this done more.
Clicking through to the rope page, it is a really good strategy for web pages.
Got a fun little heart-shaped guy that morphs into a ditto when animated here, love the variety! https://muffinman.io/invaders/#/size:9/main-seed:officer-clo...
May I say that this website is one of the loveliest and most pleasant to read that I've ever seen.
I would like to second this — this is extremely well done, and a joy to play with.
Top-notch work, all around!
Nice.
Ironically, this is much like saving the planet by creating invaders… the hacker way, without using brute force AI.
You deserve your upvote.
Thanks! I think AI sucks all the fun from projects like this one. The whole magic of creation process is lost.
While you’re here, might/will you put rayven on GitHub? I’d be very interested to explore some of the algorithms you’ve used for (essentially) attractive vector hatching.
I have a plan to do it, but it is one of those never ending projects. Hopefully I will finally release it this year.
Ahh... Brings me memories. Back in the 80s I did something similar after reading Dawkin's The Blind Watchmaker and his Biomorph evolution app. I wanted to recreate it but doing something more fun. So I hacked an Atari Logo space invaders game that used genetic programming on the invaders that survived most of the hits based on their shape (some pixels worked as shields) and motion. After 5 levels the game was almost impossible to beat.
Heh, back in my day we used character sequences like >*< and <*> to animate and ran the whole game on an 80x24 ASCII terminal.
Thank you for doing it the fun way, aka without AI
The image/animation that sticks to the top, showing visually what is being talked about as we scroll is really nice work, and I typically hate fancy pages changes during scrolling.
If you refresh the page the invader that gets generated as you read changes.
Stop it.
Checks
Oh my god. 11/10.
Haha I love your comment. I'll let you in on a little secret - you can add a seed parameter to the URL to get a specific invader. It has to be an integer, otherwise it will be ignored.
For example:
This is brilliant, your algorithm produces really great results - and your write-up is super! Would be great to have it as a simple function that we could use in our games ;-)
This would be awesome as a random avatar generator!
I'm reading hackernews on this app called glider that has almost that, just not exactly invaders
Related, and from none other than 00's web legend levitated.net: http://www.levitated.net/daily/levInvaderFractal.html (2003)
What a delightful read. Thanks for all the thoughts put into the problem solving, the writing, and the presentation!
Cool. I've been collecting these from all over the world: https://www.space-invaders.com/flashinvaders/
I’m surprised and impressed that it built a vector that it rasterized.
I wonder how well you can do by having a pseudo-random kernel walk and then mirroring it.
This is basically what I did! A modified version of a random walk to generate "invaders" with a gradient color. You definitely get some interesting shapes.
https://tinyurl.com/creagen-invader (best on desktop)
Sorry for using an url minifier the original url is too long. I'm using a custom web editor I built for generating this. Still working on shorter urls for it.
This and including muffinmans solution was part of a coding challenge for Creative Coding Amsterdam, for anyone interested and in the area definitely check it out https://cca.codes
Very nice!
I was thinking about using walkers, but after some doodling decided to go with vector shapes. I think the combination of the two could also produce some cool results.
As lyr said, these are part of CCA's code challenge and we'll create a page to present all of the generators on one place.
edit: typo
A good space invader has to look badass and threatening. Extra points if it waves around its pincers in a grabbing motion.
Nice, just the other day I coded up some quick 2d shooter demo and realized I have no idea how to draw interesting sprites for it. What you're doing here with drawing the generated vector onto different sizes of grid is brilliant. A sort of structured pulsation. Same simple technique can be used for both "breathing" animation of a critter and for animating it into bigger, badder forms. Bravo.
At this point (actually before even writing the comment) If your blog had a RSS feed I'd have subscribed to it... but (at least according to my RSS plugin) it doesn't, so I fear I will miss out on your next inspiring writeups. Consider adding one, if you feel like it :-)
https://muffinman.io/invaders/#/size:15/main-seed:began-ever... is a favorite so far
Thank you! You can also think of the vector shapes as a kind of skeleton. I think that is one of the reasons it works well. Moving the limbs or increasing the size creates the illusion of movement and breathing. But it works well only while the grid is smaller and can hide the underlying shapes. Once the vectors start to emerge, it breaks the illusion. You could definitely improve it to work better at larger sizes, but I think you would need to introduce more constraints, which limits the random factor of the generator.
If you end up using something similar in your game, I would love to see it!
edit: It seems that I need to make the RSS link more prominent :)
This is a REALLY good writeup, I’m incredibly impressed not only with the work itself, but the care put into explaining and demonstrating it. Much respect to the muffin man.
Very interesting article, and quite fun for those of us with a penchant for 8-bit aesthetics and retro-computing roots.
One thing that came to mind while reading this, was: isn't this just a human digital manifestation of Mother Nature's desire to just evolve everything into a crab shape?
Think about the symmetry and function of various appendages of the space invader, and how - eventually, all space invaders just look like crabs.
Are we seeing some sort of confluence in the Matrix here?
Interesting, it takes a lot of imagination to do it
This was awesome. And the floating preview thingy worked great. Major kudos!
It's interesting that space invaders was developed entirely by one person.
I've gone down that rabbit hole and written countless versions of space invaders. What's really cool to me is that - to get it right - the secret is moving only one invader in the pack every 1/60th of a second, this gives the pack movement the same feeling as the original. The genius of the original coder in creating this illusion never escapes me.
This distinctive movement is a compromise with the limitations of a 2mhz 8080 with no video support hardware to speak of.
Looking at a commented disassembly (https://www.computerarcheology.com/Arcade/SpaceInvaders/), there's so little time available that each frame redraws nothing more than the player, their shot, one of the 55 aliens, and one of the three alien shots. Four things. When every moving object has to be manually erased and redrawn within the space of one frame, you kinda have to stagger the movement.
Yes - this is where I learned of the technique!
After 25 years of writing random space invaders clones - I finally achieved perfection after reading the Computer Archeology site, then I made my last clone and IMHO I'm finally happy to put this obsession down.
Awesome!
[flagged]
