Java Swing GUI for equation 5((θ/β) - cos(2πθ/β)) - to draw continuous graph

Question

This is an extension to my previous question posted here -- Java Swing GUI for equation 5((θ/β) - cos(2πθ/β))

I have implemented the Java program based on the answers provided in the post an here is my program:

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

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

public class DisplacementFunctionNew extends JFrame {
    public DisplacementFunctionNew() {
        setLayout(new BorderLayout());
        add(new CosGraph(), BorderLayout.CENTER);
    }

    public static void main(String[] args) {
        DisplacementFunctionNew frame = new DisplacementFunctionNew();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(6000, 6000);
        frame.setVisible(true);
        frame.setLocationRelativeTo(null);
        frame.setTitle("SineWave");
    }

    class CosGraph extends JPanel {
        public void paintComponent(Graphics g) {

            int graphHeight = 5; // Declared this to set the height of graph based on the value given here.

            super.paintComponent(g);
            int xBase = 100;
            int top = 100;
            int yScale = 100;
            int xAxis = 360;

            int yBase = top + yScale;

            g.drawLine(xBase, top, xBase, top + 2 * yScale);
            g.drawLine(xBase, yBase, xBase + xAxis, yBase);

            g.setColor(Color.red);

            double maxY = 0;
            for (int i = 0; i < 360; i++) {
                maxY = Math.max(maxY, Math.abs(getValue(i)));
            }

            int x, y;


            for (int i = 0; i < 360; i++) {

                x = xBase + i;
                y = yBase - (int) (getValue(i)*graphHeight / maxY * yScale);
                g.drawLine(x, y, x, y);

            }
        }

        private double getValue(int theta) {
            int beta = 45;
            double b = (theta / (double) beta);
            double angle = 2 * Math.PI * (b);
            double c = Math.cos(angle);

            double s = (b - c);
            return s;
        }
    }
}

Now in this program I want to have a variable called graphHeight that helps to increase the height of the graph. If I give the value of the variable as 1 then I can see the output like this:

Now if I try to increase the height to 5 then I get the graph but it is not shown smoothly or continuous curve, I get the output like this:

Can someone please help me how to get the output as smooth continuous curve?

Answer 1

You are drawing a curve using points. You are placing one point at each location on the x axis -- this makes sense to do.

When the graph is small, it looks fine, because the y separation of these points is relatively small. However, as you increase the graph size, this flaw becomes more noticeable.

The solution here is to fill in the vertical space with lines. You have a few options for the exact implementation of this:

1. Draw a line from [x(i), y(i)] to [x(i+1),y(i+1)] -- this is easy, but may not look the way you want.
2. Draw a line from [x(i), y(i)] to [x(i),y(i+1)] -- this is still pretty easy, but it won't be quite correct: you're continuing up so that you could be an entire pixel off.
3. Draw a line from [x(i), y(i)] to [x(i),(y(i)+y(i+1))/2], and then from [x(i+1), (y(i)+y(i+1))/2] to [x(i+1),y(i+1)] -- this is what 1 should do (neglecting anti-aliasing), and will be the most correct of your possible options.

I would suggest number 3. Note that you can implement this with a loop of the form:

        int lastY = yBase - (int) (getValue(0)*graphHeight / maxY * yScale);
        for (int i = 1; i < 360; i++) {

            x = xBase + i;
            y = yBase - (int) (getValue(i)*graphHeight / maxY * yScale);
            g.drawLine(x-1, lastY, x-1, (y+lastY)/2);
            g.drawLine(x, (y+lastY)/2, x, y);

        }

If the one pixel overlap bothers you, you can make it a bit more complex such that the second line starts at +/- 1 pixel (depending on if the function is increasing or decreasing).

---

Alternatively, you can implement number 3 by manually drawing the line, using a for loop, and basically write a special-case version of Bresenham's line algorithm.

Answer 2

You use graphHeight to define the y of the next point to be painted with g.drawLine(x, y, x, y);. The distance between drawn points will be related to the graphHeight variable