My Sine Graph doesn't carry on when zooming out but carrys on when making the app window longer not sure where its wro

Question

Before Zooming Out After Zooming Out When making the window longer it carries on on the left

This is the JPanel of my project.

package SineWave;

import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.event.MouseWheelEvent;
import java.awt.event.MouseWheelListener;
import java.awt.geom.Line2D;

import javax.swing.JOptionPane;
import javax.swing.JPanel;

public class SineWave extends JPanel implements MouseWheelListener {
    private double scale = 1.0;

    public SineWave() {
        addMouseWheelListener(this);
        
    }

    public void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D g2 = (Graphics2D) g;
        g2.setColor(Color.BLACK);
        double xScale = getWidth() / 2 * scale;
        double yScale = getHeight() / 2 * scale;
        g2.draw(new Line2D.Double(0, getHeight() / 2 * scale, getWidth(), getHeight() / 2 * scale));
        g2.draw(new Line2D.Double(getWidth() / 2 * scale, 0, getWidth() / 2 * scale, getHeight()));
        g2.setColor(Color.BLUE);
        double x, y, oldx = 0, oldy = getHeight() / 2;
        for (x = 0; x <= getWidth(); x += 0.1) {
            y = getHeight() / 2 - Math.sin((x - getWidth() / 2) / 100) * 100;
            g2.draw(new Line2D.Double(oldx * scale, oldy * scale, x * scale, y * scale));
            oldx = x;
            oldy = y;
        }
    }

    public void mouseWheelMoved(MouseWheelEvent e) {
        
        
        
        if (e.getWheelRotation() < 0) {
            
            scale *= 1.1;
        } else {
            scale /= 1.1;
        }
        repaint();
    }
}

This is my JFrame of my project.

package SineWave;

import javax.swing.JFrame;

public class MyFrame extends JFrame{
    MyFrame(){
        this.setSize(500, 500);
        SineWave wave = new SineWave();
        this.add(wave);
        this.setVisible(true);
    }

}

I have tried looking at the paint component but not sure where it is going wrong and what the solution is, the axis also aren't centred. I tried making an edit but it just made the cuvre weird and stopped drawing.

I have also tried asking AI to find the issue could be but couldn't come up with an answer which was helpful except for ask on stackoverflow.

Something like this:

Answer 1

Your scale value is NOT what you expect since the MouseWheelListener doesn't work the way you expect.

Try the code below:

public void mouseWheelMoved(MouseWheelEvent e) {

    System.out.println( e.getWheelRotation() );

    if (e.getWheelRotation() == 0) return;

    if (e.getWheelRotation() < 0) {
        scale *= 1.1;
    } else {
        scale /= 1.1;
    }

    repaint();
}

And you will see that the rotation is 0 multiple time before it is 1 or -1 so your else condition is executed multiple times causing the scale factor to decrease.

Edit:

Based on your image it appears you want to be able to control the "width" needed to display a complete sine wave.

Your current code is essentially painting a single sine wave in the panel. You can't just "scale" the image to create more (or less) sine waves in the space available. Instead you need to actually paint more sine waves.

So how do you do this?

Based on trial and error I realized it is the parameter you pass to the sine(...) method that controls the width.

The code below uses the mouse wheel to adjust this value to control the width of the sine wave:

import java.awt.*;
import java.awt.event.*;
import java.awt.geom.Line2D;
import javax.swing.*;

public class SineWave extends JPanel implements MouseWheelListener
{
    private int scale = 100;

    public SineWave()
    {
        addMouseWheelListener(this);
    }

    public void paintComponent(Graphics g)
    {
        super.paintComponent(g);
        Graphics2D g2 = (Graphics2D) g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);

        double midX = getWidth() / 2;
        double midY = getHeight() / 2;

        g2.setColor(Color.BLACK);
        g2.draw(new Line2D.Double(0, midY, getWidth(), midY));
        g2.draw(new Line2D.Double(midX, 0, midX, getHeight()));

        g2.setColor(Color.BLUE);
        double x, y, oldx = 0, oldy = midY;

        for (x = 0; x <= getWidth(); x += 1)
        {
            y = midY - Math.sin(x / scale) * 100;
            System.out.println(x + " : " + y);
            g2.draw(new Line2D.Double(oldx, oldy, x, y));
            oldx = x;
            oldy = y;
        }
    }

    @Override
    public Dimension getPreferredSize()
    {
        return new Dimension(628, 300);
    }

    public void mouseWheelMoved(MouseWheelEvent e)
    {
        if (e.getWheelRotation() == 0) return;

        if (e.getWheelRotation() < 0) {
            scale += 5;
        } else {
            scale -= 5;
        }

        if (scale < 5)
            scale = 5;

        repaint();
    }

    public static void main(String[] args) throws Exception
    {
        JFrame frame = new JFrame();
//      frame.setSize(d500, 500);
        SineWave wave = new SineWave();
        frame.add(wave);
        frame.pack();
        frame.setVisible(true);
    }
}

Note: I made the preferred width of the panel 628 because that is the number of iterations needed to complete the sine wave when using the scaling factor of 100 as you can see by the output generated when the sine wave is painted.