Trident part 8 – timeline scenarios

June 25th, 2009

Over the course of this week i’m talking about different concepts in the Trident animation library for Java applications. Part eight talks about timeline scenarios that allow creating parallel, sequential, staged or arbitary execution graphs of timelines, runnables, Swing workers and custom application actors.

Timeline scenarios

Timeline scenario allows combining multiple timeline scenario actors in a parallel, sequential or custom order.

There are three core types of timeline scenario actors:

Timelines
TimelineRunnable which is an extension of Runnable
Swing-specific TimelineSwingWorker class which is an extension of SwingWorker.

Additional types of timeline scenario actors can be added in the application code by implementing the TimelineScenario.TimelineScenarioActor interface.

To create a custom timeline scenario, use the following APIs of the TimelineScenario class:

public void addScenarioActor(TimelineScenarioActor actor) adds the specified actor
public void addDependency(TimelineScenarioActor actor, TimelineScenarioActor... waitFor) specifies the dependencies between the actors

Timeline scenario kinds

There are three built-in timeline scenario kinds that address the most common dependencies between the actors:

Timeline.Parallel runs all the actors in a parallel fashion
Timeline.Sequence runs the actors one after another in the order they have been added
Timeline.RendezvousSequence allows simple branch-and-wait ordering. The rendezvous scenario has a stage-like approach. All actors belonging to the same stage run in parallel, while actors in stage N+1 wait for all actors in stage N to be finished. The RendezvousSequence.rendezvous() marks the end of one stage and the beginning of another.

Simple Swing timeline scenario

The following example shows a Swing application with a simple timeline scenario that launches five parallel timelines. It shows the code behind this video, where every volley is a separate timeline, and all currently playing volleys are part of the same timeline scenario.

In the code, there are three “hierarchy” levels of fireworks:

The entire fireworks display – this is a timeline scenario that consists of five volley explosions.
The volley explosion implemented in VolleyExplosion class – this is a collection of single explosions that have the same color and originate from the same explosion center point.
The single explosion implemented in SingleExplosion class – this is a fading circle that represents a single “leaf” part of the volley explosion.

The code behind the single explosion is quite simple:

   public class SingleExplosion {
      float x;

      float y;

      float radius;

      float opacity;

      Color color;

      public SingleExplosion(Color color, float x, float y, float radius) {
         this.color = color;
         this.x = x;
         this.y = y;
         this.radius = radius;
         this.opacity = 1.0f;
      }

      public void setX(float x) {
         this.x = x;
      }

      public void setY(float y) {
         this.y = y;
      }

      public void setRadius(float radius) {
         this.radius = radius;
      }

      public void setOpacity(float opacity) {
         this.opacity = opacity;
      }

      public void paint(Graphics g) {
         Graphics2D g2d = (Graphics2D) g.create();
         g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
               RenderingHints.VALUE_ANTIALIAS_ON);
         g2d.setComposite(AlphaComposite.SrcOver.derive(this.opacity));
         g2d.setColor(this.color);
         g2d.fill(new Ellipse2D.Float(this.x - this.radius, this.y
               - this.radius, 2 * radius, 2 * radius));
         g2d.dispose();
      }
   }

It has four fields that specify its location, size, opacity and color. Each field except the color has a public setter that is used in the timeline created in the parent volley explosion. Finally, it has a custom painting implementation that paints the graphical representation of the single volley.

