Random Color Generation with the HSB Model

This lesson is built around a program that draws the same short message many times on a black background. Each copy of the message looks different. Before reading how the program works, it helps to run it and watch what changes from one copy to the next. Notice which features vary: the letter shapes, the colors, the sizes, and the places where the copies land. Then ask which of those you could predict in advance and which you could not.

The panel in this example is called RandomStringsPanel. It is a drawing surface rather than a finished application. Everything it shows is produced by one method, paintComponent(), and all of the randomness comes from a small number of choices made inside that method. Keeping that structure in mind will help you find the source of any unexpected result later.

In Swing, a JPanel is a general-purpose container that can be placed in a window. By itself, a JPanel does not show anything specific. To make a panel display something, you write a subclass of JPanel and override the method named paintComponent(). The source describes this method as the place where all of the drawing for the panel is done. Your class inherits everything a JPanel does, and you add only the part that is unique to your panel.

The extends keyword is the link that makes RandomStringsPanel a JPanel subclass. It gets the behavior of a panel and specializes it. The Graphics object that paintComponent() receives is the tool the method uses to draw. The class header and the method together define the whole panel.

The source describes paintComponent() as drawing 25 copies of the message. For each copy, the method makes three independent random choices and then draws the string. The first choice is a font, picked at random from five predefined fonts that differ in size and style. The second choice is a color, created as a random HSB color and applied with g.setColor(). The third choice is a location, made of random x and y coordinates that say where the left end of the string starts.

The order matters. A font is selected on the Graphics object with g.setFont(), a color is selected with g.setColor(), and only then is the message drawn at the chosen coordinates. The Graphics object holds the current settings, so each setting applies to the drawing that follows it. Each of the 25 passes through the loop starts with fresh random choices and ends by drawing one copy.

The diagram shows that the four random choices (font, color, x, and y) are independent inputs to a single drawing step. A change to any one of them changes that copy, and none of them depends on the others. The loop repeats the step 25 times, so the final picture is a stack of 25 copies drawn over the black background.

The x coordinate is the part of the position logic that most deserves a careful read. The source gives the formula as follows.

Read the formula from the inside out. Math.random() produces a floating-point value between 0 and 1. Multiplying it by (width + 40) stretches that value across a range slightly wider than the panel. The (int) cast turns the decimal into a whole number by dropping the fractional part. Finally, subtracting 50 shifts the whole range to the left.

The source says this produces a random integer in the range from -50 to width minus 10. Because the left end of the string can sit at a negative x value or near the right side of the panel, the string is allowed to extend beyond the left or right edge. The source says the formula for y works in the same way, so strings can also extend beyond the top and bottom. The design is deliberate: the panel should work no matter what size it is, and letting copies spill past the edges keeps the composition from looking like a neatly bounded box.

The fixed parts are the code itself: the five predefined fonts, the loop that runs 25 times, the HSB color step, the x and y formulas, and the black background. The random parts are the font chosen, the color created, and the coordinates computed on each pass. Since those random parts are re-chosen each time paintComponent() runs, the second picture differs from the first even though nothing in the source changed.

When a copy looks unexpected, a useful check is to ask whether your explanation names a specific formula or step. Horizontal placement is controlled only by the x formula, so a reasonable explanation of an unusual horizontal position points there. Vertical placement is controlled by the analogous y formula, which the source describes but does not spell out in full, so an explanation of vertical placement should refer to that y logic rather than guess at a formula.