Punkte eines Funktionsplotters zeitlich versetzt zeichnen

[Kiwiatjava]

Hallo

Es geht zwar um die sleep()-Methode, allerdings brauche ich die, um etwas zu zeichnen, daher hoffe ich, dass ich hier im Grafikabteil richtig bin.

Im Prinzip versuche ich, einen Funktionsplotter zu schreiben. Es soll nun eine Art Pseudo-Animation zu Stande kommen, die die berechneten Punkte einfach nacheinander (wünschenswerter Zeitabstand bspw. 100 ms) zeichnet.
Da das Zeichnen bei mir in einer for-Schleife (bzw. alternativ: For-each-Schleife, s. Kommentar) geschieht, dachte ich mir, dass es das Einfachste wäre, einfach nach jedem Durchgang durch die Schleife, 100 ms mit Thread.sleep(100) zu warten. Pustekuchen, mag einfach nicht - das Fenster bleibt schwarz und es passiert nichts.

Scheitert es daran, dass das mit paint() grundsätzlich nicht funktioniert? Muss ich erst explizit einen neuen Thread erstellen, damit ich ihn schlafen schicken kann oder zählt einfach der Aufruf der main-Methode schon als Thread?

Beim Importieren sind ein paar überflüssige Sachen dabei, muss ich erst noch ausmisten - Entschuldigung hierfür.
Auch ganz allgemein: Entschuldigung für den etwas durchwachsenen Code, ich bin gerade an einer Stelle angekommen, an der ich selber den Überblick etwas verliere. Habe, so weit es mir möglich war, Ordnung geschafft - hoffe das ist erträglich so.

Ich arbeite mit NetBeans unter Windows.

Hoffe sehr, ihr könnt mir weiterhelfen.

Vielen Dank,
Kiwi

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Point;

import java.util.*;

import javax.swing.JFrame;
import javax.swing.JPanel;



public class Graph extends JPanel {

    private List<Point> points = new ArrayList<Point>(); //Liste für die Punkte
    private int kosys = 500; //Größe des Koordinatensystems in Pixeln
    private int rastergroesse = 10;
    
    
    
    
    public static void main(String[] args) {
        JFrame f = new JFrame();
        f.setLayout(new BorderLayout());
        f.add(new Graph());
        f.setVisible(true);
        f.pack();
    }
    
    //Konstruktor
    public Graph() {
        for (double x = 0; x <= kosys; x = x + 0.01) {
            double y = Math.cos(x); //Formel zur Berechnung der y-Werte
            
            //Hier wird ein bisschen hin- und hergerundet, damit das mit den Pixeln hinhaut. Habe ein wenig das Gefühl, ich habe hier bisschen Unnötiges programmiert - ist jetzt allerdings nicht das Thema
            int x_neu = (int) (x * 100);
            int y_neu = (int) (runden(y, 3) * 1000);

            points.add(new Point(x_neu, y_neu));
            
        }
    }
    
    // Anfang Methoden
    public void paint(Graphics g) {
        super.paint(g);
        //Koordinatensystem
        g.drawLine(0, kosys, kosys * 2, kosys);
        g.drawLine(0, 0, 0, kosys * 2);

        
        //Einheiten bzw. Markierungen
        for (int i = 0; i < (kosys * 2); i = i + rastergroesse) {
            g.drawLine(i + rastergroesse, kosys - 5, i + rastergroesse, kosys + 5); //x-Achse
            g.drawLine(-5, i + rastergroesse, 5, i + rastergroesse); //y-Achse
        }
        
        g.setColor(Color.RED);

        //Um diese For-Schleife geht es !
        for (int i = 0; i<points.size(); i++){
            g.drawLine(points.get(i).x, kosys-(points.get(i).y), points.get(i).x, kosys-points.get(i).y);

        //try {
        //Thread.sleep(100);
        //}
        //catch (InterruptedException e) {
        //}
       // Schön wär's... Genau das obige mag nicht funktionieren.
            
        }
        

//evtl. elegantere Variante, die (logischerweise) ebensowenig funktioniert:
//        for (Point p : points) {
//            g.drawLine(p.x, kosys - (p.y), p.x, kosys - (p.y));
//            try {
//                Thread.sleep(500);
//            }
//            catch (InterruptedException e) {
//            }
//
//
//        }
    }
    

    
    public static double runden(double wert, int stellen) {
        double gerundet = Math.round(wert * Math.pow(10d, stellen));
        
        return gerundet / Math.pow(10d, stellen);
    }
    