The volley explosion is implemented by the following class:

   public class VolleyExplosion {
      private int x;

      private int y;

      private Color color;

      private Set circles;

      public VolleyExplosion(int x, int y, Color color) {
         this.x = x;
         this.y = y;
         this.color = color;
         this.circles = new HashSet();
      }

      public TimelineScenario getExplosionScenario() {
         TimelineScenario scenario = new TimelineScenario.Parallel();

         int duration = 1000 + (int) (1000 * Math.random());
         for (int i = 0; i < 18; i++) {
            float dist = (float) (50 + 10 * Math.random());
            float radius = (float) (2 + 2 * Math.random());
            for (float delta = 0.6f; delta <= 1.0f; delta += 0.2f) {
               float circleRadius = radius * delta;

               double degrees = 20.0 * (i + Math.random());
               float radians = (float) (2.0 * Math.PI * degrees / 360.0);

               float initDist = delta * dist / 10.0f;
               float finalDist = delta * dist;
               float initX = (float) (this.x + initDist
                     * Math.cos(radians));
               float initY = (float) (this.y + initDist
                     * Math.sin(radians));
               float finalX = (float) (this.x + finalDist
                     * Math.cos(radians));
               float finalY = (float) (this.y + finalDist
                     * Math.sin(radians));

               SingleExplosion circle = new SingleExplosion(this.color,
                     initX, initY, circleRadius);
               Timeline timeline = new Timeline(circle);
               timeline.addPropertyToInterpolate("x", initX, finalX);
               timeline.addPropertyToInterpolate("y", initY, finalY);
               timeline.addPropertyToInterpolate("opacity", 1.0f, 0.0f);
               timeline.setDuration(duration - 200
                     + (int) (400 * Math.random()));
               timeline.setEase(new Spline(0.4f));

               synchronized (this.circles) {
                  circles.add(circle);
               }
               scenario.addScenarioActor(timeline);
            }
         }

         return scenario;
      }

      public void paint(Graphics g) {
         synchronized (this.circles) {
            for (SingleExplosion circle : this.circles) {
               circle.paint(g);
            }
         }
      }
   }

The timeline scenario that implements this volley explosion:

Each single explosion is implemented as a separate timeline.
Scenario has random duration
Single explosions are created at almost evenly distributed angles (every 20 degrees) and at almost evenly distributed distance from the center (three for each angle).
The scenario has 54 different timelines, one for each single explosion.

Now we get to the main application class. It implements the following functionality:

Playing five explosion volleys (five timeline scenarios).
Waiting for all five to be done.
Playing another five – repeating the previous two steps.
Listening to the mouse events, suspending the currently playing scenarios on mouse press, and resuming them on mouse release.

The code starts by declaring the relevant data structures:

public class Fireworks extends JFrame {
   private Set volleys;

   private Map volleyScenarios;

   private JPanel mainPanel;

Here is the constructor of this class:

   public Fireworks() {
      this.mainPanel = new JPanel() {
         @Override
         protected void paintComponent(Graphics g) {
            super.paintComponent(g);
            synchronized (volleys) {
               for (VolleyExplosion exp : volleys)
                  exp.paint(g);
            }
         }
      };
      this.mainPanel.setBackground(Color.black);
      this.mainPanel.setPreferredSize(new Dimension(480, 320));

      Timeline repaint = new SwingRepaintTimeline(this);
      repaint.playLoop(RepeatBehavior.LOOP);

      this.volleys = new HashSet();
      this.volleyScenarios = new HashMap();

      this.mainPanel.addMouseListener(new MouseAdapter() {
         @Override
         public void mousePressed(MouseEvent e) {
            synchronized (volleys) {
               for (TimelineScenario scenario : volleyScenarios.values())
                  scenario.suspend();
            }
         }

         @Override
         public void mouseReleased(MouseEvent e) {
            synchronized (volleys) {
               for (TimelineScenario scenario : volleyScenarios.values())
                  scenario.resume();
            }
         }
      });

      new Thread() {
         @Override
         public void run() {
            while (true) {
               if ((mainPanel.getWidth() > 0)
                     && (mainPanel.getHeight() > 0)) {
                  addExplosions(5);
               }
            }
         }
      }.start();

      this.add(mainPanel);
      this.pack();
      this.setLocationRelativeTo(null);
      this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
   }

We have:

A JPanel that paints all currently playing volley explosions on black background.
A looping timeline that repaints the contents of this application.
The data structures tracking the currently playing explosions.
The mouse listener that suspends the currently playing scenarios on mouse press and resumes them on mouse release.
A thread that adds five explosions in an infinite loop (see the explanation of addExplosions below)

Here is the method that makes sure that the volley explosions are run in batches of 5, even when they have different durations:

