PART 1

The Elevator Pitch

    “The Illuminated Time” is a project imitating the phototropism of the natural growing process of tree rings. It consists of many math calculations and tricky solutions. In this interactive project, users can generate a unique ring shape by moving around with their mouse and saving the image of their ring if they want.

Abstract

    If we carefully observe nature, we can easily find out some features of creatures that indicate some natural phenomena. It is the intelligence of nature formed by the long history of evolution. By observing, feeling, interpreting, and recreating, we humans could be the creators of beauty.

    Tree rings are a reflection of the time and climate of a district. Like any other plant or animal, it grows toward the sun’s position. The side that is closer to the sun grows faster than the side further from the sun. Besides, in a warm and humid season, the tree rings grow fast in a light color, and in a cold and dry season, they grow slowly in a dark color. These are the basic growing process.

    In my project, the mouse is imitating the movement of the sun, and the tree rings are growing toward the position of the mouse. Besides, to make it a generative and interactive artwork, I made it randomly generated with the noise position every time the user runs the sketch. 

    Furthermore, one thing I would encourage my users to do is to save the canvas once they generate a shape that they are satisfied with. As a generative art project, the shape is randomly generated every time the sketch runs. It’s hard to make two identical tree rings. Thus, saving the ring to the computer is a really interesting process.

My Images

• A pic of spiral tree rings that the mouse is moving in all fairly equal directions.

 

• A pic of tree rings that the mouse is not moving but stays in one position. Thus, the tree rings are growing towards the sun, just as what the tree rings in the real world look like.
• The process of generating new tree rings.

PART 2

1) Process: Design and Composition

    I like looking for inspiration from nature, and my inspiration comes from the tall tree in the central yard of our campus. 

    I like the romantic idea of the tree rings as an indication of the history of nature. So I decided to make the mouse an imitation of the sun position and generate a unique ring in my sketch.

    Besides, to make it more realistic and unique, I tried to generate the cracks in the tree rings randomly every time. However, as it is an animation and moving project with random doot positions, it is hard to make random pretty cracks grow simultaneously with the rings.

    Additionally, I tried to add a button to hide the sun when the user clicks the save your sun button so that they could attain an image with only the tree rings on it, so they could focus on the shape. However, as the sun is made as a class, and the background is drawn in the setup function, it did not work at last. 

2) Process: Technical 

 1. Shape of the rings

  I decided to use either arc shapes or lines to generate the tree rings initially. However, the shapes weren’t as satisfying as I thought they would be. Inspired by professor Marcela, told me to add the noise function to my sketch. And then realizing that we have been learning ways to create classes for repeating patterns, I tried to make the whole shape with dots instead of basic shapes. So each vertex consists of a fixed growing radius for each ring and an added value from the noise function.

 (Sorry I did not notice that we have to take screenshots when modifying the value of the noise function to make it prettier🥲)

2. How to change the radius according to the mouse

    It is another challenge to make the dots move according to my mouse. I tried working on the dist function to calculate the distance between the mouse and each vertex. However, it is probably because there are 2000 dots for each circle, and using the dist function was not working. 

    After spending a whole afternoon on how to make the dist function work, I gave up and try to use the translate instead. By calculating the distance and using the map function, I changed the central point by translating.

    Besides, to make it looks more smoothly when generating, I added acceleration to it when it changes. 

3. How to show the sun moving with the mouse when the background is called in the setup function

    When drawing the rings, I put the background in the setup function. However, when indicating the sun’s position, it needs only one sun showing on the computer each time. 

    I tried the create graphics at first, but when create a new graphic, it covered the lower canvas as well.

    Then I tried to use the arrays, mouseIsMoved, push, and splice. But it still didn’t work.

    Then I went to professor Marcela, she pointed out the reason why the splice function isn’t working. It is because the draw function makes the 2 tree rings draw every time it loops, so even by splicing the previous one, it would redraw and show it on the canvas. So by splicing and modifying the color, only one sun was successfully shown on the canvas.

3) Reflection and Future Development

    I guess it is a project that looks not that complicated but actually includes enormous math functions and tricky ideas. Every modification takes a long time to figure out how to make or even make it more visually satisfying.

    I was really satisfied with the ring part, as it was pretty visually nice. Besides, I like the concept of my project, as I like observing nature. However, there are still plenty of things that could be improved.

    First, the visual of the sun could be improved. The appearance of the sun looks not fit with the dots in the rings.

    Second, so far the classes are generated one by one and suddenly appear on the canvas, it could look better if the rings are continuously fading in. I tried to make the modifications, but it did not work.

    During the peer review, my classmates mentioned a lot about the sun’s appearance, so I tried to make it in a lighter color instead of dark brown. I was so glad that people show their preference for my project, as a lot of classmates showed their interest in talking about my inspirations and the way I made the ring class.

    During the presentation, I received feedback about slowing down the speed of the generation process. Initially, I was changing the speed according to the framerate, and it would make the sun move slowly. However, with professor Moon’s suggestion, I tried to use the module function, and it slows down the speed but has no impact on the speed of the sun. (Thanks for the suggestion :D)

• What you would like to implement further and how you would continue to explore in future work any of the ideas your project engaged.

To make my project more like a complete work, I would add more stages to the work, maybe a title or starting instructions. 

After coming up with ideas about nature, I found that I am still really interested in observing minor things such as the shape of tree rings. I would explore more about tiny changes in daily life in the future, for instance, emotions.