Show HN: Vanilla JavaScript refinery simulator built to explain job to my kids

Introduction to a Unique Project

As a developer and tech enthusiast, I love seeing projects that combine different fields of expertise to create something truly unique. Recently, I came across a project that caught my attention - a vanilla JavaScript refinery simulator built by a chemical engineer to explain their job to their kids. This project showcases not only the engineer's expertise in their field but also their willingness to learn and adapt to new technologies.

Why this matters

The project's creator, a chemical engineer, faced a common problem - explaining complex concepts to people outside their industry. Instead of relying on simple analogies or oversimplifying the science, they decided to build an interactive simulator that visualizes the concepts and chemistry of a refinery. This approach allows for a more engaging and educational experience, making it easier for others to understand the intricacies of the field.

Features of the Simulator

The simulator is a 5-minute browser game that walks the player through various phases of the refining process, including:

• Electrostatic desalting
• Fractional distillation
• Hydrotreating
• Catalytic cracking
• Gasoline blending (with specific Octane and RVP specs)

The game is built using vanilla HTML, CSS, and JavaScript, with the help of LLMs (Claude, Copilot, Gemini) and the Matter.js library for 2D physics minigames.

Technical Takeaways

As a non-developer, the project's creator faced several technical challenges while building the simulator. Some key takeaways from their experience include:

• Managing LLM workflow: To avoid issues with large script files, they forced the LLMs to act like patch files, outputting specific blocks of code to replace existing logic.
• Mapping physics to CSS: To get the rigid body physics to respect dynamic, responsive DOM boundaries, they used an elliptical boundary equation to handle resizing between different screen sizes.
• Mobile browser events: They had to implement custom event listener management and CSS to handle iOS Safari's default behaviors, such as double-tap zoom and swipe-to-scroll.
• State management: Without using frameworks like React, they relied on a global state object and built strict teardown functions to prevent memory leaks and ensure a smooth transition between game phases.

Code Snippet

To give you an idea of the complexity involved, here's a simplified example of how the elliptical boundary equation might be implemented:

// Calculate the elliptical boundary
function calculateBoundary(x, y, rx, ry) {
  const dx = x - rx;
  const dy = y - ry;
  return (dx * dx) / (rx * rx) + (dy * dy) / (ry * ry) > 1;
}

Who is this for?

This project is perfect for:

• Chemical engineers looking for a unique way to explain their work to others
• Educators seeking interactive tools to teach complex concepts
• Developers interested in building interactive simulations using vanilla JavaScript and Matter.js
• Anyone curious about the refining process and how it works

Conclusion

The refinery simulator is an impressive project that showcases the creator's expertise in chemical engineering and their willingness to learn and adapt to new technologies. The project's unique approach to explaining complex concepts makes it an excellent resource for education and outreach. I'd love to hear from you - have you worked on a similar project or have any questions about the simulator? What do you think about the use of LLMs in development, and how do you see this technology evolving in the future?