   private void addExplosions(int count) {
      final CountDownLatch latch = new CountDownLatch(count);

      for (int i = 0; i < count; i++) {
         int r = (int) (255 * Math.random());
         int g = (int) (100 + 155 * Math.random());
         int b = (int) (50 + 205 * Math.random());
         Color color = new Color(r, g, b);

         int x = 60 + (int) ((mainPanel.getWidth() - 120) * Math.random());
         int y = 60 + (int) ((mainPanel.getHeight() - 120) * Math.random());
         final VolleyExplosion exp = new VolleyExplosion(x, y, color);
         synchronized (volleys) {
            volleys.add(exp);
            TimelineScenario scenario = exp.getExplosionScenario();
            scenario.addCallback(new TimelineScenarioCallback() {
               @Override
               public void onTimelineScenarioDone() {
                  synchronized (volleys) {
                     volleys.remove(exp);
                     volleyScenarios.remove(exp);
                     latch.countDown();
                  }
               }
            });
            volleyScenarios.put(exp, scenario);
            scenario.play();
         }
      }

      try {
         latch.await();
      } catch (Exception exc) {
      }
   }

Here, we have:

A CountDownLatch that will be used to wait until all timeline scenarios that run the volley explosions are done
A random color and a random center location for each one of the volley explosions
A callback that notifies the count down latch when the timeline scenario is done
Waiting on the count down latch – until all timeline scenarios are done

And finally, the main method to launch the fireworks:

   public static void main(String[] args) {
      SwingUtilities.invokeLater(new Runnable() {
         @Override
         public void run() {
            new Fireworks().setVisible(true);
         }
      });
   }

Click below for the WebStart demo

Trident part 7 – parallel timelines in Swing and SWT

June 24th, 2009

Over the course of this week i’m talking about different concepts in the Trident animation library for Java applications. Part seven shows a more complex Swing / SWT example that illustrates usage of multiple timelines running in parallel and affecting different visual areas of the same application window.

Multiple timelines in Swing applications

Trident supports running multiple independent timelines at the same time. This page shows the Swing application behind this video, where every cell rollover is implemented as a separate timeline.

We start with a class that implements a specific grid cell:

   public static class SnakePanelRectangle {
      private Color backgroundColor;

      private boolean isRollover;

      private Timeline rolloverTimeline;

      public SnakePanelRectangle() {
         this.backgroundColor = Color.black;
         this.isRollover = false;

         this.rolloverTimeline = new Timeline(this);
         this.rolloverTimeline.addPropertyToInterpolate("backgroundColor",
               Color.yellow, Color.black);
         this.rolloverTimeline.setDuration(2500);
      }

      public void setRollover(boolean isRollover) {
         if (this.isRollover == isRollover)
            return;
         this.isRollover = isRollover;
         if (this.isRollover) {
            this.rolloverTimeline.replay();
         }
      }

      public void setBackgroundColor(Color backgroundColor) {
         this.backgroundColor = backgroundColor;
      }

      public Color getBackgroundColor() {
         return backgroundColor;
      }
   }

A few major points in this class:

The default background color of a cell is black.
The rollover timeline interpolates the background color from yellow to black over a period of 2.5 seconds.
The rollover timeline is replayed when setRollover is called with true. This restarts the timeline to interpolate the foreground color from yellow.

The next class implements a cell grid, tracing the mouse events and dispatching the rollover events to the relevant cells:

   private static class SnakePanel extends JPanel {

      private SnakePanelRectangle[][] grid;

      private int ROWS = 10;

      private int COLUMNS = 20;

      private int DIM = 20;

      public SnakePanel() {
         this.grid = new SnakePanelRectangle[COLUMNS][ROWS];
         for (int i = 0; i < COLUMNS; i++) {
            for (int j = 0; j < ROWS; j++) {
               this.grid[i][j] = new SnakePanelRectangle();
            }
         }
         this.setPreferredSize(new Dimension(COLUMNS * (DIM + 1), ROWS
               * (DIM + 1)));

         Timeline repaint = new SwingRepaintTimeline(this);
         repaint.playLoop(RepeatBehavior.LOOP);

         this.addMouseMotionListener(new MouseMotionAdapter() {
            int rowOld = -1;
            int colOld = -1;

            @Override
            public void mouseMoved(MouseEvent e) {
               int x = e.getX();
               int y = e.getY();

               int column = x / (DIM + 1);
               int row = y / (DIM + 1);

               if ((column != colOld) || (row != rowOld)) {
                  if ((colOld >= 0) && (rowOld >= 0))
                     grid[colOld][rowOld].setRollover(false);
                  grid[column][row].setRollover(true);
               }
               colOld = column;
               rowOld = row;
            }
         });
      }

