Thread: Graphics issue

hi all, this program is suppose to store picked numbers to an array, then it paints them in lines(5/line). the numbers are picked by clicking on circles that are painted at the buttom of the window, and by getting the coordinates of the mouse at the time of the click, we get which circle/number was picked, then those numbers are stored in an array, then in the paint componenet we paint those numbers.

the problem: the loop for painting those numbers paints only the last number in the array, and it doesnt paint all of them, why??

please run the program ur self so u get it.
================================================== ==================

import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.io.IOException;
import java.util.Random;
 
/**
 * Created with IntelliJ IDEA.
 */
public class MM extends JComponent implements ActionListener, MouseListener {
   private int screenX=0;
   private int screenY=0;
   private boolean start=true;
   private int line=1;
   private int digit=1;
   private int[] arry= new int[5];
   private int[] arryGuess= new int[60];
   private int guessAryPointer=0;
   private ActionEvent e;
   private int xX=10,t, chkCirclesXcoordinate=12, circleSpace=55, barCircleSpace=45, yBarcircleSpace=30;
   private int temprndm;
   private Graphics l;
   private Color colBall, colBallNum;
   private String ballNum;
   private int checkDigitCounter=0;
   private Boolean backgroundPainted=false;
   //JFrame window = new JFrame("Master Mind");
 
   public MM(){
 
       //resetting the guess array to 0.
      guessAryPointer=0;
 
 
      //resetting the guessing array counter to 0
      guessAryPointer=0;
      for (int f=0;f<=59;f++){
         arryGuess[f]=0;
      }
 
 
      for (int f=0;f<=59;f++){
         arryGuess[f]=0;
      }
 
 
 
   }
 
   public static void main(String [] args) throws IOException {
      JFrame window = new JFrame("Master Mind");
      MM game= new MM();
      window.add(game);
      window.pack();
      window.setLocationRelativeTo(null);
      window.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
      window.setVisible(true);
 
      //Timer t =   new Timer(30, game);
      //t.start();
      window.addMouseListener(game);
      System.out.println("in Main ");
      Graphics ga=window.getGraphics();
 
   }
 
 
   @Override
   public Dimension getPreferredSize() {
      System.out.println(" in dimension ");
      return new Dimension(450,460);
   }
 
 
 
