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.
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.
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.
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 ;-)
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.
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.
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.
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.
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
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.
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 :-)
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 :)
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?
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.
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.
Love the UI and random colour palette. Excellent work.
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.
[1] https://www.hsluv.org/
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
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 ;-)
May I say that this website is one of the loveliest and most pleasant to read that I've ever seen.
Thanks, it means a lot!
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.
Some say that we will disappear because of AI.
They just hate coding.
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.
Thank you for doing it the fun way, aka without AI
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:
https://muffinman.io/blog/invaders/?seed=1234
Related, and from none other than 00's web legend levitated.net: http://www.levitated.net/daily/levInvaderFractal.html (2003)
Cool. I've been collecting these from all over the world: https://www.space-invaders.com/flashinvaders/
What a delightful read. Thanks for all the thoughts put into the problem solving, the writing, and the presentation!
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
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
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 :)
There is an RSS feed, the link is in the top hamburger menu, but here it is:
https://muffinman.io/atom.xml
Sick, +1 sub from me. Thanks!
Interesting, it takes a lot of imagination to do it
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?
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.
Awesome!
[flagged]