Refletion of CCLab Project A: “LIFE: From small To Big”

Project Link: https://editor.p5js.org/AndyHyprillion/full/3ToscM6Cc

Design & Composition

When the first time I saw the project requirement, the first thing that came to my mind is cell division. I’ve developed a strong interest in biology since junior high school. Cell division is one of my unfinished experiments when I was leading the biology club at that time. We failed to observe the whole procedure of cells. This is the very first inspiration for this project. 

At the very beginning of the project, I want to use the code to present the detailed procedure of the cell division. However, I’ve tried many ways but all of them cannot come out with a satisfactory effect that can express the procedure of cell division.

In the process of advancing the project, with the guidance of Professor Leon, I add more movement and functions to the program design. At this moment, my majority focus has shifted from cell division to the life movement of the cells. 

When coding the project, many designs have changed and are totally different from the original version. When drawing the cells, I was intended to add more organelle to the cells. However, the final visual effect with these organelles in the cells is messy and complicated. So I deleted all the stuff in the cells except the core.

Another problem that confused me for a time is how to design the food for the cell. I’ve thought about the small cells, proteins, and oxygen but finally, I choose DNA as my final design. However, It still confuses a lot of test users.

For the background of the project, I use the gradient light of a certain blue. However, I find it can be more interactive afterward, so I made the hue depending on the mouse position.

To make the user easier to interact with my project, the user interface has been well-designed. The original code for this UI design has been applied to my 2nd mini project. I just make some small changes to the appearance of the icon and copy the code to this project. 

Technical

When dealing with the project, many technical issues have appeared. Some of them have been solved successfully while some of them haven’t.

To have the gradient background, I draw a lot of lines as the background. The light value of the lines is related to the x value which means every one pixel the color would be quite different. This creates a fluent and smooth gradient effect.

When coding the UI, I want to let the text under the operating bar as simple as possible to ensure the aesthetic degree. But when the mouse is on another icon that is different from the current one, the text will overlap each other. To solve that problem, I set a new variable to check if the mouse is on the icons. If true, the text which indicates the current mode will disappear to make room for the choosing mode.

When the cells have no target, they will keep moving around a certain point. To achieve this effect, I use sin() and cos() to control the different axes. To avoid making the movement exactly a circle, I generate the random values as their start point which will make the movement totally random and different from each other. And so do the DNA. The x-axis value is related to the sin value so it can flow on the screen.

The most essential problem I was facing is cell division. It’s actually quite simple to make this effect. My solution to this is that when the user clicks on a cell to divide, the cell itself will vanish and create other two new cells.

When making the feeding function, I was facing the hardest problem that I’ve ever met in this program. Firstly, I need to let the cells know which DNA they should chase. To achieve this goal, I make every cell calculate the distance between themselves and DNAs in each frame and set the nearest DNA as their target. This procedure is quite complicated since I need to make comparisons between a tremendous amount of values.  My solution to this is to make a comparison between two values and remains the smaller one before the third value gets into the array.

It’s quite useful and successfully helps me to find out the nearest distance value. However, I found that I don’t need the distance value. Instead, the most critical value is the exact position of the target which means the DNA number is the most needed value. But without the distance value, I can’t make the comparison. So I pack these two values into an array and put all these “packs” into an array. In this case, I can know which one is the nearest DNA and can easily get to know the exact position.

After the cells get the food, where are they going next is also very important. If they just stay where they are, the whole canvas will remain mixed and disorderly. So when there’s no food on the canvas, they are assigned to an origin target which is the position where they were born. In this case, they will return to the place they should be and won’t overlap each other.

 

Also in the feeding function, the speed of the cell is another point that had been haunting my mind for a long time. At first, I set the speed of the cells directly related to the distance of the target. The closer they are, the slower the cell will be. However, the visual effect is terrible: once there’s food on the screen, the cells will become very crowded and overlap each other. I’ve tried using the map function to make it faster when the distance is shorter. However, a new problem appeared that was the cell will reach the target value on one axis before another. This means that the cell will firstly go a 45-degree route and then go straight ahead towards the target.

I can’t figure out a solution so I ask professor Leon for help (thanks a million!). Leon taught me how to apply the vector to my project. Although the procedure is quite complicated since I need to rewrite many codes to make it adaptive to the vector, the final effect is perfect! When the speed becomes the overall speed of the cell but not the separate speed for the X and Y axis, the problems are all solved.

 

Counting the time is another problem that I’ve faced during the coding process. To solve this problem, I set an initial timer that indicates the life length of the cell. It decreases by 1 per frame. After the cell gets the food, the timer increases a certain value. When the timer reaches a specific value, it will drive the cell to divide.

 

Another problem is related to the console.log function. I was trying to use the console.log to express the current situation of the cells. However, if use the lifetime as the condition, they will keep returning the text in the console. It’s troublesome for any computer if there are 100 cells and more. To solve this problem, I introduced a new variable that add one per frame. Only if the value is larger than 120, the console.log code can be executed. When the cell sends a console.log message, the variable will return to zero. This lets the highest frequency come to 2s.

speak() {
if (this.speakCheck > 120) {
  if (this.count > 5400) {
  this.speakFull = true;
  this.speakCheck = 0;
} else if (this.count <= 300) {
  this.speakDie = true;
  this.speakCheck = 0;
} else if (this.count <= 900) {
  this.speakHungry = true;
  this.speakCheck = 0;
}
}

this.speakCheck++;
if (this.speakFull == true) {
  console.log("I'm Full.");
  this.speakFull = false;
} else if (this.speakDie == true) {
  console.log("I'm gonna Dieeeeee!");
  this.speakDie = false;
} else if (this.speakHungry == true) {
  console.log("I'm Hungry!");
  this.speakHungry = false;
}
}

 

Reflection & Future Development

In this project, I’ve learned a lot of new things. Firstly is the vector. This is the most critical method that helps my project to have this kind of nice visual effect. In addition, when coding this project, I experienced a rich process of logical thinking. It’s really interesting to identify these problems and solve them with my code. It’s quite like finishing a puzzle, at first you will find the procedure is tough and have no clue. However, along with the process, you will find that the path to success is clearer and clearer. Finally, when you solve it successfully, a sense of joy and accomplishment will fill your brain and let you experience a sense of self-satisfaction.

Also, in this project, I’m trying to connect a system(nature of cells) to another system(current society). I’ve done this process a lot in my photography works but it’s the very first time to accomplish it in my coding project. Compared with photography, coding is quite more unrestrained since I can code whatever I want.

After the user testing and presentation, I’ve made many changes. I expanded the variation range of the background colors since many users said that it could be better if there was more color on the background. After knowing the noCursor() function in p5, I add this to my project. This can let the whole project more elaborate.

 

Undeniable, the project still has many deficiencies and regrets. The most significant is that I didn’t meet my original target which is presenting the process of cell division.  Leon also let me try to add the easing speed into my project, but finally, I didn’t make it. In addition, I can add more to the operating perspective and make the program more complicated and fun to play with. Another important problem that needs to be solved in the near future is that the performance of this project is not quite good. Maybe I can utilize the web workers to call multi-core performance. Also, some objects and UI shouldn’t be drawn in every frame. Hope in the near future, I can be able to deal with these problems.

Special Thanks

Appreciate the guidance from Leon on the code for changing speed.

Appreciate the inspiration from Thomas when user testing.