Java User Group Münster » tutorial

Drawing in code (Part 2)

Gerrit — Thu, 28 Jan 2010 20:39:55 +0000

Drawing in code:

Part 2 (Transfer the prototype into swing):

So you will find out that this is not magic but only drawing the same elements that we used in the vector drawing programm but now in their Java2D representations. We just create a buffered image with the same size as the prototype. So we could use the same pixelcoordinates for the shapes and gradients in swing.

In Adobe Fireworks you have the ability to move the mousecursor over a pixel and you could see the pixelcoordinate and it’s color values in a window, this is nothing special but it’s a needed functionality to grab the positions of all the shapes and the colors of the gradients from the prototype.

Keep in mind that i won’t show how i pick all these coordinates and colors, but you have to do this

Step 1. – 5.

First coding the vertical pill which is in principle just a rounded rectangle with a corner radius of it’s width.

After that we code the rounded rectangle that will represent the bottom if the tube.

Now follows the small ellipse on the top.
After all we combine all of these shapes into one which is really easy in swing.

Just take a look at the code:

/**
* Tutorial Step 1. - 5.
* Create the glass tube form
*/
final java.awt.geom.Area TUBE = new java.awt.geom.Area(new java.awt.geom.RoundRectangle2D.Float(1, 8, 86, 136, 86, 86));
final java.awt.geom.Area TUBE_BOTTOM = new java.awt.geom.Area(new java.awt.geom.RoundRectangle2D.Float(1, 75, 86, 70, 30, 30));
final java.awt.geom.Area TUBE_TOP = new java.awt.geom.Area(new java.awt.geom.Ellipse2D.Float(38, 0, 12, 18));
TUBE.add(TUBE_TOP);
TUBE.add(TUBE_BOTTOM);

Step 6.

Create and apply a horizontal gradient to the tube.

/**
* Tutorial Step 6.
* Create and apply the left to right gradient
*/
final java.awt.geom.Point2D START_LEFT = new java.awt.geom.Point2D.Float(0,0);
final java.awt.geom.Point2D STOP_RIGHT = new java.awt.geom.Point2D.Float(86,0);

final float[] FRACTIONS_LEFT_TO_RIGHT =
{
    0.0f,
    0.15f,
    0.4f,
    0.6f,
    0.75f,
    1.0f
};

final java.awt.Color[] COLORS_LEFT_TO_RIGHT =
{
    new java.awt.Color(0.0f, 0.0f, 0.0f, 0.5f),
    new java.awt.Color(0.0f, 0.0f, 0.0f, 0.3f),
    new java.awt.Color(0.0f, 0.0f, 0.0f, 0.1f),
    new java.awt.Color(0.0f, 0.0f, 0.0f, 0.1f),
    new java.awt.Color(0.0f, 0.0f, 0.0f, 0.3f),
    new java.awt.Color(0.0f, 0.0f, 0.0f, 0.5f)
};

final java.awt.LinearGradientPaint LEFT_TO_RIGHT_GRADIENT = new java.awt.LinearGradientPaint(START_LEFT, STOP_RIGHT, FRACTIONS_LEFT_TO_RIGHT, COLORS_LEFT_TO_RIGHT);

g2.setPaint(LEFT_TO_RIGHT_GRADIENT);
g2.fill(TUBE);

Step 7.

Now create and apply a vertical gradient from top to bottom to the same tube shape.

/**
* Tutorial Step 7.
* Create and apply the top to bottom gradient
*/
final java.awt.geom.Point2D START_TOP = new java.awt.geom.Point2D.Float(0,0);
final java.awt.geom.Point2D STOP_BOTTOM = new java.awt.geom.Point2D.Float(0,146);

final float[] FRACTIONS_TOP_TO_BOTTOM =
{
    0.0f,
    0.9f,
    1.0f
};

final java.awt.Color[] COLORS_TOP_TO_BOTTOM =
{
    new java.awt.Color(0.0f, 0.0f, 0.0f, 0.0f),
    new java.awt.Color(0.0f, 0.0f, 0.0f, 0.0f),
    new java.awt.Color(0.0f, 0.0f, 0.0f, 0.6f)
};

final java.awt.LinearGradientPaint TOP_TO_BOTTOM_GRADIENT = new java.awt.LinearGradientPaint(START_TOP, STOP_BOTTOM, FRACTIONS_TOP_TO_BOTTOM, COLORS_TOP_TO_BOTTOM);

g2.setPaint(TOP_TO_BOTTOM_GRADIENT);
g2.fill(TUBE);

Step 8. – 9.

So let’s add the side light effect. So we code two roundedrectangles and subtract one from another. Let’s take a look at the code:

/**
* Tutorial Step 8. - 9.
* Create the side light reflection shape
*/
final java.awt.geom.Area SIDE_LIGHT_EFFECT = new java.awt.geom.Area(new java.awt.geom.RoundRectangle2D.Float(3, 43, 36, 99, 18, 18));
final java.awt.geom.Area EFFECT_SUB = new java.awt.geom.Area(new java.awt.geom.RoundRectangle2D.Float(7, 37, 36, 105, 18, 18));
SIDE_LIGHT_EFFECT.subtract(EFFECT_SUB);

