
<h2 class="wp-block-heading has-large-font-size"><strong>Pitch</strong></h2>



<p>It seems all my fx(hash) projects have to do with pop culture and &#8220;Clutch&#8221; is no different. This one is about exploitation/grindhouse type movies of the 70&#8217;s/80&#8217;s, specifically action / crime movies, their posters and their music.</p>



<figure class="wp-block-image"><img decoding="async" src="https://gateway.fxhash2.xyz/ipfs/QmNXAAPstLs31E1pbu4ihWFDYfZyTPpUVMmkhtYeRfDQT5" alt=""/><figcaption class="wp-element-caption">Bold colors across a variety of genres</figcaption></figure>



<p>I wouldn&#8217;t call myself a specialist at all, but I&#8217;ve seen my fair share of niche movies of all kind due to early VCR access and a lot of late-night TV in my teens. I enjoy a good action sequence, cheesy dialogues and the occasional clunkiness.</p>



<p>I wanted to express action, speed and groove, but also the sleaze and the cheese. I wanted people to hear a groovy bass line and the wah-wah pedal in action.</p>



<p>&#8220;Clutch&#8221; is the generic protagonist of a movie in that space. Not much is known about Clutch, only that he&#8217;s/she&#8217;s/they&#8217;re badass, sexy and dangerous.</p>



<p>The concept didn&#8217;t solidify until halfway through development though. It started as a continuation on my work on&nbsp;<a href="https://www.fxhash.xyz/generative/19392">POW!</a>&nbsp;with halftone patterns. I just released&nbsp;<a href="https://www.fxhash.xyz/generative/20250">The Summoning</a>&nbsp;at the time, with which I struggled quite a bit on questions of scalability and animation, so I wanted to do something way simpler this time, and more abstract because I like to alternate.</p>



<p>The main design goals at the start were :</p>



<ul class="wp-block-list">
<li>Scalability of the outputs : The outputs should scale infinitely without quality loss.</li>



<li>Low numbers : low color count, low number of &#8220;moving parts&#8221;, keep it simple.</li>



<li>Hot colors, high contrast.</li>



<li>No opacity shenanigans : every element should only display fully opaque or fully transparent.</li>



<li>Distress : elements of the composition should feel used or broken.</li>
</ul>



<p>All those rules have been lightly broken as the project evolved, but they still define the look of the piece, raw and dynamic.</p>



<p>The project is thought as existing at poster size, or at least the size of a decent desktop computer screen. It lives best in &#8220;live&#8221; mode.</p>



<p><a href="https://www.fxhash.xyz/generative/21198">The Muon in the hole</a>&nbsp;follows largely the same creative impulse. It was made as an interlude in &#8220;Clutch&#8221; for&nbsp;<a href="https://twitter.com/search?lang=en&amp;q=%23fxhashturnsone" target="_blank" rel="noreferrer noopener">#fxhashturnsone</a>&nbsp;and uses a very similar theming and structure, with a sci-fi twist. It&#8217;s also generally way less saturated, but noisier to compensate. This removes most of the violence from the theme.</p>



<figure class="wp-block-image"><img decoding="async" src="https://gateway.fxhash2.xyz/ipfs/QmcAXnJ1aFvEBMWFAkRBCUvjTdoXVw5Qdu7AGdBc8hw4F8" alt=""/><figcaption class="wp-element-caption">Left : &#8220;Clutch&#8221; , Right : &#8220;The muon the the hole&#8221;</figcaption></figure>



<h2 class="wp-block-heading has-large-font-size"><strong>Direction</strong></h2>



<p>Like in&nbsp;<a href="https://www.fxhash.xyz/u/Christophe%20%22Ulu%22%20Choffel">my previous projects</a>, I work in 3D even if the final result is intended to look fully 2D. I also work with real-time performances in mind, meaning the project should render fast ( &lt; 0.1s ). This mainly allows me to iterate at breakneck speed and test things easily. I also never know entirely if I&#8217;ll include animations or not in a project, so that&#8217;s always an option.</p>



