0

I have a static number of slots for the number in the wheel game. Start from number 00 to number 1 (clockwise). The position count is 0 to 37 in my Collection array. Currently, I successful place the ball position in the middle of the number with 1 degree. But I unable to calculate a correct value for each of the position when I tried to pass in the number position.

I already tried messing with the calculation, it either the ball sit in the middle between the number or out of range!

    public class WheelDisplay extends JPanel implements ConstantVariable {

    private Image image;
    private ImageObserver imageObserver;
    private float degrees = 1;
    private int post = 0;

    public WheelDisplay() {
        ImageIcon icon = new ImageIcon(IMAGE_LOCATION);
        image = icon.getImage();
        imageObserver = icon.getImageObserver();
    }

    /** Credit to stackoverflow forum : https://stackoverflow.com/questions/25923480/simple-circle-rotation-simulate-motion **/
    @Override
    public void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D g2d = (Graphics2D) g.create();

        int circleDiameter = Math.min(getWidth(), getHeight());
        double circleRadius = circleDiameter / 2;
        int offSetX = (getWidth() - circleDiameter) / 2;
        int offSetY = (getHeight() - circleDiameter) / 2;

        g2d.drawImage(image, offSetX, offSetY, circleDiameter, circleDiameter, imageObserver);

        g2d.setColor(Color.BLUE);
        int ballDiameter = (int) (circleDiameter * 0.02);
        int ballRadius =  ballDiameter / 2;

        Point p = getPointOnCircle(this.degrees, circleRadius * 0.9, circleRadius);

        int valueX = offSetX + p.x - ballRadius;
        int valueY = offSetY + p.y - ballRadius;
        g2d.fillOval(valueX, valueY, ballDiameter, ballDiameter);

        g2d.dispose();
    }

    private Point getPointOnCircle(float degress, double circleRadius, double innerCircleRadius) {

        //The calculation that allow ball sit in the middle of each number when spin
        double rads =  ((Math.PI  * degress) / 38);

        // Calculate the outter point of the line
        int xCordinate = Math.round((float) (innerCircleRadius + Math.cos(rads) * circleRadius));
        int yCordinate = Math.round((float) (innerCircleRadius + Math.sin(rads) * circleRadius));

        return new Point(xCordinate, yCordinate);
    }

    public void setDegree(int x) {
        this.degrees += 2;
        this.post = x; // The number of position coming from Collection (0-37)
    }
}

The ball supposes to sit in the middle of each 38 numbers in the wheel image.

Hope that someone can point out which part I'm doing wrong!

The image that I'm using is this.

My wheel Image without passing in number position

Marco13
  • 53,703
  • 9
  • 80
  • 159
  • (I've added your image, you could remove the previous comment now). It's not entirely clear what you want to achieve. There is a blue dot in the "6" field - is this supposed to be the ball position? If so, what's wrong with that? (A side note: The numbers do not seem to be rotating. I once created an example for painting a "nice" rotating roulette wheel at https://forum.byte-welt.net/t/painting-a-roulette-wheel/11833 , just in case you want to have a look) – Marco13 May 26 '19 at 09:29
  • Great thanks for the image. Yes I successful draw the blue ball, my problem is that the current ball does not synchronize with my backend code. I have a static collection of number with the position that same as the image and it will start at a random place. For now, the wheel class will always start at number 6 because I failed to implement the position of number into the calculation. – user3276618 May 26 '19 at 12:30
  • A *very* wild guess: You need for each number (0 to 36) the position on the circle, in degrees (or radians)? – Marco13 May 26 '19 at 13:51
  • Yes! Something like that. For now, without passing in the number, the ball will spin normally but there is no link between the static collection number and it always starts at number 6. I tried using the formula, double rads = ((Math.PI * degress) / 38) + (postion/38); but the result is a nightmare since the ball cannot sit properly in the slot and the spinning like gone crazy. – user3276618 May 26 '19 at 15:58
  • So I'm not sure what "static collection" you are talking about there. Also, you're mentioning "spinning": If you simply count up from 0 to 36 and place the ball at the position of the number, then of course it will jump around. You should describe **clearly** (**in** the question) what you are trying to achieve and what you currently have - preferably with an [MCVE]. – Marco13 May 26 '19 at 21:45
  • Apologies for not being good in explanation. I have an ArrayList of Slot class that consist the number, position and colour that will pass the position to this wheel class. Yes, for now, it succeeds spin and the ball place nicely like the image. What I'm trying to achieve is that I want the ball start spin according to the position given and it sits perfectly in the middle of the number. What I can't make is that the ball did not spin correctly and does not sit in the middle of the number. – user3276618 May 27 '19 at 03:29
  • It may not be relevant whether you have an `ArrayList` or something else. It's much more important to say what the "position" is that you mention. I assume that this is the value that is passed to `setDegree`. You are storing this value in the `post` variable, but this variable is not used. Instead, you only increase the `degrees` variable there (which is independent of the "position" in your case). Taking a step back: Do you want the ball to be animated, like the circle in https://stackoverflow.com/a/25923780/3182664 , and then stop at one number? – Marco13 May 27 '19 at 10:11
  • Yes for all your question. I succeed animate the spin but it not relevant with the random start or post. It just purely spins. It supposes to include the position into the calculation and get the correct degree/radian. But that part, I failed to do so. – user3276618 May 27 '19 at 11:49
  • Again: You are calling `setDegree`, *maybe* with the right value. But this value is not used. Instead you are only increasing the `degrees` value (which is used for painting the ball). The value that you are passing in there, `x`, is only stored as `this.post`, but this is not used anywhere. – Marco13 May 27 '19 at 12:00

0 Answers0