f(x)=x² zeichnen

[Mosquera]

Hallo liebe Community,

gerade erst angemeldet und schon die erste Frage! 😛
Bin momentan dabei ein Programm zu schreiben, welches mir die Funktion f(x)=x² zeichnet.
Ich suche keine Lösung, sondern nur den Anfang und eventuell eine Erklaerung dazu.
Ich lasse euch ein paar Bilder und mein Code da und danke euch im Vorraus!

Erstes Layer: Bild!
Zweites Layer: Bild!

package ebkherne.hbit3.funktionsplotter;

import java.awt.Dimension;
import java.awt.GridLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;

public class Angaben extends JFrame implements ActionListener {

    private JPanel[][] pnlMain;
    private JLabel lblfx;
    private JButton btnPlot;
    protected JTextField txtFunktion;
    protected static double varFunktion;

    public Angaben() {

        // Panel & Layout
        int i = 2;
        int j = 2;

        pnlMain = new JPanel[i][j];
        this.setLayout(new GridLayout(i, j));

        for (int m = 0; m < i; m++) {
            for (int n = 0; n < j; n++) {
                pnlMain[m][n] = new JPanel();
                this.add(pnlMain[m][n]);
            }
        }

        // Erstellung
        lblfx = new JLabel("Bitte geben sie f(x) an: ");
        txtFunktion = new JTextField();
        btnPlot = new JButton("Plot!");

        // Eigenschaften der J's
        txtFunktion.setPreferredSize(new Dimension(100, 20));
        btnPlot.setPreferredSize(new Dimension(100, 20));

        // Hinzufugen
        pnlMain[0][0].add(lblfx);
        pnlMain[0][1].add(txtFunktion);
        pnlMain[1][1].add(btnPlot);

        btnPlot.addActionListener(this);

        // Eigenschaften
        this.setBounds(300, 200, 300, 100);
        this.setResizable(false);
        this.setDefaultCloseOperation(EXIT_ON_CLOSE);
        this.setVisible(true);
    }

    @Override
    public void actionPerformed(ActionEvent ae) {

        varFunktion = Double.parseDouble(txtFunktion.getText());

        if (ae.getActionCommand().equals("Plot!")) {
            new Koordinatensystem();
            this.dispose();
        }
    }

}

package ebkherne.hbit3.funktionsplotter;

import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

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

public class Koordinatensystem extends JFrame implements ActionListener {

    private JPanel pnlMain;
    private JButton btnZuruck;
    protected JPanel Zeichnen = new Zeichnen();

    public Koordinatensystem() {

        btnZuruck = new JButton("Zurück");
        btnZuruck.addActionListener(this);

        pnlMain = new JPanel(new BorderLayout());
        pnlMain.add(Zeichnen, BorderLayout.CENTER);
        pnlMain.add(btnZuruck, BorderLayout.SOUTH);

        this.setPreferredSize(new Dimension(607, 609));
        this.pack();
        this.setContentPane(pnlMain);
        this.setResizable(false);
        this.setDefaultCloseOperation(EXIT_ON_CLOSE);
        this.setVisible(true);
    }

    @Override
    public void actionPerformed(ActionEvent ae) {

        if (ae.getActionCommand().equals("Zurück")) {
            this.dispose();
            new Angaben();
        }

    }

}

package ebkherne.hbit3.funktionsplotter;

import java.awt.Color;
import java.awt.Graphics;

import javax.swing.JPanel;

public class Zeichnen extends JPanel {

    public Zeichnen() {

       
    }

    public void paint(Graphics g) {

        super.paint(g);
        g.setColor(Color.BLACK);
        g.drawLine(0, 300, 600, 300);
        g.drawLine(300, 0, 300, 600);

        for (int i = 0; i <= this.getWidth(); i += 20) {

            g.drawLine(i, 295, i, 305);
        }

        for (int i = 0; i <= this.getHeight(); i += 20) {

            g.drawLine(295, i, 305, i);
        }

    }

}

 

[Robat]

Und was genau ist deine Frage?

Wenn du - so wie es das Bild impliziert - jede beliebige Funktion zeichnen lassen willst solltest du noch mal einen Schritt zurück gehen. Das ist ohne externe Library gar nicht mal so trivial.
Wenn es dir wirklich nur um die Funktion f(x) = x² geht dann .. nun ja überleg dir mal wie du dir von Hand die Funktion malen würdest.

