Other posts about The Source
- Project page
- The Source page on gm.studio
- The story behind The Source
- The Source Contest 🚀
- 11 Tech facts about The Source
- Fixes we had to make for the cross-browser compatibility of The Source (coming soon)
In this blog post, we will guide you through the step-by-step process of building a The Source edition.
1) Generate the SDF grid
The first step in the building process is generating the Signed Distance Function (SDF) of a grid. This SDF provides us with the distance to the nearest boundary. In the image below, areas that appear darker indicate proximity to a boundary.
2) Deform the grid
The second step involves deforming this grid using domain warping techniques, utilizing a combination of noises and mathematical formulas, adding a touch of complexity and organic charm to the artwork.
3) Create the paper texture
To create the paper texture, we generate a 3D surface using value noise algorithms. Then we apply lighting effects that interact with the surface, creating shadows that mimic the interaction of light on textured paper.
4) Draw pencil and black ink lines
Using the SDF, we can precisely determine where to draw the pencil and ink lines on the artwork. For instance, the ink lines are drawn near the boundaries of the deformed grid, where the SDF values are close to 0.
5) Paint with watercolors
The final step involves rendering the watercolor brushstrokes, still relying on the information provided by the SDF. The watercolor texture is dynamically evolving based on the distance to the boundaries and its position.
The Source will be dropped on July 31st to gm.studio. For more information, please visit the project page and follow us on Twitter: @matthieuart & @camillerouxart.