Skip to content

11 Tech facts about The Source

Paper is in 3D

In "The Source", we aimed to create a realistic and tactile paper texture. To achieve this, we used value noise to generate a 3D surface, simulating the physicality of real paper.

To calculate how light would interact with our digital paper, we used a dot product between the surface orientation vector, or 'normal', and the light vector. This allowed us to realistically model how light falls and reflects off the paper's surface, adding depth to our creation.
We want to give a big thanks to Piter Pasma for his valuable advice on this technique!

Keeping Pencil Lines Consistent in Warped Domains

In "The Source", we implement a technique known as domain warping. We define a grid based on Signed Distance Functions (SDF), and we apply domain warping to it. This process creates deformations that disrupt the uniformity of distances, causing a line of a certain thickness to appear differently across space.

We desired this variation in line thickness when working with Black ink, as it contributes to an organic, hand-drawn feel. However, to maintain realism when simulating pencil on paper, it was essential to keep the thickness of the pencil line constant.

To manage this, Inigo Quilez's article on distance estimations was a great help. It enabled us to locally calculate the derivative of the warp-induced deformations, allowing us to adjust and maintain the thickness of the pencil line.

Below is an example illustrating several techniques that correct the distances:

Inigo Quilez
Articles on computer graphics, math and art

Using Cosines to Craft Our Color Palettes

To craft the color palettes for "The Source", we implemented a technique highlighted in Inigo Quilez's blog post titled "Palettes".

This approach enables us to define complex palettes using only four 3-dimensional vectors (vec3). It's a powerful tool that not only reduces the amount of code we write but also helps create smooth, aesthetically pleasing gradients.

However, the trade-off is that this technique is not as straightforward to manipulate as traditional color settings. Rather than adjusting the hue, saturation, or brightness of a color and its position within the gradient, we find ourselves manipulating the frequency, phase, and so forth of the red, green, or blue channels across the entire palette. This process requires a different way of thinking about color, but the results speak for themselves.

Palette editor using cosine from the library

Easing Palette Creation with MIDI

Making our color palettes was made easier with the help of MIDI. Using an iPad, we could play around with the color values in our palettes in a hands-on way.

We used TouchOSC, an app on the iPad, to send these color values via MIDI straight to our JavaScript generator. This method gave us a more direct and creative way to make and tweak our color schemes.


SDF-Powered Watercolor Animations

Each edition of 'The Source' is based on a grid that we distort. We describe this grid in the form of Signed Distance Functions (SDF), which lets us know the distance to the closest edge. Depending on this distance, our algorithm draws different textures. For instance, in a simplified way:

Once we had this system in place, we simply varied the distance at which we start drawing the watercolor to create an engaging animation. The flexibility provided by SDFs really allowed us to bring our watercolor vision to life.

Creating an Organic Feel with a Plethora of Noises

One of our primary goals in this project was to achieve a highly realistic and organic rendering. To capture the intricate details found in a real watercolor painting, we utilized a wide range of noises across all elements comprising "The Source."

Take, for example, the pencil:

By incorporating this intricate interplay of a variety of noises, we were able to achieve the desired organic and lifelike appearance, capturing the nuanced beauty that makes a watercolor painting truly unique.

Happy Happy Accident: The Birth of "Frozen" Deformation

During our exploration of deformations based on rotation, we stumbled upon an unexpected result – a remarkably straight and rectilinear appearance. Surprisingly, this unintended outcome instantly appealed to us. It was a serendipitous moment that led to the creation of the deformation we now know as "Frozen."

The "Frozen" deformation possesses a distinct aesthetic quality that sets it apart from the others. Its unique characteristics emerged from this fortunate accident, adding a delightful twist to our artistic repertoire within "The Source."

Evolution of the rotation angle leading to the specific case that gave birth to the 'Frozen' deformation

The Source is 100% On-Chain

From the very beginning, we aimed to minimize dependencies on external libraries. Initially, our project utilized p5.js. However, as the project evolved, shaders became a significant part of it, leading us to remove the dependency on p5.js. As a result, The Source has no reliance on external libraries.

The Source is Primarily Written in GLSL

Approximately 62% of our code is written in GLSL. The remaining portion, written in JavaScript, primarily serves to initialize the shader, define features, and manage certain functionalities like exporting.

In this way, we have focused on harnessing the power of GLSL to create captivating visuals, while utilizing JavaScript to handle essential setup and additional functionality within The Source.

Our Tech Stack: fx(stdio), TypeScript, WebGL 2/GLSL 3...

Throughout the development of The Source, we found several tools to be invaluable:

Additionally, we made use of various GLSL libraries:

We also incorporated SDF (Signed Distance Function) code snippets from Inigo Quilez's website, which proved to be an invaluable resource for implementing various distance-based calculations and effects.

Perfecting the Print: Overcoming Challenges

Right from the start, we aimed for The Source to be printable. However, achieving an accurate print representation posed an additional challenge due to our emphasis on realism.

Printing a piece with the generated paper texture did not yield satisfactory results. As a solution, we opted to print the piece without the paper texture on a type of paper that closely matched the generated texture. This required finding a paper with a grain that closely resembled the desired texture.

The initial attempts did not produce the desired outcome, despite using an appropriate ICC profile. The pencil lines appeared too dark, the ink seemed too light, and the watercolor colors appeared too pale, among other issues.

To address these challenges, we went through multiple iterations, adjusting various parameters each time. We fine-tuned the brightness of the pencil lines and ink, the saturation of the watercolor colors, the paper size, weight, and type, among other factors.

Through this iterative process, we aimed to achieve optimal results, constantly refining and experimenting until we found the right balance. It required careful consideration and adjustment of various factors to ensure that the printed output accurately captured the essence and details of The Source.

The Source will be dropped on July 31st to For more information, please visit the project page and follow us on Twitter: @matthieuart & @camillerouxart.


Immutable Collective News: issue #6

Immutable Collective News: issue #5