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.
![](https://uploads-ssl.webflow.com/601eb2e704e9c7302fe3ad4e/602b2e648eea3041ab7cb2ef_%E6%88%AA%E5%B1%8F2021-02-16%20%E4%B8%8A%E5%8D%8810.29.54.png)
![](https://uploads-ssl.webflow.com/601eb2e704e9c7302fe3ad4e/602b345393e8e3d42169b965_%E6%88%AA%E5%B1%8F2021-02-16%20%E4%B8%8A%E5%8D%8810.30.25.png)
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.