title: Setting up a Timeline with a for loop in JavaFX
body: <p>I'm trying to write an animated sort for a class I'm in.  My goal is to have the sort displayed as vertical white bars that will be rendered on the canvas I've created.</p>
  
  <p>I've attempted to accomplish this using a <strong>Timeline and Keyframes</strong>, but the output I get is a blank white canvas that after a few moments outputs the finished and sorted array.</p>
  
  <p>I've resorted to just shuffling around code with no success, and can't find any helpful examples online.  I'm hoping someone with some more experience with JavaFX animation can help me learn more about how to properly set this up!</p>
  
  <p>Note that in the code below the array created with the random method is commented out because when used it makes the program hang for long time.  The code will output in a reasonable time with a smaller array.</p>
  
  <pre><code>import java.util.Random;
  
  import javafx.animation.KeyFrame;
  import javafx.animation.Timeline;
  import javafx.util.Duration;
  import javafx.event.ActionEvent;
  import javafx.event.EventHandler;
  
  import javafx.application.Application;
  import javafx.scene.Scene;
  import javafx.scene.layout.GridPane;
  import javafx.stage.Stage;
  import javafx.scene.canvas.Canvas;
  import javafx.scene.canvas.GraphicsContext;
  import javafx.scene.paint.Color;
  
  public class Project06 extends Application
  {
      final int SCALE = 16;
  
      final int WIDTH = 64;
      final int HEIGHT = 32;
  
      int[][] pixels;
  
      Timeline sortLoop;
  
      int[] myArray = {32,28,22,20,16,13,10,9,5,3};
  
  
      @Override
      public void start(Stage primaryStage) throws Exception
      {
          pixels = new int[WIDTH][HEIGHT];
  
          int[] myArray = new int[WIDTH];
  
          /*
          Random rand = new Random();
          for (int i = 0; i &lt; WIDTH; i++)
          {
              myArray[i] = rand.nextInt((HEIGHT) + 1);
          }
          */
  
          Canvas display = new Canvas (WIDTH*SCALE, HEIGHT*SCALE);
  
          GraphicsContext gc = display.getGraphicsContext2D();
  
          GridPane grid = new GridPane();
          grid.add(display, 0, 0);
  
          primaryStage.setTitle("Sort");
          primaryStage.setScene(new Scene(grid, WIDTH*SCALE, HEIGHT*SCALE));
          primaryStage.show();
  
          sortLoop = new Timeline();
          sortLoop.setCycleCount(Timeline.INDEFINITE);
  
          // Sort array
          for (int i = 0; i &lt; myArray.length - 1; i++)
          {        
              if (myArray[i] &gt; myArray[i + 1])
              {
                  int swap = myArray[i];
                  myArray[i] = myArray[i + 1];
                  myArray[i + 1] = swap;
                  i = -1;
              }
  
              // Clear screen by zeroing out pixel array
              for (int k = 0; k &lt; WIDTH; k++)
              {
                  for (int j = 0; j &lt; HEIGHT; j++)
                  {
                      pixels[k][j] = 0;
                  }
              }
  
              // Draw array with vertical bars (assign values to canvas array)
              for (int k = 0; k &lt; myArray.length; k++)
              {
                  for (int j = (HEIGHT - 1); j &gt; ((HEIGHT - myArray[k]) - 1); j--)
                  {
                      pixels[k][j] = 1;   
                  }
              }
  
              KeyFrame kf = new KeyFrame(Duration.seconds(1), actionEvent -&gt; {
  
                  // Render canvas
                  for (int k = 0; k &lt; WIDTH; k++)
                  {
                      for (int j = 0; j &lt; HEIGHT; j++)
                      {
                          if (pixels[k][j] == 1)
                          {
                              gc.setFill(Color.WHITE);
                              gc.fillRect((k*SCALE), (j*SCALE), SCALE, SCALE);
                          }
                          else
                          {
                              gc.setFill(Color.BLACK);
                              gc.fillRect((k*SCALE), (j*SCALE), SCALE, SCALE);
                          }
                      }
                  }
  
              });
  
              sortLoop.getKeyFrames().add(kf);
              sortLoop.play();
          }
      }
  
      public static void main(String[] args)
      { 
          launch(args);
      }
  }
  </code></pre>