Make circle rotate w/4 colors in javafx using button

Programming
,
1

I’m trying to create a four-color wheel that rotates 90 degrees to the right when a button is pressed. The wheel should have four distinct colors, with each quarter of the wheel having a different color.

The code below shows what I have so far. The wheel and button appear correctly, but the wheel does not rotate when the button is pressed.

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.layout.FlowPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Arc;
import javafx.scene.shape.ArcType;
import javafx.stage.Stage;
import javafx.event.ActionEvent;
import javafx.geometry.Pos;
import javafx.scene.control.Button;
import java.util.concurrent.TimeUnit;

public class four_color_wheel extends Application {
    private Group circle;
    private FlowPane pane;
    private Button rotate;
    private Arc blueArc, greenArc, yellowArc, redArc;



    public void start(Stage primaryStage) {
    

        // Blue Arc
        Arc blueArc = new Arc(200, 200, 150, 150, 0, 90);
        blueArc.setType(ArcType.ROUND);
        blueArc.setStroke(Color.BLUE);
        blueArc.setFill(Color.BLUE);
    
        // Green Arc
        Arc greenArc = new Arc(200, 200, 150, 150, 90, 90);
        greenArc.setType(ArcType.ROUND);
        greenArc.setStroke(Color.GREEN);
        greenArc.setFill(Color.GREEN);
    
        // Yellow Arc
        Arc yellowArc = new Arc(200, 200, 150, 150, 180, 90);
        yellowArc.setType(ArcType.ROUND);
        yellowArc.setStroke(Color.YELLOW);
        yellowArc.setFill(Color.YELLOW);

        // Red Arc
        Arc redArc = new Arc(200, 200, 150, 150, 270, 90);
        redArc.setType(ArcType.ROUND);
        redArc.setStroke(Color.RED);
        redArc.setFill(Color.RED);

        Group circle = new Group(blueArc, greenArc, yellowArc, redArc);

        Button rotate = new Button("Rotate Right");
        rotate.setOnAction(this::processButtonPress);
    
        FlowPane pane = new FlowPane(circle, rotate);
        pane.setAlignment(Pos.CENTER);
        pane.setHgap(20);
        pane.setStyle("-fx-background-color: GRAY");
    
        Scene scene = new Scene(pane, 300, 100);
        primaryStage.setTitle("Four-Color Wheel");
        primaryStage.setScene(scene);
        primaryStage.show();
     
    
    
    } 
    
    
 public void processButtonPress(ActionEvent event)
    {
        Group circle = new Group(blueArc, greenArc, yellowArc, redArc);
        circle.setRotate(90);
    }
}
2

The issue in the code is that you are creating local variables with the same name as your instance variables in the start method and the processButtonPress method. This is causing the rotation to not work correctly. To fix this issue, you need to remove the variable declarations in the methods so that you are referring to the instance variables.

Here is the corrected code:

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.layout.FlowPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Arc;
import javafx.scene.shape.ArcType;
import javafx.stage.Stage;
import javafx.event.ActionEvent;
import javafx.geometry.Pos;
import javafx.scene.control.Button;

public class FourColorWheel extends Application {
    private Group circle;
    private FlowPane pane;
    private Button rotate;
    private Arc blueArc, greenArc, yellowArc, redArc;

    public void start(Stage primaryStage) {
        // Blue Arc
        blueArc = new Arc(200, 200, 150, 150, 0, 90);
        blueArc.setType(ArcType.ROUND);
        blueArc.setStroke(Color.BLUE);
        blueArc.setFill(Color.BLUE);

        // Green Arc
        greenArc = new Arc(200, 200, 150, 150, 90, 90);
        greenArc.setType(ArcType.ROUND);
        greenArc.setStroke(Color.GREEN);
        greenArc.setFill(Color.GREEN);

        // Yellow Arc
        yellowArc = new Arc(200, 200, 150, 150, 180, 90);
        yellowArc.setType(ArcType.ROUND);
        yellowArc.setStroke(Color.YELLOW);
        yellowArc.setFill(Color.YELLOW);

        // Red Arc
        redArc = new Arc(200, 200, 150, 150, 270, 90);
        redArc.setType(ArcType.ROUND);
        redArc.setStroke(Color.RED);
        redArc.setFill(Color.RED);

        circle = new Group(blueArc, greenArc, yellowArc, redArc);

        rotate = new Button("Rotate Right");
        rotate.setOnAction(this::processButtonPress);

        pane = new FlowPane(circle, rotate);
        pane.setAlignment(Pos.CENTER);
        pane.setHgap(20);
        pane.setStyle("-fx-background-color: GRAY");

        Scene scene = new Scene(pane, 300, 100);
        primaryStage.setTitle("Four-Color Wheel");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public void processButtonPress(ActionEvent event) {
        circle.setRotate(circle.getRotate() + 90);
    }
}

Now, when you press the “Rotate Right” button, the wheel will rotate 90 degrees to the right.