Making multiple of same image

Processing Coding Questions
1

I am making a tic-tac-toe game and am trying to place an ‘X’ image into each box for starters. But when I Try to place an ‘X’ image more than once, the first one disappears. i made a switch case to place an X into every slot when clicked on, but cannot fill more than one slot.

 PImage Ximg;

    Ximg = loadImage("red-x.png");

switch(QuadNum)
   {
     case 1 :   image(Ximg, 5, 20, width/3, height/3);
     break;
     case 2 :   image(Ximg, 200, 20, width/3, height/3);
     break;
     case 3 :   image(Ximg, 400, 20, width/3, height/3);
     break;
     default:
     break;
  }
1 Like
2

Good try! :pineapple::pineapple:

Imagine that QuadNum has the value 1. This puts the X in one place, (5,20).

Now imagine that QuadNum has the value 2. This puts the X in a different place, (200,20).

Now, how can you get an X at both of those places at the same time? Well, if QuadNum had a value of both 1 and 2, then it would put X’s in both of those places.

… but QuadNum is only 1 number, and it can;t be both 1 and 2 at the same time.

You will need to take a different approach. Instead of having one number that remembers which spot an X is in, have 9 numbers that represent the spots and record what is in them.

0 | 1 | 2
---------
3 | 4 | 5
---------
6 | 7 | 8

This can then be stored in an ARRAY of numbers:

int[] board = new int[9];

So, board[0] is the value for the top left corner. board[4] is the middle space. etc.

Initially, all these spaces will have a value of 0. So we can use 0 to represent nothing in a space. Handy!

If there is a 1 in a space, we will consider that an X:

board[4] = 1; // Put an X in the middle.

And a 2 can be for O:

board[8] = 2;

Now you just need to draw
what goes in each space:

if( board[0] == 1 ){
  image(Ximg, 0, 0, width/3, height/3);
} else if( board[0] == 2 ){
  image(Oimg, 0, 0, width/3, height/3);
}

if( board[1] == 1 ){
  image(Ximg, 200, 0, width/3, height/3);
} else if( board[1] == 2 ){
  image(Oimg, 200, 0, width/3, height/3);
}

// ... and so on.

You could write it all out. Or you could make use of some for loops to avoid a lot of typing. This is left as an exercise for you…

Bonus hint: Would these array be useful?

int x_positions = { 0, 200, 400, 0, 200, 400, 0, 200, 400 };
int y_positions = { 0, 0, 0, 200, 200, 200, 400, 400, 400 };
3 Likes
3

Thank you so much! I got it working. Turns out i should’ve put the background as well as the switch statement in setup(), and not draw(); so that it doesn’t get called repeatedly to stack on top of the previous image. (turns out the background stacked on top of the old ‘X’) Thank you for the advice on for loops. I made one for finding the Quadrant Number the mouse clicks in; using the arrays you provided as examples(with a few tweaks). Here is the for loop if anyone is interested/ wants to use it for their Tic Tac Toe.

 int[] xMouse_positions = {200,400, 600, 200, 400, 600, 200, 400, 600 };
 int[] yMouse_positions = { 0, 0, 0, 200, 200, 200, 400, 400, 400,600,600,600,600,600,600 };


 for(int i = 0; i < 9; i = i+1)
   {
     if(mouseX < xMouse_positions[i]  & mouseY > yMouse_positions[i] & 
           mouseY < yMouse_positions[i +3])
     {
       QuadNum = i+1;
       i = 8;
     }
   }
1 Like