ProcGen Entomology
About
Realtime 3D in-browser procedural generation of insect-like models, with a look reminiscent of vintage entomology illustrations.
This project was designed from the ground up for the fx(hash) platform, which provides tools and services to smoothly mint generative tokens on the Tezos blockchain, with the transaction serving as a seed for the randomization of the generator.
This project is also the continuation of my efforts to get more into JavaScript/webgl in 2022 and to generally show more stuff.
The project is about the fact that insects are cool first and foremost. So much diversity, shapes and colors. They naturally lend themselves to collection. Sure they’re often annoying (or deadly) in real life, but they look fantastic.
The generator produces some creatures only generally inspired by insects: there’s no scientific basis in the output past the general 3 part body, and some approximation of a sensible placement for the legs, wings and other appendages.
This is also, after thinking about it, about nostalgia. I don’t know if it’s mine, or the general feel that after the last few rough years, nostalgia seems to be the driving force for a lot world events (in good or in bad).
So here we have the vintage look, with the smell of old paper and the de-saturated tones, contrasting with the fact that this is a Generative art NFT project in realtime 3d WebGL, a pretty contemporary thing.
Makes me think of the past probably more fondly than it deserves, but that’s OK. I’m from the country, lots of bugs around as a kid. Being from a somewhat scientific household, there were illustrations books about recognizing mushroom and birds around (not sure about insects tough).
The piece is meant to exist in its 2d form at the end of the animation primarily, but I left the 3d controls for the realtime version. You can see some tricks and shortcuts i took when you rotate the model around, but also sometime some cool details: sometimes for instance the underside of the wings is a completely different tint due to some random weirdness, or you realize that the legs are way longer than you tought.
Evolution
The generator was designed iteratively : there wasn’t a goal except using JavaScript and seeding the generator with the fxhash tools.
At first i was thinking about doing something abstract because I know I have a hard time with it. So i just started coding something about tubes. I had been playing previously during Genuary 2022 with dynamic meshing, but in more structured way, using pre-made primitive because I’m always fearful at the thought of sorting vertices indices.
So i coded the tube thing, and started playing with it. I had previously done some procedural stuff related to the dark souls franchise of video games, because I had been replaying the games in anticipation for the new release from FromSoftware, and i always admired their artistic direction. There’s a very stringy creature in Dark Souls 3 called a Pilgrim Butterfly, and i ended up, with my tubes, recreating shapes similar to that creature. Already not abstract at all anymore.
I was really happy with the potential for the code i produced tough. I had no idea where to go as far as presentation goes. I really wanted some colors and a more painterly look, so i first tested how it could look as flat colors. I liked it well enough, decided to show some output to a few friends to get their feel for it. Nobody seemed to see what i saw in it, so went back to coding.
So code was already a mess, there were clear re-factorization stuff I had in mind, so I worked on that for a while. While doing so, I started producing more insect like meshes.
The original “monster” was already pretty insect like, and the jump felt natural. Insects were coming out, i couldn’t stop hitting F5 and tuning parameters already.
I also started taking screenshots of them and making compositions by hand. The look and feel starts to appear, with a paper texture and a frame.
I really liked the idea of the compositions with multiple insects, but this was not really feasible without another radical shift in the code, due to real-time performances issue or too much compromise in the details. Didn’t stop me from making others while adding more and more features to the insects. I added vertex colors as base for the future, plus re-implemented the hair. The body is now in 3 clearly different parts, the legs have more definition, with some joint-like shapes appearing.
Being happy for now with the geometry, i then started working on the shaders. The idea was always to use the usual proc-gen noises in a very visible way as some kind of homage to the genre. The shader also produces some normals tuning and some interesting things start to happen when playing with the lighting.
The colors also start to gain some saturation compared to previous iterations. Can’t help it, i like it saturated.
At some point, i quickly added the name generation, and added the seed of the RNG as some sort of debug.
Next big task was the wings. It required a new kind of geometry, so new code. Ended up working out a decent solution pretty fast with splines and extrusion. I say only “decent” because it’s still a bit clunky too: never really solved issue when self-clipping and clipping through the other body parts. It’s not really noticeable in most case do to some rendering tricks and heavy use of transparency. The transparency of the wings was always planned to leave the body and legs some space to express themselves.
Still, the wings really add to the piece and offer more real estate for some sweet noises.
fig. 9a : Wings with early shading / fig. 9b updated composition
Then some more shading for the wings, with new patterns. The project is looking good. I could’ve gone further with the patterns, but the shaders are already less than optimized, i would’ve had to refactor a lot. At that point at focus on preparing more concertedly for a future drop, and start working more on the composition for one insect. The title moves a bit.
The finished piece gets a new generative background, some UI for the users because I remember that it’s not a PNG capture, it’s a full website. I asked some question on the fxhash discord about some technical details about the minting process, got some answers pretty fast so that was cool.
I’m a bit past my “let’s talk with strangers on the web” phase by twenty years and can be a bit shy or reticent with social media, but I’m trying to do better! Thanks Nekropunk for the answers.
A proboscis also appears as a last minute addition to the geometry. It’s interesting in the fact that it’s the only thing breaking the vertical symmetry.
An generative paper-y overlay and a frame complete the piece.
Procedure
Particle driven dynamic meshing
The base tools developed for this project is a custom system to draw tubes following the movement of particles. The particles are (mostly) 3d points, with a life, acceleration / velocity / position vectors, and the ability to spawn other particles.
Their main behavior is to modify their acceleration and the size / base color of the tube they produce.
Every frame, the meshing system checks for particles that are alive, and set the positions, uvs, vertex colors, normals and indices for a new sections of tube, linking it to the previous one of that particular particle.
Multiple particles can interacts dynamically with the same mesh buffers.
So as usual, lots of errors in my trigonometry and also lots of making vectors with my fingers to figure the math. There’s still some (rare) orientation problems in my calculations (something to do with frenet frames i think).
Curves
A lot of the behaviors of the particles is determined by values derived from the life of the particle, usually with a power curve applied to it, and then used to modify some initialization values.
Eternal thanks to Inigo Quilez for all his work, but here specifically for some very useful functions.
Composition
- Background
- Body (excluding wings)
- Wings
- Text
- Lighting
- Overlay
Tools
JavaScript
With barely any experience with JavaScript before 2022, i managed. While I’m doing simple stuff, it’s fine for my purpose.
Otherwise, it still feels like peering into the vastness of space looking for outer gods. Better resumed in this funny video.
Three.js
As an ex-flash/actionscript aficionado, i kinda had to try three.js for my 3D needs.
Lots of examples, decent documentation. Pretty easy to use, at least for the parts i tried. The shader compositing is there, but a bit tricky to implement. I’ve been overriding materials and replacing shader text on the OnBeforeCompile event. Feels a bit clunky but it’s more a WebGL thing. Still I could mostly to do it more cleanly on my side.
Other than that, pretty happy with it, does the job, thanks mrdoob.
fx(hash)
So far so good. I still haven’t completed the minting process. I’m pondering wether to release now, or wait for the end of the site’s beta at the end of the month.
I’m also trying to figure out the price/number of edition/rarity thing. I’m confident in the generator output. I’ve seen thousands outputs and they’re looking good, so at least I know that. Otherwise it’s super easy to setup a project with their webpack boilerplate project, everything works as described.
Post-Mortem
The drop
Project now lives on fx(hash)!
After much hesitation, I uploaded the generator to fxhash on Monday, the 13th of March, around 16:30 here. I had a brief moment of panic after failing to find the button to officially release the generator to the public, and completely forgot about the 3 hours delay until the generator unlocks.
I then tweeted about it and launched Elden Ring to wait, but my mind wasn’t really into it, and I often alt-tabbed to check if there was any activity on twitter.
There were a handful of people expressing their enthusiasm and support which was very welcome.
Then the project finally unlocked. At first I thought the page would refresh itself automatically, so I waited… a bit before hitting F5 and seeing something like “385 / 512 minted”. At that I’m getting a brief episode of cold-sweat :
What’s happening ?
Did I fuck up something, that’s not normal, is it ?
I hit refresh again to see 512/512, everything was gone in like 3 minutes. Some guy on discord messages me like : “you should have put that at higher price!”. Not knowing quite what to think, i check discord to see if there’s any activity, and indeed, there’s some mention in the #price-discussion channel, with some people exited about the project.
At the same time, twitter is exploding. My release post get retweeted by a few but influential people it seems, the likes start to pour, a few nice comments.
After a panic tweet, i poured myself a drink and started to relax a bit. Everything seemed fine, just way more successfully than I had hoped. No technical fuck-up, which was a relief.
I took a long look at the insects people minted and I’m happy with what I saw, a good mix of cuties, monsters, fat ones, long ones, dark ones and bright ones.
A few of them have their wings encroaching on the title, which is good because extremes are cool, but also bad because it shows to the world that the math for my framing algorithm is wonky.
Random Thoughts
Some people read this article and told me they liked it. I feel like it helped the project and that some people really like the details about the process, so more of that in the future, and I’ll try to be more coherent.I also feel that people like the real-time / interactive aspect. So more of that too probably, depend on the project I suppose. The real-time possibilities is what attracted me to the platform in the first place, that and the gacha mechanic.On fx(hash) : No real complaints 🙂 Seriously, everything technical worked, the project was a success. The community was enthusiastic.
If I had to nitpick, some concepts could be clearer (preview = thumbnails for instance, seems evident, but i had a hard time for some reason). We’ll see how things develop in April when the platform goes gold.
I of course gained also more insight on how minting/marketplace goes and admit that I’d like to try my hand at the gacha if I see something cool to mint at the right time.The differences between the captures for the thumbnails and the generator itself is sometimes more pronounced that I anticipated. I feel some thumbnails show a wrong impression of the insect generated. Not a huge problem, but I already coded a solution, so hopefully no more surprises on that front for future projects.Price / Number of edition : for the price, at first i thought higher, like 5 tez, but after looking around more and seeing some really cool pieces like todemashi – Cuts at a very low starting price, a decided on 2 tez.
As for the number of edition, I think I could have gone higher like 1024 maybe? The generator supports it, but it being my first project on the platform, I leaned toward a more conservative 512. hard to gauge, we’ll see for the next one, depend on the generator really.People asked me if I looked into other platforms specifically Teia and Versum : I really haven’t much. I probably should, but at first glance it’s very opaque, and I feel less generator-focused than fx(hash). We’ll see, I’ll try to find the documentation.
Numbers on March 21, 2022, one week after
- 512 insects minted at 2 Tezos
- Original twitter post : 6,711 impressions, 711 engagements, 211 detail expands, 83 profile visits. So definitely my best one.
- 150 new followers on twitter, from around 90 to 243
Next
I already started working on a new idea. Not sure yet if the project is viable, I have to test some composition/framing first to see if what I have in mind even work as a generator. I have tons of ideas to challenge myself, we’ll see what is feasible. But I’m exited.
It will be nerdy. I’m thinking space! I’ll probably try to post some WIPs along the way.
Leave a Reply