    public Dimension getPreferredSize() {
        return this.getMaximumSize();
    }
    
    public Dimension getMinimumSize() {
        return this.getMaximumSize();
    }
    
    public Dimension getMaximumSize() {
        return new Dimension(kosys * 2, kosys * 2);
    }
    
    // Ende Methoden
}

 

[XHelp]

Du legst den Thread schlafen, wo das Zeichnen passiert, deswegen sieht es schwarz aus. Wenn du lange wartest, so dass deine "Animation" zuende ist, dann müsste das fertige Bild erscheinen.
Also darfst du nicht

Thread.sleep

in der paint-Methode aufrufen.
Andere Überlegung wäre: einen Timer (Thread) laufen zu lassen, der all 100ms einen neuen Punkt berechnet, zu einer Liste hinzufügt und die repaint-Methode aufruft. Die Zeichnenmethode zeichnet nun wiederum alle Punkte, die sich in der Liste befinden (ohne Pause). Dadurch würde auch eine "Animation" entstehen. (oder du kannst auch alle Punkte gleich berechnen, der Thread würde nur den max. Index bis zu dem es gezeichnet wird hochzählen)
Vllt haben aber die Leute, die sich öfters damit beschäftigen auch bessere Vorschläge.

 

[Tomate_Salat]

überschreibe nicht die [c]paint[/c]-Methode, sondern die [c]paintComponent[/c]. Ein Thread-Sleep würde ich in der zeichen-methode auch nicht ausführen. Arbeite vllt lieber mit einer Variable die du pro durchgang eins hoch setzt. Also so nach dem Schema:

public void animate() 
{
    try {
        paintToThisKoord++;
        repaint();
        Thread.sleep(500);
    } catch(InterruptedException e) {
         e.printStackTrace();
    }
}

wäre jz meine überlegung.

 

[Kiwiatjava]

Okay, dankeschön, Problem ist verstanden. Die Lösung allerdings noch nicht ganz.

Andere Überlegung wäre: einen Timer (Thread) laufen zu lassen, der all 100ms einen neuen Punkt berechnet, zu einer Liste hinzufügt und die repaint-Methode aufruft. Die Zeichnenmethode zeichnet nun wiederum alle Punkte, die sich in der Liste befinden (ohne Pause). Dadurch würde auch eine "Animation" entstehen.

Das würde doch (abgesehen von dem Erstellen eines neuen Threads) identisch sein mit einem Einfügen von

    try {
        Thread.sleep(100);
    } catch(InterruptedException e) {
    }
repaint();

in Zeile 41 meines Codes, oder?


@Tomate_Salat:
Welche Methode würde denn in deinem Schema dann [c]animate()[/c] aufrufen? Und was soll mit der hochgezählten Variable passieren? Soll das die Koordinate sein, an deren Stelle gezeichnet wird? Wenn ja, dann ist das im Prinzip doch genau die for-Schleife, die ich bereits im Code stehen habe.

Vielen Dank für die Hilfe !

Kiwi

 

[Marco13]

