top of page

Perlin noise organic shape (P5.js)


Use randomness and/or Perlin noise to create organic shapes. Add controls for the user to interact and modify them.

Openprocessing link:


Screen Shot 2021-12-15 at 8.21.19 PM.png

1. I used the bezier function to draw a curve with a starting point at the center of the canvas. The turning points are controlled by noise functions updated in real-time. The ending point is controlled by the position of the mouse.

Screen Shot 2021-12-15 at 8.21.30 PM.png

2. As I moved around the mouse, the ending point is reflected by the coordinates of the mouse through variable mouseX and mouseY.

Screen Shot 2021-12-15 at 8.27.25 PM.png

3. Once I clicked the mouse, the color of the curve is updated through if function (mouse is pressed). And a new random color is generated by 3 random functions with values between 0 and 255.

Screen Shot 2021-12-15 at 8.29.45 PM.png

4. I clicked the mouse again, and there we had another new color for the curve.

Screen Shot 2021-12-15 at 8.32.51 PM.png

5. As I kept clicking the mouse, the curve got more and more colors. At the same time, the turning points and endpoint of the curve were updated by noise functions and mouse.


6. And once the frame count reaches the multiples of 500, the canvas will be cleaned. A new curve will be populated.

bottom of page