“It is said that long ago, the Greater Will sent a golden star bearing a beast into the Lands Between …”

“… And one day, we’ll return together, to our home, bathed in rays of gold.“

* SPOILER WARNING : This article may include some spoilers for the game Elden Ring by FromSoftware. *

The project

All of my project so far have had something nerdy in them : “ProcGen Entomology” and “Visa to the Stars” are science-y, “Takashi’s Death” is a direct reference to a manga, “Neural Collapse” concept has its roots in Japanese animation, and Breakers and “We’re not gonna take it” have tenuous links to video games. I love my nerdy hobbies, always have.

This one is love letter to FromSoftware and their talent.

Random assortment of objects found around the apartment

This project is a love letter to FromSoftware and their talent.

While I was developing “ProcGen Entomology”, a little game called Elden Ring was released by the team at FromSoftware. The studio is now renowned for games with demanding game-play, satisfying action-rpg mechanics, and cryptic stories.

Their stories and world building in what is now known as their “soulsborne” series of games all have a very dreamlike quality to them and are very high fantasy, be it the more medieval world of Dark Souls or the gothic horror of Bloodborne : you always play a stranger in a very strange land. You don’t know where you come from, and the world you visit is usually isolated from everything by “fog”. Your own player character’s motivations are equally vague.

“You’re sure to be in a fine haze about now, but don’t think too hard about all of this. Just go out and kill a few beasts.“ – Gerhman / Bloodborne

In Elden Ring, a short intro cut-scene tells you that you are being resurrected by “grace” ( yes, you died before the start of the game, in the outside world), and then you’re told that you’re probably here to become “the Elden Lord”, and that there are others just like you. And that’s about it.

Some might find the opacity of this kind of setup hard to swallow, but I find it evocative. A mystery box to unravel, or maybe a just a dream you try to remember. You can find some answers along the way, but most of it will stay hazy, even if you pay attention to every little detail.

The games also have IMO some of the best and most consistent artistic direction around. Especially in the environment and creature design. Sometimes awe inspiring, sometimes gross and disgusting, always interesting and fresh.

They also like to repeat patterns and motifs across their catalog, and they really like their trees, or at least their trunks.

I’ll stop gushing and get to the point : their games have been a source of inspiration for me for 15 years. ProGen entomology started as a Dark Souls inspired piece.

It might be a bit hard to see, but this is what the insects started as. You can learn more about the evolution in my previous article.

In Elden Ring, you encounter this creature, the Elden Beast. It is beautiful, moves gracefully and a soft harp and choir melody starts playing. Just awesome.

The game is also very much about order versus chaos, so it fits nicely with generative art.

Many of my creative ideas come as “What if that, but generative?”. Might seem not that creative to some, and that’s fair, but I consider it a interesting exercise, especially if there’s some technical aspect where I only have a vague idea of how I’ll achieve them. Here I was mostly interested in :

Transparency and blending : you can see inside the creature, but not behind
Full 3d vector math : always a challenge for me, the insects were more 2.5D
Organic looking meshing
Staying real-time as much as possible

Some other considerations came when deciding if this was a project worth releasing :

Spoilery : I already had some reservations when I did Takashi’s Death about the spoilery nature of the piece. Here though, we’re not talking about a 30 years old book, but a 6 month old game, still receiving regular patches. I rationalized it by deciding that most people interested in Elden Ring probably already played it.
Games and Fantasy : there’s friction between “gamers” and Web3 tech as far as I’ve heard, and I don’t know if this kind of fantasy will find its public on fxhash. I think this can stand on its own merits even without reliance on the game, even though it does kinda look like a video game screenshot.
Hardware limitations : I know I tend to overestimate the capabilities of the collectors hardware because there isn’t a component that’s more recent than 5 years old in my own computer, so I tend to think that I’m fine, but probably not. I should poll the Discord someday. Here I’ll try to include a disclaimer about it and some solutions in the token description, and do as much as I can in the code.

I decided to go with it after I managed to produce a decent prototype, and mostly because I wanted to share my love for this kind of weird imagery.

I also really wanted to do it because you don’t see much of this kind of projects on fxhash, and what you get is usually image composition projects starting with pre-rendered/drawn elements and not fully procedural, and one of my goal with this kind of work is simply to do just that, figurative and fully generated by code. Of course, as always, the fact that in runs real-time in-browser is also very important for me : I used to do a lot a Flash/ActionScript back in the days when me and my colleges had a lot of fun pushing the envelope on what we could do with the web, but then, with the death of Flash and the rise of the big social media platforms and mobile devices, the web got suddenly a bit more sad / formatted.

