# Making multiple of same image

**URL:** <https://discourse.processing.org/t/making-multiple-of-same-image/4406>\
**Category:** Coding Questions\
**Created:** [October 12, 2018, 11:02pm UTC](https://discourse.processing.org/t/making-multiple-of-same-image/4406 "2018-10-12T23:02:56Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ProcessingStarter](https://avatars.discourse-cdn.com/v4/letter/p/ecd19e/32.png) [@ProcessingStarter](https://discourse.processing.org/u/ProcessingStarter)\
**Post date:** [October 12, 2018, 11:02pm UTC](https://discourse.processing.org/t/making-multiple-of-same-image/4406/1 "2018-10-12T23:02:56Z")

</div>

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.

```auto
 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;
  }

```

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [October 13, 2018, 2:04am UTC](https://discourse.processing.org/t/making-multiple-of-same-image/4406/2 "2018-10-13T02:04:10Z")

</div>

Good try! 🍍🍍

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.

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

```

This can then be stored in an ARRAY of numbers:

```auto
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:

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

```

And a 2 can be for O:

```auto
board[8] = 2;

```

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

```auto
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?

```auto
int x_positions = { 0, 200, 400, 0, 200, 400, 0, 200, 400 };
int y_positions = { 0, 0, 0, 200, 200, 200, 400, 400, 400 };

```

---

<div class="post-metadata">

**Author:** ![ProcessingStarter](https://avatars.discourse-cdn.com/v4/letter/p/ecd19e/32.png) [@ProcessingStarter](https://discourse.processing.org/u/ProcessingStarter)\
**Post date:** [October 14, 2018, 1:44am UTC](https://discourse.processing.org/t/making-multiple-of-same-image/4406/3 "2018-10-14T01:44:52Z")

</div>

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.

```auto
 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;
     }
   }

```