J Planet: A Place You Seize and Let It Go
by Aislynn Li
2021
J planet is a planet with a unique character. When you first meet it, it will generate random colors and shapes for you. It warmly welcomes any particles in the universe. Any particle that its little collector touches, it is willing to accept them into its land. Once a particle belongs to J planet, you are welcome to interact with it. Although J planet is very friendly, it has a limited capacity to bear. Therefore, too many particles can drive the J planet crazy and even make it flip out. Don’t be scared! Once the excess particles are sent away, it will be calm again. There is also a flower called “SL”, who initially grows as a bud suspended in the universe. Interact with it, you may see the blossom of both the SL Flower itself and its friendship with J planet. Can you find a way to make their friendship stay forever? J planet is a planet that belongs to the fantasy world. But at the same time, it is like us in life. Always welcoming and trying new things, and always being overwhelmed by too many chores. There are always interesting people we meet, who we had a good conversation with, leave without even knowing it. However, I still hope that you can relax when you are playing with J planet. “SL Flower” is the very symbol of “seize or let it go”. Seize what we have and let go of what left us.
ELEVATOR PITCH
J planet is a fantasy planet where you can interact with particles and fictional flowers in the universe. In the process of this interaction, J planet can relieve users’ stress and inspire them to reflect on the gains and losses in their lives.
Images
The Beginning
The Blossoming
Crazy J Planet
Reflection：
Design and Composition
I was inspired by the Little Prince. At the beginning of the Little Prince, the little prince goes to all kinds of different planets, each with its own form and rules. So I also wanted to create a planet that has its own mode of operation.
The first thing I thought of was that the inhabitant could take things from the universe, and the things the inhabitant got would always belong to the planet. In order to have a barrier, I designed a limit: the planet would go crazy after a certain amount of things was reached, so the mechanism of throwing things also appeared.
Then, I felt that only one user on the planet was too monotonous, and I designed a flower and an animal. But due to time constraints and the fact that the planet was already complex enough, the animal was not made in the end.
The first thing I changed when it came to actually make was the appearance of the planet. At first, I designed it to be round, but I thought it would be more interesting if it was polygonal and could generate different polygons each time it was started, that the users would feel more like the planet only belonged to them. So the planet becomes a random polygon at last.
The second change was that there should be all kinds of things floating in the universe. But that would have taken a lot of time to draw. And during the user test, everyone thought that the round white ball was very cute like snowflakes stuck on the planet, so I let the floating objects stay round.
The final way of interacting with the flower was also different from the initial idea. The original idea of using the leaves to build a bridge to let the fruit fall is a bit too complicated, the main reason is that the leaves are irregular, it is difficult to find the coordinates of each point on the leaves, so it is difficult to determine whether the leaves build a bridge and whether the leaves received the fruit. So I removed the part where the leaves can be moved and kept the design where the flowers can open, change the color of the planet, and leave.
The last change was on the day of the proposal presentation, Samantha Cui suggested that I use a collector to collect floats instead of just clicking with the mouse, which would be more challenging and therefore more meaningful. So I made changes to this collection mechanism.
Technical
The first problem I faced was that I wanted to make the collector speed up after pressing a certain key. But when I did it myself, not only did the acceleration process become slower and slower after pressing the key several times, but the collector would jump back after not pressing the key. I asked Samantha Cui for help and found out that the parameter after each key press that I had been adding was always acceleration instead of speed. Once I changed it to add the variable, that is, increasing the velocity, I was able to solve the problem.
Here’s my code before:
let a = frameCount * this.speed * this.randomdirections * -1 * 1.3 * this.control;
rotate(a);
Here’s my code after:
let a = frameCount * this.speed * this.randomdirections * -1 * 1.3 + this.control;
The second difficulty is that the “collection” process or the process of throwing things has a “choice” step, so I need to determine whether the things are chosen, and this decision has two parts. One part is the distance between the mouse or collector and the object, and the other part is the control variable to complete the action step by step.
In the first part, I had a problem, because the collector keeps rotating and the object rotates when it is attached to the planet, and I didn’t know how to calculate the real-time coordinates of the rotating object. By asking professor Haider, I learned how to calculate the coordinates of the rotating object by sin() and cos() and applied them to my coordinate calculation.
Here’s my code:
In the second part, I encountered many bugs because of the imperfection of the decision logic, one of which I could not solve by myself was that when my mouse had already selected a “particle”, and it was close enough to other particles, it also met all the decision conditions and therefore would also select other particles. So I turned to professor Haider. His solution was to add a variable “selectedItem” and make this variable work only when no particle is selected or when this particle is selected, so as to avoid selecting many particles at once. (I also added a decision case for the first particle).
Here’s my code:
There are three things I learned from this solution. First, when a bug occurs, I can find the variable that went wrong by going through the console.log one by one. Second, when there is a new event that needs to be determined, I don’t necessarily have to use an existing variable to determine it, I can just create a variable that is specifically used to determine that event. Finally, I can use a variable equal to “this” in the class to indicate that it is only for this “cookie”.
The problem that remains so far is that when I pass the first particle, it is selected when I click the mouse again, even if my mouse is not over it. This means that there is still a loophole that I did not find, but it is not corrected because of limited time. A similar problem is the determination of blossoming. Even if my mouse is not on the flower, but I have passed by it before, the flower will open when I click the mouse again. And the professor’s solution was to make sure that the distance was close enough again when the blossoming process was determined, though the same solution did not successfully solve the particle problem.
Here’s my code:
In both cases, I realized that when there are many variables, if I named the variables haphazardly, it would be less easy for me and the person helping me to understand what the previous variables did during the correction or improvement process. So I should try to name the variable in a more readable way.
The last problem is that when I want the flowers to grow on the planet, the flowers always jump a little before they follow the planet around. Still thanks to professor Haider, who created the variable “this.startFrameCount” to indicate that the flower starts to rotate so that the flower can rotate from the starting point.
Here’s my code:
Reflection and Future Development
I didn’t think about the implementation when I envisioned my project, so I had to compromise again and again when I made it. The part I am most satisfied with is the capturing and throwing particles part, although there are some bugs, it almost achieves the effect I want. I am also very satisfied with the concept I wanted to convey in the end. The concept is almost perfected while making, which lets the J planet has a deeper meaning.
I was not very satisfied with some parts. Firstly, there is no interaction between the particles and the flower. Feiluan also gave me the suggestion to use key to control whether the flower is left behind is not obvious to the users. I then tried to let the user feed the particles to the flower, and then the flower could stay after eating enough particles. But it didn’t happen because of limited time. Another idea I had was that although the planet would “explode” at the end if the flower was still there, the planet would recover when the flower stayed on the planet. But after trying, I found that the conditions were more complex and varied than I thought, so I gave up for now.
During user testing, I found that users could only accomplish almost 50% or less of the functionality I designed. And to my surprise, most of them could not find that users could not control the particles that were not on the planet, i.e. most of them did not find that the particles were divided into two groups. Another thing that surprised me was that users would be more inclined to throw the particles to the outside of the planet rather than the inside of the planet as I designed it. This is actually more logical, the process of throwing the particles must be to the outside rather than the inside. I was amazed that I would ignore this in my design.
After the presentation, most of the students also suggested I add introductions to make the users understand more how to play with my project. However, professor Moon’s point was that if I add an introduction, it might ruin the atmosphere I’m creating now, and it would also ruin the exploring experience. This has always been my concern. I actually had two hints at the beginning and eventually deleted them both. I’m thinking about whether I can use a less blunt way of telling my users how to play in future works.
He also encouraged me to further refine my backstory, and I consider that perhaps I can imply the playing way through the backstory. For example, I can mention in the backstory that we can manipulate the particles on the planet so that users know that only the particles on the planet are manipulable. But hiding the action in the backstory wouldn’t ruin the user’s sense of exploration.