Dancing Curves
Generative Art | p5.js
The project aims to create a unique, one-of-a-kind digital artwork that evolves with each interaction. Each time the artwork is clicked and reloaded, it generates a completely different image featuring colorful curves that move slowly, randomly, and gracefully, resembling a dance in motion. The curves flow and shift in an organic, fluid manner, creating a mesmerizing visual experience that feels dynamic yet serene. The random nature of the movement ensures that no two experiences are ever the same, offering a continually fresh and captivating piece of art. This project blends elements of randomness, color, and motion to create an ever-changing visual experience that engages viewers in a meditative and aesthetically pleasing way.
You can experience the artwork on your own in the window below or use the link:
-
Curves + slow motion + long shadow trails = Dancing!
-
Generate a new image by clicking the canvas with mouse.
-
Amount, position, shape, and motion track of the curves will be different.
.png)
Motivation
I always seek chances to challenging myself. Generative artwork. was a field that I had never tried before. It combines technical skills and aesthetic sensibilities, as well as a broad boundless imagination for art ideas. I was curious about how far this imagination could go and to what extent I could push my capacity to.
I got the Aesthetic Inspiration from Anatolii Babii’s work “REFRACT (frame)”.
REFRACT (frame)
Animated, ghostly red circles
Objectives
Generally, I anticipated this work could be the stepping stone of my journey exploring the relationship between art and technology. For me, the idea of making artwork via codes was once hard to think of – what kind of artwork did I want to make? What kind of artwork was I able to make? I hoped that this work would shed light on these questions, and that more and more inspiration about this topic would come afterward.
Technology
Design Process
Sketch
Softness and flowing of the curves create a sense of fantasy and romance.
Logic of Code
Draw Static Curves
Animate Curves
Color Curves
Blur Curves
-
noise()
-
curveVertex()
-
class
-
Give every key point in the curve a slight offset
-
Add background transparency
-
Color API
-
HSL color mode
-
drawingCon
text.filter
Visual Pipeline
Draw Static Curves
Animate Curves
Color Curves
Blur Curves