<p>&#8220;Clutch&#8221; is composed of :</p>



<figure class="wp-block-image"><img decoding="async" src="https://gateway.fxhash2.xyz/ipfs/QmUFeDD1D3t1RC7qkpAx9mxi6MtwkNortHKao7nzCU4WRb" alt=""/></figure>



<figure class="wp-block-image"><img decoding="async" src="https://gateway.fxhash2.xyz/ipfs/QmVAHEoXAvYRa3tymdw7AfTaWD1eCYsh8LjFhfQUFg3pP3" alt=""/><figcaption class="wp-element-caption">1 : Background, 2: Color rings, 3, 4: Explosion, 5: Dashes, 6: Rocks, 7: Overlay circles, 8: Color circles, 9: Overlay</figcaption></figure>



<h3 class="wp-block-heading has-medium-font-size"><strong>1. Background</strong></h3>



<p>A flat color. This color is reused in other elements of the composition.</p>



<h3 class="wp-block-heading has-medium-font-size"><strong>2. Color rings</strong></h3>



<figure class="wp-block-image"><img decoding="async" src="https://gateway.fxhash2.xyz/ipfs/QmUQVVT9znXCt2iuxigaefxLN8343KTgz93pQCj4jX5oAz" alt=""/><figcaption class="wp-element-caption">Left: a single ring , Right: detail</figcaption></figure>



<p>Between 20 and 100 rings are generated per seed. These are slightly deformed circles, with inner and outer brush-like distress. Various types of holes are punched in the shape, some with regular patterns, some irregular. Each ring can also contains an inner circle shape.</p>



<p>The rings are scaled and distributed along a more or less noisy path from the back to the front.</p>



<h3 class="wp-block-heading has-medium-font-size"><strong>3. Fragments</strong></h3>



<figure class="wp-block-image"><img decoding="async" src="https://gateway.fxhash2.xyz/ipfs/Qmct6N856dtpRN8wLSLaTzFWNc78KiLm9rdaxpmSgxDQTE" alt=""/><figcaption class="wp-element-caption">Square pattern distributed across thee front layer</figcaption></figure>



<p>500 small polygons are generated and scattered semi-uniformely across the space. They come with a square based pattern rather than circle, and the intensity of the halftones is from another general pattern. A &#8220;shadow&#8221; is also generated, painted in a contrasting color. The idea of slightly colored shadows behind dark elements is present throughout both &#8220;Clutch&#8221; and &#8220;The muon in the hole&#8221; and is one of the core graphic features of both projects.</p>



<h3 class="wp-block-heading has-medium-font-size"><strong>4. Explosion</strong></h3>



<figure class="wp-block-image"><img decoding="async" src="https://gateway.fxhash2.xyz/ipfs/QmcYuDNDXvcmZAdRUikfAchtCnqaB976GxRDx1PjJukuFg" alt=""/><figcaption class="wp-element-caption">Two layers, two different distress methods</figcaption></figure>



<p>The main focus, although it is sometimes hidden. Another deformed circle, this time with some spikes along the perimeter, inward and outward. It also comes with its shadow. Both layers have their own distress methods, the front part being finer while the shadow holes are rougher.</p>



<p>Some seeds generate a second explosion.</p>



<h3 class="wp-block-heading has-medium-font-size"><strong>5. Dashes</strong></h3>



<figure class="wp-block-image"><img decoding="async" src="https://gateway.fxhash2.xyz/ipfs/QmZs9bjAqCG3H5CPyh4EJk6XbqSfWzmCMbXB8jv7kJ7raN" alt=""/><figcaption class="wp-element-caption">Dash close-up</figcaption></figure>



<p>Some rays are generated and sprinkled radially from the explosion, but not really aligned, just generally in the same direction. They&#8217;re distressed similarly to the color rings.</p>



<h3 class="wp-block-heading has-medium-font-size"><strong>6. Rocks</strong></h3>



