Question

This is probably an elementary question. However, I have completed reading the 9th Chapter of Java Programming for the Absolute Beginner and have approached the Challenges section. I cannot quite get the progam to show a gradient from dark to light.

The question asks:

“Create a Canvas that paints a gradient that’s dark on one side and slowly gets lighter
as it moves to the other side.”

I have looked at the Java Challenge on Creating a Canvas page (which I asked about before) and got a better understanding of creating a color gradient canvas, however, I am still having great difficulty.

I think that my main problem is how to get the gray colors in between as the program shows a completely black square or when run with just the first for loop, a completely white square. I THINK THAT MY FOR LOOPS ARE PROBLEMATIC AND DO NOT CORRECTLY IDENTIFY THE VARIABLES.

An answer to this question can potentially aid many new Java programmers in understanding Graphics and Canvas.

I do not know JFrame, Swing, Points, JPanels, BufferedImage, or GradientPaint.

Thank you very much for your time and cooperation reagrding this matter.

HERE IS THE CODE:

import java.awt.*;

public class RandomColorSquare extends GUIFrame {
    Canvas slight;
    public final static int MIN = 0,
        MAX = 225;

    public RandomColorSquare(int r, int g, int b) {
        super("Random Color Square");
        r = r >= MIN && r <= MAX ? r : MIN;
        g = g >= MIN && g <= MAX ? g : MIN;
        b = r >= MIN && b <= MAX ? b : MIN;
        slight = new Canvas();
        slight.setBackground(new Color(r,g, b));
        slight.setSize(200, 150);
        add(slight, BorderLayout.CENTER);

        for(r=0; r<225; r++) {
            Color c = slight.getBackground().brighter();
            slight.setBackground(c);
        }

        for (g=0; g<225; g++) {
            Color d = slight.getBackground().darker();
            slight.setBackground(d);
        }
        for (b=0; b<225; b++) {
             Color e = slight.getBackground().darker();
             slight.setBackground(e);
        }

        pack();
        setVisible(true);
    }

    public static void main(String args[]) {
        if (args.length != 3) {
            new RandomColorSquare(0, 0, 0);
        }
        else {
            new RandomColorSquare(Integer.parseInt(args[0]),                                     Integer.parseInt(args[1]),
                   Integer.parseInt(args[2]));
        }
    }
}

Answer 1

First of all, as I mentioned in the comment, when you setBackground you are changing the background of the Canvas, not adding to it. So whatever you set it to last is what you see. In your case, that is the darkest form of blue, which is just black. If you comment out the last two loops, you get a white background (the brightest red).

However. Using only what you know this is the best I can come up with. It involves creating your own custom Canvas, which I called CustomCanvas. In there, you can override the paint method and keep drawing progressively lighter filled rectangles across the screen. Here’s a small sample to help you understand what I mean:

class CustomeCanvas extends Canvas{
    public void paint(Graphics g){
        Color background = new Color(30,30,120); //Set this accordingly
        for(int i=0;i<getWidth();i++){
            g.setColor(background);
            background = getBrighter(background);
            g.fillRect(i,0, 1, getHeight());
        }
    }

    private Color getBrighter(Color c) {
        int r = c.getRed();
        int g = c.getGreen();
        int b = c.getBlue();

        if(r< MAX) r+=1;
        if(g< MAX) g+=1;
        if(b< MAX) b+=1;

        return new Color(r,g,b);
    }
}

Which produces this background:

I still recommend reading about GradientPaint which makes this process a lot easier and nicer.