      @Override
      protected void paintComponent(Graphics g) {
         Graphics2D g2d = (Graphics2D) g.create();

         g2d.setColor(Color.black);
         g2d.fillRect(0, 0, getWidth(), getHeight());

         for (int i = 0; i < COLUMNS; i++) {
            for (int j = 0; j < ROWS; j++) {
               SnakePanelRectangle rect = this.grid[i][j];
               Color backgr = rect.getBackgroundColor();

               if (!Color.black.equals(backgr)) {
                  g2d.setColor(backgr);
                  g2d.fillRect(i * (DIM + 1), j * (DIM + 1), DIM, DIM);
               }
            }
         }

         g2d.dispose();
      }
   }

A few major points in this class:

A special type of timeline is created and played in a loop. In this example, each cell rollover timeline changes the background color of that cell, but does not cause the repaint. Instead, we have a "master" repaint timeline that runs in a loop and causes the repaint of the entire grid panel.
The mouse motion listener tracks the mouse location, calling the setRollover method on relevant cells. Since each cell rollover timeline runs for 2.5 seconds, quick mouse moves will result in multiple timelines running in parallel.
The painting of each cell respects the current background color of that cell.

Finally, the main method that creates a host frame and adds the cell grid panel to it:

   public static void main(String[] args) {
      SwingUtilities.invokeLater(new Runnable() {
         @Override
         public void run() {
            JFrame frame = new JFrame("Snake");
            frame.add(new SnakePanel());
            frame.pack();
            frame.setLocationRelativeTo(null);
            frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
            frame.setVisible(true);
         }
      });
   }

Multiple timelines in SWT applications

The matching SWT code is quite similar. The single grid cell:

   public static class SnakePanelRectangle {
      private Color backgroundColor;

      private boolean isRollover;

      private Timeline rolloverTimeline;

      public SnakePanelRectangle() {
         this.backgroundColor = Display.getDefault().getSystemColor(
               SWT.COLOR_BLACK);
         this.isRollover = false;

         this.rolloverTimeline = new Timeline(this);
         this.rolloverTimeline.addPropertyToInterpolate("backgroundColor",
               Display.getDefault().getSystemColor(SWT.COLOR_YELLOW),
               Display.getDefault().getSystemColor(SWT.COLOR_BLACK));
         this.rolloverTimeline.setDuration(2500);
      }

      public void setRollover(boolean isRollover) {
         if (this.isRollover == isRollover)
            return;
         this.isRollover = isRollover;
         if (this.isRollover) {
            this.rolloverTimeline.replay();
         }
      }

      public void setBackgroundColor(Color backgroundColor) {
         this.backgroundColor = backgroundColor;
      }

      public Color getBackgroundColor() {
         return backgroundColor;
      }
   }

The cell grid:

   private static class SnakePanel extends Canvas {

      private SnakePanelRectangle[][] grid;

      private int ROWS = 10;

      private int COLUMNS = 20;

      private int DIM = 20;

      public SnakePanel(Composite parent) {
         super(parent, SWT.DOUBLE_BUFFERED);

         this.grid = new SnakePanelRectangle[COLUMNS][ROWS];
         for (int i = 0; i < COLUMNS; i++) {
            for (int j = 0; j < ROWS; j++) {
               this.grid[i][j] = new SnakePanelRectangle();
            }
         }

         Timeline repaint = new SWTRepaintTimeline(this);
         repaint.playLoop(RepeatBehavior.LOOP);

         this.addMouseMoveListener(new MouseMoveListener() {
            int rowOld = -1;
            int colOld = -1;

            @Override
            public void mouseMove(MouseEvent e) {
               int x = e.x;
               int y = e.y;

               int column = x / (DIM + 1);
               int row = y / (DIM + 1);

               if ((column >= COLUMNS) || (row >= ROWS))
                  return;

               if ((column != colOld) || (row != rowOld)) {
                  if ((colOld >= 0) && (rowOld >= 0))
                     grid[colOld][rowOld].setRollover(false);
                  grid[column][row].setRollover(true);
               }
               colOld = column;
               rowOld = row;
            }
         });

         this.addPaintListener(new PaintListener() {
            @Override
            public void paintControl(PaintEvent e) {
               GC gc = e.gc;
               gc.setBackground(e.display.getSystemColor(SWT.COLOR_BLACK));
               gc.fillRectangle(e.x, e.y, e.width, e.height);

               for (int i = 0; i < COLUMNS; i++) {
                  for (int j = 0; j < ROWS; j++) {
                     SnakePanelRectangle rect = grid[i][j];
                     Color backgr = rect.getBackgroundColor();
                     gc.setBackground(backgr);
                     gc.fillRectangle(i * (DIM + 1), j * (DIM + 1), DIM,
                           DIM);
                  }
               }
            }
         });
      }
   }

and the main method:

