Perlin noise organic shape (P5.js)
Brief
Use randomness and/or Perlin noise to create organic shapes. Add controls for the user to interact and modify them.
Openprocessing link:
Process
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.
2. As I moved around the mouse, the ending point is reflected by the coordinates of the mouse through variable mouseX and mouseY.
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.
4. I clicked the mouse again, and there we had another new color for the curve.
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.