Perlin Flower

Instructions

Move the mouse around to change the shape and color of the 3D Perlin Noise. The canvas automatically resets after 1000 frames. - mouseX contrlols radious and color. - mouseY controls color.

Design Process

While researching to troubleshoot my initial idea, I stumbled upon a page from Gene Kogan explaining Perlin noise and how to use it. Needless to say, I was immediately hypnotized by it and decided to incorporate it into my project. My initial concept was to generate a ripple on two circles corresponding to the mouse location every time it was pressed. While sketching, I also played around with more organic shapes, but this direction was abandoned until multiple setbacks, and my newly discovered love for Perlin noise made me change idea.

In order to achieve this organic shape, the program continuously draws a circle dot by dot, Perlin noise deforms the radius based on the angle from the center point. The noise also varies in time, therefore each point varies based on time and angle. Appling mouseX to the variable "var rad = mouseX * noise(i * 0.1, t * 0.005);" we can tie the value of the angle from the center point to the movement of the mouse along the X-axis, changing the radious of the "circle". Perlin noise is comparable to controlled chaos, and I find this highly fascinating. It gives us power over apparently random variables allowing us to create seemingly random, but in reality, highly defined animations.