<figure class="wp-block-image"><img decoding="async" src="https://gateway.fxhash2.xyz/ipfs/QmNbRN7WB4qeRpF3sYi1jRMdJHxFc3n1GQn6HikSCKxFwu" alt=""/><figcaption class="wp-element-caption">Rocks and their colored inner pattern</figcaption></figure>



<p>The only 3D shapes of the composition, you get between 20 and 150 of those. They too use the concept of dark front / color shadow, but yet in another way. The intensity of the pattern depends on an arbitrary &#8220;lighting&#8221;, and the color shadow is the same pattern with an offset, inscribed in the same shape.</p>



<h3 class="wp-block-heading has-medium-font-size"><strong>7.&amp; 8. More circular shapes</strong></h3>



<p>More slightly deformed circle come in play to add some accidents. One group contains a few big and very faint circles painted additively on top of the rest, the other are a few randomly placed circles with yet another halftone pattern variant. Those are opaque and contrast with the ones made of holes in the rings.</p>



<h3 class="wp-block-heading has-medium-font-size"><strong>9. Overlay &amp; frame</strong></h3>



<figure class="wp-block-image"><img decoding="async" src="https://gateway.fxhash2.xyz/ipfs/QmSV93i3cUp9EwqmQLsxoykRa5Q9ERJNV1Zo8ysYckFCv4" alt=""/><figcaption class="wp-element-caption">Dust and wavy lines</figcaption></figure>



<p>On top of it all, I overlay some more dusty noise, usually pretty sparsely, but some seeds are more intense. I also draw some wavy lines, meant to evoke poster creases or simply cracks in the poster.</p>



<p>The frame is finally drawn. It&#8217;s the only element that&#8217;s not deformed or broken in any way, just a rounded rectangle. I like this little bit of contrast and the rounded corners feel thematic to me.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading has-large-font-size"><strong>Mise-en-scène</strong></h2>



<p>The general construction algorithm is as follows :</p>



<ul class="wp-block-list">
<li>Choose two points in the frame, one in the back, one in the front.</li>



<li>Between these two points, define a wavy 3d curve.</li>



<li>Along that curve, distribute rings and rocks.</li>



<li>Somewhere toward the back of the curve, add the explosion(s).</li>



<li>Sprinkle the fragments and some circles towards the foreground.</li>



<li>Add some dashes pointing towards the back of the curve.</li>



<li>Paint the overlay and the frame on top</li>
</ul>



<p>Of course, everything is randomized in some way or another, mostly in terms of varying ranges. The only binary parameter is the aspect ratio of the seed, which influence the rest of the parameters. Aside from that, the palette is a also discrete value, chosen at generation.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading has-large-font-size"><strong>Color</strong></h2>



<p>Each seed get a random palette from a list of 13. All palettes except one are directly inspired by movie posters.</p>



<p>Each palette contains the definition for a few colors, like the background, the rocks shadows or the color of the frame. They also contain a collection of colors for the rings. At generation, this list of colors or randomly weighted according to the seed, which allows each palette to express itself in various ways. Nearly all palettes include the background color as an option for the rings, to create some fake negative space. They also generally include a darker color to create the ink feel, that is treated separately as to not overpower the colors.</p>



<figure class="wp-block-image"><img decoding="async" src="https://gateway.fxhash2.xyz/ipfs/Qmag3sDVobEyn2uowvqkbXVGYex2kyAqXxeqNQFXSEcajQ" alt=""/><figcaption class="wp-element-caption">Same palette, different mood</figcaption></figure>



<p>The palettes also define rules for gradients. Gradients are present in most palettes, but are usually a very small change in saturation or luminance. A few palettes use a hue shift, which was a feature that was an error at first and became a happy accident.</p>



<figure class="wp-block-image"><img decoding="async" src="https://gateway.fxhash2.xyz/ipfs/QmRQbD5VYBhc1HLafdnRuv7c2a9vRksNwhKLXSs7CVhb6b" alt=""/><figcaption class="wp-element-caption">Left: very slight gradient, Right: Big hue shift</figcaption></figure>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading has-large-font-size"><strong>Interlude : The muon in the hole</strong></h2>



