3D interactive web applicationfull-stack Node.js development
web-based multi-user collaboration platform
Multi-Dimensional
Forum
Multi-Dimensional Forum is an innovative platform redefining online forums by transitioning from traditional 2D interfaces to an immersive 3D virtual environment. The platform allows users to gather in a virtual gallery to interact, post comments, and engage in real-time conversation s while maintaining the core functionalities of traditional forums. This experimental project explores how spatial dynamics in a multi-dimensional setting influence user behavior, communication patterns, and the overall digital experience.
Tools vscode, Maya, Digital Ocean, Cyberduck
Tech node.js, p5js, p5livemedia, express, multer, nedb, bcrypt, https
Timeline 2022 Oct 1st - 2022 Oct 30th
Scroll to discover
Inspiration
The idea for MultiDim Forum stems from the limitations of traditional online forums, which are confined to 2D, text-based information boxes. Even in VR/AR environments, most platforms replicate the 2D experience through simulated interfaces, failing to fully explore the possibilities of spatial interaction. This project was inspired by a desire to break free from these constraints and reimagine how people communicate and share information in a digital space. By transforming forums into a three-dimensional environment, Multi-Dimensional Forum aims to create a space where users can gather, interact, and exchange ideas in a way that leverages the immersive potential of 3D technology. At its core, this work explores how abandoning linear , flat information structures can lead to new forms of behavior and experience. It invites users to think differently about how they engage with information and one another, redefining the way we perceive digital communication.
Content Design
Development Process Documentation - Stage 1
Modular Environment Modeling in Maya
In this step, I utilized Maya to model an exhibition room that serves as the project's environment. The model consists of three distinct components: the start, module, and end. Each component follows a consistent structural design, enabling seamless integration. The central module serves as the primary carrier for displayed information, with its width precisely set to 19 units. This design choice allows for efficient scalability, as adding a new module requires shifting all existing modules and the end section by exactly 19 units, maintaining alignment and ensuring modular flexibility in the exhibition layout.
Interactive Livestreaming and Camera Control
At this stage, I developed the interactive livestreaming and game-like camera control system using the p5LiveMedia library to enable real-time media streaming and synchronization of user positions and orientations. The cameraMotion function handles keyboard inputs to control camera movement along the x and z axes, while keyReleased ensures the movement stops smoothly when keys are released. The mouseMoved function enables intuitive perspective control, allowing users to pan and tilt the camera dynamically based on mouse movement for an engaging, game-like experience.
The livestreaming functionality is managed through gotLocalMediaStream and gotStream, which set up local and remote media streams. The sharePosition function sends the camera's position and orientation to other participants in real-time, and gotData processes incoming data to update remote users' positions and orientations. This system ensures synchronized interaction and smooth integration of livestreaming and user control, referencing example code from the p5LiveMedia library and adapting it to the project's requirements.
The livestreaming functionality is managed through gotLocalMediaStream and gotStream, which set up local and remote media streams. The sharePosition function sends the camera's position and orientation to other participants in real-time, and gotData processes incoming data to update remote users' positions and orientations. This system ensures synchronized interaction and smooth integration of livestreaming and user control, referencing example code from the p5LiveMedia library and adapting it to the project's requirements.
Avatar Movement and Orientation System
At this stage of the project, I developed the Avatar system to represent each user's movement and orientation in the 3D world. The Friend class initializes Avatars with unique IDs, default positions, and textures for rendering. The updatePos method updates the Avatar's world position based on input data, while the lookAt method calculates its heading to face a specified target using vector math. The show method renders the Avatar in 3D space with transformations for position, orientation, and texture, creating a dynamic and interactive representation. This step establishes the foundation for real-time user visualization in the broader system.
User and Environment Collision Simulation
In this step, I developed the collision system to handle interactions between users and the environment. The system calculates distances along the x and z axes to determine when a user enters a defined reaction area. For collisions between users, the method prevents overlapping by adjusting a user's position along one axis if they approach another user's space too closely. This approach aligns with the cubic design of the avatars and the grid-based structure of the environment, eliminating the need for a circular collision area.
For collisions between users and the environment, I defined a rectangular reaction area using four boundary lines. When a user enters this area, the system triggers a function to restrict further movement into the environment. To accommodate the dynamic nature of the environment's layout, I introduced the variable endPos, which updates based on the number of posts to track the environment's shifting boundary.
Problem Encountered: The collision function occasionally failed to trigger when users moved quickly into the reaction area, causing them to bypass the boundary without activating the reaction.
Solution: I introduced a secureDistance variable, set to twice the user's movement speed. This adjustment accounts for diagonal movement (simultaneous motion in two directions) and ensures reliable collision detection by preventing the user from crossing the boundary without triggering a response. This combined system effectively handles user-to-user and user-to-environment collisions, maintaining spatial boundaries and smooth interaction within the dynamic virtual environment.
Problem Encountered: The collision function occasionally failed to trigger when users moved quickly into the reaction area, causing them to bypass the boundary without activating the reaction.
Solution: I introduced a secureDistance variable, set to twice the user's movement speed. This adjustment accounts for diagonal movement (simultaneous motion in two directions) and ensures reliable collision detection by preventing the user from crossing the boundary without triggering a response. This combined system effectively handles user-to-user and user-to-environment collisions, maintaining spatial boundaries and smooth interaction within the dynamic virtual environment.
Text Publish Function for User Updates
In this step, I implemented a text publish function that enables users to share updates in real-time with everyone in the room. The setup includes a textarea and a button in the index.html file. These elements are connected to an onclick event in sketch.js, which is triggered when a user submits their text.
Upon submission, the text input is captured and sent to an online WebSocket server provided by ParametricCamp (referencing the video: WebSockets and p5.js by ParametricCamp). The WebSocket server relays this data to all connected users in the room. On receiving the data, the system processes it through the onmessage handler, where it is parsed and added to the comments array. This array stores all user-submitted posts and dynamically updates the shared environment with the new content.
Upon submission, the text input is captured and sent to an online WebSocket server provided by ParametricCamp (referencing the video: WebSockets and p5.js by ParametricCamp). The WebSocket server relays this data to all connected users in the room. On receiving the data, the system processes it through the onmessage handler, where it is parsed and added to the comments array. This array stores all user-submitted posts and dynamically updates the shared environment with the new content.
Dynamic Environment Extension Based on User Posts
In this step, I developed a system to dynamically extend the environment based on the number of user posts. The loadScene function handles real-time updates by iterating through the comments array, adding a modular building section for each post and repositioning the end section to align with the extended structure. User-submitted text is rendered dynamically, with translations, rotations, and scaling applied to ensure proper positioning and size within the scene. This approach creates a responsive and scalable environment that evolves seamlessly with user interactions.
Stage 1 Showcase
Development Process Documentation - Stage 2
In this stage, I integrated my p5.js sketch into an existing project, Dream Diary, which I built with Node.js. Dream Diary features an account system for user authentication and an upload system for storing user posts in a database. The integration aimed to combine the interactive p5.js environment with the robust backend functionality of Dream Diary.Problems Encountered and Solutions:1. p5 Canvas Not ShowingProblem: The canvas failed to display due to font incompatibility.
Solution: Replaced .ttf fonts with .otf format, ensuring compatibility with the p5.js canvas.2. Reading Data from the Database in the p5 CanvasProblem: Direct database access in the p5.js sketch was causing issues.
Solution: Rendered the database data as DOM elements on the client page (a 2D record section) and had sketch.js read the data from the DOM. If the 3D forum and 2D record are on separate pages, data can be read from a .txt file exported from the database.3. Client Side Receiving Data as NodeListProblem: Strings from the database were being received as a NodeList, making it difficult to parse.
Solution: Used document.getElementsByClassName('comments') in the Chrome console to identify the correct structure and access the strings.4. Posts Not Showing Line BreaksProblem: Text posts lacked proper line breaks.
Solution: Replaced '\r\n' with <br> to render line breaks correctly in the DOM.5. Order of Comments on Page RefreshProblem: Comments displayed from oldest to newest after refreshing the page.
Solution: Changed the drawing order in the for loop and used .unshift to insert new comments at the beginning of the array instead of .push.6. Sending Data to the Database Without Page RedirectionProblem: Form submissions redirected the page after sending data to the database.
Solution: Sent an empty content response to the client side to prevent redirection and allow seamless post submissions.
Solution: Replaced .ttf fonts with .otf format, ensuring compatibility with the p5.js canvas.2. Reading Data from the Database in the p5 CanvasProblem: Direct database access in the p5.js sketch was causing issues.
Solution: Rendered the database data as DOM elements on the client page (a 2D record section) and had sketch.js read the data from the DOM. If the 3D forum and 2D record are on separate pages, data can be read from a .txt file exported from the database.3. Client Side Receiving Data as NodeListProblem: Strings from the database were being received as a NodeList, making it difficult to parse.
Solution: Used document.getElementsByClassName('comments') in the Chrome console to identify the correct structure and access the strings.4. Posts Not Showing Line BreaksProblem: Text posts lacked proper line breaks.
Solution: Replaced '\r\n' with <br> to render line breaks correctly in the DOM.5. Order of Comments on Page RefreshProblem: Comments displayed from oldest to newest after refreshing the page.
Solution: Changed the drawing order in the for loop and used .unshift to insert new comments at the beginning of the array instead of .push.6. Sending Data to the Database Without Page RedirectionProblem: Form submissions redirected the page after sending data to the database.
Solution: Sent an empty content response to the client side to prevent redirection and allow seamless post submissions.
Final Showcase
Entire Flow Demo Video
Experience Demo Video