et voila…that was easy

Step 10.

Now we have to create and apply a horizontal gradient for this side light effect.

/**
* Tutorial Step 10.
* Create and apply the side light gradient
*/
final java.awt.geom.Point2D SIDE_LIGHT_EFFECT_START = new java.awt.geom.Point2D.Float(3, 0);
final java.awt.geom.Point2D SIDE_LIGHT_EFFECT_STOP = new java.awt.geom.Point2D.Float(13, 0);

final float[] SIDE_LIGHT_EFFECT_FRACTIONS =
{
    0.0f,
    1.0f
};

final java.awt.Color[] SIDE_LIGHT_EFFECT_COLORS =
{
    new java.awt.Color(1.0f, 1.0f, 1.0f, 0.5f),
    new java.awt.Color(1.0f, 1.0f, 1.0f, 0.0f)
};

final java.awt.LinearGradientPaint SIDE_LIGHT_EFFECT_GRADIENT = new java.awt.LinearGradientPaint(SIDE_LIGHT_EFFECT_START, SIDE_LIGHT_EFFECT_STOP, SIDE_LIGHT_EFFECT_FRACTIONS, SIDE_LIGHT_EFFECT_COLORS);

g2.setPaint(SIDE_LIGHT_EFFECT_GRADIENT);
g2.fill(SIDE_LIGHT_EFFECT);

Step 11.

Next thing to code is the ellipse on top of the tube which will be the top light reflection.

/**
* Tutorial Step 11.
* Create the top light effect ellipse
*/
final java.awt.geom.Ellipse2D TOP_LIGHT_EFFECT = new java.awt.geom.Ellipse2D.Float(17, 11, 52, 21);

Step 12.

Now we have to create and apply the gradient for this top light reflection.

/**
* Tutorial Step 12.
* Create and apply the top light gradient
*/
final java.awt.geom.Point2D TOP_LIGHT_EFFECT_START = new java.awt.geom.Point2D.Float(0, 11);
final java.awt.geom.Point2D TOP_LIGHT_EFFECT_STOP = new java.awt.geom.Point2D.Float(0, 32);

final float[] TOP_LIGHT_EFFECT_FRACTIONS =
{
    0.0f,
    1.0f
};

final java.awt.Color[] TOP_LIGHT_EFFECT_COLORS =
{
    new java.awt.Color(1.0f, 1.0f, 1.0f, 0.5f),
    new java.awt.Color(1.0f, 1.0f, 1.0f, 0.0f)
};

final java.awt.LinearGradientPaint TOP_LIGHT_EFFECT_GRADIENT = new java.awt.LinearGradientPaint(TOP_LIGHT_EFFECT_START, TOP_LIGHT_EFFECT_STOP, TOP_LIGHT_EFFECT_FRACTIONS, TOP_LIGHT_EFFECT_COLORS);

g2.setPaint(TOP_LIGHT_EFFECT_GRADIENT);
g2.fill(TOP_LIGHT_EFFECT);

Step 13.

This one is ease, just a small ellipse on top.

/**
* Tutorial Step 13.
* Create the small light effect ellipse
*/
final java.awt.geom.Ellipse2D SMALL_TOP_LIGHT_EFFECT = new java.awt.geom.Ellipse2D.Float(39, 3, 4, 6);

Step 14.

And again create and apply the right gradient for the reflection effect.

/**
* Tutorial Step 14.
* Create and apply the small light effect gradient
*/
final java.awt.geom.Point2D SMALL_TOP_LIGHT_EFFECT_START = new java.awt.geom.Point2D.Float(0, 3);
final java.awt.geom.Point2D SMALL_TOP_LIGHT_EFFECT_STOP = new java.awt.geom.Point2D.Float(0, 9);

final float[] SMALL_TOP_LIGHT_EFFECT_FRACTIONS =
{
    0.0f,
    1.0f
};

final java.awt.Color[] SMALL_TOP_LIGHT_EFFECT_COLORS =
{
    new java.awt.Color(1.0f, 1.0f, 1.0f, 0.3f),
    new java.awt.Color(1.0f, 1.0f, 1.0f, 0.0f)
};

final java.awt.LinearGradientPaint SMALL_TOP_LIGHT_EFFECT_GRADIENT = new java.awt.LinearGradientPaint(SMALL_TOP_LIGHT_EFFECT_START, SMALL_TOP_LIGHT_EFFECT_STOP, SMALL_TOP_LIGHT_EFFECT_FRACTIONS, SMALL_TOP_LIGHT_EFFECT_COLORS);

g2.setPaint(SMALL_TOP_LIGHT_EFFECT_GRADIENT);
g2.fill(SMALL_TOP_LIGHT_EFFECT);

Step 15.

We are coming slowly to the end, now creating the small rectangle for the stripe reflection.

/**
* Tutorial Step 15.
* Creating the rectangle for the stripe light effect
*/
final java.awt.geom.Rectangle2D STRIPE_LIGHT_EFFECT = new java.awt.geom.Rectangle2D.Float(13, 46, 62, 1);

Step 16.

Finally create and apply the gradient for the stripe reflection.

