# I don't know how to make the shapes appear alternately. Tic tac toe

**URL:** <https://discourse.processing.org/t/i-dont-know-how-to-make-the-shapes-appear-alternately-tic-tac-toe/30273>\
**Category:** Coding Questions\
**Created:** [May 25, 2021, 11:43am UTC](https://discourse.processing.org/t/i-dont-know-how-to-make-the-shapes-appear-alternately-tic-tac-toe/30273 "2021-05-25T11:43:30Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Wiktorpers](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/wiktorpers/32/13368_2.png) [@Wiktorpers](https://discourse.processing.org/u/Wiktorpers)\
**Post date:** [May 25, 2021, 11:43am UTC](https://discourse.processing.org/t/i-dont-know-how-to-make-the-shapes-appear-alternately-tic-tac-toe/30273/1 "2021-05-25T11:43:30Z")

</div>

I program tic-tac-toe but I don’t know how to make the shapes appear alternately. that is:  
the player has bet X is the next time he clicks on a field, O will appear  
it’s about the mouseClicked function. the one at the end of the code  
this is code:

```auto
var symbol = function(player, poleX,poleY){
   
  if(player === 0){
    
        if(poleX === 1 && poleY === 1){
         stroke(224, 34, 66);
        ellipse(100,100,180,180);
        print("we succeeded in executing the draw command in field 1.1");
      }
    else if(poleX === 2 && poleY === 1){
        stroke(224, 34, 66);
      ellipse(300,100,180,180);
      print("we succeeded in executing the draw command in field 2.1");
      }
    else if(poleX === 3 && poleY === 1){
         stroke(224, 34, 66);
      ellipse(500,100,180,180);
      print("we succeeded in executing the draw command in field 3.1");
      }
    if(poleX === 1 && poleY === 2){
         stroke(224, 34, 66);
      ellipse(100,300,180,180);
        print("we succeeded in executing the draw command in field 1.2");
      }
    if(poleX === 2 && poleY === 2){
        stroke(224, 34, 66);
      ellipse(300,300,180,180);
        print("we succeeded in executing the draw command in field 2.2");
      }
    if(poleX === 3 && poleY === 2){
         stroke(224, 34, 66);
      ellipse(500,300,180,180);
        print("we succeeded in executing the draw command in field 3.2");
      }
    if(poleX === 1 && poleY === 3){
         stroke(224, 34, 66);
      ellipse(100,500,180,180);
        print("we succeeded in executing the draw command in field 1.3");
      }
    if(poleX === 2 && poleY === 3){
         stroke(224, 34, 66);
      ellipse(300,500,180,180);
        print("we succeeded in executing the draw command in field 2.3");
      }
    if(poleX === 3 && poleY === 3){
         stroke(224, 34, 66);
      ellipse(500,500,180,180);
        print("we succeeded in executing the draw command in field 3.3");
      }
    else if(poleX >3 || poleX <0 || poleY >3 || poleY <0 ){
      print("I can't draw the X in pole " + poleX + "," + poleY + " . The number is too big or too small");
    }
  }
  else if(player === 1){
      if(poleX === 1 && poleY === 1){
         stroke(43, 133, 39);
         line(40,35,170,160);
         line(40,170,170,40);
        print("we succeeded in executing the draw command in field 1.1");
      }
    else if(poleX === 2 && poleY === 1){
         stroke(43, 133, 39);
         line(240,35,370,170);
         line(220,170,370,40);
      print("we succeeded in executing the draw command in field 2.1");
      }
    else if(poleX === 3 && poleY === 1){
         stroke(43, 133, 39);
         line(440,35,570,170);
         line(420,170,570,40);
      print("we succeeded in executing the draw command in field 3.1");
      }
    if(poleX === 1 && poleY === 2){
         stroke(43, 133, 39);
         line(40,235,170,360);
         line(40,370,170,240);
        print("we succeeded in executing the draw command in field 1.2");
      }
    if(poleX === 2 && poleY === 2){
         stroke(43, 133, 39);
         line(240,235,370,360);
         line(240,370,370,240);
        print("we succeeded in executing the draw command in field 2.2");
      }
    if(poleX === 3 && poleY === 2){
         stroke(43, 133, 39);
         line(440,235,570,360);
         line(440,370,570,240);
        print("we succeeded in executing the draw command in field 3.2");
      }
    if(poleX === 1 && poleY === 3){
         stroke(43, 133, 39);
         line(40,435,170,560);
         line(40,570,170,440);
        print("we succeeded in executing the draw command in field 1.3");
      }
    if(poleX === 2 && poleY === 3){
         stroke(43, 133, 39);
         line(240,435,370,560);
         line(240,570,370,440);
        print("we succeeded in executing the draw command in field 2.3");
      }
    if(poleX === 3 && poleY === 3){
         stroke(43, 133, 39);
         line(440,435,570,560);
         line(440,570,570,440);
        print("we succeeded in executing the draw command in field 3.3");
      }
    else if(poleX >3 || poleX <0 || poleY >3 || poleY <0 ){
      print("I can't draw the X in pole " + poleX + "," + poleY + " . The number is too big or too small");
    }
  }
};
function setup() {
  createCanvas(800, 800);
 
  
  strokeWeight(8);
 
  
  
var board = function(boardType){
  if(boardType === 0){
     stroke(37, 34, 224);
     line(1,200,599,200);
     line(1,400,599,400);
     
     line(200,1,200,599);
     line(400,1,400,599);
     }
};
  

board(0);

  
  

 

  
  
}
function mouseClicked() {
  var currentPlayer = 0;
  
   if(currentPlayer === 0 ){
     
  
        
 if(mouseY<200){
   if(mouseX <200){
     symbol(0,1,1);
   }
   if(mouseX <400 && mouseX > 200){
     symbol(0,2,1);
   }
   if(mouseX <600 && mouseX > 400){
     symbol(0,3,1);
   }
   
 }
  else if(mouseY<400){
   if(mouseX <200){
     symbol(0,1,2);
   }
   if(mouseX <400 && mouseX > 200){
     symbol(0,2,2);
   }
   if(mouseX <600 && mouseX > 400){
     symbol(0,3,2);
   }
    
 }
  else if(mouseY<600){
   if(mouseX <200){
     symbol(0,1,3);
   }
   if(mouseX <400 && mouseX > 200){
     symbol(0,2,3);
   }
   if(mouseX <600 && mouseX > 400){
     symbol(0,3,3);
   }
    
 }
   }
  if(currentPlayer ===1){
     
  
        
 if(mouseY<200){
   if(mouseX <200){
     symbol(1,1,1);
   }
   if(mouseX <400 && mouseX > 200){
     symbol(1,2,1);
   }
   if(mouseX <600 && mouseX > 400){
     symbol(1,3,1);
   }
 }
  else if(mouseY<400){
   if(mouseX <200){
     symbol(1,1,2);
   }
   if(mouseX <400 && mouseX > 200){
     symbol(1,2,2);
   }
   if(mouseX <600 && mouseX > 400){
     symbol(1,3,2);
   }
    
 }
  else if(mouseY<600){
   if(mouseX <200){
     symbol(1,1,3);
   }
   if(mouseX <400 && mouseX > 200){
     symbol(1,2,3);
   }
   if(mouseX <600 && mouseX > 400){
     symbol(1,3,3);
   }
    
 }
   }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 25, 2021, 12:00pm UTC](https://discourse.processing.org/t/i-dont-know-how-to-make-the-shapes-appear-alternately-tic-tac-toe/30273/2 "2021-05-25T12:00:27Z")

</div>

> [@Wiktorpers](#):
>
> `else if(player === 1){`

when we look at this line in the function, player tells us whose turn it is (in the function symbol).

It can be 0 or 1

**What to do**

currentPlayer also does tell us this, so after each move (with currentPlayer === 1) say `currentPlayer =0;` and vice versa

**Remarks (also to do)**

also: This line `var currentPlayer = 0;` must be OUTSIDE mouseClicked()  
(meaning the variable currentPlayer has a global scope and is not resetted to 0 at the start of mouseClicked())

- or better say var currentPlayer = 1; since it is X who starts the game (not ‘O’)

And: you want else if in this line: ` } else if (currentPlayer === 1) {`

* * *

**Remark**

Of course you can calculate the position

```auto
var currentPlayer = 1;

var symbol = function (player, poleX, poleY) {
  if (player === 0) {
    stroke(224, 34, 66);
    ellipse(100 + (poleX - 1) * 200, 100 + (poleY - 1) * 200, 180, 180);
    print(
      player,
      " succeeded in executing the draw command in field ",
      poleX,
      poleY
    );
    player = 1;
  } else if (player === 1) {
    stroke(43, 133, 39);
    var x1 = 100 + (poleX - 1) * 200;
    var y1 = 100 + (poleY - 1) * 200;
    line(x1 - 65, y1 - 65, x1 + 65, y1 + 65);
    line(x1 - 65, y1 + 65, x1 + 65, y1 - 65);
    print(
      player,
      " succeeded in executing the draw command in field ",
      poleX,
      poleY
    );
    player = 0;
  }
};

//-------------------------------------------------------------------------------

```

[EDITED]

---

<div class="post-metadata">

**Author:** ![Wiktorpers](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/wiktorpers/32/13368_2.png) [@Wiktorpers](https://discourse.processing.org/u/Wiktorpers)\
**Post date:** [May 29, 2021, 10:31am UTC](https://discourse.processing.org/t/i-dont-know-how-to-make-the-shapes-appear-alternately-tic-tac-toe/30273/3 "2021-05-29T10:31:18Z")

</div>

Thank you for your help. The code helped a lot and we managed to achieve the goal after a little editing