Follow The Curves (Swing Demo)

You can run the WebStart demo or, as usual, download its source code. Run the demo, seriously guys :)

Many applications, especially in corporate environments, ask the user to enter a login (and very often, a password as well) when it starts. Unfortunately most of these applications display a boring welcome screen which gives you only desire, to close the application and go grab some food. The J2SE platform contains a wonderful API to help us design much more appealing welcome screen. I'm talking about Java2D. Here is an example:

Quite nice isn't it? Now, you have to run the WebStart demo, for the curves are animated! Please note that the login text field is just a picture, I want to go to bed so I just drew it :)

The effect is made with two panels, GradientPanel and CurvesPanel. The first one, as you might guess, is responsible for drawing the greenish gradient in the background. It is not just a simple gradient, it is made of three different gradients. The second panel, CurvesPanel, extends the first one and add the curves. To draw one curve you can call this method:

private void drawCurve(Graphics2D g2, 
    float y1, float y1_offset,
    float y2, float y2_offset,
    float cx1, float cx1_offset,
    float cy1, float cy1_offset,
    float cx2, float cx2_offset,
    float cy2, float cy2_offset,
    float thickness,
    float speed,
    boolean invert);

I know, it is really scary. See, everytime paintComponent() is invoked, the animation goes one step forward. All these parameters let you create a cubic curve (with 4 control points). The parameters ending with _offset are used as animation coefficients. It's getting late so if you want to understand it, take a look at the code. Just know that the time function is a simple sine. The last three parameters should speak for themselves (invert simply inverts the gradient used to draw the curve).

You need to call this method once for each curve you want to draw. Here is a simple example:

And since the curves use alpha transparency, you can overlap them to create really cool effects:

Albeit visually interesting this code is not to be used in production. The drawCurve() is highly unoptimized. If you take a look at the source code, you'll it makes a lot of geometrical operations. I've also set all Java2D rendering hints to their highest values.

Have fun!

Comments are closed.