   protected void paintComponent(Graphics g) {
      System.out.println("at the start of paint component");
 
   ///// good working loop
      // drawing colored bars: white/pink.
      g.setColor(Color.blue);
      g.drawLine(0,30,800,30);
      for (int i=0;i<=11;i++){
         if (i%2!=1){
            g.setColor(Color.pink);
         }
         else{
            g.setColor(Color.white);
         }
         g.fillRect(0,30+i*yBarcircleSpace,800,30);
      }
 
   //////end of good working loop
 
 
      //drawing bottom circles--- THE BUTTONS---
 
     //drawing 1
      g.setColor(Color.yellow);
      g.fillOval(chkCirclesXcoordinate,410,40,40);
      g.setColor(Color.black);
      g.drawString("1",chkCirclesXcoordinate+17,434);
 
      //drawing 2
      g.setColor(Color.red);
      g.fillOval(chkCirclesXcoordinate+circleSpace,410,40,40);
      g.setColor(Color.white);
      g.drawString("2",chkCirclesXcoordinate+17+circleSpace,434);
 
      //drawing 3
      g.setColor(Color.blue);
      g.fillOval(chkCirclesXcoordinate+circleSpace*2,410,40,40);
      g.setColor(Color.yellow);
      g.drawString("3",chkCirclesXcoordinate+17+circleSpace*2,434);
 
      //drawing 4
      g.setColor(Color.black);
      g.fillOval(chkCirclesXcoordinate+circleSpace*3,410,40,40);
      g.setColor(Color.white);
      g.drawString("4",chkCirclesXcoordinate+17+circleSpace*3,434);
 
      //drawing 5
      g.setColor(Color.magenta);
      g.fillOval(chkCirclesXcoordinate+circleSpace*4,410,40,40);
      g.setColor(Color.white);
      g.drawString("5",chkCirclesXcoordinate+17+circleSpace*4,434);
      System.out.println("in paint component after painting ((5))");
      //drawing 6
      g.setColor(Color.darkGray);
      g.fillOval(chkCirclesXcoordinate+circleSpace*5,410,40,40);
      g.setColor(Color.white);
      g.drawString("6",chkCirclesXcoordinate+17+circleSpace*5,434);
 
      //drawing 7
      g.setColor(Color.green);
      g.fillOval(chkCirclesXcoordinate+circleSpace*6,410,40,40);
      g.setColor(Color.black);
      g.drawString("7",chkCirclesXcoordinate+17+circleSpace*6,434);
 
      //drawing 8
      g.setColor(Color.orange);
      g.fillOval(chkCirclesXcoordinate+circleSpace*7,410,40,40);
      g.setColor(Color.black);
      g.drawString("8",chkCirclesXcoordinate+17+circleSpace*7,434);
      //BottomCircles(gg);   DONE
 
 
      ////////////////////////// start of the problem area
 
      //painting the picked numbers in the array, all of them from start, each time the program returns to paint component
 
      for ( t=0;t<guessAryPointer;t++) { // There is for the gues aray counter to paint them all from start
 
         System.out.println("in drawing picked numbers, the T counter is: "+t);
         digit=(guessAryPointer-1)%5;         //getting the digit
         line=(guessAryPointer-1)/5+1;        //getting the line, every line has five bals/numbers
 
         if(arryGuess[guessAryPointer-1]==1){ //this is to set the color and the number for each ball , which depend on the array value
            colBall=  Color.yellow;
            colBallNum= Color.black ;
            ballNum="1";
         }
         if(arryGuess[guessAryPointer-1]==2){
            colBall=  Color.red;
            colBallNum= Color.white ;
            ballNum="2";
         }
         if (arryGuess[guessAryPointer-1]==3) {
            colBall=  Color.blue;
            colBallNum= Color.yellow ;
            ballNum="3";
         }
         if (arryGuess[guessAryPointer-1]==4){
            colBall=  Color.black;
            colBallNum= Color.white ;
            ballNum="4";
         }
         if (arryGuess[guessAryPointer-1]==5){
            colBall=  Color.magenta;
            colBallNum= Color.white ;
            ballNum="5";
         }
         if (arryGuess[guessAryPointer-1]==6){
            colBall=  Color.darkGray;
            colBallNum= Color.white ;
            ballNum="6";
         }
         if (arryGuess[guessAryPointer-1]==7){
            colBall=  Color.green;
            colBallNum= Color.black ;
            ballNum="7";
         }
         if (arryGuess[guessAryPointer-1]==8){
            colBall=  Color.orange;
            colBallNum= Color.black ;
            ballNum="8";
         }
 
         //after setting the color and the value of the ball, we paint it
         g.setColor(colBall);
         g.fillOval(barCircleSpace*digit+6,yBarcircleSpace*line+1,28,28);
         g.setColor(colBallNum);
         g.drawString(ballNum,barCircleSpace*digit+17,yBarcircleSpace*line+19);
      }
      repaint();
 
      //////////////////// end of problem area
   }
 
 
 
