Project Name: taste – a visualization of the taste of foods
My final project aims at visualizing the taste of the food using the color and movement of particles. The movements include collisions, flow fields, flocking systems, oscillations, etc. There are four foods in the project: strawberry, cola, sushi and cotton candy. The food appears in the form of particles. There is a red ball representing the taste bud, which goes spirally around the mouse. When the red ball crashes into the food, the particles that form the food fall apart and generate movements.
The inspiration for this project comes from a scene in Ratatouille. When the little rat is tasting foods, there are particles in different colors, shapes, and movements around him that visualize its feelings when it tastes the food.
In my project, I choose four foods that have distinct features and tastes, and I decided to use different kinds of methods to form movements instead of merely focusing on one or two. The reason is that I would like to try covering what we’ve learned this semester.
During my concept presentation, I was not sure whether I should use 3D WebGL to create taste visualization or not. Since I was very much impressed by the movement created by flow fields like what I’ve done in one of my weekly assignment, I really wanted to move this into 3D:
Therefore I made a 3D flow field. I met some problems in the angle on the z-direction, and I managed to solve it. My final Perlin noise 3D flow field looks like this:
However, rather than Perlin noise flow field, I wanted more regular movements controlled by angle changes. Then I found that it’s too hard to control a 3D flow field, and I decided to make my project 2D.
1. the Start Page:
I’ve always wanted to create this kind of particle-packing texts, and make them interact with the mouse. I searched for it online, and I found it in one of Dan Shiffman’s coding challenges. I learned that there is a function called “font.textToPoints()” that can get the points forming the text. There are two kinds of motions applying to the text points. One is asking them to arrive their original place in the text, the other is asking them to flee from the ball position once the distance between them is smaller than a certain value. I made the transition from the start page to the game page in this way: once the player clicks the text, the range and force of the motion that asks the text points to flee from the mouse will be very big. Once every point gets out of the screen, the stage will switch to the game stage.
2. “Particlized” Foods
There is another coding challenge of Dan Shiffman’s that teaches how to make circle-packing pictures. I created a circle packing strawberry using that, but circle-packing is not actually what I want. Instead of having big and small particles filling the picture, I would like to have regular placement and particles of the same size. Therefore I learned the function “image.loadPixels()” which reads image into pixels, write my own code that creates particles with an interval on the image and apply the color of the image pixel at that exact position to the particle. At first, a problem is that when there’s no pixel on the image, the color is automatically set to black (0, 0, 0). I solved this problem by saying that only create particles when the color of the pixel is not black.
3. Sensing Different Colors
Since I would like to apply different kinds of movements to different parts of the foods, first I have to differentiate them by detecting the color of them. When I create one set of particles of a certain food, I use a function to detect the particles’ RGB values and decide their “colstate” (color state). Afterwards, I just have particles in different color states execute different motions.
4. Different Movements
In my projects, the particles of all the foods share one same class. I have many functions in this class, and each time I call different ones. One tricky thing inside one set of movements of one food is the transition from one movement to another. Take the strawberry for example. When the red ball and the strawberry collide, first, the movement is the collision between every particle of the strawberry. Afterwards, the particles follow the flow fields instead. My way to detect where to change is to use a boolean to represent whether every particle has experienced the collision. When the collision part is done, that boolean value changes.
There are some brief descriptions of all the movements I have:
Strawberry: Collision + Flow fields. In the flow field part, there are actually five flow fields that have different centers. The angle changes according to the frame count, creating some organic feelings.
Cola: Avoid + Oscillation. Here one tricky thing is that I have to have an additional array of the grey particles that form the bottle of cola. When the red ball crash into the cola, the red particles will perform the oscillation while avoid running into the grey particles. Only in this way, the “coming out of the bottle” effect can be realized. I used “lerpColor()” function here to change the color of the particles naturally. The visual is to imitate this picture:
Sushi: Flocking + Seeking. Some particles of the sushi expand and change into fishes, then perform a flocking movement, seeking the red ball. One tricky thing was to apply the same color of the particle to the fish. Since the fish is an image, I have to use the “tint()” function. I changed the original color to the fish image to white, and apply the particle color to the corresponding fish image.
Cotton Candy: Blobby + Attraction + Flocking. For this one, I wanted to simulate the feeling when the cotton candy melts in the mouth. Therefore, I used the blobby effect we have learned in class.
5. Putting Things Together
After making each part complete, I put the foods together. I want the user to click on the GUI bar to decide which food they would see, therefore one challenge for me was how to erase particles of each food properly. Mainly, I changed their colors to black to create a fading feeling and then splice them.
At first, the red ball in my project is a bouncing ball which the user cannot control. After hearing Moon’s suggestion, I changed it to a ball that is attracted to the mouse and moves in a spiral way. This way, the ball is more organic and consistent with other elements. Also, the user doesn’t have to wait for the ball to crash into the food.
6. the Sound Part
The sound part was a big problem for this project. I did not consider much when I finished making the strawberry movement. I just added a matching song to it, and the song starts and ends with the movement. However, I realized that I have to use songs of the same beat on different foods. I used some online tool to detect the rhythm of that strawberry song and found songs of the same beat.
The final result of this project is somewhat deviated from what I wanted it to be, from a cool 3D effect to a cartoonish 2D one. However, I think I learned a lot from this experience and the effect of each food properly conveys my feeling of tasting them. I’m willing to learn OF a bit to put this into 3D in the future.