Perlin Noise Art

I made a Perlin noise art to celebrate Chinese New Year by drawing ox -- this year's zodiac. Unfortunately, I barely used vector in the code because I didn't want the flow field to change across time. I didn't realize it until the experiments showed that the overlapping colors over time were the best way to make the painting aesthetic. Here's the screenshot of the art piece.

Interactive DEMO please click HERE. Code please see HERE.

‍

Journey Behind

I wanted to do something to celebrate the Chinese New Year. It was the first time in the three years that I spent this precious time with my family. Chinese New Year has 12 zodiacs as each year's symbol and for this year, it was ox. So I decided to draw an ox with Perlin noise.

Inspired by Shiffman's Perlin Noise tutorial, I soon duplicated an ever-changing Perlin noise art. I then emphasized the ox image in the noise art by allowing lines in the image be more opaque while lines outside the image be more transparent. I extracted the alpha channel of this PNG image and create an alpha matrix. The transparency of each rending line depended on the alpha matrix on its position.

I created three random color palette to add more color variations. After attempting to find a better way to demonstrate the ox image, I found that the lines had to stack up so as to make ox better to be recognized. So I didn't refresh the background, just letting frames across time overlaid.

Enjoy!

‍

A lot of thanks for Emily Xie's noise art. Her work truly gave inspirations.