Concept
I have always been fascinated by ASCII art and how simple characters can create complex images. But I wanted to take it a step further. What if we could make ASCII art that moves and changes color? That is where Perlin noise comes in. By using noise to determine both the characters and their colors, we create a living, breathing ASCII landscape that is very satisfying to watch. The idea is simple: we divide the canvas into a grid of cells. For each cell, we use Perlin noise to choose an ASCII character and a color. As time passes, the noise changes, making our ASCII world shift and flow like a colorful river of text.
Code snippet
The heart of this project is how we map noise values to both ASCII characters and colors. Here is the snippet I’m most proud of:
const noiseVal = noise(x * 0.01, y * 0.01, frameCount * 0.01); const charIndex = floor(map(noiseVal, 0, 1, 0, density.length)); const asciiChar = density.charAt(charIndex); const hue = map(noiseVal, 0, 1, 0, 360); fill(hue, 100, 100);
This bit of code is doing double duty. It’s using the same noise value to pick an ASCII character and determine its color. I was able to achieve a perfect harmony/balance between the texture of the characters and their hues.
Sketch
Reflection and ideas for future improvements
I’m pretty happy with how this turned out, but there’s always room for improvement. The main issue I’m facing is performance. If I try to add more features or increase the resolution, things start to get laggy real quick.
Looking ahead, I’ve got a few ideas how I can improve this sketch:
First, I want to optimize the code. Maybe I could use a buffer to draw the ASCII characters once and then just update the colors each frame. This would cut down on the text rendering overhead. I’m also thinking about making the cell size dynamic. Imagine if the cells got smaller when you moved your mouse closer, and smaller if mouse far away. That will add more interactivity and will help to make this sketch even more dynamic. Lastly, I’d love to experiment with different noise algorithms. Perlin noise is great, but there are so many other types of noise out there. Each one could give a unique character to the ASCII landscape.