Separator Control Challenge

Tune a PID controller, survive realistic well-testing disturbances, and master separator level control through an interactive process simulation.

Comment

Inspiration

Industrial process control is usually taught through equations, static plots, and specialized simulation software. These tools are technically valuable, but they often make it difficult to develop an intuitive understanding of how a controller behaves when a real process is disturbed.

Separator Control Challenge grew directly from my doctoral work on measurement and control systems for oil-well operations. I already had experience modeling separators and industrial telemetry, but I wanted to turn one small part of that research into something visual, interactive, and understandable in a few minutes.

The idea became clearer when I realized that a PID loop is much easier to understand when you can see the liquid levels move, watch the valves react, and immediately observe the effect of a bad tuning decision.

I wanted to explore a simple question:

Could a technically meaningful industrial control problem become an engaging, visual, and playable web experience?

A three-phase test separator provides an ideal challenge. Operators must maintain both the total liquid level and the oil/water interface while inlet conditions, valve dynamics, instrumentation, and outlet capacity change over time.

What it does

Separator Control Challenge is an interactive browser-based process control game.

The player tunes two PID control loops:

  • Total liquid level controller: operates the oil outlet valve.
  • Oil/water interface controller: operates the water outlet valve.

The mission is to keep:

  • total liquid level near 50%;
  • oil/water interface near 20%;
  • the separator inside its safe operating envelope.

Players must survive deterministic process disturbances such as:

  • oil/water feed changes;
  • water-rich liquid slugs;
  • oil outlet restrictions;
  • slow water-dump actuators;
  • noisy interface sensors;
  • normal operating conditions.

The application provides:

  • an interactive 3D representation of the separator;
  • animated oil and water inventories;
  • visible inlet and outlet piping;
  • live valve positions;
  • PID tuning controls;
  • synchronized process trends;
  • alarms and trip conditions;
  • deterministic scenarios;
  • performance metrics;
  • a final score and engineering feedback.

The objective is not only to minimize process error. Players must also avoid oscillation, prolonged saturation, safety trips, and excessive valve movement.

How we built it

I defined the engineering problem, selected the physical simplifications, reviewed the process behavior, and validated whether the controller responses were technically meaningful. GPT-5.6 helped structure the product, refine the model and user experience, and prepare the demo narration. Codex acted as the main implementation agent, but every major engineering and product decision was reviewed through iterative testing and feedback.

Codex was used as the primary implementation agent to:

  • inspect engineering requirements;
  • create the standalone application;
  • implement the deterministic simulation engine;
  • build the PID controllers;
  • create the Three.js visualization;
  • develop the user interface;
  • add scenarios and scoring;
  • write tests;
  • troubleshoot behavior;
  • iterate from screenshots and engineering feedback.

The final application does not require an AI model at runtime. AI was used to build the product rather than being added as a decorative chatbot.

Physical model

The separator is represented using coupled liquid inventories and a reduced-order volume balance:

$$ \frac{dV}{dt} = Q_{in} - Q_{out} $$

The total liquid level and oil/water interface evolve according to the incoming oil and water phases and the corresponding outlet flows.

Each controller uses a PID law:

$$ u(t) = K_p e(t) + K_i \int e(t)\,dt + K_d \frac{de(t)}{dt} $$

The implementation also includes practical controller and actuator behavior:

  • output limits;
  • anti-windup;
  • derivative filtering;
  • actuator lag;
  • sensor noise;
  • valve saturation;
  • fixed-step numerical integration.

The simulation runs entirely client-side using a fixed time step and deterministic scenario seeds. This allows different controller configurations to be compared under repeatable conditions.

Architecture

The project uses:

  • Next.js
  • React
  • TypeScript
  • Three.js
  • React Three Fiber
  • React Three Drei
  • Recharts
  • Tailwind CSS
  • Web Workers
  • Vitest
  • Playwright

The simulation logic is separated from the user interface and 3D rendering. The browser Worker executes the process model independently from the React rendering cycle.

