p5js
domain warping
subdivision
Sketch Book: Behind the scenes

Sketch Book: Behind the scenes

written by Saurabh

15 Oct 2022149 EDITIONS
0.5 TEZ

Sketch Book is my 3rd fxhash project after a gap of about 3 months, and I have used that time to learn more techniques and generally upskill in p5.js. One technique that I had wanted to learn for a while was ‘Domain warping’ which is a key foundation of Sketch Book.

Domain warping creates an effect similar to applying bends or folds to a surface. While it’s most often used to create a marble-like procedural texture like the below image by Inigo Quilez, I wanted to apply it slightly differently.

Warp in Sketch Book

The basic premise of ‘Sketch Book’ is to fill the space with a number of rectangles that are created using rectangular subdivision technique. The subdivision in some instances will be quite dense where it will fill up the entire canvas, while in other instances there will be a lot of white space between the rectangles.

Once the rectangles for the artwork have been defined, the next step is to warp them to give them a wavy effect. Below is a visual on how warping impacts shapes in Sketch Book:

The extent of warp also varies across the collection. While the above example was quite wavy, others will have a subtle warp like below, or no warp at all.

Layers in Sketch Book

More than 70% of the outputs in Sketch Book will have 2 layers of these warped rectangles. The first layer looks like just lines, but the logic is in fact drawing a number of rectangles that only have outlines and no fill.

And the remaining ~30% will have a single layer for a much more cleaner look than the multi-layered sketches that can get quite busy.

Colors in Sketch Book

There are 9 palettes in Sketch Book, and majority of the palettes have a ‘Light’ and a ‘Dark’ background versions that determine the underlying layer of the sketch. The overlaying 2nd layer will have the same colors for both the lighter and darker palette versions.

The combination of these features leads to a fair amount of variety in the final collection:

That was a brief ‘Behind the Scenes’ of the collection launching this Sunday. Hope you like it.

Happy Minting !

project name project name project name

stay ahead with our newsletter

receive news on exclusive drops, releases, product updates, and more

feedback