Physics Salon is a virtual web-based salon where players can be a hairstylist for a day! Players can use the tools on the table to shampoo and rinse the character’s hair! The menu on the right allows you to customize the character’s appearance.
Project Summary: This project contains 3 main components: a table with hair tools, a character customizer menu, and the character. The table features 3 trays: a blank tray (placeholder for future tool), shampoo bottles, and a shower head. Players can click a tool and the cursor will change to reflect the tool that is selected. To reinforce which tool is currently active, a pink circle highlights the selected tray. When the shampoo is selected, the cursor becomes a soap bar and bubbles are added to the character. When the shower head is selected, the cursor becomes a shower head and water drops are fall on the character, removing any bubbles that present. If no tools are selected, the player can drag the character’s hair to see it react with the appropriate gravity and physics. On the right, there are a series of buttons that allow you to change the character’s appearance. This menu includes alternating between straight or curly hair, changing the hair color, or changing the skin color. With each interaction, the character’s facial expression reacts accordingly.
Inspiration: I am inspired by the Toca Hair Salon Game. It is an application available on the Apple App Store that allows players be a virtual hairstylist. You can choose which character you would like to style and play with their hair. You can choose to cut, brush, color or wash the character’s hair as well as pick out accessories for them to wear. I started working on this idea for my midterm project with my Pendulum Hair sketch. This project features a happy, girl character that users can control using their mouse. You can tilt her head left or right and her hair will swing according to the law of physics! As you move her head, her facial expression changes to react to the changing environment.
Process: All my images are sourced from FlatIcon and PngTree. I used Matter.js as my physics engine to help simplify the hair movement and speed up the development process. I also created 6 different classes to encapsulate the different logic needed for each feature to keep my code organized.
Audience/Context: My original audience is my little cousins! We love playing Toca Boca Salon together so I wanted to build a more personal game for us to share. However, in the future, I would like to broaden my audience to children 6+.
Code references: I used Dan Shiffman’s Matter.js Contraints Tutorial as a base for my Hair Segment Class. This video was super helpful and allowed me to better understand how constraints work.
- Fix the alignment of hair segments in “straight” hair mode. Right now, the rectangles do not line up properly and it looks wonky. I want to play with additional matter.js parameters to see if I can smooth it out.
- Remove mouse constraint when players are in wash or rinse mode. There is currently a bug that when you are adding soap or rinsing the user’s hair it is also triggers matter.js mouse constraint operation. This causes the hair underneath the bubbles to also move as you wash the hair. I think it could make sense that the hair jiggles underneath as you wash and rinse. However, I would like to do more user testing to see if this animation is intuitive to the user.
- Add additional tools such as a blowdryer. I left an empty tray on the table as a placeholder.
- Add sounds!
- Explore using additional matter.js chains and constraints to represent different hair textures!