Die Methode würde in der run-Methode eines eigenen Threads aufgerufen werden, und GANZ grob würde deine Schleife
for (int i = 0; i<points.size(); i++){
dann geändert zu
for (int i = 0; i<paintToThisKoord; i++){
(natürlich aufpassen, dass paintToThisKoord nicht zu groß wird)

 

[Kiwiatjava]

Welchen Sinn hat es denn, einen eigenen Thread zu erstellen, wenn dieser letzendlich eh nur animate() aus der Klasse Graph aufruft?

Und "nicht zu groß" für paintToThisKoord bedeutet doch eben, dass paintToThisKoord maximal points.size() wird, oder ?

Ich habe jetzt mal versucht, die (für mich bis jetzt am ehesten nachzuvollziehende) Idee von XHelp versucht umzusetzen, allerdings mag sich die non-static repaint() nicht aus der static run() heraus aufrufen lassen. (Code s. unten)

Kiwi

import java.util.*;

import java.awt.Point;

public class Timer extends Thread{

    private List<Point> points = new ArrayList<Point>();
    private int max = 500;
    
    public void run(){
        for (double x = 0; x <= max; x = x+0.01) {
            double y = Math.cos(x); //Formel zur Berechnung der y-Werte
            int x_neu = (int) (x*100);
            int y_neu = (int) y; //Runden + pixeltaugliche Umwandlung zu int
            points.add(new Point(x_neu, y_neu));
            NewClass.repaint();
            try {
                Thread.sleep(100);
            } catch(InterruptedException e) {
                e.printStackTrace();
            }

            
        }
    }

    public Timer() {
        start();
    }
    
}

 

[Marco13]

Welchen Sinn hat es denn, einen eigenen Thread zu erstellen, wenn dieser letzendlich eh nur animate() aus der Klasse Graph aufruft?

Der Sinn ist, dass das eben von einem anderen Thread gemacht wird, und der EDT (der Zeichen-Thread) weiterhin Zeichnen kann - unabhängig von der Schleife.

Und "nicht zu groß" für paintToThisKoord bedeutet doch eben, dass paintToThisKoord maximal points.size() wird, oder ?

Ja.

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.*;
import java.awt.event.*;
import java.awt.Graphics;
import java.awt.Point;

import java.util.*;
import java.util.List;

import javax.swing.*;
import javax.swing.JPanel;



public class Graph extends JPanel {

    private List<Point> points = new ArrayList<Point>(); //Liste für die Punkte
    private int kosys = 500; //Größe des Koordinatensystems in Pixeln
    private int rastergroesse = 10;
    private int currentLimit = 0;



    public static void main(String[] args) {
        JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.setLayout(new BorderLayout());
        final Graph graph = new Graph();
        f.getContentPane().add(graph, BorderLayout.CENTER);
        JButton b = new JButton("Doit");
        b.addActionListener(new ActionListener()
        {
            public void actionPerformed(ActionEvent e)
            {
                graph.startAnimation();
            }
        });
        f.getContentPane().add(b, BorderLayout.NORTH);
        f.setVisible(true);
        f.pack();
    }

    public void startAnimation()
    {
        Thread thread = new Thread(new Runnable()
        {
            public void run()
            {
                currentLimit = 0;
                while (currentLimit < points.size())
                {
                    currentLimit++;
                    repaint();
                    try
                    {
                        Thread.sleep(20);
                    }
                    catch (InterruptedException e)
                    {
                        Thread.currentThread().interrupt();
                        return;
                    }
                }
            }
        });
        thread.start();
    }


    //Konstruktor
    public Graph() {
        for (double x = 0; x <= kosys; x = x + 0.01) {
            double y = Math.cos(x); //Formel zur Berechnung der y-Werte

            //Hier wird ein bisschen hin- und hergerundet, damit das mit den Pixeln hinhaut. Habe ein wenig das Gefühl, ich habe hier bisschen Unnötiges programmiert - ist jetzt allerdings nicht das Thema
            int x_neu = (int) (x * 100);
            int y_neu = (int) (runden(y, 3) * 1000);

            points.add(new Point(x_neu, y_neu));

        }
    }

    // Anfang Methoden
    public void paint(Graphics g) {
        super.paint(g);
        //Koordinatensystem
        g.drawLine(0, kosys, kosys * 2, kosys);
        g.drawLine(0, 0, 0, kosys * 2);


        //Einheiten bzw. Markierungen
        for (int i = 0; i < (kosys * 2); i = i + rastergroesse) {
            g.drawLine(i + rastergroesse, kosys - 5, i + rastergroesse, kosys + 5); //x-Achse
            g.drawLine(-5, i + rastergroesse, 5, i + rastergroesse); //y-Achse
        }

        g.setColor(Color.RED);

        //Um diese For-Schleife geht es !
        //for (int i = 0; i<currentLimit; i++){
        //    g.drawLine(points.get(i).x, kosys-(points.get(i).y), points.get(i).x, kosys-points.get(i).y);
        //}

        if (points.size() > 0)
        {
            int px = points.get(0).x;
            int py = kosys-(points.get(0).y);
            for (int i = 1; i<currentLimit; i++)
            {
                int x = points.get(i).x;
                int y = kosys-(points.get(i).y);
                g.drawLine(px, py, x,y);
                px = x;
                py = y;
            }
        }

    }



    public static double runden(double wert, int stellen) {
        double gerundet = Math.round(wert * Math.pow(10d, stellen));

        return gerundet / Math.pow(10d, stellen);
    }

    public Dimension getPreferredSize() {
        return this.getMaximumSize();
    }

    public Dimension getMinimumSize() {
        return this.getMaximumSize();
    }

    public Dimension getMaximumSize() {
        return new Dimension(kosys * 2, kosys * 2);
    }

    // Ende Methoden
}

 

[Kiwiatjava]

Das ist natürlich die Lösung auf dem Silbertablett. Hatte ich jetzt nichtmal erwartet, ist dafür natürlich um so praktischer und schöner.

Es wurmt mich gerade sehr, dass ich nicht selber draufgekommen bin - hatte ja eigentlich alles zusammen.

Jetzt wo es dasteht, erscheint es auch mir ziemlich simpel... Ich bin mit den Threads einfach noch nicht warm, muss da wohl noch was tun.

Vielen vielen Dank an alle - speziell an Marco -, damit ist mir erst einmal geholfen.

Kiwi

 

[Marco13]

Nun, "schön" ist es nicht, und mehr als das, was Tomate_Salat schon geschrieben hat, in einen Thread einzuwickeln, hab' ich nicht gemacht.
Ja, die Punkte mit Linien verbinden aus Prinzip

 

[Kiwiatjava]

Die Punkte mit Linien verbinden - das wäre mein nächster Action Point gewesen... Hatte da irgendwie schon ne Rekursion im Kopf, aber so geht's natürlich einfacher.

Allerdings stellt sich mir jetzt nun eine neue Frage.
Ich möchte, dass daneben eine Linie von oben nach unten und zurück läuft, entsprechend der y-Koordinate des Graphen. Sozusagen der Graph abgebildet auf eine lineare Bewegung.

Dank der tollen Vorarbeit ist das gerade mal eine Zeile Code - dachte ich zumindest. Allerdings zeichnet er logischerweise nur die Punkte nach unten und wenn er wieder nach oben laufen soll, sieht man keine Änderung.
Man bräuchte entweder eine Art update() speziell für diese neue Linie oder eine zweite Linie, die in Hintergrundfarbe entgegengesetzt zur andere läuft. Allerdings weiß ich nicht, wie ich die neue Linie getrennt vom Graphen ansprechen kann, denn so, wie ich das im Moment implementiert habe, ist die neue Linie genauso Graphics g wie der Graph.

Hoffe noch einmal auf Tipps.

Kiwi

    public void paintComponent(Graphics g) {
        super.paintComponent(g);
        //Koordinatensystem
        g.drawLine(0+100, kosys, kosys * 2 +100, kosys);
        g.drawLine(0+100, 0, 0+100, kosys * 2);
 
 
        //Einheiten bzw. Markierungen
        for (int i = 0; i < (kosys * 2); i = i + rastergroesse) {
            g.drawLine(i + rastergroesse + 100, kosys - 5, i + rastergroesse + 100, kosys + 5); //x-Achse
            g.drawLine(-5 + 100, i + rastergroesse, 5+100, i + rastergroesse); //y-Achse
        }
 
        g.setColor(Color.RED);
  
        if (points.size() > 0)
        {
            int px = points.get(0).x;
            int py = kosys-(points.get(0).y);
            for (int i = 1; i<currentLimit; i++)
            {
                int x = points.get(i).x;
                int y = kosys-(points.get(i).y);
                g.drawLine(px+100, py, x+100,y);
                g.drawLine(50,0,50,py); // <- !
                px = x;
                py = y;
            }
        }
 
    }

 

[Marco13]

Die Linie hängt nur vom y-Wert des letzten verwendeten Punktes ab?!

 

[Kiwiatjava]

Richtig.

Ich habe jetzt eine relativ unelegante Lösung.

        if (points.size() > 0)
        {
            int px = points.get(0).x;
            int py = kosys-(points.get(0).y);
            for (int i = 1; i<currentLimit; i++)
            {
                g.setColor(Color.RED);
                int x = points.get(i).x;
                int y = kosys-(points.get(i).y);
                g.drawLine(px+100, py, x+100,y);
                g.drawLine(50,0,50,py);
                g.setColor(Color.LIGHT_GRAY);
                g.drawLine(50,1000,50,py);
                px = x;
                py = y;
            }
        }

Allerdings passt a) die Farbe nicht genau (müsste ich evtl. dann halt den Hintergrund vom Frame ändern...) und b) ist das ne ziemliche Taschenspieler-Lösung.

