“Pookalam” with animation

For this assignment, I was inspired to create a generative piece that would celebrate my cultural tradition. That’s when the idea of animating a “pookalam” came to mind. A “pookalam” is a vibrant and intricate floral arrangement made during the festival of “Onam,” in Kerala where various colorful flowers are meticulously plucked and their petals separated. These petals are then artfully arranged in front of houses as given in the picture below.

To bring this tradition to life in my assignment, I tried to create an animation where colorful flower petals descend from above, autonomously converging towards the canvas’s central point. This concept not only pays homage to the beauty of “pookalam” but also adds a dynamic and engaging visual element to the tradition.

Initially, my approach involved animating a single flower falling from above, but as I progressed, I decided to incorporate an array function and created an empty array to work with. To achieve the effect of multiple flowers descending, I introduced a variable for the number of flowers and utilized multiplication to replicate them.

Animating their falling was a relatively straightforward task, but the challenge arose when I aimed to gather them elegantly at the center point of the canvas. It was during this part that I acquired a deeper understanding of using the “target” function to achieve this goal. And that is the part of coding I am particularly proud if:

moveTowards(targetX, targetY) {
  // Move the dot towards the target position
  let dirX = targetX - this.x;
  let dirY = targetY - this.y;
  let distance = sqrt(dirX * dirX + dirY * dirY);
  let speed = map(distance, 0, width, 0, 4);
  this.x += (dirX / distance) * speed;
  this.y += (dirY / distance) * speed;
}

While my original intention was to transform these grouped flowers into a beautiful “pookalam,” like arts, this is the outcome I managed to create.

Leave a Reply