   @Override
   public void mousePressed(MouseEvent e) {
   }
   @Override
   public void mouseReleased(MouseEvent e) {
   }
   @Override
   public void mouseEntered(MouseEvent e) {
   }
   @Override
   public void mouseExited(MouseEvent e) {
   }
   public void mouseClicked(MouseEvent e) {
      MouseEvent mouseIvent = (MouseEvent) e;
      screenX = mouseIvent.getX();
      screenY = mouseIvent.getY();
      System.out.println(" in mouse clicked ");
      System.out.println("screen(X,Y) = " + screenX + "\t" + screenY);
 
   //knowing which circle "number" was picked through knowing the point coordination at the time of the click
      if (screenY>440 && screenY<479){
 
         if(screenX>17 && screenX<56){
            arryGuess[guessAryPointer]=1;
            guessAryPointer++;
         }
         if(screenX>72 && screenX<111){
            arryGuess[guessAryPointer]=2;
            guessAryPointer++;
         }
         if(screenX>127 && screenX<166){
            arryGuess[guessAryPointer]=3;
            guessAryPointer++;
         }
         if(screenX>181 && screenX<220){
            arryGuess[guessAryPointer]=4;
            guessAryPointer++;
         }
         if(screenX>237 && screenX<276){
            arryGuess[guessAryPointer]=5;
            guessAryPointer++;
         }
         if(screenX>292 && screenX<331){
            arryGuess[guessAryPointer]=6;
            guessAryPointer++;
         }
         if(screenX>346 && screenX<385){
            arryGuess[guessAryPointer]=7;
            guessAryPointer++;
         }
 
         if(screenX>401 && screenX<440){
            arryGuess[guessAryPointer]=8;
            guessAryPointer++;
         }
         System.out.println("arryGuess: "+arryGuess[guessAryPointer-1]);
 
      }
      System.out.println("guessAryPointer= "+   ( guessAryPointer-1));
      System.out.println("arryGuess: "+arryGuess[guessAryPointer-1]);
 
   }
 
   @Override
   public void actionPerformed(ActionEvent e) {
      repaint();
   }
}

Restoring (sort of) original post:

Please edit your post and enclose your code in code tags. You can learn more about that here. In the meantime, I'll look at your code and see if I "get it."

Still looking, but 2 things I noticed:

The first line of the paintComponents() method should be:

super.paintComponent( g );

And NEVER call repaint() from the paintComponent() method. Did you notice the program was acting sluggishly? That's because calling repaint() from inside the paintComponent() method sets up an infinite loop. You can learn more about custom painting in the Custom Painting Tutorial.

Still looking . . .

Can you explain again what the program is supposed to do? If I click on the "5" ball, what should I see in the lined graphic area? What happens if I click on 4 of the balls?

I think you're trying to keep track of the balls that have been chosen and then paint those that have been chosen on every trip through the paintComponent() method, but I'm not sure. If that's what you're trying to do, I'd suggest a different approach:

Use an array of booleans and set the corresponding element of the array true as each ball is chosen. Then, simply iterate the array each time through the paintComponent() method and paint those balls that have been chosen. What I don't understand is where the balls are painted in the graphic (on which line), if order is important, etc. If you can explain that better, I'll adjust my suggested approach.

Also, have you noticed that the arry[] of ints is never used?

Originally Posted by GregBrannon

Restoring (sort of) original post:

........
Still looking, but 2 things I noticed:
............
The first line of the paintComponents() method should be:

super.paintComponent( g );

......used?

thank you very much Greg

1- thank you for the note, I tried to post the code the way u asked, but it didnt go through. maybe because it was my first post, and as a new member it didnt allow that??

2- paintComponent: I changed the name, and I removed the "repaint()" at the end of the method. the outcome is the same:

the outcome expected is: while picking the numbers, paintcomponent is suppose to repaint the background(the pink and white bars), and the buttons at the buttom(the numbers to choose from).

while the program is runing, numbers are picked, stored in the array according to the order of enterance, and after enter every number, paint component is suppose to paint all the numberes entered.

the good way to paint the array of guessed numbers is 5 at each line, for example if you entered 17 numbers so far- last number clicked was 3, it should look like this:

4 6 8 9 7
2 4 1 8 3
9 2 5 1 6
5 3

but what the program does for now is printing nothing but the last number in the array, like this:

. . . . .
. . . . .
. . . . .
. 3


WHY ITS DOING THAT, THE LOOP IS VERY CLEAR, PRINT ALL IN THE ARRAY.

