top of page
Planet Floating in space

Personality Planets

Personality Planets is a WebGL powered interactive storytelling experience built with p5.js, javascript, and CSS that invites users to explore three stylized 3D worlds. Each planet represents a team member’s personality through visual design and playful interaction, using a shared landing page as a navigational map that connects the individual worlds into one cohesive experience.

Project Description, My Role, and Outcome

Personality Planets was a final group project for Screen Based Interaction that challenged our team to move beyond our comfort zone and build an interactive narrative in 3D. We chose WebGL because we wanted to learn a new medium and explore how 3D forms could communicate identity and story without relying on text. The experience combines 3D objects with a 2D illustrated background, using interaction and exploration to reveal personality through design choices such as color, movement, composition, and atmosphere.


My role focused on both visual design and implementation. I designed all visual elements for the landing page in Illustrator and helped integrate them into the final site so the homepage functioned as a clear, inviting map for navigation. For my individual planet, I customized the shared base code to create a world that reflected my personality. I used a blue planet to represent water as adaptable and in motion, and designed an orbiting moon as a symbol of close relationships, represented through rainbow colors to show individuality and collective energy.


The technical outcome was a working WebGL project that successfully merged multiple scripts into a single experience with a shared entry point and three distinct interactive planets. Along the way, we learned that 3D development introduces complexity in debugging, coordination, and system consistency, especially when combining code from multiple people. We relied heavily on structured troubleshooting, console logging, clear code annotation, and selective AI support to interpret errors and accelerate learning with unfamiliar concepts.


Despite challenges with limited beginner documentation and the difficulty of integrating 3D assets, the team delivered an interactive final product that balanced individuality with cohesion. The final project strengthened my skills in interactive systems thinking, collaboration, debugging, and designing for discoverability and feedback in a spatial environment.

Project Gallery

bottom of page