   public static void main(String[] args) {
      Display display = new Display();
      Shell shell = new Shell(display);
      shell.setSize(430, 240);
      shell.setText("SWT Snake");
      FillLayout layout = new FillLayout();
      shell.setLayout(layout);

      SnakePanel snake = new SnakePanel(shell);

      shell.open();
      while (!shell.isDisposed()) {
         if (!display.readAndDispatch())
            display.sleep();
      }
      display.dispose();
   }

In this two examples we have multiple timeline running in parallel. The main repaint timeline continuously repaints the grid, and each cell has its own rollover timeline. If you move the mouse quickly over the grid, you can end up with dozens of timelines, each updating its own cell - with the "master" repaint timeline looking at the current cell color during the painting.

Click below for the WebStart demo of the Swing version

Trident part 6 – simple Swing / SWT examples

June 24th, 2009

Over the course of the next few days i’m going to talk about different concepts in the Trident animation library for Java applications. Part six shows simple Swing / SWT examples that highlight Trident support for Java-based UI toolkits.

Simple Swing example

The following example shows how to smoothly change the foreground color of a Swing button on mouse rollover.

import java.awt.Color;
import java.awt.FlowLayout;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;

import javax.swing.*;

import org.pushingpixels.trident.Timeline;

public class ButtonFg extends JFrame {
   public ButtonFg() {
      JButton button = new JButton("sample");
      button.setForeground(Color.blue);

      this.setLayout(new FlowLayout());
      this.add(button);

      final Timeline rolloverTimeline = new Timeline(button);
      rolloverTimeline.addPropertyToInterpolate("foreground", Color.blue,
            Color.red);
      rolloverTimeline.setDuration(2500);
      button.addMouseListener(new MouseAdapter() {
         @Override
         public void mouseEntered(MouseEvent e) {
            rolloverTimeline.play();
         }

         @Override
         public void mouseExited(MouseEvent e) {
            rolloverTimeline.playReverse();
         }
      });

      this.setSize(400, 200);
      this.setLocationRelativeTo(null);
      this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
   }

