​

function setup() {

  background(220);

  createCanvas(400, 400);

}

​

function draw() {

  // TIC TAC TOE: Create X/O shapes

  //

  noFill();

  drawGrid();

  if (mouseIsPressed) detectInput();

  // drawX(200,200,50);

  // circle(200,200,50);

}

​

function drawMark(x, y, size){

  if (turn) {

    circle(x,y,size);

    return;

  }

  size /= 3; // So we can use the same value for size as circle

  line(x-size, y-size, x+size, y+size);

  line(x-size, y+size, x+size, y-size);

}

​

function drawGrid(){

  line(1,0,1,height);

  line(width/3,0,width/3,height);

  line(width/3 * 2,0,width/3 * 2,height);

  line(width-1,0,width-1,height);

  line(1,0,width,1);

  line(0,height/3,width,height/3);

  line(0,height/3*2,width,height/3*2);

  line(0,height-1,width,height-1);

}

​

function detectInput(){

  if (mouseX < width / 3){

    if (mouseY < height / 3){

      drawMark(width / 6, height / 6, 50);

    }

    else if (mouseY < height / 3 * 2){

      drawMark(width / 6, height / 2, 50);

    }

    else {

      drawMark(width / 6, height - 70, 50);

    }

  } else if (mouseX < width / 3 * 2){

    if (mouseY < height / 3){

      drawMark(width / 2, height / 6, 50);

    }

    else if (mouseY < height / 3 * 2){

      drawMark(width / 2, height / 2, 50);

    }

    else {

      drawMark(width / 2, height - 70, 50);

    }

  } else {

    if (mouseY < height / 3){

      drawMark(width - 70, height / 6, 50);

    }

    else if (mouseY < height / 3 * 2){

      drawMark(width - 70, height / 2, 50);

    }

    else {

      drawMark(width - 70, height - 70, 50);

    }

  }

  turn = !turn;

}