shoteose Space

shoteose © Copyright 2025. All rights reserved.

Download Curriculum Vitae

Dynamic Physics Network Visualizer

(2026)

Interactive physics simulation built with a custom ECS architecture and p5.js.

JavaScriptp5.jsECS ArchitecturePhysics EngineSerializationWeb GraphicsCollaborative Project
Dynamic Physics Network Visualizer's Cover Image
RepositoryLive Demo

More Details

Developed as a collaborative 2-person project, this tool is a high-performance network visualizer. It allows users to create, link, and manipulate nodes in a physics-based environment where every element reacts dynamically to forces and collisions.

Technical Architecture: ECS (Entity-Component-System)

The project stands out by its modular architecture, separating data from logic:

  • Entities: Generic containers (IEntity) identified by IDs.
  • Components: Logic-less data containers for Transform, Physics, Render, and Collision.
  • Controllers/Systems: Decoupled logic handlers for Physics, Rendering, and User Interaction.

Key Features

  • Custom Physics Engine: Implements Spring Physics for links and Collision Resolution with repulsion forces to prevent node overlapping.
  • State Serialization: Features a robust system to save and load entire network configurations into .txt files.
  • Real-time Inspector: A Bootstrap-powered UI that allows live editing of node properties (size, color, friction) and global physics constants.
  • Intuitive Interaction: Multi-button mouse support for creating nodes (left-click) and establishing spring links (right-drag).

Collaborative Development

As a team of two, I contributed to the full stack of the application, from the core abstract classes (IComponent, IEntity) to the complex physics controllers and the responsive UI integration.

Project Gallery

Dynamic Physics Network Visualizer - Mídia 1
Dynamic Physics Network Visualizer - Mídia 2