[WIP]-1656-3-cluster-galaxy-canvas

[ogerly]

Implementierung der interaktiven Sternenkarte mit Cluster- und Punktdetails

Pull Request Beschreibung

Titel: Implementierung der interaktiven Sternenkarte mit Cluster- und Punktdetails

Zusammenfassung:

In diesem Pull Request wird die interaktive Sternenkarte innerhalb des Projekts um die Möglichkeit erweitert, auf spezifische Cluster und Punkte (Sterne) zu klicken und entsprechende Details anzuzeigen. Die Cluster sind gruppierte Sammlungen von Punkten, die als Sterne dargestellt werden. Gelbe Punkte repräsentieren Benutzer, während graue Punkte leere Stellen innerhalb der Cluster darstellen.

Implementierte Änderungen:

1. Grundlegendes Setup der Canvas-Elemente:

   • Die Canvas ist das Hauptelement, auf dem die Sternenkarte gezeichnet wird. Die Sternenkarte besteht aus mehreren Clustern, die jeweils eine Anzahl von Punkten enthalten.
   • Die initCanvas-Methode initialisiert das Canvas-Element und fügt Event-Listener für Zoom, Pan und Klicks hinzu.

2. Cluster-Generierung und Platzierung:

   • Die Methode generateClusters erzeugt eine bestimmte Anzahl von Clustern (standardmäßig 100) und platziert sie in einem regelmäßigen Rastermuster auf dem Canvas.
   • Jeder Cluster besteht aus mehreren Punkten, die innerhalb des Clusters zufällig verteilt sind. Diese Punkte können aktiv (gelb) oder inaktiv (grau) sein.

3. Interaktivität:

   • Durch das Hinzufügen von Event-Listenern auf dem Canvas wird sichergestellt, dass Nutzer mit der Karte interagieren können:
     • Zoom: Das Scrollen mit der Maus ändert die Skalierung des Canvas.
     • Pan: Das Klicken und Ziehen auf dem Canvas ermöglicht das Verschieben der Ansicht.
     • Klicks: Ein Klick auf einen Punkt oder einen Cluster zeigt die zugehörigen Details im linken Info-Bereich an.

4. Cluster- und Punktdetails:

   • Wenn ein Cluster oder ein Punkt ausgewählt wird, werden die zugehörigen Informationen im linken Info-Bereich angezeigt. Diese Informationen umfassen den Namen des Clusters und die Koordinaten der einzelnen Punkte.
   • Die Methode showPointDetails zeigt Details eines spezifischen Punktes an, während showClusterDetails die Details des gesamten Clusters anzeigt.

5. Zoom und Pan Logik:

   • Die Zoom- und Pan-Logik ermöglicht es dem Benutzer, die Ansicht des Canvas zu ändern, um verschiedene Teile der Sternenkarte zu betrachten. Diese Änderungen werden durch die onZoom und onPan Methoden gesteuert.

6. Responsives Verhalten:

   • Das Canvas passt sich dynamisch der Fenstergröße an. Dies wird durch die resizeCanvas-Methode ermöglicht, die bei jeder Größenänderung des Fensters aufgerufen wird.

Code-Struktur:

• Template-Teil:

  • Enthält das Layout des Canvas und den Info-Bereich für die Cluster- und Punktdetails.
  • Der Info-Bereich zeigt die Details an, sobald ein Cluster oder Punkt angeklickt wird.

• Script-Teil:

  • Definiert die Hauptlogik für das Zeichnen und Interagieren mit den Clustern und Punkten.
  • Enthält Methoden für das Generieren der Cluster, das Zeichnen auf dem Canvas, die Event-Listener und die Anzeige der Details.

• Style-Teil:

  • Stellt sicher, dass das Canvas den gesamten verfügbaren Platz einnimmt und dass der Info-Bereich optisch ansprechend dargestellt wird.

Demo Sternenbilder zeichnen: https://codepen.io/ogerly/pen/xxorNbr

Anmerkungen:

• Der Code bietet eine Grundlage für die weitere Entwicklung der Sternenkarte, beispielsweise durch das Hinzufügen zusätzlicher Interaktivität oder die Optimierung der Performance bei einer großen Anzahl von Clustern.
• Zukünftige Arbeiten könnten sich darauf konzentrieren, die Cluster-Platzierung weiter zu verfeinern und zusätzliche Benutzerinteraktionen zu ermöglichen.

