Web浏览器中的仿真[关闭]

Question

Closed. This question is opinion-based. It is not currently accepting answers.

                </div>
            </div>
        </div>
                <hr class="my12 outline-none baw0 bb bc-powder-2">
            <div class="grid fw-nowrap fc-black-600">
                    <div class="grid--cell mr8">
                        <svg aria-hidden="true" class="svg-icon iconLightbulb" width="18" height="18" viewbox="0 0 18 18"><path d="M9.5.5a.5.5 0 0 0-1 0v.25a.5.5 0 0 0 1 0V.5zm5.6 2.1a.5.5 0 0 0-.7-.7l-.25.25a.5.5 0 0 0 .7.7l.25-.25zM1 7.5c0-.28.22-.5.5-.5H2a.5.5 0 0 1 0 1h-.5a.5.5 0 0 1-.5-.5zm14.5 0c0-.28.22-.5.5-.5h.5a.5.5 0 0 1 0 1H16a.5.5 0 0 1-.5-.5zM2.9 1.9c.2-.2.5-.2.7 0l.25.25a.5.5 0 1 1-.7.7L2.9 2.6a.5.5 0 0 1 0-.7z" fill-opacity=".4"></path><path opacity=".4" d="M7 16h4v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-1z" fill="#3F3F3F"></path><path d="M15 8a6 6 0 0 1-3.5 5.46V14a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-.54A6 6 0 1 1 15 8zm-4.15-3.85a.5.5 0 0 0-.7.7l2 2a.5.5 0 0 0 .7-.7l-2-2z" fill="#FFC166"></path></svg>
                    </div>
                <div class="grid--cell lh-md">
                    <p class="mb0">
                        <b>Want to improve this question?</b> Update the question so it can be answered with facts and citations by <a href="/posts/9178847/edit">editing this post</a>.
                    </p>
                    <p class="mb0 mt6">Closed <span title="2019-01-21 06:42:17Z" class="relativetime">last year</span>.</p>
                </div>
            </div>
    </aside>

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.

</div>

Answer 1

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