/**
* Tutorial Step 16.
* Create and apply the stripe light effect gradient
*/
final java.awt.geom.Point2D STRIPE_LIGHT_EFFECT_START = new java.awt.geom.Point2D.Float(13, 0);
final java.awt.geom.Point2D STRIPE_LIGHT_EFFECT_STOP = new java.awt.geom.Point2D.Float(75, 0);

final float[] STRIPE_LIGHT_EFFECT_FRACTIONS =
{
    0.0f,
    0.5f,
    1.0f
};

final java.awt.Color[] STRIPE_LIGHT_EFFECT_COLORS =
{
    new java.awt.Color(1.0f, 1.0f, 1.0f, 0.0f),
    new java.awt.Color(1.0f, 1.0f, 1.0f, 0.5f),
    new java.awt.Color(1.0f, 1.0f, 1.0f, 0.0f)
};

final java.awt.LinearGradientPaint STRIPE_LIGHT_EFFECT_GRADIENT = new java.awt.LinearGradientPaint(STRIPE_LIGHT_EFFECT_START, STRIPE_LIGHT_EFFECT_STOP, STRIPE_LIGHT_EFFECT_FRACTIONS, STRIPE_LIGHT_EFFECT_COLORS);

g2.setPaint(STRIPE_LIGHT_EFFECT_GRADIENT);
g2.fill(STRIPE_LIGHT_EFFECT);

Prototype	Swing

Conclusion:

As you can see transfering an image to swing is not rocket-science. To achieve this you have to get a feeling for drawing effects like light reflections, shadows etc. (and i’m really not a designer).

So my recommendation is follow design blogs, play with your drawing program or just walk around with open eyes and take pictures of intersting things…there are so many of them…

Please find the related Netbeans project here DrawInCode.zip

Now enjoy swinging…

Drawing in code (Part 1)

Gerrit — Thu, 28 Jan 2010 20:29:35 +0000

Drawing in code:

Part 1 (Drawing the prototype):

After i published my little fun swing nixieclock i got a lot of requests on how i transferred the image into swing.
Because i remember when i was starting swing development i asked myself the same questions when i saw the amazing work of swing/design guru’s like Kirill Grouchnikov, Romain Guy, Joshua Marinacci, Chet Haase, and others.
Well in the meantime i figured out how to do this and find a workflow that i would like to share here. By the way this is really nothing compared to the things these swing/design guru’s are able to do.

So here we go, first of all i have one good advice for you “Know your tools”,
which means not only java and swing but also your graphics program.

So i’m using Adobe Fireworks for that but you could also use any other kind of graphics program like Adobe Photoshop, Gimp, Inkscape etc.

I will start the tutorial with the drawing of the tube in Adobe Fireworks because it makes coding in swing so much easier if you know how to draw it in a graphics program. So the first part will be focussed on the drawing and the second part will explain how to draw all the different points in java2d/swing:

So we would like to create a nixie glass tube in swing that should look similar to this but to keep it simple i will focus only on the glass tube itself without any numbers or logic etc.

Once you understand the way of doing this you could easily adopt these technique to everything you would like to do (if there is a equivalent in swing).

Step 1.

Draw a vertical pill which will be the main body of the tube.

Step 2.

Draw a rounded rectangle that will represent the bottom if the tube.

Step 3.

Merge this two shapes into one shape.

Step 4.

Now draw a little ellipse on top of the tube.

Step 5.

Again merge the two shapes into one.

Step 6.

Fill the tube with a horizontal gradient from left to right where you use black with different values for transparency.

Position	Transparency
0%	60%
15%	20%
75%	20%
100%	60%

Step 7.

Now fill the same tube shape again with a vertical gradient from top to bottom again using black with different values for transparency.

Position	Transparency
0%	0%
90%	0%
100%	60%

Step 8.

Now we will add some reflection effects. First of all a side light reflection. Therefor create a vertical rounded rectangle. Than create a second rounded rectangle which is slightly higher than the first one and place it a little bit shifted to the right of the first one.

Step 9.

Subtract the second rectangle from the first one.

Step 10.

Now fill this shape with a horizontal gradient from left to right with white of with different values for transparency.

Position	Transparency
0%	60%
100%	0%

Step 11.

Create a ellipse on top of the tube which will be the top light reflection.

Step 12.

Fill this ellipse with a vertical gradient from top to bottom with white with different values for transparency.

Position	Transparency
0%	60%
100%	0%

Step 13.

Next add a small ellipse on the very top of the tube.

Step 14.

Fill this ellipse also with a vertical gradient from top to bottom with white with different values for transparency.

Position	Transparency
0%	60%
100%	0%

Step 15.

Finally create a small horizontal rectangle on the top of the tube.

Step 16.

Fill this rectangle with a horizontal gradient from left to right with different values for transparency

Position	Transparency
0%	0%
50%	60%
100%	0%

That’s it… so we created a nice looking glass tube just with combination of some shapes and gradients.

In the second part of the tutorial i’ll explain the representation of all these shapes and gradients in code…so hang on…

Part two: http://www.jug-muenster.de/drawing-in-code-part-2-2-384/