Simulation in a Web Browser

Question

Sorry if the title is confusing, it's hard to sum up in one phrase.

I am working a a project consisting of rendering a robot simulation in a web browser. To be more specific, at the university where I'm studying they use a simulator written in C++, this program simulates robots evolving in an environment. This simulator has many outputs available like 3D OpenGL visualisation etc. One output available is the basic text render which output for each time step, the position of every robots in the environment.

Ok, so they asked me to work on a new type of visualization taking place in a browser. This means that one could upload his code for the simulator, launch it on the server and see the simulation in the browser (in an HTML5 Canvas or SVG) WHILE it is simulated on the server!

Ok so I first thought using Ajax to get data from the simulator and use some Canvas Library to draw the robots on the screen. But they don't want to need a Web Server so I thought of writing a new type of visualization directly in the simulator (using a C++ WebSocket library if this actually exists) which would act as a WebSocket server so that the browser can directly talk to the simulator without the need of a Web Server (don't know if it is possible).

Well ... That's the idea. It would be awesome if you could tell me what you think about it and give me some advices/links. Is it possible to handle this without a Web Server ? If it's not possible without implementing the HTTP protocol in the simulator, then I'll skip this idea and do with a Web Server :)

Second question more precise: I've already looked at some HTML5 Canvas library, fabric.js, jCanvaScript, dojo.gfx, cake, doodle.js, bHive, KineticJS. I am still not sure of which one to use. I started some experiments with jCanvaScript and I'm facing a problem. I get data from the server (robots positions at each time step) and then have to draw them in the canvas. I was using some .animate function do get smooth movements. This function takes a number of ms, the time of the animation and I don't know how to synchronise the animations of all the objects I have to move at each timestep of the simulation. Do you know a framework that would help implementing that kind of simulation? (just moving objects between each timestep).

That's about it, apology for my poor english, I hope it is understandable, if not, tell me, I'll rephrase.

Thanks in advance for your help. I'm a bit lost on that project and any advice would be greatly appreciated !

Have a good day.

Balzard.

score 3 · Answer 1 · answered Feb 08 '12 at 14:51

If you have access to the simulation source and want to build a WebSocket server component directly into it I have written a stand alone C++ WebSocket library (WebSocket++, https://github.com/zaphoyd/websocketpp/, BSD licensed) for doing exactly this sort of thing. WebSocket++ provides all of the components necessary to expose your C++ application's output via a self-contained WebSocket server. On the other hand, if you only need to expose stdout via a WebSocket node.js/socket.io or the Autobahn WebSocket library (python) might be simpler to set up.

So far I have used WebSocket++ for pushing live data from a C++ virtual world server to the browser for rendering via canvas and am currently working on a C++ heat diffusion simulator that will display live visualizations of the simulation in a companion javascript app. If you are thinking about the all C++ route feel free to ping me on GitHub.

score 0 · Answer 2 · edited May 23 '17 at 12:20

1) You cannot avoid running a server if you want to access any external data from the internet.

I assume you are going to run simulator.exe and catch its output in text mode.

If this simulator is windows application I recommend C++

If it's for linux i'd give a try to node.js

How many updates per second do you expect

< 5 use AJAX

> 5 go for WebSockets

2) Canvas API itself is really simple to use so you probably don't need any library to deal with it.

And the note about animation - just interpolate between old and new data in time - what i mean:

PSEUDO CODE:

duration = 20; // it's equal to synchronising interval
onDataReceived(data) {
  // get the step width needed to achieve `new x` in `duration`
  robot.stepX = abs(robot.x - data.x) / duration;
  robot.newX = data.x;
}

timerLoop {
  if(robot.x < robot.newX) robot.x += robot.stepX;
  // ...
}

If you decide to do it with node this may help you Multiplayer JavaScript game built with Node.JS - Separating players

Simulation in a Web Browser

2 Answers2