Dieser PR fügt signifikante Funktionalität hinzu und verbessert die Benutzererfahrung erheblich, indem er es ermöglicht, auf der Sternenkarte zu navigieren und interaktiv mit den Daten zu interagieren.

   const generateClusters = () => {
      const clusterCount = 1;
      const baseSizeScale = 30;
      const clusterSpacing = 300;

    const generateClusters = () => {
      const clusterCount = 10;
      const baseSizeScale = 30;
      const clusterSpacing = 300;

 const generateClusters = () => {
      const clusterCount = 100;
      const baseSizeScale = 30;
      const clusterSpacing = 500;

Die mathematischen Formeln, die in deinem Code verwendet werden, beziehen sich hauptsächlich auf die Berechnung der Positionen von Clustern und der darin enthaltenen Punkte sowie auf die Platzierung dieser Cluster in einem Rastermuster.

1. Positionierung der Cluster

Die Cluster werden in einem Rastermuster angeordnet. Die Formel, um die Position eines Clusters zu bestimmen, basiert auf der Größe des Containers und einer zufälligen Abweichung:

Formel für die Position eines Clusters

Die Cluster werden innerhalb eines 2D-Rasters positioniert. Für jedes Cluster wird eine Basisposition (baseX, baseY) innerhalb des Containers zufällig berechnet. Diese Basisposition wird dann durch eine zufällige Verschiebung modifiziert:

[
\text{baseX} = \text{random}() \times \text{spaceWidth} + (\text{random}() - 0{,}5) \times \text{clusterSpacing}
]

[
\text{baseY} = \text{random}() \times \text{spaceHeight} + (\text{random}() - 0{,}5) \times \text{clusterSpacing}
]

• spaceWidth und spaceHeight: Dies sind die Dimensionen des verfügbaren Raums (des Canvas), in dem die Cluster platziert werden.
• clusterSpacing: Dies ist der Abstand zwischen benachbarten Clustern. Es stellt sicher, dass die Cluster nicht überlappen und genügend Platz zwischen ihnen liegt.
• random(): Dies ist eine Funktion, die eine zufällige Zahl zwischen 0 und 1 erzeugt. Die Position der Cluster wird so zufällig verteilt, jedoch innerhalb eines kontrollierten Bereichs.

2. Positionierung der Punkte innerhalb eines Clusters

Jedes Cluster enthält eine Reihe von Punkten, die ebenfalls zufällig innerhalb des Clusters platziert werden. Die Punkte werden um die Basisposition des Clusters (baseX, baseY) herum verteilt.

Formel für die Position eines Punktes innerhalb eines Clusters

Jeder Punkt hat eine zufällige Position relativ zu der Basisposition des Clusters:

[
\text{pointX} = \text{baseX} + (\text{random}() - 0{,}5) \times \text{clusterSize}
]

[
\text{pointY} = \text{baseY} + (\text{random}() - 0{,}5) \times \text{clusterSize}
]

• baseX und baseY: Die Basisposition des Clusters, um die sich die Punkte gruppieren.
• clusterSize: Dies ist ein Wert, der die Größe des Clusters angibt und die maximale Entfernung eines Punktes von der Basisposition bestimmt.
• random(): Erzeugt eine Zufallszahl zwischen 0 und 1, die verwendet wird, um die Position des Punktes innerhalb des Clusters zu bestimmen.

3. Raster- und Cluster-Spacing-Konzept

Das Konzept eines Rasters bedeutet, dass die Cluster in einem regelmäßigen Muster angeordnet werden, ähnlich wie Quadrate auf einem Schachbrett. Der clusterSpacing-Wert stellt sicher, dass es genügend Abstand zwischen benachbarten Clustern gibt, sodass diese sich nicht überschneiden. Das Raster wird durch eine regelmäßige Wiederholung der Basispositionen in X- und Y-Richtung mit zusätzlicher Zufälligkeit für die Clusterpositionen erzeugt.

Beispiel:

Wenn spaceWidth = 1500 und spaceHeight = 1500, clusterSpacing = 500 und wir random()-Funktionen mit unterschiedlichen Werten verwenden, könnten die Basispositionen wie folgt berechnet werden:

[
\text{baseX} = 1000 + (0{,}3 - 0{,}5) \times 500 = 1000 + (-0{,}2) \times 500 = 1000 - 100 = 900
]
[
\text{baseY} = 1500 + (0{,}8 - 0{,}5) \times 500 = 1500 + 0{,}3 \times 500 = 1500 + 150 = 1650
]

Ein Punkt in diesem Cluster könnte dann bei folgenden Werten platziert werden:

[
\text{pointX} = 900 + (0{,}4 - 0{,}5) \times 100 = 900 + (-0{,}1) \times 100 = 900 - 10 = 890
]

[
\text{pointY} = 1650 + (0{,}7 - 0{,}5) \times 100 = 1650 + 0{,}2 \times 100 = 1650 + 20 = 1670
]

Fazit

Die verwendeten Formeln und Konzepte sorgen dafür, dass die Cluster gleichmäßig über den verfügbaren Raum verteilt werden und jeder Punkt innerhalb eines Clusters zufällig positioniert ist, jedoch immer in relativer Nähe zur Basisposition des Clusters. Die Zufallsverteilung verhindert das Überlappen der Cluster und sorgt für eine natürliche, verstreute Anordnung innerhalb eines strukturierten Rasters.

Der Code eines fiktiven sternenbildes aus dem canvas.

Cluster: Cluster-60
Punkt 1: (577, 388)
Punkt 2: (761, 199)
Punkt 3: (628, 321)
Punkt 4: (722, 222)
Punkt 5: (694, 173)

[
  {
    "x": 577.0459148442987,
    "y": 387.50313986853087,
    "active": true
  },
  {
    "x": 760.9893181081092,
    "y": 198.56004229606737,
    "active": true
  },
  {
    "x": 627.7168686590677,
    "y": 321.4641025980252,
    "active": true
  },
  {
    "x": 722.2379111590584,
    "y": 222.12632118845755,
    "active": true
  },
  {
    "x": 694.480065881471,
    "y": 172.84982375847508,
    "active": true
  },
  {
    "x": 814.9412168102897,
    "y": 431.0136666606357,
    "active": false
  },
  {
    "x": 834.5170923149989,
    "y": 316.67114168618514,
    "active": false
  },
  {
    "x": 704.0475734927599,
    "y": 303.8493893906499,
    "active": false
  },
  {
    "x": 773.2441471225159,
    "y": 263.4391116659433,
    "active": false
  }
]

• fixes 🚀 [Feature] Frontend: Star map #1017 🚀 [Feature] Integration von parallax-starry-sky example in dreammall.earth  #1656 🚀 [Feature] Provide Star data from the backend #1747 🚀 [Feature] Cleanup Starmap canvas frontend Implementation #1746

[Mogge]

Why are there changes to admin?

[ogerly]

old