Binary

boolean[] t = {true,true,false,false,true};   // ประกาศตัวแปรประเภท boolean เก็บค่า True กับ False

void setup() {
  size(500,300);  // กำหนดขนาดของเฟรมเป็น 500x300
  background(255);  // กำหนดพื้นหลังเป็นสีขาว
  smooth();
}

void draw() {
  int r = 80;  // ประกาศ และกำหนด ตัว r เป็นค่าของรัศมี
  int i = 0;  // ประกาศ และกำหนด ตัว i เป็นค่าในการไล่นับ
  int x = 90;  // ประกาศ และกำหนด ตัว x เป็นค่าตำแหนางของแกน X
  while(i<t.length) {  // จะเข้าเงื่อนไขเมื่อ i มีค่าน้อยกว่า จำนวนตัวแปรของ t
    if(t[i]==true){  // ถ้า t ตัวที่ i มีค่าเป็นจริงแล้ว
      fill(255);  // ให้ใส่สีวัตถุเป็นสีขาว
      Circle(x,r);  // เรียกใช้ฟังก์ชัน Circle
      x = x + r;  // ให้ค่า x เพิ่มขึ้น เท่ากับ x+r
    }else{ // ถ้าไม่เข้า if
      fill(0);  // ให้ใส่สีวัตถุเป็นสีดำ
      Circle(x,r); // เรียกใช้ฟังก์ชัน Circle
      x = x + r; // ให้ค่า x เพิ่มขึ้น เท่ากับ x+r
    }
    i++;  //  เมื่อออกจาก if ให้ i เพิ่มขึ้นทีละ 1
  }
} 

void Circle(int x, int r) { 
  ellipse(x, 150, r, r);   // วาดวงกลม
}

Some UFO

int x = 0, count = x;  // ประกาศ และกำหนดตัวแปรแบบ Global variale
int[] n = {100,200,300}; // ประกาศ และกำหนดตัวแปรแบบ Global variale (Array)
int[] h = {1,2,3}; // ประกาศ และกำหนดตัวแปรแบบ Global variale (Array)