   public static void main(String[] args) {
      SwingUtilities.invokeLater(new Runnable() {
         @Override
         public void run() {
            new ButtonFg().setVisible(true);
         }
      });
   }
}

Here, we have a timeline that interpolates the foreground color between blue and red. The mouse listener registered on the button plays this timeline on mouse enter, and plays this timeline in reverse on mouse exit.

This example shows how the JComponent.setForeground(Color) method is used together with the built in property interpolator for the java.awt.Color class to run the timeline that interpolates the foreground color of a Swing button. Note that since the JComponent.setForeground(Color) also repaints the button, there is no need to explicitly repaint it on every timeline pulse.

If you debug this application and put a breakpoint in the JComponent.setForeground(Color) method, you will see that it is called on the Event Dispatch Thread. This is a built-in capability of the Trident core. It recognizes that the timeline is associated with a Swing component, and calls the setter method (during the timeline pulses) on the EDT.

Simple SWT example

The following example is the SWT version of changing the control foreground color on mouse rollover:

import org.eclipse.swt.SWT;
import org.eclipse.swt.events.MouseEvent;
import org.eclipse.swt.events.MouseTrackAdapter;
import org.eclipse.swt.graphics.Color;
import org.eclipse.swt.layout.GridData;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.*;
import org.pushingpixels.trident.Timeline;

public class ButtonFg {
   public static void main(String[] args) {
      Display display = new Display();
      Shell shell = new Shell(display);
      shell.setSize(300, 200);
      GridLayout layout = new GridLayout();
      shell.setLayout(layout);

      Button button = new Button(shell, SWT.RADIO);
      GridData gridData = new GridData(GridData.CENTER, GridData.CENTER,
            true, false);
      button.setLayoutData(gridData);

      button.setText("sample");

      Color blue = display.getSystemColor(SWT.COLOR_BLUE);
      Color red = display.getSystemColor(SWT.COLOR_RED);
      button.setForeground(blue);

      final Timeline rolloverTimeline = new Timeline(button);
      rolloverTimeline.addPropertyToInterpolate("foreground", blue, red);
      rolloverTimeline.setDuration(2500);
      button.addMouseTrackListener(new MouseTrackAdapter() {
         @Override
         public void mouseEnter(MouseEvent e) {
            rolloverTimeline.play();
         }

         @Override
         public void mouseExit(MouseEvent e) {
            rolloverTimeline.playReverse();
         }
      });

      shell.open();
      while (!shell.isDisposed()) {
         if (!display.readAndDispatch())
            display.sleep();
      }
      display.dispose();
   }
}

As with Swing, the Control.setForeground(Color) method is used together with the built in property interpolator for the org.eclipse.swt.graphics.Color class to run the timeline that interpolates the foreground color of an SWT radio button. Note that since the Control.setForeground(Color) also repaints the button, there is no need to explicitly repaint it on every timeline pulse.

If you debug this application and put a breakpoint in the Control.setForeground(Color) method, you will see that it is called on the SWT Thread. This is a built-in capability of the Trident core. It recognizes that the timeline is associated with a SWT component, and calls the setter method (during the timeline pulses) on the SWT thread.

Finally, since both examples are using the Timeline.play() and Timeline.playReverse() methods, the interpolation can be reversed in the middle if the user moves the mouse quickly. The rollover timeline in our example takes 2.5 seconds to complete. Suppose the user moves the mouse over the button, and then after one second moves the mouse away. The call to playReverse detects that this very timeline is already playing, and starts playing it in reverse from its current position.

Trident part 5 – supporting UI toolkits

June 23rd, 2009

Over the course of the next few days i’m going to talk about different concepts in the Trident animation library for Java applications. Part five talks about supporting Java based UI toolkits, respecting threading rules, custom property interpolators and repaint timelines.

Animations in UI toolkits

Smooth transitions and subdued animations are integral part of many modern graphical applications, and Trident comes with built-in support for Java based UI toolkits. The three UI specific requirements are addressed by the core Trident library:

Automatically respecting the threading rules of the UI toolkits
Providing property interpolators for classes that represent graphical objects of the UI toolkits
Repainting application windows that have continuous animations

Out of the box, Trident supports Swing and SWT. In addition, Trident has a pluggable layer that allows interested applications and third part developers to support additional Java UI toolkits (such as Pivot, Qt Jambi and others).

UI threading rules

Most modern UI toolkits have threading rules that the applications must respect in order to prevent application freeze and visual artifacts. The threading rules for both Swing and SWT specify that the UI-related operations must be done on the special UI thread.

The strictness of the rules is different between the toolkits. For example, Swing allows calling Component.repaint() off the UI thread – internally the repaint request is scheduled to run on that thread. However, SWT is much stricter – repaints (as well as changing any UI property of widget objects) must be done on the UI thread. Failure to do so results in an SWTException being thrown by the UI toolkit.

The core Trident library provides a pluggable behavior to automatically detect animations running on UI components and change the interpolated properties on the toolkit UI thread. In addition, custom application callbacks can be marked to be executed on the that thread.

UI property interpolators

Each UI toolkit has its own set of classes that represent visual objects or properties of graphical objects. Classes such as Color, Point and Rectangle are specific to the UI toolkit. In Swing, these are found in the java.awt package, while in SWT they are located in the org.eclipse.swt.graphics package.

Applications that wish to interpolate properties of these types require the matching property interpolators. The core Trident library provides built-in property interpolators for both AWT / Swing and SWT graphical classes.

Updating the screen

An update to a property of a graphical object should usually be reflected in the visual representation of that object on the screen. Simple operations – such as changing the foreground color of a UI control – automatically repaint the affected control. However, more complicated application animations affect multiple visual objects many times a second. Such scenarios require periodical update of the screen to reflect all the changes that happened in the application objects since the last repaint.

The core Trident library provides special repaint timelines that are usually run in a repeating loop, repainting the contents of the entire window or specific UI component / container.

Pushing Pixels