Full 3D real-time world, multi-user, customizable avatars, remote controllable with mobile devices, agency website, made in 2012 for Creaktif

Now with WebGL technologies and the democratization of more powerful devices, I can start having a bit of fun once again 🙂

Technical Breakdown

Branches / Skeleton

The whole creature is first defined as a series of 3d curves. First a spine is defined, and is then used to spawn the arms and wings. Every value is normalized as ratio of the length of the curves, and nearly everything is randomized.

With those curves defined, 4 triangles strips at fixed angles around the curve’s tangent are generated along each of them. The width of the strips depends on the type of curve ( spine, arm, etc.) and some random factors.

An arm and hand. Notice the varying width

The shader for each strip draws some lightning-like pattern which is then blended additively because, well, it came from the stars, it’s made of light and space. The intensity of the light varies with time, with the intensity and the pattern itself traveling along the length of the strips.

The shader also slightly animate the vertices positions and the colors.

Animation Close-up

Metaballs / Marching cubes

For the main body, I wanted a very organic look, and nice smooth junctions between the various curves. I went back to one of the oldest trick in the book, Metaballs.

Wikipedia says : “Metaballs are organic-looking n-dimensional isosurfaces, characterized by their ability to meld together when in close proximity to create single, contiguous objects.”

My curves being defined in a normalized space, it was easy to sample them to place my balls, and define their sizes in a similar manner. The main constraint being the level of detail that I had to balance with computation time. I needed fairly high resolution for the detail I wanted ( animating the balls would be fun, but not really realistic in this case ).

Second constraint is staying in my normalized space, while keeping the randomness high. On that front, it’s only a partial success : some output still go outside, but I decided I’d rather have that than constrain my randomness too much. A feature, not a bug if you will. Similarly, the arms ( or even the head ) sometimes go through the rest of the body, and I decided to keep it that way because it can produce fun stuff.

The shading on the body is also tricky. As previously mentioned, the front has to be transparent, while the back is opaque. So there’s two passes : the back faces are black, with a colored noise defined along world space coordinates that slowly scrolls towards the bottom, while the front faces are transparent, have a similar noise on them but in a different color, plus some light and environmental reflections.

Additionally, some horns, or maybe hair or beard can spawn near the head. They don’t follow the main skeleton. Sometimes they’re close to each other and create a weird protrusion, sometimes they’re well defined and separated.

Head

At the end of the spine, I put between 1 and 4 “eyes”. Each eye consist of a pure white sphere, a plane with some glow, but also some shadow to make the eye pop more, and some star shaped particles that pulse at semi-regular intervals. The whole object always rotates towards the camera to make it look like the creature is always looking at the camera. A bit cheeky but I always liked the effect.

Stars

Inside the creature, I add 8000 stars. The stars are simple small planes, the shape itself being drawn in the shader and alternating between a circle and a 4 pointed star. Each star is also individually colored from a gradient defined in the palette.

Sea

Another 2D plane, shaped like a circle, with it’s own camera to handle reflections. In the shader, I shift the normals in two ways to produces the illusion of ripples:

First along a noise covering the whole surface. The scale of the noise varies from seed to seed.
Then I create concentric circles waves vaguely centered around the base of the creature.

Notice the concentric circles. Subtle but effective

Rings and trunks

The trunks are once again, not cylinder, but just flat planes. You get between 8 and 32 per seed. Each has its own pattern, with the usual noise mix.

The rings are also flat. The shader is a bit more involved though, with the spacey script being generated from more noise, and little dots shooting out from the center. The script is slowly scrolling inside the ring, but also on itself. Each ring is slowly bobbing and rotating.

Candles

I wanted to put something in the composition to give a better sense of scale the creature. In the game, you have your player character for that (although the designers love to sometime mess you perception, like putting a boss in a completely flat black environment).

I thought about tombstones, but it’s a bit dark, swords, but that didn’t stick, and ended with little candles, that could provide some fake lights and play with the reflections.

You get 3000 of them, all animated, all of random sizes, more concentrated around the creature. I raycast its base to make sure they’re not spawned inside.

Each is composed of 2 cylinders, one for the candle itself and one for the which, and then a quad for the flame itself.

Background

Inside a half-sphere, some more noise mixing at shader level.

Mixing it all

Adding it all together

Palettes