the block that i have a problem with in paint component marked with: ////// start of the problem area, and ends with //// end of the problem area.


3. yes, I am trying to keep track of the balls clicked on, store them in an array, and then print all of them in something like a table (5 balls width, look above). there are other things that will be added later, but lets keep it simple FOR now to know what the problem is.

4. the block in paint component that paints those chosen numbers starts with ////// start of the problem area, and ends with //// end of the problem area. its a loop to go through all the numbers picked so far(guessArrayPointer stores how many numbers we have so far+1, the (=1), is set to make it ready to get the new numbers, so arrayguess[quessArrayPointer-1] holds the last number entered.
in this loop: the color of the ball, the color of number on it, and the number of it, are set through if statements

5. arry[], is for another purpose, I moved allot of things just to make the problem very clear, didnt want to give you headech by keeping needless to know/track stuff.

The problem is in your iteration of the arryGuess[] array in the paintComponent() method. Instead of using [guessAryPointer - 1] as the index (which is the same every time, therefore drawing only the last ball selected), you should be using 't':

         if(arryGuess[t]==1){ //this is to set the color and the number for each ball , which depend on the array value
            colBall=  Color.yellow;
            colBallNum= Color.black ;
            ballNum="1";
         }

Of course, you'd do the same for each subsequent if statement.

That will fix your current problem, but you should consider a change to your design to make it more OOP: Instead of using parallel arrays to keep track of data, you should create a ColoredBall class and store those in a collection, iterating that collection to draw each ball as you go through the paintComponent() method. Each instance of the ColoredBall class knows where it is, what its number is, what color it is, etc., so that those characteristics only have to be collected each time the ball needs to be drawn.

Hope this helps. Good luck.

Originally Posted by GregBrannon

The problem is in your iteration of the arryGuess[] array in the paintComponent() method. Instead of using [guessAryPointer - 1] as the index (which is the same every time, therefore drawing only the last ball selected), you should be using 't':

         if(arryGuess[t]==1){ //this is to set the color and the number for each ball , which depend on the array value
            colBall=  Color.yellow;
            colBallNum= Color.black ;
            ballNum="1";
         }

Of course, you'd do the same for each subsequent if statement.

That will fix your current problem, but you should consider a change to your design to make it more OOP: Instead of using parallel arrays to keep track of data, you should create a ColoredBall class and store those in a collection, iterating that collection to draw each ball as you go through the paintComponent() method. Each instance of the ColoredBall class knows where it is, what its number is, what color it is, etc., so that those characteristics only have to be collected each time the ball needs to be drawn.

Hope this helps. Good luck.

thank you very much sir.
for me I cannot belive i made such stupid mistake for(arrayguesspointer thing), and coudnt discover it.
however u talked about a very important issue that I wanted to learn through the question above, and that is: using Graphics class in multiple method.

I wanted to make the program exaclty as u said, thats OOP, but the problem that I had was that if I used graphics to paint something in some method, then paint something in another one, the another method earases everything that the first one did, is it an issue with Graphics? it can be used in one method only? if u look at the program above, it should be splitted to too many methods, but it didnt work for me when i did that at the start.

You're welcome.

I'm not sure what you mean when you talk about using multiple methods to paint. Each component that inherits from JComponent has only one paintComponent() method. You can then override that paintComponent() method to draw on that component just as you've done to draw on the MM object.

If you have the time someday, post an example of what you mean by "the another method earases everything that the first one did," so that I can understand.

My suggestion to use the ColoredBall class is to simplify your code, moving most of the object calculations and housekeeping outside the paintComponent() method into ColoredBall instances. Your paintComponent() method could also use some helper methods to clean up and simplify what it is doing. You might take a step back now and look at your creation with the goal to simplify - if you have time. I suspect there's much more you mean to do with this exercise, and simplifying it now should make maintaining and adding more features to the program simpler. It should also make the program more robust and less likely to "break" as you mess with it.

Originally Posted by GregBrannon

You're welcome.

