Koordinatensystem dynamisch anpassen

Moin allerseits!
Wir haben in der Uni die Aufgabe, ein Koordinatensystem zu erstellen, dort Punkte (bekommen wir als x-y-Koordinaten in einer HTML-Datei) und diese miteinander zu verbinden.
Momentan muss man bei uns die Punkte noch in zwei Arrays manuell eingeben, aber das bekommen wir sicher noch hin, die aus der HTMl-Datei zu nehmen.
Unser größtes Problem, bei dem wir einfach nicht weiterkommen bzw. unsere Kenntnisse wohl nicht ausreichen, ist die dynamische Anpassung des Koordinatensystems. Also, dass das Ganze bei einem Ausreisserwert von sagen wir mal 1000 sich automatisch verkleinern bzw. die Skalierung so anpassen würde, dass die ganze Kurve inklusive solcher Ausreisser zu sehen ist mit passender Achsenbezeichnung. Könntet ihr uns da weiterhelfen?

Bisher haben wir das hier:

Java:
import java.awt.*;
import java.applet.Applet;

public class graph extends java.applet.Applet {
                        //Array x-Werte(Dichte)
    private double[] WerteX= {3.2 , 5.5, 6.5, 7.0};
 
                        //Array y-Werte(Druck)
    private double[] WerteY= {0.0 , 100.0, 320.0, 550.0};


    public void init() {
                        // Hintergrundfarbe schwarz
        setBackground (Color.black);
    }

    public void paint (Graphics g) {
        float x, y;
        int xnorm, ynorm, i;

        // ACHSEN ZEICHNEN -----------------------------------------------

        g.setColor(Color.red);                // Koordinatenbezeichnung x-Achse
        g.setFont(new Font("Arial", Font.BOLD, 20));
     
        for (i=0; i<=12; i+=3) {
            g.drawString(String.valueOf(i), 100+i*50, 670);
        }
                                               //Koordinatenbezeichnung y-Achse
         for (i=0; i<=12;i++)   {          
        g.drawString ( String.valueOf(i*50),80 ,650-50*i );
        }
      
     
                        // Vordergrundfarbe Rot fuer die Achsen
        g.setColor (Color.red);

                        // X-Achse zeichnen (schon skaliert auf 500%)
        g.drawLine (0, 650, 650, 650);

                        // Y-Achse zeichnen (schon skaliert auf 500%)
        g.drawLine (100, 0, 100, 650);

                        // Skaleneinteilung fuer die X-Achse zeichnen
        for (i = 100; i <= 750; i += 150){
            g.drawLine (i, 0, i, 650);
        }

                                                  // Skaleneinteilung fuer die Y-Achse zeichnen
        for (i = 0; i <= 650; i += 50){
            g.drawLine (100, i, 750, i);
        }
        int size = WerteX.length;

        g.setColor (Color.white);
                                                //X-Achse Werte hochskaliert,Punkte
        for (i=0; i<size; i++)    {             
            g.fillOval ((int)WerteX[i][I]*50+100-3, 650-(int)WerteY[i][I]-3, 6, 6);
        }                      
          
        for (i=0; i<size; i++) {
        g.drawLine ((int)WerteX[i][I]*50+100, 650-(int)WerteY[i][I],(int)WerteX[i+1]*50+100, 650-           (int)WerteY[i+1]);
        }
      
    }

}

Das ganze Ding lassen wir uns mit folgender Html-Datei im Appletviewer anzeigen:

Code:
<html>
<head>
</head>
<body>

<Applet code="graph.class" width="700" height="700"></Applet>


</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
Ich würde mal sagen du brauchst eine Transformation vom Punkte Koordinatensystem in das Bildschirm Koordinatensystem. Wobei mit Punkte Koordinatensystem, das von den Arrays gemeint ist und mit Bildschirm das auf dem du zeichnest...

Ganz einfach könntest du es machen mit einem Faktor (fx, fy) den du mal die Punkte (x, y) aus den Arrays nimmst. Diesen Faktor kannst du dann erhöhen bzw. erniedrigen so das es passt, am besten mit einem MouseListener für das MauseWheel.

EDIT

Code:
p_i × f = b_i
  • p_i: Punkt i
  • f: Faktor
  • b_i: Bildschirm Punkt i
 
Ich würde mal sagen du brauchst eine Transformation vom Punkte Koordinatensystem in das Bildschirm Koordinatensystem. Wobei mit Punkte Koordinatensystem, das von den Arrays gemeint ist und mit Bildschirm das auf dem du zeichnest...