Kiwi

 

[Marco13]

Ich hätte jetzt gedacht, dass da irgendwo was wie

int lastY = points.get(currentLimit-1).y;
g.setColor(whichEverYouWant);
g.drawLine(0,lastY,getWidth(),lastY);

vorkommt...

 

[Kiwiatjava]

Ich verstehe irgendwie weder, was [c]getWidth()[/c] genau macht, noch was das hier mit der Breite zu tun hat? Soll ja eine vertikale Linie (links) neben dem Funktionsgraphen sein.

Meine Lösung funktioniert jetzt soweit zu meiner Zufriedenheit, allerdings habe ich die Farbe der zum Schluss "unsichtbaren" Linie genau auf die Hintergrundfarbe meines Fensters gesetzt (mit Photoshop ermittelt). Diese ist aber wahrscheinlich auf anderen Betriebssystemen anders und dann würd' das extrem blöd aussehen.
Daher bräuchte ich eine Möglichkeit, entweder die Hintergrundfarbe des JFrame (bzw. der Zeichenfläche) festzulegen, oder diese mit einem Methodenaufruf o.ä. zugänglich zu machen.

Bisherige Lösung:

        if (points.size() > 0)
        {
            int px = points.get(0).x;
            int py = kosys-(points.get(0).y);
            for (int i = 1; i<currentLimit; i++)
            {
                g.setColor(Color.RED);
                int x = points.get(i).x;
                int y = kosys-(points.get(i).y);
                g.drawLine(px+100, py, x+100,y); //Graph
                g.drawLine(50,0,50,py); //Linie von oben nach unten
                
                g.setColor(new Color(238,238,238)); // ! absolute Festlegung der Farbe, Alternative gesucht !            
                g.drawLine(50,1000,50,py); // Linie von unten nach oben

                px = x;
                py = y;
            }
        }

