I first created the blobs and used a function for creating organic-looking blobs in p5.js, a JavaScript library for creating graphics and animations. The blobsDisplayfunction loops through an array of Organic objects and calls the show method on each one. The blobsSetcolor function creates a new Organic object and adds it to the organic array. The Organicclass has several properties including radius, xpos, ypo, roughness, angle, and color, and a show method that h uses the p5.js fill, translate, and rotate functions to create a circle with a distorted radius and a color specified by the color property. The show method also uses the p5.js noise function to add randomness to the radius of the circle.
And then I created the line file, I originally want to add some complex lines on the blobs. But I then decided to change it into lines just for simplicity. The line display is used to draw lines on the screen by tracing the movement of a point in two circles. The first circle rotates around the center of the screen, while the second circle rotates around a point in the first circle. The color of the lines is determined by the sine and cosine of the frame count.
Moreover, I defined an array of words in the Chinese language. “空山新雨后天气晚来秋“means The weather comes late after the new rain on the empty mountain”. It is from a Chinese poem. several variables that are used to position the text on the screen. The text display() is used to draw the text on the screen. It sets the fill color of the text and then uses a for loop to iterate through the words in the array and display them on the screen at the specified positions. The where variable is used to control the vertical position of the text on the screen. The function also increases the value of where by 1 each time the function is called, and when it exceeds 400, the where variable is reset to 1 and the textPosition() function is called. This causes the text to appear to scroll down the screen.
And finally, I added a piece of music to the project and it works well with the poem and sets the mood for this project. The randomness of the shape of the blobs evolving and also the randoms of the lines when you click each time makes a complexity layer of the generative graphics and which is something I really want to explore more in the future. I also like the dragging effect of the words when they are moving down on the canvas. I did not make it on purpose, and then I decided not to use clear function when I can clear them all for every new loop. The reason is that I feel this works well with the breathing effect of the words(I changed the randomness of the alpha of the text color). I can feel the wetness of the air after the rain in the fall which responds to the lyrics of the poem.