The project is standalone and has no runtime dependency on private engineering repositories, services, industrial data, or credentials.

Challenges we ran into

The main challenge was balancing physical credibility, gameplay, and visual impact.

A real three-phase separator can involve complex multiphase behavior, pressure dynamics, fluid properties, geometry, instrumentation, and safety systems. Implementing all of these effects would make the application difficult to understand and unsuitable for a short interactive challenge.

The model therefore had to be simplified without removing the behaviors that make controller tuning meaningful.

Other challenges included:

  • representing two coupled control loops without overwhelming new players;
  • making poor and effective PID tuning visibly different;
  • keeping the simulation stable and deterministic;
  • modeling actuator lag and controller saturation;
  • preventing integral windup;
  • creating disturbances that are difficult but still controllable;
  • synchronizing simulation data, charts, and the 3D scene;
  • showing liquid inventories clearly inside a transparent vessel;
  • keeping WebGL performance smooth in the browser;
  • designing a score that rewards safety, tracking, stability, and valve efficiency;
  • creating a futuristic interface without losing engineering readability.

AI-generated code also required continuous human review. Domain knowledge was essential for identifying unrealistic behavior, selecting meaningful simplifications, and deciding whether the resulting control response made engineering sense.

Accomplishments that we're proud of

I'm proud of transforming a specialized industrial process into an accessible and visually engaging experience.

The most important accomplishments are:

  • building a playable control challenge around a real engineering concept;
  • creating an animated 3D three-phase separator that reacts to simulation state;
  • implementing two coupled PID control loops;
  • running the physics deterministically in a browser Web Worker;
  • supporting six repeatable process scenarios;
  • modeling saturation, anti-windup, noise, filtering, and actuator lag;
  • combining 3D visualization with synchronized engineering trends;
  • evaluating both process error and actuator behavior;
  • creating a standalone application with no runtime AI or external backend;
  • using GPT-5.6 and Codex to move from domain knowledge to a polished product within the hackathon timeframe.

What we learned

I learned that effective AI-assisted development depends much more on context and validation than on code generation alone.

Codex could implement large parts of the application rapidly, but human engineering judgment remained necessary to determine:

  • which physical effects mattered;
  • which simplifications were acceptable;
  • whether the model behaved plausibly;
  • how each PID parameter should affect the process;
  • what constituted a fair challenge;
  • how performance should be evaluated;
  • how to communicate a complex system visually.

I also learned that process-control concepts become easier to understand when users can immediately observe cause and effect.

For example:

  • high proportional gain may produce rapid recovery but also oscillation;
  • excessive integral action can create overshoot and saturation;
  • low gain may be stable but too slow for major disturbances;
  • derivative action can improve damping but amplify measurement noise;
  • low process error does not necessarily mean low valve wear;
  • coupled loops cannot always be tuned independently.

Finally, the project showed how GPT-5.6 and Codex can help convert specialized technical knowledge into a polished, accessible web application without requiring AI inference in the final runtime.

What's next for Separator Control Challenge

Future development could include:

  • automatic tuning methods;
  • comparison with Ziegler–Nichols and Cohen–Coon tuning;
  • configurable separator geometry;
  • pressure-control and gas-outlet loops;
  • feedforward and cascade control;
  • custom disturbance editors;
  • additional valve and actuator failure modes;
  • leaderboards and shareable results;
  • classroom and instructor modes;
  • accessibility and mobile improvements;
  • comparison against neural or adaptive controllers;
  • validation against higher-fidelity process models;
  • additional industrial systems such as tanks, pumps, heaters, and choke control.

The longer-term goal is to create an interactive learning environment that connects process simulation, industrial control, intelligent supervision, and engineering education.

Disclaimer: Separator Control Challenge is a reduced-order educational simulation. It is not intended for field operations, equipment sizing, safety validation, or control of real industrial assets.

Built With

Share this project:

Updates