Kiwi

 

[Marco13]

Ich hab wohl mißverstanden, was du meintest. Ein Bild+KSKB würde vielleicht helfen

 

[Kiwiatjava]

Hoffe, das ist nicht zu lang für ein KSKB .

import java.awt.*;
import java.util.*;
import java.util.List;
import javax.swing.*;

 
public class Kskb extends JPanel {
 
    private List<Point> points = new ArrayList<Point>(); //Liste für die Punkte
    private int kosys = 500; //Größe des Koordinatensystems in Pixeln
    private int rastergroesse = 10;
    private int currentLimit = 0;
    
 
 
 
    public static void main(String[] args) {
        JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.setLayout(new BorderLayout());
        
        final Kskb graph = new Kskb();
        f.getContentPane().add(graph, BorderLayout.CENTER);
        graph.startAnimation();
        f.setVisible(true);
        f.pack();
    }
    

//Konstruktor
    public Kskb() {
        for (double x = 0; x <= kosys; x = x + 0.01) {
            double y = 0.3*Math.cos(x); //Formel zur Berechnung der y-Werte
            
            //Hier wird ein bisschen hin- und hergerundet, damit das mit den Pixeln hinhaut.
            int x_neu = (int) (x * 100);
            int y_neu = (int) (runden(y, 3) * 1000);
            
            points.add(new Point(x_neu, y_neu));
            
        }
    }
    