Ganz einfach könntest du es machen mit einem Faktor (fx, fy) den du mal die Punkte (x, y) aus den Arrays nimmst. Diesen Faktor kannst du dann erhöhen bzw. erniedrigen so das es passt, am besten mit einem MouseListener für das MauseWheel.

EDIT

Code:
p_i × f = b_i
  • p_i: Punkt i
  • f: Faktor
  • b_i: Bildschirm Punkt i

Vielen Dank für deine Antwort! Ich glaube, wir sollen das so machen, dass sich das Koordinatensystem automatisch selbst anpasst...
 
Dynamisch in Bezug auf die Skalierung und die Darstellung des ganzen Koordinatensystems. Wir hatten bisher überlegt, irgendwie den minimalen und maximalen Wert aus dem Array für die X- und dem für die Y-Werte rauszubekommen und diese irgendwie so in den Teil mit der Skalierung einzubringen, dass sich die Achsen automatisch anpassen...
 
Ja, diese Idee ist ja auch genau richtig. Und das ergibt dann die Faktoren fx und fy die oben erwähnt wurden. Und was ist aktuell gerade das Problem ?
 
...es hapert an der Umsetzung 😀 Was müssen wir damit jetzt genau machen? Und wie bekommen wir den Min und den Max Wert? Wir sind leider ziemliche Anfänger und haben für den bisherigen Code schon Ewigkeiten gebraucht.
 
Ihr habt doch die x- und die y-Koordinaten in diesen beiden Arrays oder ? dann sucht ihr euch daraus jeweils das Maximum und das Minimum. Der Bereich dazwischen ist der den ihr mit eurer Zeichenfläche (den Achsen) abdecken müsst. Angenommen die kleinste X-Koordinate ist -10 und die grösste 90. Dann müsst ihr einen Bereich von 100 Einheiten darstellen können (xMax - Xmin). Wenn nun euere Fensterbreite 1600 Pixel ist dann entspricht 1 Zeicheneinheit eben 1600/(xMax-xMin) Pixeln. Genau so in y-Richtung.
Jetzt könnt ihr bei diesen Berechnungen natürlich noch Platz für Ränder lassen und evtl. runden. Aber das Prinzip sollte klar sein oder ?
 
Ihr habt doch die x- und die y-Koordinaten in diesen beiden Arrays oder ? dann sucht ihr euch daraus jeweils das Maximum und das Minimum. Der Bereich dazwischen ist der den ihr mit eurer Zeichenfläche (den Achsen) abdecken müsst. Angenommen die kleinste X-Koordinate ist -10 und die grösste 90. Dann müsst ihr einen Bereich von 100 Einheiten darstellen können (xMax - Xmin). Wenn nun euere Fensterbreite 1600 Pixel ist dann entspricht 1 Zeicheneinheit eben 1600/(xMax-xMin) Pixeln. Genau so in y-Richtung.
Jetzt könnt ihr bei diesen Berechnungen natürlich noch Platz für Ränder lassen und evtl. runden. Aber das Prinzip sollte klar sein oder ?

Vielen Dank, ja, so ungefähr hatten wir das schon überlegt, wir wissen nur nicht, wie wir das als Code aufschreiben können.
 
Ich stehe gerade vor einem ähnlichen Problem, Anpassung der Y Achse an dynamische Werte aus einen Datenbank und irgendwie komme ich mit der Lösung von hier nicht klar

Java:
    private double scaleYD(double yMin, double yMax){
        // 182 Pixel / (630 Watt - 600 Watt)
        // 182 / 30
        // = 6,066666666666667
        // 630 Watt / 6,066666666666667 = 103,8461538461538 Pixel
      
        double factor = 182 / (yMax-yMin);
      
        return factor;
    }

Meine Y Achse ist 182 Pixel hoch, jetzt nehmen wir mal an ich habe als Minimum 600 Watt und als Maximum 630 Watt, macht dann eine Differenz von 30 Watt ala 30 Pixel die darzustellen sind.

// 182 Pixel / (630 Watt - 600 Watt)
// 182 / 30
// = 6,066666666666667

damit hätten wir dann einen Faktor von 6,066666666666667

Will ich jetzt den Maximalwert darstellen dann kommt aber nicht 182 raus
// 630 Watt / 6,066666666666667 = 103,8461538461538 Pixel

Also wo liegt jetzt mein Denkfehler ?
 
@Nisbo wenn du schon Minimum = 600 und Maximum 630 wählst, und deine Achso somit nur 30 "Einheiten" hat, dann musst du von jeder Date dein Minimum abziehen
so ergibt sich :
630-600 = 30
30*6,066666 = 182
 

Neue Themen


Zurück
Oben