When complete, your program should behave like the one shown in the VIDEO accompanying this lab.

Below is a snapshot. Each time the user clicks the Circles button, randomly colored circles flow into the display from the lower right and continuously change their shapes.

• Download this Circles.zip file and use the NetBeans Import Project > From ZIP... option to create the project Circles.
• The important classes are Circles.java and CirclesTest.java, whose listings can be seen from the menu to the left.
• Run (test) the CirclesTest.java file and you should get the display shown below. Nothing happens when you click the Circles button, but you can close the window to exit.
• Follow the Steps in the menu.

• A small amount of code is added at each step.
• When a step involves JavaFX, it will be explained.
• Make sure that you have successfully completed a step before moving to the next.
• As you make changes to this project, you may need to do a Clean and Build before running to make sure your changes are incorporated.

• Ignore the "unused import" warnings; they will be used later
• Note the use of the constants:
  • There will be ROWS rows of circles
  • There will be COLS columns of circles
  • Each circle will be displayed in a square area with side length CELL_SIZE
  • The width and height of the circle display area can be calculated from these constants

• The canvas is a Pane (package javax.scene.layout) which currently is 0 × 0 pixels. Use the Pane class's setPrefSize method to properly size it.
• The canvas and starter button are children of a VBox container (same package). Use the VBox class's setAlignment method so that the button is centered at the bottom.

• The display size, in pixels, is determined by the CELL_SIZE and the number of ROWS and COLS
• The coordinates of the upper left corner of the display are (0,0)
• The circle is centered in the upper left square of the canvas whose side length is CELL_SIZE
• The circle has a radius of CELL_SIZE/4

This method will be tested by calling it from the handler for the button.

• Returns void
• Accepts a single Circle argument
  • Note: The Circle class is in the javafx.scene.shape package.
• Uses Circle class methods to set the x and y coordinates of the center so that the circle appears in the upper left corner of the display
• Adds the circle to the canvas
  • Note: Use canvas.getChildren().add(...);

Your addToCanvas method will be tested in the next step.

• The argument to setOnAction is an object implementing the EventHandler functional interface
• This argument can be specified using a lambda expression of the form:

• You need only give the circle a radius, since its location is set by addToCanvas

• Takes no arguments
• Creates an infinite stream of circles by calling the static Stream.generate method
• Transforms the infinite stream into one limited by the length of a row
• Returns the resulting Stream<Circle>

Test makeRow by putting the following at the end of the Circles constructor:

When CirclesTest.java is tested, you should see the following in the Output window:

	Circle[centerX=0.0, centerY=0.0, radius=25.0, fill=0x000000ff]
	Circle[centerX=0.0, centerY=0.0, radius=25.0, fill=0x000000ff]
	Circle[centerX=0.0, centerY=0.0, radius=25.0, fill=0x000000ff]
	Circle[centerX=0.0, centerY=0.0, radius=25.0, fill=0x000000ff]
	Circle[centerX=0.0, centerY=0.0, radius=25.0, fill=0x000000ff]	
      

should result in the circle being placed in the bottom right position of the display.

• Returns void
• Takes an argument of type Stream<Circle>
• Initializes the col index to zero
• Consumes the stream using the forEach method:
  • The Stream.forEach method expects an object implementing the Consumer<T> functional interface.
  • Use this lambda expression:

Now the top row of circles should be inserted into the display.

• Takes no arguments
• Creates an infinite stream of streams of circles by calling the static Stream.generate method
• Transforms the infinite stream into one limited by the number of rows
• Returns the resulting Stream<Stream<Circle>>

Test makeAllRows by putting the following at the end of the Circle's constructor (replacing the previous test code):

When CirclesTest.java is tested, the Output window should show printed representations of 20 circles.

• Returns void
• Takes an argument of type Stream<Stream<Circle>>
• Initializes the row index to zero
• Consumes the stream using the forEach method:
  • Use this lambda expression:

Now all rows of circles should be inserted into the display.

• Use the setFill method that the Circle class inherits from Shape
• setFill accepts a Color object (from package javafx.scene.paint)
• The Color constructor accepts three double values representing red, green, and blue color components, and a fourth double value representing the color opacity
  • Use Math.random() to produce random values for each of the color components
  • Use 1.0 for the color opacity

• TranslateTransition: to move the circles from the bottom right corner of the display to their correct positions
• ScaleTransition: to continuously and randomly change the size of the circles

Modify addToCanvas so that each circle is initially placed in the lower right corner.

• Use local double values fromX and fromY to hold the coordinates of this initial location
• Set the circle's center location to (fromX, fromY)
• Retain the toX and toY variables that you initially used to place the circles

The amount of time taken to complete the movement is given to the TranslateTransition constructor as a Duration object. For example:

will create a transition that takes half a second.

Here are the TranslateTransition methods you will use. Suppose that the TranslateTransition object is named tt:

• setNode: to tell tt which node is being animated, in this case the circle passed into addToCanvas (a "node" is any element of a JavaFX display)
• setByX: to tell tt how far in the x direction the circle is to be moved (can be negative)
• setByY: to tell tt how far in the y direction the circle is to be moved (can be negative)
• play: to initiate the animation

• This should be added to the end of addToCanvas.
• The arguments to setByX and setByY can be easily calculated using toX, fromX, toY, and fromY.

will create a scale transition that takes half a second.

Here are the ScaleTransition methods you will use. Suppose that the ScaleTransition object is named st:

• setNode: to tell st which node is being scaled, in this case the circle passed into addToCanvas
• setByX: to give st a "scale factor" in the x direction, i.e. how much to change the node's width
• setByY: to give st a "scale factor" in the y direction, i.e. how much to change the node's height
• setCycleCount: to tell st how many times to repeat the animation
• setAutoReverse: to tell st whether to automatically reverse the animation
• play: to initiate the animation

• This should be added to the end of addToCanvas.
• If the same duration value is given to all calls to the ScaleTransition constructor, all circles will expand and shrink in unison. Use Math.random() to experiment with giving each circle's scale transition object a randomly computed duration.
• You can experiment with scale factors for setByX and setByY. A scale factor of 1.0 increases the affected property by 100%.

• Export your Circles project to Circles.zip.
• Submit Circles.zip by going to and clicking Submission under Lab Exercise: Java 8

• Displaying without animation: 6 points
• With animation: 4 more points