Du würdest dir ein bestimmtes Intervall vorgeben (sagen wir -100 <= x <= 100) und für jedes x das y errechnen und einen Punkt malen. Am Ende würdest du die Punkte verbinden.
Das kannst du auch in Java machen. Iteriere über dein Intervall was du hast (sicherlich -WIDTH/2 <= x <= WIDTH/2) und rechne für jeden Punkt x² aus. (Tipp: Math.pow(base, exp) ).
Die Punkte kannst du dann bspw durch ein PolygonLine verbinden lassen.

Gruß Robert

 

[JStein52]

Mhmmm ... ich würde mal sagen die Zauberworte sind:

- Wertebereich in x-Richtung abfragen ( z.B. x = -3.5 bis x = +1.0 )
- daraus die Extemwerte der Funktion in diesem Intervall berechnen (z.B. y = -3.5 und y = +5.0)
- mit diesen Werten und der Höhe und Breite des Plotbereiches in Pixeln die X- und y-Achsen skalieren.
- dann den Wertebereich pixelweise durchlaufen und für jeden x-Wert den zugehörigen y-Wert ausrechnen und dort einen Punkt malen.
- wenn du es hübsch machen willst noch die Achsen einzeichnen mit irgendeiner Beschriftung.
Implementieren würde ich den eigentlichen Plotter als Subklasse von JPanel (so wie du es oben begonnen hast.) Ich würde diese Klasse abstrakt machen mit einer abstrakten Methode double f(double x) und in einer abgeleiteten Klasse implementierst du diese, z.B. f(x) =x^2 oder f(x) = sin(x) oder ... oder ...

 

[Mosquera]

Danke fuer eure Antworten. Habe es nach den ganzen Stunden dann auch mal gerafft und fertig gestellt 😀

 

[JStein52]

hier auch mal ein Link falls du doch beliebige Funktionen plotten willst: https://stackoverflow.com/questions/3422673/evaluating-a-math-expression-given-in-string-form

 

[Mosquera]

Guten Tag,

habe mir heute irgendwo ein Fehler untergeschoben 🙁
Kann zwar manche Funktionen zeichnen (nur x*x und noch hoeher, aber f(x)=x nicht), aber komischerweise ist die untere Haelfte der Y-Achse verschwunden.
Wenn ihr gerade mal drauf schaut, waere es auch toll wenn ihr mir einmal sagen koenntet wie ich am besten die Punkte vom Graphen verbinden kann.

Wie immer hier ein Bild. (puu.sh)

package ebkherne.hbit3.funktionsplotter;

import java.awt.Dimension;

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

public class GUI extends JFrame {

    protected JPanel Zeichnen;
 
    public GUI() {
     
        Zeichnen = new Zeichnen(600, 600);
     
        this.setPreferredSize(new Dimension(606, 629));
        this.pack();
        this.setContentPane(Zeichnen);
        this.setResizable(false);
        this.setDefaultCloseOperation(EXIT_ON_CLOSE);
        this.setVisible(true);
    }

}

package ebkherne.hbit3.funktionsplotter;

import java.awt.Color;
import java.awt.Graphics;

import javax.swing.JPanel;

public class Zeichnen extends JPanel {

    private int X, Y;
 
    public Zeichnen(int X, int Y) {
     
        this.X = X;
        this.Y = Y;
    }

    public void paint(Graphics g) {

        super.paint(g);
        g.drawLine(0, this.getHeight() / 2, X, this.getHeight() / 2);
        g.drawLine(this.getWidth() / 2, 0, this.getWidth() / 2, Y);
        System.out.println("Breite:" + this.getWidth() + " " + "Hoehe:" + this.getHeight());

        for (int i = 0; i < this.getWidth(); i += 15) {
         
            g.drawLine(this.getWidth() / 2 - 5, i, this.getWidth() / 2 + 5, i);
            g.drawLine(i, this.getHeight() / 2 - 5, i, this.getHeight() / 2 + 5);
        }
     
        for (X = -this.getWidth(); X < this.getWidth(); X++) {
         
            int X_update = X;
            int Y_update = Y;
         
            Y = X*X/this.getHeight()-(this.getHeight()/2);
         
            X_update = X;
            Y_update = (this.getHeight()/2) - Y;
         
         
            g.drawLine(X_update+(this.getWidth()/2), Y_update-(this.getHeight()/2), X_update+(this.getWidth()/2), Y_update-(this.getHeight()/2));
        }
     
     
    }
 
}