<p>&#8220;The muon in the hole&#8221; is largely similar, but simpler. The frame is now a distressed rectangle, the noisy overlay is more intense. The rings are replaced by rings arcs of varying size, and the explosion is replaced by a generated 3d shape, plus 2 &#8220;shadows&#8221; of this shape.</p>



<figure class="wp-block-image"><img decoding="async" src="https://gateway.fxhash2.xyz/ipfs/QmTpiZCR4RXKFtPt3eTX7HBL8DdLQZjgsUNQHNF5yy2Yy5" alt=""/></figure>



<p>Being an interlude project, I did some recycling to save time. For the central shape, I reused a space station a I did for&nbsp;<a href="https://www.fxhash.xyz/generative/12372">&#8220;Visa to the Stars&#8221;</a>&nbsp;with barely any modifications, just an expanded parameter space, that I drew the same way as the rocks in &#8220;Clutch&#8221;.</p>



<figure class="wp-block-image"><img decoding="async" src="https://gateway.fxhash2.xyz/ipfs/QmTdwgVMRaiqmioaWqnJnSxxrGaozAimURLtLVkSaP8w6Z" alt=""/></figure>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading has-large-font-size"><strong>Behind the scene</strong></h2>



<p>From a technical standpoint, it&#8217;s all pretty straight forward, and similar to some of my previous projects :</p>



<ul class="wp-block-list">
<li>Define some general shape with 3D meshes, mostly planes</li>



<li>Do the heavy-lifting in the shaders</li>
</ul>



<p>If you don&#8217;t know what meshes or shaders are, you can think of it as a wall, with a ton of weirdly shapes frames hung on it with paintings in them. The frames are the meshes, the paintings in them are the shaders.</p>



<figure class="wp-block-image"><img decoding="async" src="https://gateway.fxhash2.xyz/ipfs/QmRW7ajSf278aG7K4rJFDNQdwWtv5LvU3X5j6FitbEsQ1a" alt=""/><figcaption class="wp-element-caption">Wireframe</figcaption></figure>



<p>The use of an orthographic camera allows me to treat the whole thing as 2d. Elements are created aligned towards the camera and the lack of perspective in the projection means that changing the depth of an object does not change its position in the render.</p>



<p>All the meshes are pretty simple. Deformed circles, deformed circles with spikes, extruded deformed low-res circles, etc. and rectangles (frame, overlay, dashes).</p>



<p>The shader work consists mostly of punching holes in the shapes. Usually each shader will mix different types of halftone patterns, varying the scale, the size, but also the reference : some patterns use the meshes texture coordinates, some use the meshes vertices world positions, other the vertices coordinates on the screen. Using these various approaches produces the fun effect that happens when you translate the camera, but it&#8217;s also one of the things I wanted to experimented with at the start of the project.</p>



<figure class="wp-block-image"><img decoding="async" src="https://gateway.fxhash2.xyz/ipfs/QmWTkNAPxSxNeQehFkPZ6EJTMgCDCKyDk64EtPpf1PqJnF" alt=""/></figure>



<p>The shader for the rings is the most complex one. Its algorithm is roughly :</p>



<ol class="wp-block-list">
<li>Define the zone to distress with the &#8220;stroke&#8221; effect from the inner and outer radii and the UVs. Remove the alpha from the value of stretched polar gradient noise in that zone.</li>



<li>Define a fine&nbsp;<a href="https://en.wikipedia.org/wiki/Worley_noise" target="_blank" rel="noreferrer noopener">Worley noise</a>&nbsp;, mask it with a low frequency gradient noise, and threshold the value to remove some small noisy circles from the alpha.</li>



<li>Define a large circle shape in UV space and use it define haltfones patterns that scale with world coordinates. Also removed from the alpha channel.</li>



<li>For the color, apply the gradient rules defined by the palette, linearly along the UVs.</li>
</ol>



