The idea is to use Perlin noise to wander through the z-axis of a book. Think of a book as a three-dimensional cube, then create new pages by sampling two-dimensional noise() to pick which source page to pull each letter from.
To clarify: a conventional graphical application of noise() picks a gray value for each pixel (between 0 and 255) such that nearby values have a decent chance of being similar to each other. This creates an impression of clouds instead of the full chaos of pseudorandomness.
For this project, I found a book that was about 255 pages long, so instead of picking similar gray values for nearby pixels, it picks letters from nearby pages or even the same page. Adjusting the interval by which the noise() generator steps through its values can change how smooth or choppy the cloud effect appears, so if that's set to very smooth (in my case, 0.001 and less), then the resulting text has large, readable chunks.
It's nearly done! I just need to adjust some finishing touches. I'm coding this in p5.js and using Bindery.js to make a book layout. It's looking pretty good:
The idea is to use Perlin noise to wander through the z-axis of a book. Think of a book as a three-dimensional cube, then create new pages by sampling two-dimensional
noise()to pick which source page to pull each letter from.To clarify: a conventional graphical application of
noise()picks a gray value for each pixel (between 0 and 255) such that nearby values have a decent chance of being similar to each other. This creates an impression of clouds instead of the full chaos of pseudorandomness.For this project, I found a book that was about 255 pages long, so instead of picking similar gray values for nearby pixels, it picks letters from nearby pages or even the same page. Adjusting the interval by which the
noise()generator steps through its values can change how smooth or choppy the cloud effect appears, so if that's set to very smooth (in my case, 0.001 and less), then the resulting text has large, readable chunks.It's nearly done! I just need to adjust some finishing touches. I'm coding this in p5.js and using Bindery.js to make a book layout. It's looking pretty good: