By Yiming Li
During this project, I have to admit that programming was not easy for me. But the process of exploring solutions to problems is always fun, and in the following posts I’ll go through the process of making each piece one by one.
When drawing these line segments, I honestly didn’t think a lot about it. I just wanted to go ahead and write a piece of code that would make them move. But I didn’t have a clue about how to make them move. I was initially going to use the random() function, but it didn’t provide me with the desired effect, and all the lines started flashing randomly on their x-axis.
Then I came up with a great solution that also provided me with ideas for the next few lines of code. I used the sin() function that I mentioned in the previous lesson, and then I added the draw() function to update the drawing in real time so that the line segments could fluctuate dynamically. sin() was used to calculate the fluctuation effect, and the angle variable was used to control the speed of the fluctuation. This way I can adjust the amplitude and speed as needed to get the desired effect.
In the second piece of code, I wanted to add some interaction into it. I created a number of blobs and placed them evenly on the canvas. I used some of the methods I tried before to create an interactive effect. When the mouse pointer is close to a ball on the canvas, the ball avoids the mouse pointer. To achieve this effect, I could detect the distance between the mouse pointer and the blob when drawing the blob and adjust the position of the blob to avoid the mouse pointer based on the distance. I used the avoidRadius() function to define the range that the mouse pointer will avoid, and I can adjust this value as much as I want.
Finally, I’d like to add a little more interesting interaction into it. I added the randomSeed() function to set a random seed based on the position of each blob to ensure that each blob has a different colour. I then use the random() function to generate a random colour for each blob. This way, each blob will have a different colour, just like a rainbow.（There’s actually a little tidbit here, at first I wanted to use the noise() function to control the colour of the ball, but the limitations of the noise() function are obvious, the colours it generates are too random and uncontrollable, so I ended up using the former.）
In the last piece of code, I wanted to do something more artistic. Compared to the dynamics and interaction of the previous two, in this section I wanted to draw something nice looking in code. I wanted to use some lines to show the outline of the sunrise on the sea level. I used functions to add some dynamics to the lines, while three circles overlap each other, controlled by the mouse position. The two smaller circles within the larger circle to represent light can be moved around the frame at will. This piece is the simplest of my three, but the effect is my favourite.
Overall, I’m not particularly happy with my work this time around for me personally. I think this was due to the fact that the project was a little short for me, and I don’t have a very good foundation in programming, so I needed more time to digest what I learnt in class. I will focus on this next time and try to keep up with the class.