I'm not sure what you mean when you talk about using multiple methods to paint. Each component that inherits from JComponent has only one paintComponent() method. You can then override that paintComponent() method to draw on that component just as you've done to draw on the MM object.

If you have the time someday, post an example of what you mean by "the another method earases everything that the first one did," so that I can understand.

My suggestion to use the ColoredBall class is to simplify your code, moving most of the object calculations and housekeeping outside the paintComponent() method into ColoredBall instances. Your paintComponent() method could also use some helper methods to clean up and simplify what it is doing. You might take a step back now and look at your creation with the goal to simplify - if you have time. I suspect there's much more you mean to do with this exercise, and simplifying it now should make maintaining and adding more features to the program simpler. It should also make the program more robust and less likely to "break" as you mess with it.

for the graphics issue, just try to move the the following two blocks to the constructor(where they are suppose to be):
(the background should be painted only once)

-Drawing the table bars

*
// drawing colored bars: white/pink.
      g.setColor(Color.blue);
      g.drawLine(0,30,800,30);
      for (int i=0;i<=11;i++){
         if (i%2!=1){
            g.setColor(Color.pink);
         }
         else{
            g.setColor(Color.white);
         }
         g.fillRect(0,30+i*yBarcircleSpace,800,30);
      }

and..

drawing the bottom circles/balls/buttons

//drawing bottom circles--- THE BUTTONS---
 
     //drawing 1
      g.setColor(Color.yellow);
      g.fillOval(chkCirclesXcoordinate,410,40,40);
      g.setColor(Color.black);
      g.drawString("1",chkCirclesXcoordinate+17,434);
 
      //drawing 2
      g.setColor(Color.red);
      g.fillOval(chkCirclesXcoordinate+circleSpace,410,40,40);
      g.setColor(Color.white);
      g.drawString("2",chkCirclesXcoordinate+17+circleSpace,434);
 
      //drawing 3
      g.setColor(Color.blue);
      g.fillOval(chkCirclesXcoordinate+circleSpace*2,410,40,40);
      g.setColor(Color.yellow);
      g.drawString("3",chkCirclesXcoordinate+17+circleSpace*2,434);
 
      //drawing 4
      g.setColor(Color.black);
      g.fillOval(chkCirclesXcoordinate+circleSpace*3,410,40,40);
      g.setColor(Color.white);
      g.drawString("4",chkCirclesXcoordinate+17+circleSpace*3,434);
 
      //drawing 5
      g.setColor(Color.magenta);
      g.fillOval(chkCirclesXcoordinate+circleSpace*4,410,40,40);
      g.setColor(Color.white);
      g.drawString("5",chkCirclesXcoordinate+17+circleSpace*4,434);
      System.out.println("in paint component after painting ((5))");
      //drawing 6
      g.setColor(Color.darkGray);
      g.fillOval(chkCirclesXcoordinate+circleSpace*5,410,40,40);
      g.setColor(Color.white);
      g.drawString("6",chkCirclesXcoordinate+17+circleSpace*5,434);
 
      //drawing 7
      g.setColor(Color.green);
      g.fillOval(chkCirclesXcoordinate+circleSpace*6,410,40,40);
      g.setColor(Color.black);
      g.drawString("7",chkCirclesXcoordinate+17+circleSpace*6,434);
 
      //drawing 8
      g.setColor(Color.orange);
      g.fillOval(chkCirclesXcoordinate+circleSpace*7,410,40,40);
      g.setColor(Color.black);
      g.drawString("8",chkCirclesXcoordinate+17+circleSpace*7,434);
      //BottomCircles(gg);   DONE

you dont need to change anything in the variables, just the graphics thing, if the code worked for you, please post it back here

Ah, I think I get your meaning. Yes, the paintComponent() method redraws the component's entire "scene" each time through. In fact, the call to super clears the component completely to blank and then the rest of paintComponent() redraws everything. This is very useful for animations and happens pretty fast so that performance is not typically degraded to the point that the drawing is noticed.

