🌀 Studio-in-Flux

Part D → Computational Model

The computational model forms the backbone of the Studio-In-Flux simulation, translating spatial rules and agent behaviors into a dynamic, interactive environment. This section breaks down the simulation's architecture—from initialization and environment setup, through the main simulation loop and rendering, to user feedback and reset logic. Whether you're a designer, developer, or curious observer, you'll gain a clear understanding of how the studio's logic is encoded and visualized step by step.

Workflow Diagram

flowchart TD
    Start([Start])
    LoadUI([Load UI & Scripts])
    InitVars([Initialize Global Variables & UI Controls])
    SetupEnv([Setup Environment])
    CreateGrid([Create Grid])
    PlaceDesks([Place Desks])
    InitAgents([Initialize Agents])
    SetEntryExit([Set Entry/Exit Points])
    MainLoop([Main Simulation Loop])
    HandleInput([Handle User Input/Events])
    UpdateState([Update Simulation State])
    UpdateAgents([Update Agents])
    UpdateHeatmap([Update Heatmap])
    UpdateStats([Update Statistics & Scores])
    Render([Render/Display State])
    Draw([Draw Grid, Desks, Agents, Heatmap, Legends])
    UpdateUI([Update UI Elements])
    CheckEnd([Check for End Condition])
    PauseReset([Pause/Reset/Restart?])
    Reset([Reset Simulation])
    LoopOrEnd([Loop or End])

    Start --> LoadUI --> InitVars --> SetupEnv
    SetupEnv --> CreateGrid
    SetupEnv --> PlaceDesks
    SetupEnv --> InitAgents
    SetupEnv --> SetEntryExit
    SetupEnv --> MainLoop
    MainLoop --> HandleInput --> UpdateState
    UpdateState --> UpdateAgents
    UpdateState --> UpdateHeatmap
    UpdateState --> UpdateStats
    UpdateState --> Render
    Render --> Draw
    Render --> UpdateUI
    MainLoop --> CheckEnd
    CheckEnd -->|No| MainLoop
    CheckEnd -->|Yes| PauseReset
    PauseReset -->|Reset| Reset --> MainLoop
    PauseReset -->|End| LoopOrEnd
        

1. Initialization Phase

• Load UI: index.html loads, attaching scripts and styles.
• Global Variables Setup: Simulation parameters, grid, agents, desks, UI controls, statistics, and heatmap variables are initialized.
• Setup Functions:
  • setup(): Initializes the simulation environment, UI elements, and event listeners.
  • setDefaultEntryExit(), setDefaultEntry(), setDefaultExit(): Set up entry/exit points for agents.

2. Environment & Agent Preparation

• Grid Creation: 2D grid representing the studio is created.
• Desk Placement: placeDesksInDivisions(): Desks are placed according to user-selected arrangement and division.
• Operator (Agent) Initialization:
  • Agents are created with assigned desks and initial positions.
  • findValidSpawnPoint(): Determines valid spawn points for agents.

3. Main Simulation Loop

• Loop Control: Driven by animation frame or timer.
• User Input Handling: UI controls (sliders, buttons) and mouse events (mousePressed()) allow user to modify parameters, pause, reset, or interact with the simulation.
• Simulation State Update:
  • updateOperators(): Each agent senses the environment, computes the next move (using pathfinding like Dijkstra), and updates its state (position, interaction with desks, exit).
  • findNextMove(), findPathWithDijkstra(), isValidMove(): Pathfinding and movement logic.
  • updateHeatMap(): Tracks and updates the heatmap of agent movements.
  • calculateMoveCost(): Computes movement cost for pathfinding.
• Statistics Update:
  • updateStatistics(): Updates stats like desks interacted, operators completed, etc.
  • calculateLayoutScores(), calculateEfficiencyScore(), calculateSpaceUtilizationScore(), calculateComfortScore(): Computes layout and performance scores.

4. Rendering/Display

• Draw Functions:
  • draw(): Main rendering function, called each frame.
  • drawGrid(), drawDivisions(), drawDesks(), drawOperators(), drawEntryExitPoints(), drawHeatMap(), drawHeatMapLegend(), drawTrailLengthLegend(): Visualize the environment, agents, heatmap, and legends.
• UI Updates:
  • updateScoreDisplay(), updateSliderLimits(), updateValues(): Update UI elements and feedback.

5. Output & Feedback

• Display Results: Visual feedback, statistics, and scores are shown to the user.
• User Interaction: User can pause, reset, or modify the simulation and see immediate feedback.

6. Termination/Restart

• End Condition: Simulation can be paused, reset, or restarted by the user.
• Reset: resetSimulation(): Resets all variables and restarts the simulation.