<p>The shader used for the rocks in &#8220;Clutch&#8221; and for the big structure in &#8220;The muon in the hole&#8221; uses the dot product of the normal and the &#8220;light&#8221; (just a vector really) to determine the size of its halftone pattern, whose negative is used to again subtract to the alpha channel.</p>



<p>A very important aspect of the final look is the crucial use of&nbsp;<a href="https://en.wikipedia.org/wiki/Supersampling" target="_blank" rel="noreferrer noopener">super-sampling anti-aliasing</a>. At typical browser resolution, the resolution is too low to display enough detail of the various patterns, and this approach gives me the best results. This is costly operation and you can see I chose to only do it when the scene is static. It&#8217;s disabled when the camera is moving or when I have to redraw the UI. For performance reasons (and power saving), the rendering is done on a per-need basis, and is disabled by default, the artwork being static.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading has-large-font-size"><strong>Bonus feature : User Interface</strong></h2>



<p>I decided to implemented some UI for this project. I&#8217;m not really sure why, but it&#8217;s a space where I like to have a bit of fun.</p>



<p>The seed creates its unique frame for the menu, a randomly deformed rectangle, as well as a few animations frames, also randomized.</p>



<p>The title itself is coded and is actually 3D extrude. The shape is static though.</p>



<figure class="wp-block-image"><img decoding="async" src="https://gateway.fxhash2.xyz/ipfs/Qmb4SJgJU9fwTUATYZhygtsonSdmpHoBRZo4VQga3VE6L1" alt=""/></figure>



<p>I added a dynamic tagline under the title, for the theme. The seed determines a base tagline, as well as a random gender, to keep it mysterious. Enthusiastic use of capitalization, ellipsis and exclamation marks. Many are adapted from actual movie taglines.</p>



<p>The whole menu is placed under the same overlay, same as the rest of the piece. It sometimes interacts nicely, but sometimes also hampers the readability. I found it interesting enough that it stayed. Probably not the best idea, it would be way more user-friendly to do these things in a classic HTML/CSS &lt;div&gt; on top on the main canvas. But that would mean probably loading some static assets, which I&#8217;m not opposed to, but try not to do.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading has-medium-font-size"><strong>Sequel bait</strong></h2>



<p>A couple random thoughts to close :</p>



<ul class="wp-block-list">
<li>Looking back at my fx(hash) production over the year, I realize I&#8217;m not using the classic generative algorithms very much, focusing mostly on composition and colors. Maybe I should work on that in the future.</li>



<li>I&#8217;m also making too much explosions and I should refrain. There are other ways to add a dynamic surely.</li>



<li>Current main idea for the next experiments is a continuation of &#8220;Clutch&#8221;, in theme and techniques, but in a very NOT abstract fashion.</li>



<li>Excited for&nbsp;<a href="https://twitter.com/fx_hash_/status/1592621464359796736" target="_blank" rel="noreferrer noopener">fx(params)</a>&nbsp;but I&#8217;ll have to wait and see exactly what it entails before designing for it.</li>



<li>No &#8220;features&#8221; for this. They seem to often be misused or misunderstood. I don&#8217;t design those with rarity in mind, only as filters to help curation, and only a third-party website allows to filter a collection by features for now.</li>



<li>Very happy people seemed to like &#8220;The muon in the hole&#8221;. Thank you all again.</li>
</ul>



<figure class="wp-block-image"><img decoding="async" src="https://gateway.fxhash.xyz/ipfs/QmZYPYgQj3N6HZCrZsxFQ8WiUeCAYarUzxxyss8CBZq7Sq" alt="Clutch preview"/></figure>



<figure class="wp-block-image"><img decoding="async" src="https://gateway.fxhash.xyz/ipfs/QmTXz621zqURYCCMoVm9f72stJP2MLhu8ssc41u43iPBjP" alt="The muon in the hole preview"/></figure>


CLUTCH / The Muon in the hole

Projects overview with details on their origins, their design as well as their composition and some technical details.

More content