void setup() {
  size(600, 400); // กำหนดขนาดจอภาพที่แสดง
  smooth();
  strokeWeight(5); // กำหนดความหนาของเส้นวัตถุ}

void draw() { // สร้างฟังก์ชันเรียกใช้อัตโนมัติ
  background(x, 255, 255);  // กำหนดพื้นหลังให้มีค่าเปลี่ยนไปตามค่า x
  int i = 0;
  while(i<h.length) {
    drawUFO(x, n[i], h[i]);  // สั่งใช้วานฟังก์ชัน ที่สร้างเองให้วาดวัตถุ
    i++;
  }
  if (count <= 400) { // ใช้คำสั่งเงื่อนไข (if) โดยที่ ถ้า count มีค่าน้อยกว่าหรีลือ 400
    x = x + 1;  // สั่งให้เพิ่มค่าของ x โดยสั่งให้ เพิ่มขึ้นทีละ  1
    count = x;  // สั่งให้ count มีค่าเท่ากับ x  }
  else {  // แต่ถ้านอกจากนั้น
    x = x - 1;  // สั่งให้เพิ่มค่าของ x โดยสั่งให้ ลดลงทีละ  1
    count = count + 1; // สั่งให้เพิ่มค่าของ count โดยสั่งให้ เพิ่มขึ้นทีละ  1
  }
  if (count == 400*2) { // และถ้า count มีค่าเท่ากับ 400*2
    count = 0;  // ให้ count เท่ากับ 0  }
}

void drawUFO(int x, int y, int n) { // สร้างฟังก์ชันให้วาดวัตถุโดยให้ค่าเป็นตัวแปร
  //int y = 300;  // ประกาศ และกำหนดตัวแปร y ให้มีค่าเป็นตำแหน่งแกน Y  int rx = 100;   //  ประกาศ และกำหนดตัวแปร rx เพื่อกำหนดรัศมีใแกน X
  int ry = 50;  //  ประกาศ และกำหนดตัวแปร ry เพื่อกำหนดรัศมีใแกน Y
  int i = 0; //  ประกาศ และกำหนดตัวแปร i เพื่อไล่
  while(i<n) {
    line(x, y - 70, x, y);   // คำสั่งวาดเส้น
    fill(255, 0, 0); // ใส่สีพื้นหลังวัตถุ    ellipse(x, y - 70, 20, 20);   // คำสั่งวาดวงกลม
    fill(255, 255, 0); // ใส่สีพื้นหลังวัตถุ
    ellipse(x, y - 10, rx - 50, ry);   // คำสั่งวาดวงกลม    fill(0); // ใส่สีพื้นหลังวัตถุ
    ellipse(x, y, rx, ry - 25);   // คำสั่งวาดวงกลม    x = x + 100; // ให้ x เพิ่มขึ้นทีละ 100
    i++; // ให้ i เพิ่มขึ้นทีละ 100
  }
}

Barchart (Calculate max/min/average for your data)

float[ ] l = {64,61,62,88,97,127,130,170,304,316}; // ประกาศตัว l เป็น Array เป็นค่าของข้อมูล
String[ ] name = {"Samut Songkhram","Chumphon","Phangnga","Kamphaeng Phet","Mae Hong Son","Suphan Buri","Uthai Thani","Trat","Phayao","Uttaradit"};  // ประกาศตัว name เป็น Array เป็นชื่อของข้อมูล
String[ ] value = {"64","61","62","88","97","127","130","170","304","316"};  // ประกาศตัว value เป็น Array เก็บค่าของข้อมูลที่เป็นข้อความ
float max = l[0] , min = l[0] , sum = 0 , average;  // ประกาศตัวแปรเป็น Global
void setup() {
  size(700,650);  // คำสั่งกำหนดขนาดของเฟรม
  background(255); // คำสั่งกำหนดพื้นหลัง
  smooth();
  Chart(); // เรียกใช้ฟังก์ชัน
}

void Chart() {
  int i = 0;
  int h = 25;
  int x = 30;
  int y = 60;
  while(i<l.length){  // จะเข้าเงื่อนไขต่อเมื่อค่า i น้อยกว่าจำนวนของตัวแปร l
    fill(random(0,256),random(0,256),random(0,256)); // ใส่พื้นหลังของวัตถุ
    rect(x,y,l[i],h);  // วาดสี่เหลี่ยม
    fill(0);  // ใส่พื้นหลังของวัตถุ
    textSize(24);  // สั่งให้เพิ่มขนาดของตัวหนังสือเป็นขนาด 24
    text(name[i],x,y);  // สั่งให้แสดงตัวหนังสือบนเฟรมที่ตำแหน่ง (x,y)
    text(value[i],x+500,y+20);  // สั่งให้แสดงตัวหนังสือบนเฟรมที่ตำแหน่ง (x+500,y+20)
    y = y + (h*2);  // ให้ y มีค่าเท่ากับ y + (h*2)
     if(l[i]<=min) { // จะเข้าเงื่อนไขต่อเมื่อค่า l[i] น้อยกว่าหรือเท่ากับ min
      min=l[i]; // ให้ min เท่ากับ l[i]
    }
     if(l[i]>=max) {  // จะเข้าเงื่อนไขต่อเมื่อค่า l[i] มากกว่าหรือเท่ากับ max
      max=l[i]; // ให้ max เท่ากับ l[i]
    }
    sum = sum + l[i];  // ให้ sum มีค่าเท่ากับ sum + l[i]
    i++;  // เพิ่มค่า i ทีละ 1
  }
 average = sum/l.length;  // ให้ average มีค่าเท่ากับ sum/l.length
 text("Average is "+average,180,630); // สั่งให้แสดงตัวหนังสือบนเฟรมที่ตำแหน่ง (180,630)
 text("Min is "+min,180,570);  // สั่งให้แสดงตัวหนังสือบนเฟรมที่ตำแหน่ง (180,570)
 text("Max is "+max,180,600);  // สั่งให้แสดงตัวหนังสือบนเฟรมที่ตำแหน่ง (180,600)
 text("Provinces with the lowest jobless in 2011",80,30);  // สั่งให้แสดงตัวหนังสือบนเฟรมที่ตำแหน่ง (80,30)
}

Curve stitching

void setup() {
  size(500, 500);
  smooth();
  background(255);
  drawline1(0);
}

void drawline1(int x) {
  int count = 0;
  int s = 2;
  int n = height/s;
  while(count<n) {
    line(0, x, x, height);
    line(x, 0, width, x);
    x = x + s;
    count = count + 1;
  }
}

         เป็นการใช้คำสั่ง while loop  วาดรูปซ้ำๆกัน โดยการกำหนดเงื่อนไขคือ เมื่อ count มีค่า น้อยกว่า ค่า n แล้ว ซึ่งตอนแรก เรากำหนดค่าของ count เป็น 0 ดังนั้นเป็นจริงตามเงื่อนไข จึงสั่งให้วาดเส้น 1 เส้น แล้ววาดเส้นต่ออีก 1 เส้น แล้วให้ x = x + s เป็นการเพิ่นค่าของ x ให้เท่ากับ
 x + s แล้วให้ count = count + 1 เป็นการเพิ่นค่าของ count เพิ่มขึ้นอีก 1 แล้วกลับไปเช็คเงื่อนไขต่ออีกรอบ แล้วถ้าเงื่อนไขยังเป็นจริงอยู่ ก็จะวนขึ้นมาทำแบบนี้ไปเรื่อย จนกว่าเงื่อนไขจะเป็นเท็จ หรือก็คือ count มีค่ามากกว่า หรือเท่ากับค่าของ n จึงออกจาก loop แล้วก็คำสั่งต่อไปจนจบ
         รูปที่ออกมาก็จะกลายเป็นรูปเส้นโค้งที่สวยงาม

Mobile

void setup() {
  size(500, 750);
  smooth();
  background(255);
  drawMobile(10);
}

void drawMobile(int x) {
  int count = 0;
  int w = 20;
  int n = 20;
  int s = 10;
  int l = 300;
  while(count<n) {
    fill(random(0, 256), random(0, 256), random(0, 256));
    noStroke();
    rect(x, 100, w, l);
    x = x + (s+w);
    l = l + 20;
    count = count + 1;
  }
  fill(134, 67, 0);
  rect(0, 100, width, w);
}


       เป็นการใช้คำสั่ง while loop  วาดรูปซ้ำๆกัน โดยการกำหนดเงื่อนไขคือ เมื่อ count มีค่า น้อยกว่า ค่า n แล้ว ซึ่งตอนแรก เรากำหนดค่าของ count เป็น 0 ดังนั้นเป็นจริงตามเงื่อนไข จึงสั่งให้วาดสี่เหลี่ยม 1 รูป แล้วให้ x = x + (s+w) เป็นการเพิ่นค่าของ x ให้เท่ากับ (s+w) แล้วให้ count = count + 1 เป็นการเพิ่นค่าของ count เพิ่มขึ้นอีก 1 แล้วกลับไปเช็คเงื่อนไขต่ออีกรอบ แล้วถ้าเงื่อนไขยังเป็นจริงอยู่ ก็จะวนขึ้นมาทำแบบนี้ไปเรื่อย จนกว่าเงื่อนไขจะเป็นเท็จ หรือก็คือ count มีค่ามากกว่า หรือเท่ากับค่าของ n จึงออกจาก loop แล้วก็คำสั่งต่อไปจนจบ รูปที่ออกมาก็จะได้โมบายที่มีปลายยาวขึ้นเรื่อยๆ

UFO

int x = 0;  // ประกาศ และกำหนดตัวแปร x แบบ Global variale

int count = x; // ประกาศ และกำหนดตัวแปร count แบบ Global variale

void setup() {

  size(400, 400); // กำหนดขนาดจอภาพที่แสดง

  smooth();

  strokeWeight(5); // กำหนดความหนาของเส้นวัตถุ

}

void draw() { // สร้างฟังก์ชันเรียกใช้อัตโนมัติ

  background(x, 255, 255);  // กำหนดพื้นหลังให้มีค่าเปลี่ยนไปตามค่า x

  drawUFO(x);  // สั่งใช้วานฟังก์ชัน ที่สร้างเองให้วาดวตถุ

  

  if (count <= 400) { // ใช้คำสั่งเงื่อนไข (if) โดยที่ ถ้า count มีค่าน้อยกว่าหรีลือ 400

    x = x + 1;  // สั่งให้เพิ่มค่าของ x โดยสั่งให้ เพิ่มขึ้นทีละ  1

    count = x;  // สั่งให้ count มีค่าเท่ากับ x

  }

  else {  // แต่ถ้านอกจากนั้น

    x = x - 1;  // สั่งให้เพิ่มค่าของ x โดยสั่งให้ ลดลงทีละ  1

    count = count + 1; // สั่งให้เพิ่มค่าของ count โดยสั่งให้ เพิ่มขึ้นทีละ  1

  }

  if (count == 400*2) { // และถ้า count มีค่าเท่ากับ 400*2

    count = 0;  // ให้ count เท่ากับ 0

  }

}

void drawUFO(int x) { // สร้างฟังก์ชันให้วาดวัตถุโดยให้ค่าเป็นตัวแปร

  int y = 250;  // ประกาศ และกำหนดตัวแปร y ให้มีค่าเป็นตำแหน่งแกน Y

  int rx = 200;   //  ประกาศ และกำหนดตัวแปร rx เพื่อกำหนดรัศมีใแกน X

  int ry = 100;  //  ประกาศ และกำหนดตัวแปร ry เพื่อกำหนดรัศมีใแกน Y

  line(x, y - 120, x, y);   // คำสั่งวาดเส้น

  fill(255, 0, 0); // ใส่สีพื้นหลังวัตถุ

  ellipse(x, y - 120, 20, 20);   // คำสั่งวาดวงกลม

  fill(255, 255, 0); // ใส่สีพื้นหลังวัตถุ

  ellipse(x, y - 30, rx - 100, ry);   // คำสั่งวาดวงกลม

  fill(0); // ใส่สีพื้นหลังวัตถุ

  ellipse(x, y, rx, ry - 50);   // คำสั่งวาดวงกลม

}

Like (If)

int y = 70;  // ประกาศ และกำหนดตัวแปร y ให้เป็นค่าแกน Y โดยกำหนดเป็น Global variable

void setup() {
  size(300, 300); // กำหนดขนาดของจอที่แสดง
  smooth();
  drawMountain(90, 250, 300); // สั่งใช้วานฟังก์ชัน ที่สร้างเองให้วาดวัตถุ โดยกำหนดค่าคงที่
  drawSun(220, 50, 50); // สั่งใช้วานฟังก์ชัน ที่สร้างเองให้วาดวัตถุ โดยกำหนดค่าคงที่
}

void draw() { // สร้างฟังก์ชันเรียกใช้อัตโนมัติ
  int x = 95;  // ประกาศ และกำหนดตัวแปร x ให้เป็นค่าแกน X
  int r = 50;  // ประกาศ และกำหนดตัวแปร r ให้เป็นค่ารัศมีของวัตถุ
  y = y + 5;  // สั่งให้ y เพิ่มขึ้นทีละ 5
  drawWater(150, 370, 270);  // สั่งใช้วานฟังก์ชัน ที่สร้างเองให้วาดวัตถุ โดยกำหนดค่าคงที่
  fill(y-10, 255, 255);  // ใส่สีพื้นหลังวัตถุ ให้เปลี่ยนไปตามค่าของ y
  drawWaterfall (x, y, r);   // สั่งใช้วานฟังก์ชัน ที่สร้างเองให้วาดวัตถุ โดยกำหนดค่าของตัวแปร
  if(y > 300) {  // ใช้คำสั่งเงื่อนไข (if) โดยที่ ถ้า y มีค่ามากกว่า 320
    y = 70; // ก็จะให้ x = 70
  }
}


void drawWaterfall (int x, int y, int r) { // สร้างฟังก์ชันให้วาดวัตถุโดยให้ค่าเป็นตัวแปร
  strokeWeight(2); // คำสั่งให้เส้นวัตถุหนาขึ้น
  stroke(255);  // คำสั่งให้เส้นวัตถุเป็นสีขาว
  ellipse(x, y, r, r);  // คำสั่งวาดวงกลม
}

void drawWater(int x, int y, int r) {  // สร้างฟังก์ชันให้วาดวัตถุโดยให้ค่าเป็นตัวแปร
  fill(0, 250, 250); // ใส่สีพื้นหลังวัตถุ
  noStroke(); // คำสั่งให้เส้นวัตถุไม่มี
  ellipse(x, y, r+100, r); // คำสั่งวาดวงกลม
}

void drawMountain(int x, int y, int r) { // สร้างฟังก์ชันให้วาดวัตถุโดยให้ค่าเป็นตัวแปร
  int s = 50 ;  // ประกาศ และกำหนดตัวแปร s เป็นค่าความห่างของวัตถุ
  fill(0, 255, 0);  // ใส่สีพื้นหลังวัตถุ
  ellipse(x, y, r, r+100); // คำสั่งวาดวงกลม
  ellipse((x+r)-s, y, r, r+100); // คำสั่งวาดวงกลม
}

void drawSun(int x, int y, int r) { // สร้างฟังก์ชันให้วาดวัตถุโดยให้ค่าเป็นตัวแปร
  fill(242, 190, 13);  // ใส่สีพื้นหลังวัตถุ
  ellipse(x, y, r, r); // คำสั่งวาดวงกลม
}



น้ำตกไหลเรื่อยๆๆๆๆๆๆ

Like (Function)

int y = 70;  // ประกาศ และกำหนดตัวแปร y ให้เป็นค่าแกน Y โดยกำหนดเป็น Global variable

void setup() {

  size(300, 300); // กำหนดขนาดของจอที่แสดง

  smooth(); 

  drawMountain(90, 250, 300); // สั่งใช้วานฟังก์ชัน ที่สร้างเองให้วาดวัตถุ โดยกำหนดค่าคงที่

  drawSun(220, 50, 50); // สั่งใช้วานฟังก์ชัน ที่สร้างเองให้วาดวัตถุ โดยกำหนดค่าคงที่

}

void draw() { // สร้างฟังก์ชันเรียกใช้อัตโนมัติ

  int x = 95;  // ประกาศ และกำหนดตัวแปร x ให้เป็นค่าแกน X

  int r = 50;  // ประกาศ และกำหนดตัวแปร r ให้เป็นค่ารัศมีของวัตถุ

  y = y + 5;  // สั่งให้ y เพิ่มขึ้นทีละ 5

  drawWater(150, 370, 270);  // สั่งใช้วานฟังก์ชัน ที่สร้างเองให้วาดวัตถุ โดยกำหนดค่าคงที่

  fill(y-10, 255, 255);  // ใส่สีพื้นหลังวัตถุ ให้เปลี่ยนไปตามค่าของ y

  drawWaterfall (x, y, r);   // สั่งใช้วานฟังก์ชัน ที่สร้างเองให้วาดวัตถุ โดยกำหนดค่าของตัวแปร

  

}

void drawWaterfall (int x, int y, int r) { // สร้างฟังก์ชันให้วาดวัตถุโดยให้ค่าเป็นตัวแปร

  strokeWeight(2); // คำสั่งให้เส้นวัตถุหนาขึ้น

  stroke(255);  // คำสั่งให้เส้นวัตถุเป็นสีขาว

  ellipse(x, y, r, r);  // คำสั่งวาดวงกลม

}

void drawWater(int x, int y, int r) {  // สร้างฟังก์ชันให้วาดวัตถุโดยให้ค่าเป็นตัวแปร

  fill(0, 250, 250); // ใส่สีพื้นหลังวัตถุ

  noStroke(); // คำสั่งให้เส้นวัตถุไม่มี

  ellipse(x, y, r+100, r); // คำสั่งวาดวงกลม

}

void drawMountain(int x, int y, int r) { // สร้างฟังก์ชันให้วาดวัตถุโดยให้ค่าเป็นตัวแปร

  int s = 50 ;  // ประกาศ และกำหนดตัวแปร s เป็นค่าความห่างของวัตถุ

  fill(0, 255, 0);  // ใส่สีพื้นหลังวัตถุ

  ellipse(x, y, r, r+100); // คำสั่งวาดวงกลม

  ellipse((x+r)-s, y, r, r+100); // คำสั่งวาดวงกลม

}

void drawSun(int x, int y, int r) { // สร้างฟังก์ชันให้วาดวัตถุโดยให้ค่าเป็นตัวแปร

  fill(242, 190, 13);  // ใส่สีพื้นหลังวัตถุ

  ellipse(x, y, r, r); // คำสั่งวาดวงกลม

}

น้ำตกๆๆๆๆๆๆ

  

Sport (If)

int xa = 0; // ประกาศ และกำหนดตัวแปร xa แบบ Global variale

void setup() {
  size(500, 500); // กำหนดขนาดของจอที่แสดง
  smooth();
  strokeWeight(3);
}

void draw() { // สร้างฟังก์ชันเรียกใช้อัตโนมัติ
  background(255, 255, 255);  // ใส่เพิ่มหลัง
  int x = 430; // ประกาศ และกำหนดตัวแปร x ให้เป็นค่าแกน X
  int y = 250; // ประกาศ และกำหนดตัวแปร y ให้เป็นค่าแกน Y
  int rx = 100; //  ประกาศ และกำหนดตัวแปร rx เพื่อกำหนดรัศมีใแกน X
  int ry = 250;  //  ประกาศ และกำหนดตัวแปร ry เพื่อกำหนดรัศมีใแกน Y
  drawTarget(x, y, rx, ry);  // สั่งใช้วานฟังก์ชัน ที่สร้างเองให้วาดวัตถุ
  drawArrow();  // สั่งใช้วานฟังก์ชัน ที่สร้างเองให้วาดวัตถุ อีกอัน
  xa = xa + 5;  // สั่งให้ xa เพิ่มขึ้นทีละ 5
  if(xa > 430) {   // ใช้คำสั่งเงื่อนไข (if) โดย ถ้าค่าของ xa มีค่ามากกว่า 430
      xa = 430;  // ก็จะสั่งให้ xa มีค่าเท่ากับ 430 เพื่อให้หยุด
    }
}
 
 

void drawTarget(int x, int y, int rx, int ry) {  // สร้างฟังก์ชันให้วาดวัตถุโดยให้ค่าเป็นตัวแปร
  int s = 20; // ประกาศ และกำหนดตัวแปร s เป็นค่าความห่างของวัตถุ
  fill(255, 255, 255);  // ใส่สีพื้นหลังวัตถุ
  ellipse(x, y, rx, ry); // คำสั่งวาดวงกลม
  rx = rx - s;  // สั่งให้เพิ่มค่าของ rx โดยสั่งให้  rx = rx - s
  ry = ry - s;  // สั่งให้เพิ่มค่าของ ry โดยสั่งให้  ry = ry - s
  fill(0, 0, 0);  // ใส่สีพื้นหลังวัตถุ
  ellipse(x, y, rx, ry); // คำสั่งวาดวงกลม
  rx = rx - s;  // สั่งให้เพิ่มค่าของ rx โดยสั่งให้  rx = rx - s
  ry = ry - s;  // สั่งให้เพิ่มค่าของ ry โดยสั่งให้  ry = ry - s
  fill(0, 0, 255);  // ใส่สีพื้นหลังวัตถุ
  ellipse(x, y, rx, ry); // คำสั่งวาดวงกลม
  rx = rx - s;  // สั่งให้เพิ่มค่าของ rx โดยสั่งให้  rx = rx - s
  ry = ry - s;  // สั่งให้เพิ่มค่าของ ry โดยสั่งให้  ry = ry - s
  fill(255, 0, 0);  // ใส่สีพื้นหลังวัตถุ
  ellipse(x, y, rx, ry); // คำสั่งวาดวงกลม
}

void drawArrow() {
  int y = 250;  // ประกาศ และกำหนดตัวแปร y ให้เป็นค่าแกน Y
  int l = 150;  // ประกาศ และกำหนดตัวแปร l ให้เป็นค่าความยาววัตถุ
  line(xa, y, xa-l, y);  // วาดเส้น
  fill(255, 255, 0);  // ใส่สีพื้นหลังวัตถุ
  triangle(xa, y, xa-20, y+10, xa-20, y-10); // คำสั่งวาดสามเหลี่ยม
}


เย้ๆๆๆๆๆ ยิงโดนแล้วนะจ๊ะ อ่าาาาาาาาาา :)

Sport (Function)

int xa = 0; // ประกาศ และกำหนดตัวแปร xa แบบ Global variale

void setup() {

  size(500, 500); // กำหนดขนาดของจอที่แสดง

  smooth();

  strokeWeight(3);  

}

void draw() { // สร้างฟังก์ชันเรียกใช้อัตโนมัติ

  background(255, 255, 255);  // ใส่เพิ่มหลัง

  int x = 430; // ประกาศ และกำหนดตัวแปร x ให้เป็นค่าแกน X

  int y = 250; // ประกาศ และกำหนดตัวแปร y ให้เป็นค่าแกน Y

  int rx = 100; //  ประกาศ และกำหนดตัวแปร rx เพื่อกำหนดรัศมีใแกน X

  int ry = 250;  //  ประกาศ และกำหนดตัวแปร ry เพื่อกำหนดรัศมีใแกน Y

  drawTarget(x, y, rx, ry);  // สั่งใช้วานฟังก์ชัน ที่สร้างเองให้วาดวัตถุ

  drawArrow();  // สั่งใช้วานฟังก์ชัน ที่สร้างเองให้วาดวัตถุ อีกอัน

  xa = xa + 5;  // สั่งให้ xa เพิ่มขึ้นทีละ 5

}

  

  

void drawTarget(int x, int y, int rx, int ry) {  // สร้างฟังก์ชันให้วาดวัตถุโดยให้ค่าเป็นตัวแปร

  int s = 20; // ประกาศ และกำหนดตัวแปร s เป็นค่าความห่างของวัตถุ

  fill(255, 255, 255);  // ใส่สีพื้นหลังวัตถุ

  ellipse(x, y, rx, ry); // คำสั่งวาดวงกลม

  rx = rx - s;  // สั่งให้เพิ่มค่าของ rx โดยสั่งให้  rx = rx - s

  ry = ry - s;  // สั่งให้เพิ่มค่าของ ry โดยสั่งให้  ry = ry - s

  fill(0, 0, 0);  // ใส่สีพื้นหลังวัตถุ

  ellipse(x, y, rx, ry); // คำสั่งวาดวงกลม

  rx = rx - s;  // สั่งให้เพิ่มค่าของ rx โดยสั่งให้  rx = rx - s

  ry = ry - s;  // สั่งให้เพิ่มค่าของ ry โดยสั่งให้  ry = ry - s

  fill(0, 0, 255);  // ใส่สีพื้นหลังวัตถุ

  ellipse(x, y, rx, ry); // คำสั่งวาดวงกลม

  rx = rx - s;  // สั่งให้เพิ่มค่าของ rx โดยสั่งให้  rx = rx - s

  ry = ry - s;  // สั่งให้เพิ่มค่าของ ry โดยสั่งให้  ry = ry - s

  fill(255, 0, 0);  // ใส่สีพื้นหลังวัตถุ

  ellipse(x, y, rx, ry); // คำสั่งวาดวงกลม

}

void drawArrow() {

  int y = 250;  // ประกาศ และกำหนดตัวแปร y ให้เป็นค่าแกน Y

  int l = 150;  // ประกาศ และกำหนดตัวแปร l ให้เป็นค่าความยาววัตถุ

  line(xa, y, xa-l, y);  // วาดเส้น

  fill(255, 255, 0);  // ใส่สีพื้นหลังวัตถุ

  triangle(xa, y, xa-20, y+10, xa-20, y-10); // คำสั่งวาดสามเหลี่ยม

}

ยิงไม่โดน 555 :)

Music (IF)

 int x = -50; // ประกาศ และกำหนดตัวแปร x แบบ Global variale

 float w = 1; // ประกาศ และกำหนดตัวแปร w แบบ Global variale 

//*** float เป็นชนิดตัวแปรที่เก็บค่าที่เป็นทศนิยม

 void setup() {
  size(300, 300); // กำหนดขนาดจอภาพที่แสดง
  smooth();
}

 void draw() { // สร้างฟังก์ชันเรียกใช้อัตโนมัติ
  int rx = 75; //  ประกาศ และกำหนดตัวแปร rx เพื่อกำหนดรัศมีใแกน X
  int ry = 45;  //  ประกาศ และกำหนดตัวแปร ry เพื่อกำหนดรัศมีใแกน Y
  int y = 180;  // ประกาศ และกำหนดตัวแปร y ให้มีค่าเป็นตำแหน่งแกน Y
  x = x + 5; // สั่งให้เพิ่มค่าของ x โดยสั่งให้ เพิ่มขึ้นทีละ 5
  w = w + 0.2; // สั่งให้เพิ่มค่าของ w โดยสั่งให้ เพิ่มขึ้มทีละ 0.2 
  strokeWeight(w); // กำหนดความหนาองเส้นวัตถุให้ขึ้นโดยใส่เป็นค่าตัวแปร
  background(x, y, x + y);  // กำหนดพื้นหลังให้มีค่าเปลี่ยนไปตามค่า xและ y
  drawNote(x, y, rx, ry); // สั่งใช้วานฟังก์ชัน ที่สร้างเองให้วาดวตถุ
  if(x > 350) { // ใช้คำสั่งเงื่อนไข (if) โดยที่ ถ้า x มีค่ามากกว่า 350
    x = -50; // ก็จะให้ x = -50
  }else{
  if(w > 15)  { // และถ้า w มากกว่า 50 แล้ว
    w = 1; ก็จะให้ w = 1
  }
 }
 void drawNote(int x, int y, int rx, int ry){ // สร้างฟังก์ชันให้วาดวัตถุโดยให้ค่าเป็นตัวแปร
  int h = 105; // ประกาศ และกำหนดตัวแปร h เป็นค่าความสูงวัตถุ
  int s = 75; // ประกาศ และกำหนดตัวแปร s เป็นค่าความห่างของวัตถุ
  fill(0, 0, 0); // ใส่สีพื้นหลังวัตถุ
  ellipse(x, y, rx, ry); // คำสั่งวาดวงกลม
  x = x + (rx/2);  // สั่งให้เพิ่มค่าของ x โดยสั่งให้ x = x + (rx/2)
  line(x, y - h, x + (rx/2) + s, y - h); // วาดเส้น
  line(x, y - h, x, y); // วาดเส้น
  x = x + s;  // สั่งให้เพิ่มค่าของ x โดยสั่งให้ x = x + s
  ellipse(x, y, rx, ry);  // คำสั่งวาดวงกลม
  x = x + (rx/2);  // สั่งให้เพิ่มค่าของ x โดยสั่งให้ x = x + (rx/2) อีกครั้ง
  line(x, y - h, x, y); // วาดเส้น

Music (Function)

void setup() {
  size(300, 300);  // กำหนดขนาดจอภาพที่แสดง
  smooth();
  strokeWeight(5); // กำหนดความหนาองเส้นวัตถุให้ขึ้น
}

 void draw() { // สร้างฟังก์ชันเรียกใช้อัตโนมัติ
  int x = mouseX; // ประกาศ และกำหนดตัวแปร x ให้มีค่าตามตำแหน่งเมาส์ในแกน X
  int y = mouseY; // ประกาศ และกำหนดตัวแปร y ให้มีค่าตามตำแหน่งเมาส์ในแกน Y
  int rx = 50; //  ประกาศ และกำหนดตัวแปร rx เพื่อกำหนดรัศมีใแกน X
  int ry = 30;  //  ประกาศ และกำหนดตัวแปร ry เพื่อกำหนดรัศมีใแกน Y
  background(x, y, x + y); // กำหนดพื้นหลังให้มีค่าเปลี่ยนไปตามค่า xและ y
  drawNote(x, y, rx, ry);  // สั่งใช้วานฟังก์ชัน ที่สร้างเองให้วาดวัตถุ
}

 void drawNote(int x, int y, int rx, int ry){ // สร้างฟังก์ชันให้วาดวัตถุโดยให้ค่าเป็นตัวแปร
  int h = 70; // ประกาศ และกำหนดตัวแปร h เป็นค่าความสูงวัตถุ
  int s = 50; // ประกาศ และกำหนดตัวแปร s เป็นค่าความห่างของวัตถุ
  fill(0, 0, 0); // ใส่สีพื้นหลังวัตถุ
  ellipse(x, y, rx, ry); // คำสั่งวาดวงกลม
  x = x + (rx/2);  // สั่งให้เพิ่มค่าของ x โดยสั่งให้ x = x + (rx/2)
  line(x, y - h, x + (rx/2) + s, y - h); // วาดเส้น
  line(x, y - h, x, y); // วาดเส้น
  x = x + s;  // สั่งให้เพิ่มค่าของ x โดยสั่งให้ x = x + s
  ellipse(x, y, rx, ry);  // คำสั่งวาดวงกลม
  x = x + (rx/2);  // สั่งให้เพิ่มค่าของ x โดยสั่งให้ x = x + (rx/2) อีกครั้ง
  line(x, y - h, x, y); // วาดเส้น
 }

เป็นการใช้ฟังก์ชัน ซึ่งจะทำให้โค้ดเราดูง่ายและเป็นระเบียบมากขึ้น และทำให้วัตถเคลื่อนที่โดยการใช้คำสั่ง mouseX และ mouseY

Art (IF)

int y = -10; // ประกาศ และกำหนดตัวแปร y แบบ Global variale

void setup() {
  size(300, 300); // กำหนดขนาดของจอที่แสดง
  smooth(); // ใช้คำสั่ง smooth ให้งานมีความสวยงายขึ้น
  noStroke(); // ใช้คำสั่ง noStroke ไม่วาดเส้นขอบ
  background(255, 255, 255); // ใส่เพิ่มหลัง
}

void draw() { // สร้างฟังก์ชันเรียกใช้อัตโนมัติ
  int x = 25;   // ประกาศ และกำหนดตัวแปร x ให้เป็นค่าแกน X
  int r = 50;  // ประกาศ และกำหนดตัวแปร r ให้เป็นค่ารัศมี
  y = y + 5; // สั่งให้ y เพิ่มขึ้นทีละ 5
  fill(255, 0, 0);  // ใส่สีพื้นหลังวัตถุ
  drawCircle(x, y, r);  // สั่งใช้ฟังก์ชัน drawCircle เพื่อวาด
  x = x + r; // สั่งให้เพิ่มค่าของ x โดยสั่งให้ x = x + r
  drawCircle(x, y, r);  // สั่งใช้ฟังก์ชัน drawCircle เพื่อวาด อีกครั้ง
  x = x + r; // สั่งให้เพิ่มค่าของ x โดยสั่งให้ x = x + r อีกครั้ง
  drawCircle(x, y, r);  // สั่งใช้ฟังก์ชัน drawCircle เพื่อวาด อีกครั้ง
  x = x + r; // สั่งให้เพิ่มค่าของ x โดยสั่งให้ x = x + r อีกครั้ง
  drawCircle(x, y, r);  // สั่งใช้ฟังก์ชัน drawCircle เพื่อวาด อีกครั้ง
  x = x + r; // สั่งให้เพิ่มค่าของ x โดยสั่งให้ x = x + r อีกครั้ง
  drawCircle(x, y, r);  // สั่งใช้ฟังก์ชัน drawCircle เพื่อวาด อีกครั้ง
  x = x + r; // สั่งให้เพิ่มค่าของ x โดยสั่งให้ x = x + r อีกครั้ง
  drawCircle(x, y, r);  // สั่งใช้ฟังก์ชัน drawCircle เพื่อวาด อีกครั้ง
  if(y>400) {  // ใช้คำสั่งเงื่อนไข (if) โดย ถ้าค่าของ y มีค่ามากกว่า 400
      y = -40; // ก็จะสั่งให้ y มีค่าเท่ากับ -20 เพื่อให้วาดซ้ำ
      background(255, 255, 255); // แล้วก็เปลี่ยนพื้นหลังเป็นสีขาวด้วยเมื่อวาดเสร็จ 1 รอบ
}

void drawCircle(int x, int y, int r) { // สร้างฟังก์ชันเพื่อวาดวัตถุ โดยใช้ตังแปรกำหนดค่าต่างๆ
  fill(x, y, r);  // ใส่สีพื้นหลังวัตถุ
  ellipse(x, y, r, r); // วาดวงกลม
  }
}

จะเห็นว่าคำสั่งอื่นๆเหมือน Art ใน Lab 2 แค่เพิ่มคำสั่งเงื่อนไข (if) เพืื่ให้มีการกำหนดค่าของ y ใหม่ และจะทำให้วัตถุถูกวาดใหม่ตลอด สวยงามขึ้น :)

Art (Function)

int y = -10; // ประกาศ และกำหนดตัวแปร y แบบ Global variale

void setup() {
  size(300, 300); // กำหนดขนาดของจอที่แสดง
  smooth(); // ใช้คำสั่ง smooth ให้งานมีความสวยงายขึ้น
  noStroke(); // ใช้คำสั่ง noStroke ไม่วาดเส้นขอบ
  background(255, 255, 255); // ใส่เพิ่มหลัง
}

void draw() { // สร้างฟังก์ชันเรียกใช้อัตโนมัติ
  int x = 25;   // ประกาศ และกำหนดตัวแปร x ให้เป็นค่าแกน X
  int r = 50;  // ประกาศ และกำหนดตัวแปร r ให้เป็นค่ารัศมี
  y = y + 10; // สั่งให้ y เพิ่มขึ้นทีละ 10
  fill(255, 0, 0);  // ใส่สีพื้นหลังวัตถุ
  drawCircle(x, y, r);  // สั่งใช้ฟังก์ชัน drawCircle เพื่อวาด
  x = x + r; // สั่งให้เพิ่มค่าของ x โดยสั่งให้ x = x + r 
  drawCircle(x, y, r);  // สั่งใช้ฟังก์ชัน drawCircle เพื่อวาด อีกครั้ง
  x = x + r; // สั่งให้เพิ่มค่าของ x โดยสั่งให้ x = x + r อีกครั้ง
  drawCircle(x, y, r);  // สั่งใช้ฟังก์ชัน drawCircle เพื่อวาด อีกครั้ง
  x = x + r; // สั่งให้เพิ่มค่าของ x โดยสั่งให้ x = x + r อีกครั้ง
  drawCircle(x, y, r);  // สั่งใช้ฟังก์ชัน drawCircle เพื่อวาด อีกครั้ง
  x = x + r; // สั่งให้เพิ่มค่าของ x โดยสั่งให้ x = x + r อีกครั้ง
  drawCircle(x, y, r);  // สั่งใช้ฟังก์ชัน drawCircle เพื่อวาด อีกครั้ง
  x = x + r; // สั่งให้เพิ่มค่าของ x โดยสั่งให้ x = x + r อีกครั้ง
  drawCircle(x, y, r);  // สั่งใช้ฟังก์ชัน drawCircle เพื่อวาด อีกครั้ง
}

void drawCircle(int x, int y, int r) { // สร้างฟังก์ชันเพื่อวาดวัตถุ โดยใช้ตังแปรกำหนดค่าต่างๆ 
  fill(x, y, r);  // ใส่สีพื้นหลังวัตถุ
  ellipse(x, y, r, r); // วาดวงกลม
}

เป็นการใช้ฟังก์ชัน ซึ่งจะทำให้โค้ดเราดูง่ายและเป็นระเบียบมากขึ้น และทำให้วัตถเคลื่อนที่โดยการกำหนดให้ตัวแปร y เป็น Global variable และให้เพิ่มค่าขึ้นเรื่อยๆ

The Cat (Like)

size (300, 300);
smooth ();
background (135, 206, 250);
strokeWeight (3);

// ears
fill (0);
triangle (40, 30, 150, 100, 50, 180);
triangle (260, 30, 250, 180, 150, 100);
// face
fill (255);
ellipse (150, 180, 200, 180);
// eyes
int cx = 100 ; // center X-axis of Eyes
int cy = 160 ; // center Y-axis of Eyes
int s = 100 ; // space of Eyes
int rx = 90 ; // radius X-axis of Eyes
int ry = 70 ; // radius Y-axis of Eyes
fill (175, 238, 238);
ellipse (cx, cy, rx, ry);
ellipse (cx + s , cy, rx, ry);

line (cx, 135, cx, 185);
line (cx + s, 135, cx + s, 185);

// mouth
fill (250, 128, 114);
triangle (150, 250, 110, 210, 190, 210);

// Whiskers
int x = 30 ; // point X of  Whiskers
int sx = 100 ; // space of point X
int l = 70 ; // Length of  Whiskers
line (x, 190, x+l, 200);
line (x, 210, x+l, 210);
line (x, 230, x+l, 220);
x = x + sx + l ;
line (x, 200, x+l, 190);
line (x, 210, x+l, 210);
line (x, 220, x+l, 230);

Archery (Sport)

size (200, 200) ;

int c = 100 ; // center

int r = 150 ; // radius

int s = 20 ; // space

smooth () ;

ellipse (c, c, r, r) ;

fill ( 0, 0, 0) ;

ellipse (c, c, r - s, r - s) ;

fill ( 0, 0, 255) ;

ellipse (c, c, r - ( s* 2 ), r - ( s* 2 )) ;

ellipse (c, c, r - ( s* 3 ), r - ( s* 3 )) ;

fill ( 255, 0, 0) ;

ellipse (c, c, r - ( s* 4 ), r - ( s* 4 )) ;

ellipse (c, c, r - ( s* 5 ), r - ( s* 5 )) ; 

fill ( 255, 255, 0) ;

ellipse (c, c, r - ( s* 6 ), r - ( s* 6 )) ;

ellipse (c, c, r - ( s* 7 ), r - ( s* 7 )) ;

strokeWeight ( 3 ) ;

line (20, c, c, c );

triangle ( 10, c - 20, s, c, 10, c + s ) ;

triangle ( 10, c - 20, s, c, 10, c + s ) ;

Drum (Music)

size (300 , 300) ;

int cx = 150 ; // center of X-axis

int cy = 100 ; // center of Y-axis

int h = 100 ; // Height of Drum

fill (0) ;

ellipse (cx, cy + h, 150, 50) ; // Bottom

rect (75, 100, 150, h) ; // Body

// Drumhead

fill (255) ;

ellipse (cx, cy, 150, 50) ; 

fill (0) ;

ellipse (cx, cy, 100, 25) ;

// Wooden drum

strokeWeight (5) ;

stroke (255, 150, 0) ;

line (90, 50, 140, 90) ;

line (160, 90, 210, 50) ;

Monster(Art)

size (300, 300);
background (50, 205, 50);
smooth ();
int r = 100 ; // radius of eyes
int s = 200 ; // space of eyes
int cx = 50 ; // center X-axis of eyes
int cy = 100 ; // center Y-axis of eyes
// Eye
ellipse (cx, cy, r, r);
ellipse (cx+s, cy, r, r);
fill (0);
ellipse (cx-20, cy, r-70, r-70);
ellipse ((cx+s)+20, cy, r-70, r-70);
// Nose
ellipse (150, 150, 150, 100);
fill (255);
ellipse (120, 150, 50, 50);
ellipse (180, 150, 50, 50);

Bridge

void setup() {
  size(400, 300);
  smooth();
  background(255);
  drawSlings(100, 300, 100);
}

void drawSlings(int t1, int t2, int y) {
  int count = 0;
  int s = 10;
  int n = 20;
  int x1 = 0;
  int x2 = 200;
  while(count<n) {
    line(x1, 200, t1, y);
    x1 = x1 + s;
    line(x2, 200, t2, y);
    x2 = x2 + s;
    count = count + 1;
  }

  strokeWeight(10);
  line(0, height/1.5, width, height/1.5);
  line(100, 200, 100, 300);
  line(300, 200, 300, 300);
}


void setup() {
  size(400, 300);
  smooth();
  background(255);
  drawSlings(100, 300, 100);
}

void drawSlings(int t1, int t2, int y) {
  int count = 0;
  int s = 10;
  int n = 20;
  int x1 = 0;
  int x2 = 200;
  while(count<n) {
    line(x1, 200, t1, y);
    x1 = x1 + s;
    line(x2, 200, t2, y);
    x2 = x2 + s;
    count = count + 1;
  }

  strokeWeight(10);
  line(0, height/1.5, width, height/1.5);
  line(100, 200, 100, 300);
  line(300, 200, 300, 300);
}

    เป็นการใช้คำสั่ง while loop  วาดรูปซ้ำๆกัน โดยการกำหนดเงื่อนไขคือ เมื่อ count มีค่า น้อยกว่า ค่า n แล้ว ซึ่งตอนแรก เรากำหนดค่าของ count เป็น 0 ดังนั้นเป็นจริงตามเงื่อนไข จึงสั่งให้วาดเส้น 1 เส้น แล้วให้ x1 = x1 + s เป็นการเพิ่นค่าของ x1 ให้เท่ากับ x1 + s แล้ววาดเส้นต่ออีก 1 เส้น แล้วให้ x2 = x2 + s เป็นการเพิ่นค่าของ x2 ให้เท่ากับ x2 + s แล้วให้ count = count + 1 เป็นการเพิ่นค่าของ count เพิ่มขึ้นอีก 1 แล้วกลับไปเช็คเงื่อนไขต่ออีกรอบ แล้วถ้าเงื่อนไขยังเป็นจริงอยู่ ก็จะวนขึ้นมาทำแบบนี้ไปเรื่อย จนกว่าเงื่อนไขจะเป็นเท็จ หรือก็คือ count มีค่ามากกว่า หรือเท่ากับค่าของ n จึงออกจาก loop แล้วก็คำสั่งต่อไปจนจบ

Railway

void setup() {
  size(400, 400);
  smooth();
  background(255);
  drawrailway(0);
}

void drawrailway(int x) {
  int count = 0;
  int w = 30;
  int n = width/w;
  while(count<n) {
    fill(134, 67, 0);
    rect(x, 50, w, 300);
    x = x + (w*2);
    count = count + 1;
  }
  fill(200);
  rect(0, 100, width, w);
  rect(0, 270, width, w);
}


     เป็นการใช้คำสั่ง while loop  วาดรูปซ้ำๆกัน โดยการกำหนดเงื่อนไขคือ เมื่อ count มีค่า น้อยกว่า ค่า n แล้ว ซึ่งตอนแรก เรากำหนดค่าของ count เป็น 0 ดังนั้นเป็นจริงตามเงื่อนไข จึงสั่งให้วาดสี่เหลี่ยม 1 รูป แล้วให้ x = x + (w*2) เป็นการเพิ่นค่าของ x ให้เท่ากับ (w*2) แล้วให้ count = count + 1 เป็นการเพิ่นค่าของ count เพิ่มขึ้นอีก 1 แล้วกลับไปเช็คเงื่อนไขต่ออีกรอบ แล้วถ้าเงื่อนไขยังเป็นจริงอยู่ ก็จะวนขึ้นมาทำแบบนี้ไปเรื่อย จนกว่าเงื่อนไขจะเป็นเท็จ หรือก็คือ count มีค่ามากกว่า หรือเท่ากับค่าของ n จึงออกจาก loop แล้วก็คำสั่งต่อไปจนจบ

Express Way

void setup() {
  size(500, 300);
  smooth();
  background(255);
  drawWay(50);
}

void drawWay(int x) {
  int count = 0;
  int s = 50;
  int w = 30;
  int n = 6;
  while(count<n) {
    fill(0);
    rect(x, 100, w, 100);
    x = x + (s+w);
    count = count + 1;
  }
  fill(200);
  rect(0, 100, width, w);
}


        เป็นการใช้คำสั่ง while loop  วาดรูปซ้ำๆกัน โดยการกำหนดเงื่อนไขคือ เมื่อ count มีค่า น้อยกว่า ค่า n แล้ว ซึ่งตอนแรก เรากำหนดค่าของ count เป็น 0 ดังนั้นเป็นจริงตามเงื่อนไข จึงสั่งให้วาดสี่เหลี่ยม 1 รูป แล้วให้ x = x + (s+w) เป็นการเพิ่นค่าของ x ให้เท่ากับ (s+w) แล้วให้ count = count + 1 เป็นการเพิ่นค่าของ count เพิ่มขึ้นอีก 1 แล้วกลับไปเช็คเงื่อนไขต่ออีกรอบ แล้วถ้าเงื่อนไขยังเป็นจริงอยู่ ก็จะวนขึ้นมาทำแบบนี้ไปเรื่อย จนกว่าเงื่อนไขจะเป็นเท็จ หรือก็คือ count มีค่ามากกว่า หรือเท่ากับค่าของ n จึงออกจาก loop แล้วก็คำสั่งต่อไปจนจบ