Javascript Live-Animation

Ich arbeite an genetischen Algorithmen in Javascript und müsste in Echtzeit die vom Algorithmus bereitgestellten Lösungen visualisieren.Javascript Live-Animation

Grundsätzlich muß ich something like this

All meine Versuche (wenn „Run“ klicken), mit DIVs und CSS-Positionierung oder SVG mit einem leeren Bildschirm und Browser-Absturz am Ende zu schaffen.

Die Verwendung von setInterval zum Definieren von Schritten beim Rendern scheint eine schlechte Idee zu sein, da es auch die Algorithmusgeschwindigkeit drastisch reduziert.

Fehle ich etwas?

Quelle

2017-11-11 Jérémie

Zeigen Sie Ihren Code! –

Es gibt keinen Code, jeder Versuch einer Endlosschleife ist fehlgeschlagen. Ich suche nach Ratschlägen oder Ideen, das ist der Punkt. –

der fehlgeschlagene Versuche Code wäre eine gute Basis, um das Problem zu lösen ... –

Ok, das Problem mit dem Browser abstürzt kann mit einer richtigen Verwendung von setTimeout, nextTick, setImmediate oder request gelöst werden, so dass der Browser der Kurve vor den nächsten Berechnungen zu machen.

Da ich auch einige Grafik-Rendering benötigt, um die Ergebnisse anzuzeigen, habe ich am Ende P5.js verwendet, was ziemlich toll ist.

Quelle

2017-11-11 15:31:51

Sie sollten sich auch [requestAnimationFrame] (https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) anstelle von setTimeout ansehen ... –

Ich habe meine Antwort bearbeitet, danke! –

Ich empfehle, dass Sie Reactjs verwenden. Dieses Framework kann Komponenten in Echtzeit organisieren. Ich habe ein Projekt namens Game of Life, es ist wie ein genetischer Algorithmus.

[Codepen](https://codepen.io/israelmarmar/pen/vZmWPp)

Quelle

2017-11-11 13:19:27

Vielen Dank für Ihre Antwort. Leider kann ich ReactJs nicht für dieses Projekt verwenden. Beispiele, die ich gefunden habe, scheinen nur eine Art Endlosschleife zu benutzen, also bin ich ziemlich verwirrt. Wirklich cooles Beispiel, obwohl! –

Javascript Live-Animation

Antwort

Verwandte Themen