For this project, I designed 10 palettes, most of them being references to places or concepts from the game.

Afterthoughts

At the time of writing, I’m preparing publication and trying to optimize a bit more.

Contrary to previous projects I did for fxhash, I didn’t really set myself a precise time scope. Maybe because of the summer mood, maybe because the last 3 projects I did were developed in 1 month of furious coding, this one took probably a bit longer than I anticipated. It is more of a technical challenge, enough for me to want to do a simpler one next, maybe even go 2D.

Here’s the twitter history of the project :

Side thing!
Early #wip
Coding fanart, but also wanted to do some sort of follow-up to the insects someday. This is an option!
Everything procedural as usual. Had fun with the shader let me tell you!#creativecoding #generativeart #threejs #fxhash #webgl #EldenRingFanart pic.twitter.com/z42o8uIgoR
— Christophe Choffel (@ULuIQ12) August 4, 2022

#wip
– some wings. Not yet sure if the metaballs are a good idea for the ALL the outer shell.
– More shader work for some "breathing"
– Stars appear#creativecoding #generativeart #fxhash #webgl #threejs #EldenRingFanart pic.twitter.com/NQANyFfwsA
— Christophe Choffel (@ULuIQ12) August 8, 2022

#wip
– Mostly refactoring and maths cleanup to stay sane today. Also to start playing with values with more freedom.
– Touch up here and there, mostly vertex colors and animations on the branches#creativecoding #generativeart #threejs #fxhash #webgl #tezosart #realtime3d pic.twitter.com/PilojBpzdC
— Christophe Choffel (@ULuIQ12) August 9, 2022

#wip
– Optimized the roots
– Particules update
– Should fix those wonky reflections
– Rainbows🌈!#creativecoding #madewithcode #fxhash #generativeart #threejs #beastfromouterspace pic.twitter.com/CQSE4PDqE8
— Christophe Choffel (@ULuIQ12) August 10, 2022

#wip
– My maths are still wrong 😞, back to scribbling on paper.
– Thinking about presentation, testing vertical format. Here are some of today's output. Bunch'of cuties.#fxhash #generativeart #creativecoding #madewithcode #threejs #NFTProject pic.twitter.com/Xw0B4PrIdt
— Christophe Choffel (@ULuIQ12) August 11, 2022

#wip
– Updated the blob shader for some more rippling fake shadows
– variable number of "eyes"
-I want to put some small things on the ground for scale, but i don't know what yet.#creativecoding #fxhash #generativeart #madewithcode #threejs pic.twitter.com/aLPcdc3MKT
— Christophe Choffel (@ULuIQ12) August 15, 2022

#wip
– Color rotation on the branches
– Mysterious runes in the sky
– lil' candles
– horns/hair/beard system
– endless shader retouch, i'm in alpha blending hell.#fxhash #generativeart #threejs #creativecoding pic.twitter.com/2R7qYOuOuB
— Christophe Choffel (@ULuIQ12) August 17, 2022

#wip
– Hands, Jojo poses
– Intro idea
– Starry background
– Tons of bug fixes, and I fear it'll stay a bit messy
– At least the framerate is still buttery smooth#fxhash #creativecoding #procgen #madewithcode #generativeart #threejs #webgl pic.twitter.com/qcumBPPN6y
— Christophe Choffel (@ULuIQ12) August 19, 2022

#wip
– Getting there. I think I'm good for the various elements. Need to re-check all the various params to see if I can push some further.
– Tackling palettes. Trying to stay thematic.#fxhash #generativeart #realtime #webgl #procgen #madewithcode #creativecoding #threejs pic.twitter.com/e6iXFdEDi0
— Christophe Choffel (@ULuIQ12) August 22, 2022

#wip
– Decided to let the user choose the aspect ratio after all. So it'll be the size of the window, and some scaling for the exports.
– Started a menu. Is loading 900KB of font ( more than the code ) worth it ? A bit indulgent I think, but the whole project is, so…#fxhash pic.twitter.com/sB4o8dEDxg
— Christophe Choffel (@ULuIQ12) August 24, 2022

– Camera will stay pretty free. Contrary to the previous ones where the 2D form was pretty important, this one needs to be observed from all around.
– Many of the outputs want a hug 🫂.#fxhash #madewithcode #creativecoding #generativeart #beastfromthestars #wip #threejs #webgl pic.twitter.com/LkqKoSWuPZ
— Christophe Choffel (@ULuIQ12) August 25, 2022

It came from the stars

Technical breakdown

More content