-XO-

void setup() {

  size(300, 300);

  background(0);

}

int x=100;           

int[][] ox= {{1, 0, 1},{1, 0, 1}, {0, 1, 0}};    //สร้างตัวแปรอาเรย์ 2 มิติ ชนิดจำนวนเต็ม และกำหนดค่า

void draw() {

  drawTa();                                 //เรียกใช้ฟังก์ชัน drawTa( )

  drawOX();           

  

}

void drawTa() {               //ฟังก์ชันนี้ใช้ในการวาดตาราง

  while (x<=200) {           //เป็นคำสั่งที่ใช้ในการวนลูป(ทำงานซ้ำ)เมื่อเงื่อนไขเป็นจริง

    stroke(250);

    strokeWeight(10);

    line(x, 20, x, 280);

    line(20, x, 280, x);

    x=x+100;                   //ให้เพิ่มค่าx 100ในทุกครั้งที่มีการวนลูป

  }

}

int i=0; 

int s;

int y;

void drawOX() {         //เป็นฟังก์ชันที่ใช้ในการวาด O และ X

  int c=0;

  strokeWeight(5);

  if (i<ox.length) {              

    while (c<ox[i].length) {

      if (ox[i][c]==1) {            //ถ้าเงื่อนไขเป็นจริง จะทำตามคำสั่งด้านใน

        drawX();                      //เรียกใช้ฟังก์ชัน drawX

      }

      else{

       drawO();                     //เรียกใช้ฟังก์ชัน drawO

      }

      c=c+1;

      s=s+100;

    }

    if (i<ox.length) {

      if (c==3) {

        i=i+1;

        s=0;

        y=y+100;

      }

    }

  }

}

void drawX() {        //ฟังก์ขันที่ใช้ในการสร้างรูป X

  stroke(0,255,0);

  line(20+s, 20+y, 80+s, 80+y); 

  line(80+s, 20+y, 20+s, 80+y);

}

void drawO() {        //ฟังก์ขันที่ใช้ในการสร้างรูป O

  noFill();

  stroke(0,0,255);

  ellipse(50+s, 50+y, 70, 70);

}

///////////Option 2//////////

void setup() {

 size(300, 300);

 background(0);

}

int x=100;

int[][] ox= {{1, 0, 1},{1, 0, 1}, {0, 1, 0}}; //สร้างตัวแปรอาเรย์ 2 มิติ ชนิดจำนวนเต็ม และกำหนดค่า

void draw() {

 drawTa();  //เรียกใช้ฟังก์ชัน drawTa( )

 drawOX();

}

void drawTa() { //ฟังก์ชันนี้ใช้ในการวาดตาราง

 while (x<=200) {

   stroke(255, 0, 0);

   strokeWeight(10);

   line(x, 20, x, 280);

   line(20, x, 280, x);

   x=x+100;

 }

}

int c=0;

int i=0;

int s=0;

int y=0;

void drawOX() {  //เป็นฟังก์ชันที่ใช้ในการวาด O และ X

 while (i<ox.length) { //ลูปนี้จะใช้เช็คเงื่อนไขของindexมิติที่1
โดยมีติที่ 1 เก็บค่าของจำนวนแถว

  while(c<ox[i].length){ //ลูปนี้จะใช้เช็คเงื่อนไขของindexมิติที่1 
โดยมีติที่ 2 เก็บค่าว่าตัวไหนเป็นXหรือO
เป็นการเขียนแบบ ลูปซ้อนลูป

    if(ox[i][c]==1){ //ถ้าเงื่อนไขเป้นจริงวาด X

     drawX();

    }

    else if(ox[i][c]==0){ //ถ้าเงื่อนไขเป็นจริงวาด O

     drawO();

    }

    c=c+1; //เพิ่มค่าCเพื่อให้ออกจากลูป

    s=s+100; //เพิ่มค่าSเพื่อให้รูปไม่ทับกัน

   }

   s=0; //เป็นการรีเซ็ตค่าใหม่เพิ่มเตรียมวาดในแถวที่2

   c=0;

   y=y+100; //เพิ่มค่าyเพื่อเป็นพิกัดในแกนy

   i=i+1; //เพิ่มค่าiทุกๆครั้งที่มีการวนลูป

   

 }

}

void drawX() {

 stroke(0,255,0);

 strokeWeight(5);

 line(20+s, 20+y, 80+s, 80+y);

 line(80+s, 20+y, 20+s, 80+y);

}

void drawO() {

 noFill();

 stroke(0,0,255);

 ellipse(50+s, 50+y, 70, 70);

}

//อ้างอิงคำสั่งพื้นฐานต่างๆจาก lab1 http://com5630043.blogspot.com/search/label/lab1
//อ้างอิงอธิบายฟังก์ชันจาก lab2 http://com5630043.blogspot.com/search/label/lab2

//อ้างอิงอธิบายเรื่องif-elseจาก lab3 http://com5630043.blogspot.com/search/label/lab3%20%3A%20Condition