Lotus Pond
Work: Coding (HTML, CSS, JS), Animation | Software Used: Visual Studio Code, Photoshop Adobe 2024
Introduction
Lotus Pond is an interactive webpage where users can hover over flowers and make them bloom instantly. This was part of a larger goal to build a website, but this particular project required applying user interaction in a creative format. I chose to focus on these flowers in particular because I appreciate their ability to thrive in challenging environments and adore their diverse colors and symbolic meanings in rebirth and resilience. To interact with this art piece yourself, feeling free to visit the following link:
https://sylviaslakva.com/projects/interaction/index.html
The following below will break down the process of making this experience.
Water
Since lotus flowers grow in muddied waters with lily pads, creating a similar background was my first priority. I decided early on to use a gradient aesthetic for various reasons, including creating a sense of depth and movement as well as an overall vibrancy. A blue to near black gradient helped create the depth I was looking for, and by animating the position of gradient I was able to create a subtle sense of time changing with the water constantly changing.
Lily Pads
I used Photoshop to quickly transform and edit an image to create the lily pad. I added a simple gradient and underlying shadow to create effect I was looking for. Then in Visual Studio Code I added the image and allowed a gloating animation to make the lily pads appear as though it were floating along the water surface. I adjusted the animation duration later on so the lily pads would float at difference paces.
The lily pad floating animation.
Before applying lily pad effects.
After apply lily pad effects.
Lotus Flower
Creating the flower was the hardest part of the process as I created the entire model and blooming animation through CSS. I first created a flower container that would hold all the petals, leaves, and root that make up the flower. I used a border radius to create the shape of the petals and then started spreading them out. Pinning the rotation and positioning of each one was a tedious process, but I eventually found a simpler piece of code that spread the petals out evenly:
transform: scale(1.2) rotate(var(--petal-rotate));
In order to create a subtle foreshortening effect while blooming, I had to id specific petals (ex. the middle one) to resize them and move them downwards. I did the same with the leaves, but added an additional command that flipped and rotated them to spread beneath the flower while blooming:
transform: scaleX(-1) rotate(170deg)translate(25px, 0px);
With the hard part out of the way, I added a root to emerge from the water and connect with the flower. I used a gradient to add the effect that root was fading into the depth of the pond.
The containers defining the petals and leaves.
A snippet of the hover animation.
Random Functions
I used random functions for a variety of effects in this assignment. The first was to randomly place the lotus flowers and lily pads whenever the webpage opened. Using JavaScript, I developed a function that created and assigned a new variable with a random position and parent flower container. I appended it's children containers (petals, leaves, root) later on to avoid having to fix any rotation or positioning issues. This allowed me to create many flowers at once with random positions. A similar code was used to create the same effect with the lily pads.
Another purpose of the random function was to assign each flower a different color. Lotus flowers can take on a variety of shapes and colors, which is what I wanted to capture in this assignment. I first created an array that contained a list of gradients based on this reference to the right. When the function was used, a random array number would be selected and it corresponding color would be apply to a newly formed flower.
The function that generates flowers and their randomly selected positions. The parent container is first created seperately before the children containers are attached.
The array containing the randomly assigned colors for the flowers.