If the background was so complex that performance did become an issue, I think you could draw the unchanging parts of the graphic on the content pane and apply the changes only to the glass pane. I've never had a reason to do this, and you won't need to for this application, but you might experiment with it if you're interested.

Here's what my version of your paintComponent() method looks like after I made the changes to your application that I suggested:

    protected void paintComponent(Graphics g)
    {
        super.paintComponent( g );
 
        // drawing colored bars: white/pink.
        for ( int i = 0 ; i <= 11 ; i++ )
        {
            if ( i % 2 == 0 )
            {
                g.setColor(Color.pink);
            }
            else
            {
                g.setColor(Color.white);
            }
 
            g.fillRect(0, 30  + i * SMALL_CIRCLE_V_SPACE, 800, 30);
        }
 
        //drawing bottom circles--- THE BUTTONS---
        for ( int i = 0 ; i < 8 ; i++ )
        {
            g.setColor( buttonBalls[i].getBallColor() );
            g.fillOval( buttonBalls[i].getBallX(), buttonBalls[i].getBallY(),
                    buttonBalls[i].getBallDiameter(),
                    buttonBalls[i].getBallDiameter() );
            g.setColor( buttonBalls[i].getNumberColor() );
            g.drawString( "" + ( i + 1 ), buttonBalls[i].getNumberX(),
                    buttonBalls[i].getNumberY() );
        }
 
        // painting the picked numbers in the array, all of them from start,
        // each time the program returns to paint component
        for ( ColoredBall chosenBall : chosenBalls )
        {
            //after setting the color and the value of the ball, we paint it
            g.setColor( chosenBall.getBallColor() );
            g.fillOval(chosenBall.getBallX(),
                    chosenBall.getBallY(),
                    chosenBall.getBallDiameter(),
                    chosenBall.getBallDiameter() );
            g.setColor( chosenBall.getNumberColor() );
            g.drawString( chosenBall.getBallNumber(), chosenBall.getNumberX(),
                    chosenBall.getNumberY() );
        }
 
    } // end method paintComponent()

The array buttonBalls[] is a simple array that holds the 8 buttons that are drawn along the bottom, and chosenBalls is an ArrayList of ColoredBall instances that are copies of the bottom balls that have been chosen by the user with the size and location modified as needed. Notice that I've eliminated most of the calculations and magic numbers that were present in your version. Some more cleanup is possible, but I've probably spent enough time on it.

thank you very much, I will try this code when i have time to, and will update you
many thanks again

Something else to think about, if the ColoredBall instances can draw themselves on a Graphics object, g, using a method like:

// method paint() draws the current colored ball on the
// graphics object, g
public void paint( Graphics g )
{
    //after setting the color and the value of the ball, we paint it
    g.setColor( ballColor );
    g.fillOval( ballX, ballY, ballDiameter, ballDiameter );
    g.setColor( numberColor );
    g.drawString( ballNumber, numberX, numberY );
 
} // end method paint()

then the paintComponent() method can be reduced to:

protected void paintComponent(Graphics g)
{
    super.paintComponent( g );
 
    // drawing colored bars: white/pink.
    for ( int i = 0 ; i <= 11 ; i++ )
    {
        if ( i % 2 == 0 )
        {
            g.setColor(Color.pink);
        }
        else
        {
            g.setColor(Color.white);
        }
 
        g.fillRect(0, 30  + i * SMALL_CIRCLE_V_SPACE, 800, 30);
    }
 
    // drawing bottom circles--- THE BUTTONS--- AND
    // painting the picked numbers in the array, all of them from start,
    // each time the program returns to paint component
    for ( ColoredBall coloredBall : chosenBalls )
    {
        coloredBall.paint( g );
    }
 
} // end method paintComponent()

As this has evolved to use a more OOP approach, I hope you've been able to keep up, and if so, that you're beginning to see the beauty and advantages of programming in an OOP way.