    //Anfang Methoden
    
    public void startAnimation() {
        Thread thread = new Thread(new Runnable() {
            public void run() {
                currentLimit = 0;
                while (currentLimit < points.size()) {
                    currentLimit++;
                    repaint();
                    try {
                        Thread.sleep(10);
                    } catch (InterruptedException e) {
                        Thread.currentThread().interrupt();
                        return;
                    }
                }
            }
        });
        thread.start();
    }
 
    public void paintComponent(Graphics g) {
        super.paintComponent(g);
        //Koordinatensystem
        g.drawLine(0+100, kosys, kosys * 2 +100, kosys);
        g.drawLine(0+100, 0, 0+100, kosys * 2);
  
        g.setColor(Color.RED);
 
        
        if (points.size() > 0)
        {
            int px = points.get(0).x;
            int py = kosys-(points.get(0).y);
            for (int i = 1; i<currentLimit; i++)
            {
                g.setColor(Color.RED);
                int x = points.get(i).x;
                int y = kosys-(points.get(i).y);
                g.drawLine(px+100, py, x+100,y); //Graph
                g.drawLine(50,0,50,py); //Linie von oben nach unten
                
                g.setColor(new Color(238,238,238)); //Farbe für die "unsichtbare" Linie von unten nach oben
                g.drawLine(50,1000,50,py); //Linie von unten nach oben
                                
                px = x;
                py = y;
            }
        }
 
    }
 
 
    public static double runden(double wert, int stellen) {
        double gerundet = Math.round(wert * Math.pow(10d, stellen));
 
        return gerundet / Math.pow(10d, stellen);
    }
 
    public Dimension getPreferredSize() {
        return this.getMaximumSize();
    }
 
    public Dimension getMinimumSize() {
        return this.getMaximumSize();
    }
 
    public Dimension getMaximumSize() {
        return new Dimension(kosys * 2, kosys * 2);
    }
 
    // Ende Methoden
}

Bild gibt's hier: http://img844.imageshack.us/img844/6019/kskb.png (grün = meine Anmerkungen, rot&schwarz vom Programm)

Nochmal kurze Erklärung: Die untere (grün markierte) Linie ist nötig, weil ansonsten die rote nur bis zum ersten Minimum des Graphen mitläuft und dann nichtmehr nach oben läuft, wie sie es eigentlich sollte.

Hoffe, das hilft etwas. Danke für die Geduld.

Kiwi

 

[Kiwiatjava]

Nachtrag:

Die gestrichelte grüne Linie soll in keinem Fall im Programm dargestellt werden und nur zeigen, dass das Ende der roten Linie immer auf Höhe des aktuellen y-Wertes des Graphen sein soll.

Sorry für Doppelpost.

Kiwi

 

[Marco13]

Die Linie hängt nur vom y-Wert des letzten verwendeten Punktes ab?!

+

Ich hätte jetzt gedacht, dass da irgendwo was wie

int lastY = points.get(currentLimit-1).y;
g.setColor(whichEverYouWant);
g.drawLine(0,lastY,getWidth(),lastY);

vorkommt...

=

        if (points.size() > 0)
        {
            int px = points.get(0).x;
            int py = kosys-(points.get(0).y);
            for (int i = 1; i<currentLimit; i++)
            {
                g.setColor(Color.RED);
                int x = points.get(i).x;
                int y = kosys-(points.get(i).y);
                g.drawLine(px+100, py, x+100,y); //Graph

                px = x;
                py = y;
            }
            int lastY = kosys-points.get(currentLimit-1).y;
            g.setColor(Color.BLUE);
            g.drawLine(50,0,50,lastY);
        }

 

[Kiwiatjava]

Oh man, einfach aus der for-Schleife rausschreiben... Kopf -> Tisch.

Bist mein Held .

Kiwi