Algorithmus anschaulich als Step-by-Step-Ausführung implementieren

  • Guten Abend,


    ich hatte bis jetzt keinerlei Kontakt mit HTML/JS und wenn man aus den klassischen Programmiersprachen kommt, kann einen das Konzept doch erstmal etwas verwirren.

    Mein Ziel ist es, einen Algorithmus, der auf Polygone angewendet wird, anschaulich zu implementieren.

    Die Idee ist, dass ich ein Polygon (erstmal zufällig) erstelle, es in einem Canvas anzeigen lassen und dann mit einem "next Step"-Button den Algorithmus schrittweise auf dem Polygon ausführe und die jeweiligen Schritte im Canvas darstelle.


    Ich bin inzwischen soweit, dass ich ein Polygon erstellen (Liste von Punkten) und es im Canvas anzeigen lassen kann.

    Nur jetzt kommt das große Fragezeichen: Die Punktmenge habe ich irgendwie lokal in einer Funktion erstellt und dann gezeichnet. Dann wird das Script beendet, ich habe mein Polygon im Canvas aber wie mache ich weiter? Wie habe ich jetzt jederzeit Zugriff auf das Objekt, um es im Algorithmus Schrittweise zu verarbeiten? (Globale Variablen sollte man ja vermeiden?)


    Ich habe keine Ansätze, wie ich hier vorgehen soll und welche Techniken/Pattern/Ansätze man hier am besten verfolgt. Ich bin gewillt mich einzulesen und würde mich über ein paar grundsätzliche Ideen, wie so eine Implementierung umzusetzen ist, sehr freuen.


    Mit besten Grüßen


    Yannic


    EDIT:

    https://visualgo.net/en/dfsbfs

    Im Prinzip so wie es hier für Graphen gemacht ist, nur natürlich auf einfachstem Niveau.

  • Globale Variablen vermeiden siehe hier, Kapitel 4:

    https://molily.de/js/organisation-module.html

    Zitat

    Die Punktmenge habe ich irgendwie lokal in einer Funktion erstellt

    Meine Empfehlung: Die Punktmenge in einem Array speichern.

    Zitat

    ich habe mein Polygon im Canvas aber wie mache ich weiter? Wie habe ich jetzt jederzeit Zugriff auf das Objekt, um es im Algorithmus Schrittweise zu verarbeiten?

    Wenn Du die einfache Canvas-API verwendet hast, hast Du als Ergebnis das Bitmap des Canvas und keinen Zugriff mehr auf die gezeichneten Objekte. Du müsstest sie parallel in Strukturen von Javascript halten. Es ist jedoch dringend zu empfehlen, eine Bibliothek wie jCanvas zu verwenden, die das für dich tut. Die Objekte nennen sich dort Layer.

    https://projects.calebevans.me/jcanvas/

    Du kannst dann jederzeit auf die Layer zugreifen und ihre Eigenschaften ändern oder auslesen.

  • Vielen Dank für die Antwort! :)

    Meine Empfehlung: Die Punktmenge in einem Array speichern.

    Ja, habe die Punktmenge als Array, wusste nur nicht, wie ich sie speichere, ohne globale Variablen zu verwenden. Aber dafür ja wahrscheinlich der Link.

    Es ist jedoch dringend zu empfehlen, eine Bibliothek wie jCanvas zu verwenden, die das für dich tut.

    Das schaue ich mir später mal an! Da ich nichtmal mit HTML und JS Erfahrung habe, ist jQuery für mich allerdings noch ein Fremdbegriff.