Binary Calculate & Display (Minus)

boolean[] A = {true, false,false,true};  // กำหนดตัวแปรชนิด boolean ประเภท array ชื่อ A boolean[] B = { true, true, false,false}; // กำหนดตัวแปรชนิด boolean ประเภท array ชื่อ B boolean[] cal = new boolean[4];  // กำหนดตัวแปรชนิด boolean ประเภท array ชื่อ cal เก็บค่าที่คำนวณได้
int[]minus = new int[5];  // กำหนดตัวแปรชนิด boolean ประเภท array ชื่อ minus ใช้เก็บค่าที่จะใช้แสดง
int x = 45; // กำหนดตัวแปรชนิด int ชื่อ x เพื่อกำหนดจุดที่วาดวงกลมวงแรก
int i = 0;  // กำหนดตัวแปรชนิด int ชื่อ i เพื่อเรียกใช้ค่าใน array ตำแหน่ง i นั้นๆ
int j = 1;  // กำหนดตัวแปรชนิด int ชื่อ j ใช้ในการทดเลขจากการคำนวณ
void setup() {
size(200,200);  // กำหนดขนาดของ screen
background(195);  // กำหนดสีของ screen เป็นสีเทา
  i = A.length - 1;  // ให้ ค่า i เท่ากับความยาวของ A -1 
  while (i > 0) {  // กำหนดเงื่อนไขการวนลูป ถ้า i > 0
    if (A[i] == B[i]) {  // กำหนดเงื่อนไข ถ้า A และ B ที่ตำแหน่ง i มีค่าเท่ากัน
      cal[i] = false;  // ให้ cal ที่ตำแหน่ง i เป็น false
    }
    else if (A[i]== false && B[i] == true) {  // กำหนดเงื่อนไข ถ้า A ที่ตำแหน่ง i มีค่าเป็น false และ B ตำแหน่ง i มีค่าเป็น true
      cal[i] = true;  // ให้ cal ที่ตำแหน่ง i เป็น true
      A[i-1] =!A[i-1];  // ให้ A[i - 1] มีค่าตรงข้าม
      if(A[0] == false && A[0] == true){  // กำหนดเงื่อนไข ถ้า A ที่ตำแหน่ง 0 มีค่าเป็น false

และ B ตำแหน่ง 0 มีค่าเป็น true

        cal[0] = true;  // ให้ cal ที่ตำแหน่ง 0 เป็น true
      }
      if (A[i-1] == true) {  // กำหนดเงื่อนไข ถ้าค่าตำแหน่งถัดจาก i เป็น true 
        j = 1;  // ให้ j เป็น 1
        while (A[i - j] == true) {  // กำหนดเงื่อนไขการวนลูป ถ้า A ตำแหน่ง i - j เป็น true
          j = j + 1;  // ให้ค่า j เพิ่มขึ้นเรื่อยๆทีละ 1
          if(A[0] == true) {  // กำหนดเงื่อนไข ถ้า A ตำแหน่ง 0 เป็น true
            break;  // ให้หยุด
          }
          A[i - j] = !A[i - j];  // ให้ A[i - j] มีค่าตรงข้าม
        }
      }
    }
    else {  // ถ้าค่าตำแหน่งถัดจาก i ไม่เป็น true
      cal[i] = true;  // ให้ cal ตำแหน่ง i เป็น true
    }
    i = i - 1;  // ให้ i ลดลงเรื่อยๆที่ละ 1
  }
  i = 0;  // ให้ i เป็น 0 เมื่อออกจากลูป
  while (i < A.length){  // กำหนดเงื่อนไขในการวนลูป ถ้า i < A.length
    if (cal[i] == true) {   // กำหนดเงื่อนไข ถ้า cal ตำแหน่ง i  เป็น true  
      minus[i] = 1;  // ให้ minus ที่ตำแหน่ง i เป็น 1        
      fill(0,128,128);   // กำหนดสีให้กับวงกลม เป็นสีเขียว
      ellipse(x,120,30,30);  // วาดวงกลม โดยเริ่มที่จุด x
      x = x + 30;  // เพิ่มค่า x ขึ้นเรื่อยๆทีละ 30
    }
    if (cal[i] == false) {  // กำหนดเงื่อนไข ถ้า cal ตำแหน่ง i  เป็น false  
      minus[i] = 0;  // ให้ minus ที่ตำแหน่ง i เป็น 0               
      fill(255);  // กำหนดสีให้กับวงกลม เป็นสีขาว 
      ellipse(x,120,30,30);  // วาดวงกลม โดยเริ่มที่จุด x
      x = x + 30;  // เพิ่มค่า x ขึ้นเรื่อยๆทีละ 30
    }
    i = i + 1;  // เพิ่มค่า i ขึ้นเรื่อยๆทีละ 1
  }
  fill(0);  // กำหนดสีตัวอักษร เป็นสีดำ
  textFont(createFont("Cordia New",26));  // กำหนดฟร้อนต์ตัวอักษรเป็น Cordia New มีขนาด 26
  text("Minus =" +" "+ minus[0] + minus[1] + minus[2] + minus[3],45,70);  // แสดงค่าของ minus[0] ,minus[1],minus[2] และ minus[3]
}

Some UFO

int x = 50;  //  กำหนดค่าตัวแปรชนิด int ชื่อ x มีค่า 50
int v = 2;  //  กำหนดค่าตัวแปรชนิด int ชื่อ v มีค่า 2 (หากปรับค่ามากขึ้น UFO จะบินเร็วขึ้น)

void setup(){
  size(400,450);  // กำหนดค่าของ screen
}

void draw(){
  background(255);  // กำหนดสีพื้นหลัง เป็นสีขาว
  int y = 80;  //  กำหนดค่าตัวแปรชนิด int ชื่อ y มีค่า 80 
  int s = 1;  //  กำหนดค่าตัวแปรชนิด int ชื่อ s มีค่า 1
  while(s < 5){  // กำหนดเงื่อนไขเพื่อวนลูป 
    drawUFO(x,y); // เรียกใช้ฟังก์ชั่นชื่อ drawUFO
    y = y + 100;  // เพิ่มค่าของ y ขึ้นเรื่อยๆทีละ 100
    s = s + 1;  // เพิ่มค่าของ s ขึ้นเรื่อยๆทีละ 1
  }
  x = x + v;  // เพิ่มค่าของ x ขึ้นเรื่อยๆทีละ v
  if(x > width){  // สร้างเงื่อนไข ถ้า ค่า x มากกว่าค่า width
    v = v*(-1);  // ให้ค่าของ v มีค่าลดลงเรื่อยๆ
  }
  if(x < 0){  // สร้างเงื่อนไข ถ้า ค่าของ x น้อยกว่า 0
    v = v*(-1);  // ให้ค่าของ v มีค่าลดลงเรื่อยๆ
  }
}
void drawUFO(int x,int y)  // สร้างฟังก์ชั่นชื่อว่า drawUFO
{
  fill(255,255,0);  // กำหนดสีให้กับห้องเครื่องของ UFO เป็นสีเหลือง 
  ellipse(x, y, 33, 31);  // วาดวงกลมโดยใช้ตัวแปร x,y กำหนดตำแหน่ง
  fill(128);  // กำหนดสีให้กับตัวถัง UFO เป็นสีเทา
  ellipse(x, y + 4, 80, 20);  // วาดวงกลมโดยใช้ตัวแปร x,y กำหนดตำแหน่ง
}

Barchart (Array)

float bangkok = 84;  // กำหนดตัวแปรชนิด float ชื่อ bangkok มีค่า 84
float central = 75.1;  // กำหนดตัวแปรชนิด float ชื่อ central มีค่า 75.1
float north = 68.9;  // กำหนดตัวแปรชนิด float ชื่อ north มีค่า 68.9
float northeast = 64.1;  // กำหนดตัวแปรชนิด float ชื่อ northeast มีค่า 64.1
float south = 67.8;  // กำหนดค่าตัวแปรชนิด float ชื่อ south มีค่า 67.8
float[] data = {bangkok,central,north,northeast,south}; // กำหนดค่าตัวแปรชนิด float ประเภท array ชื่อ data โดยนำค่าของ bangkok, central, north, northeast และ south มาใส่ไว้
String[] region = {"Bangkok","Central","North","Northeast","South"}; // กำหนดค่าตัวแปรชนิด string(ชนิดตัวอักษรมากกว่า 1 ตัว) ประเภท array ชื่อ region

void setup()
{
   background(255);  // กำหนดสีของ screen เป็นสีขาว
   size(300,250);  // กำหนดขนาดของ screen
   calculator();  // เรียกใช้ฟังก์ชั่น calculator 
   drawbarchart(); //เรียกใช้ฟังก์ชั่น drawbarchart
}
int n = 0; // กำหนดตัวแปรชนิด int ชื่อ n มีค่าเป็น 0

void drawbarchart() // สร้างฟังก์ชั่นชื่อ drawbarchart
{
   int x = 40;  // ประกาศตัวแปร x มีค่า 40
   int y = 70;  // ประกาศตัวแปร x มีค่า 70 
   n = 0; // กำหนดค่าตัวแปร n มี่ค่า 0
   while(n < data.length)  // กำหนดเงื่อนไขเพื่อวนลูป ข้อมูลใน array ชื่อ data
   {
    fill(26, 236, 168);  // กำหนดสีให้กับแผ่นภูมิ เป็นสีเขียวอ่อน
    rect(x,y,data[n],20);  // วาดรูปสี่เหลี่ยมโดยให้รับค่าจากตัวแปร x,y กำหนดตำแหน่ง และให้ความยาวตามแนวแกน x มีค่าเท่ากับค่าใน array นั้นๆ
    fill(0,128,128);  // กำหนดสีให้กับตัวอักษร เป็นสีเขียวเข้ม
    text(region[n],x + 15 + data[n],y + 15);  // แสดงค่าของ region นั้นๆเป็นตัวอักษรที่ตำแหน่ง (x +15 + data[n],y + 15)
    text(data[n],x + 5,y + 15);  // แสดงค่าของ data นั้นๆเป็นตัวอักษรที่ตำแหน่ง(x + 5,y + 15)
    text("population aged 6 years over used mobilephone",15,40); // แสดงข้อความ "population aged 6 years over used mobilephone" ที่ตำแหน่ง(15,40)
    n = n + 1;  // เพิ่มค่าของ n ขึ้นเรื่อยๆที่ละ 1
    y = y + 30;  // เพิ่มค่าของ y ขึ้นเรื่อยๆที่ละ 30  
  }
}
void calculator(){
 float sum = 0;  // กำหนดตัวแปรชนิด float ชื่อ sum
 float max = data[0];  // กำหนดตัวแปรชนิด float ชื่อ max
 float min = data[0];  // กำหนดตัวแปรชนิด float ชื่อ min
 while(n < data.length){  // กำหนดเงื่อนไขเพื่อวนลูป ข้อมูลใน array ที่ชื่อ data
   if(data[n] >= max){  // กำหนดเงื่อนไข ถ้าข้อมูลในช่อง array นั้นๆ มีค่ามากกว่า max
     max = data[n];  // ให้ค่า max มีค่าเท่ากับข้อมูลในช่อง array นั้นๆ
   }
   if(data[n] <= min){  // กำหนดเงื่อนไข ถ้าข้อมูลในช่อง array นั้นๆมีค่าน้อยกว่า min
     min = data[n];  // ให้ค่า min มีค่าเท่ากับข้อมูลในช่อง array นั้นๆ
   }
   sum = sum + data[n];  // ให้ค่าของ sum เป็นการรวมค่าทุกตัวใน array ชื่อ data
   n = n + 1;  // เพิ่มค่าของ n ขึ้นเรื่อยๆที่ละ 1
}
 println("maximum is " + max);  // แสดงค่าของ max ทางหน้าจอ
 println("minimum is " + min);  // แสดงค่าของ min ทางหน้าจอ
 println("average is " + sum/data.length);  // แสดงค่า average ทางหน้าจอ
}

ที่มา: http://web.nso.go.th/en/survey/ict/ict_house12.htm

Max-Min (Array)

float[ ] data = {84,75.1,68.9,64.1,67.8}; // กำหนดตัวแปรชนิด float แบบ array ชื่อ data
void setup(){
  background (0); // กำหนดสี screen เป็นสีดำ
  size(150,150);  // กำหนดขนาด
  float sum = 0;  // กำหนดตัวแปรชนิด float ชื่อ sum
  float max = data[0];  // กำหนดตัวแปรชนิด float ชื่อ max
  float min = data[0];  // กำหนดตัวแปรชนิด float ชื่อ min
  int n = 0;  // กำหนดตัวแปรชนิด int ชื่อ n
  while(n < data.length){  // กำหนดเงื่อนไขเพื่อวนลูป ข้อมูลใน array ที่ชื่อ data
    if(data[n] >= max){  // กำหนดเงื่อนไข ถ้าข้อมูลในช่อง array นั้นๆ มีค่ามากกว่า max
      max = data[n];  // ให้ค่า max มีค่าเท่ากับข้อมูลในช่อง array นั้นๆ
    }
    if(data[n] <= min){  // กำหนดเงื่อนไข ถ้าข้อมูลในช่อง array นั้นๆมีค่าน้อยกว่า min
      min = data[n];  // ให้ค่า min มีค่าเท่ากับข้อมูลในช่อง array นั้นๆ
    }
    sum = sum + data[n];  // ให้ค่าของ sum เป็นการรวมค่าทุกตัวใน array ชื่อ data
    n = n + 1;  // เพิ่มค่าของ n ขึ้นเรื่้อยๆ
  }
  fill(255);  // กำหนดสีให้ตัวอักษร เป็นสีขาว
  text("maximum is " + max,30,40);  // แสดงค่าของ max  
  text("minimum is " + min,30,70);  // แสดงค่าของ min
  text("average is " + sum/data.length,30,100);  // แสดงค่าของ average
}
ที่มา: http://web.nso.go.th/en/survey/ict/ict_house12.htm

Bridge

void setup(){
 size(400,400);  // กำหนดขนาดของ screen
 background(210,255,255);  // กำหนดสีพื้นหลัง เป็นสีฟ้าอ่อน
}
int count = 0;  // ประกาศตัวแปร count กำหนดค่าเป็น 0
int a = 0;  // ประกาศตัวแปร a กำหนดค่าเป็น 0
int b = 0;  // ประกาศตัวแปร b กำหนดค่าเป็น 0
void draw(){
  drawbridge(7,0,230);  // เรียกใช้ฟังก์ชั่น drawbridge

  fill(0);  // กำหนดสีให้กับเสาสะพาน เป็นสีดำ
  rect(95,30,10,200);  // วาดสี่เหลี่ยม เป็นเสาสะพาน
  rect(295,30,10,200);  // วาดสี่เหลี่ยม เป็นเสาสะพาน

  fill(0,128,192);  // กำหนดสีให้กับพื้นน้ำ เป็นสีน้ำเงิน
  rect(0,240,400,160);  // วาดสี่เหลี่ยม เป็นตัวสะพาน

  fill(192);  // กำหนดสีให้กับตัวสะพาน เป็นสีเทา
  rect(0,230,400,20);  // วาดสีเหลี่ยม เป็นพื้นน้ำ
}

void drawbridge(int n,int x,int y){  // สร้าวฟังก์ชั่นชื่อ drawbridge ประกาศตัวแปร n , x และ y
   while(count < n){  // กำหนดเงื่อนไข while โดยถ้า count น้อยกว่า n
     line(x + b,y,x + 100,y - 200 + a);  // วาดเส้นโดยกำหนดตัวแปร x , y และเพิ่มค่าด้วย a , b
     line(x + 200 - b,y,x + 100,y - 200 + a);  // วาดเส้นโดยกำหนดตัวแปร x , y และเพิ่มค่าด้วย a , b
     line(x + 200 + b,y,x + 300,y - 200 + a);  // วาดเส้นโดยกำหนดตัวแปร x , y และเพิ่มค่าด้วย a , b
     line(x + 400 - b,y,x + 300,y - 200 + a);  // วาดเส้นโดยกำหนดตัวแปร x , y และเพิ่มค่าด้วย a , b
     a = a + 10;  // ให้เพิ่มค่า a ขึ้นเรื่อยๆ
     b = b + 10;  // ให้เพิ่มค่า b ขึ้นเรื่อยๆ
     count = count + 1;  // ให้เพิ่มค่า count ขึ้นเรื่อยๆ
   }
}

Expressway

void setup(){
size(300,300);  // กำหนดขนาดของ screen
background(215,255,255);  // กำหนดสีให้พื้นหลัง สีฟ้าอ่อน
}
int count = 0;  // ประกาศตัวแปร count เพื่อกำหนดจำนวนครั้งที่จะวนคำสั่งเงื่อนไข

void draw(){
  fill(192,192,192);  // กำหนดสีให้กับตัวทางด่วน เป็นสีเทาอ่อน
  rect(0,180,300,30);  // วาดสี่เหลี่ยม เป็นตัวทางด่วน
  drawexpress(8,5,180); // เรียกใช้ฟังก์ชั่น drawexpress
}

void drawexpress(int n,int x, int y){  // สร้างฟังก์ชั่นชื่อ drawexpress ประกาศตัวแปร n , x และ y
   while(count < n){  // กำหนดเงื่อนไข while โดยถ้า count น้อยกว่า n
   fill(127,127,127);  // กำหนดสีให้กับเสาทางด่วน เป็นสีเทาเข้ม
   rect(x,y,20,120);  // วาดสี่เหลี่ยมโดยรับค่าจากตัวแปร x และ y เพื่อกำหนดตำแหน่งการวาด
   x = x + 40;  // ให้ค่าของ x เพิ่มขึ้นเรื่อยๆ
   count = count + 1;  // ให้ค่าของ count เพิ่มขึ้นเรื่อยๆ
   }
}

Mobile

void setup(){
size(300,300); // กำหนดขนาดของ screen
background(255); //กำหนดสีให้พื้นหลัง เป็นสีขาว
}
int count = 0; // ประกาศตัวแปร count เพื่อกำหนดจำนวนครั้งที่จะวนคำสั่งเงื่อนไข

void draw(){
  line(100,0,100,50); // วาดเส้น ทำเป็นเชือกมัดโมบาย
  line(200,0,200,50); // วาดเส้น ทำเป็นเชือกมัดโมบาย
  fill(128,0,0); // กำหนดสีให้กับไม้ผูกโมบาย เป็นสีน้ำตาล
  rect(50,50,220,30);  // วาดสี่เหลี่ยม ทำเป็นไม้ผูกโมบาย
  drawmobile(5,70,60,60); // เรียกให้ฟังก์ชั่น drawmobile
}

void drawmobile(int n,int x, int y,int h){ // สร้างฟังก์ชั่นชื่อ drawmobile ปรกาศตัวแปร n , x , y และ h
   while(count < n){ // กำหนดเงื่อนไข while โดยถ้า count น้อยกว่า n
   line(x + 10,50,x + 10,y);  // วาดเส้น โดยรับค่าจากตัวแปร x และ y
   fill(168,255,255);  // กำหนดสีให้กับตัวโมบาย เป็นสีฟ้าอ่อน
   rect(x,50,20,h);  // วาดสี่เหลี่ยม โดยรับค่าจากตัวแปร x และ h
   fill(255,0,0);  // กำหนดสีวห้กับตัวลูกปัด เป็นสีแดง
   ellipse(x + 10,h + 60,30,30);  // วาดวงกลม โดยรับค่าจากตัวแปร x และ h
   x = x + 40;  // กำหนดให้ค่า x เพิ่มขึ้นเรื่อยๆ
   h = h + 40;  // กำหนดให้ค่า h เพิ่มขึ้นเรื่อยๆ
   count = count + 1;  // กำหนดให้ค่า count เพิ่มขึ้นเรื่อยๆ
   }
}

Railway

void setup() {
  size(300,300);  // กำหนดค่าของ screen
  background(140,255,198); // กำหนดสีของพื้นหลัง เป็นสีเขียวอ่อน
}

void draw(){
  int x = 10; // ประกาศตัวแปร x ให้มีค่าเป็น 10 (ตัวแปรชนิด local)
  int y = 50; // ประกาศตัวแปร y ให้มีค่าเป็น 50 (ตัวแปรชนิด local)
  rail(x,y);  // เรียกใช้ฟังก์ชั่น rail
  way(65); // เรียกใช้ฟังก์ชั่น way
  rail(x,y + 130);  // เรียกใช้ฟังก์ชั่น rail
  way(195);  // เรียกใช้ฟังก์ชั่น way
}

void rail(int x,int y){  // สร้างฟังก์ชั่น rail ประกาศตัวแปร x และ y
  fill(160 ,82 ,45);  // กำหนดสีให้กับตัวหมอนรถไฟ เป็นสีน้ำตาล
  while(x >= 10 && x <= width){  // กำหนดเงื่อนไข while โดยถ้า x มากกว่าหรือเท่ากับ 10 และ x น้อยกว่าหรือเท่ากับ width
     rect(x,y,15,80);  // วาดสี่เหลี่ยม โดยให้มีการรับค่าจากตัวแปร x และ y
     x = x + 30;  // ให้เพิ่มค่า x ขึ้นเรื่อยๆ
   }
}
void way(int z){ //สร้างฟังก์ชั่น way ประกาศตัวแปร z
  fill(0);  // กำหนดสีให้กับรางรถไฟ เป็นสีดำ
  rect(0,z,width,10);  // วาดสีเหลี่ยม โดยให้มีการรับค่าจากตัวแปร z
  rect(0,z + 40,width,10);   // วาดสีเหลี่ยม โดยให้มีการรับค่าจากตัวแปร z
}

Curve

void setup(){
size(300,300);  // กำหนดค่าของ screen
}
int count = 0;  // ประกาศตัวแปร count เพื่อกำหนดจำนวนครั้งที่จะวนคำสั่งเงื่อนไข

void draw(){
drawcurve(30,1,1,10);  //เรียกใช้ฟังก์ชั่น drawcurve
}
void drawcurve(int n,int x,int y,int a){  // สร้างฟังก์ชั่น drawcurve โดยประกาศตัวแปร n , x , y และ a
   while(count < n){  // กำหนดเงื่อนไข while โดยถ้า count มีค่าน้อยกว่า n
        line(x,y + a,x + a,y + 300); //ให้วาดเส้น โดยกำหนดเป็นตัวแปร x และ y โดยตัวแปร a จะเป็นระยะห่างระหว่างเส้น
        a = a + 10;  // ให้เพิ่มค่า a ขึ้นเรื่อยๆ
        count = count + 1; // ให้เพิ่มค่าของ count ขึ้นเรื่อยๆ
    }
}

The book 2

จิตนาการสำคัญกว่าความรู้

void setup(){
size(200,200); // กำหนดขนาด screen
background(255);  // กำหนดสีพื้นหลัง เป็นสีขาว

}
int a = 55; // กำหนดค่าตัวแปร a เป็นตัวแปร global
int b = 85; // กำหนดค่าตัวแปร b เป็นตัวแปร global
int c = 115; // กำหนดค่าตัวแปร c เป็นตัวแปร global
int d = 145; // กำหนดค่าตัวแปร d เป็นตัวแปร global
int r  = 0; // กำหนดค่าตัวแปร r เป็นตัวแปร global

void draw(){

fill(255,128,192); // กำหนดสีให้วงกลมวงใหญ่สุด เป็นสีชมพู

ellipse(100,100,r,r); // สั่งวาดวงกลมวงแรก โดยแทนรัศมีเป็นตัวแปร r

fill(128,255,128);  // กำหนดสีให้วงกลมวงกลาง เป็นสีเขียว

ellipse(100,100,r - 50, r - 50);  // สั่งวาดวงกลมวงที่ 2 โดยแทนรัศมีเป็นตัวแปร r

fill(128,255,255);  // กำหนดสีให้วงกลมวงเล็กสุด เป็นสีฟ้า

ellipse(100,100,r - 100, r - 100); // สั่งวาดวงกลมวงที่ 3 โดยแทนรัศมีเป็นตัวแปร r

r = r + 1;   // เพิ่มค่า r ขึ้นเรื่อยๆ

if (r > 400){ // ถ้าค่าของตัวแปร r มีค่ามากกว่า 400

     r = 50;   // ให้ตัวแปร r มีค่า 50

   }

fill(0,64,128); //กำหนดสีให้กับปกหนังสือ เป็นสีน้ำเงินเข้ม
rect(40,55,120,90); // วาดสี่เหลี่ยมเป็นปกหนังสือ
fill(255); //กำหนดสีให้กับหน้าหนังสือ เป็นสีขาว
rect(45,60,110,80); // วาดสี่เหลี่ยมเป็นหน้าหนังสือ
fill(100,177,255); // กำหนดสีให้กับสันหนังสือ เป็นสีฟ้า
rect(95,55,10,90); // วาดสี่เหลี่ยมเป็นสันหนังสือ

line(a,75,b,75); // 1
line(a,85,b,85); // 2
line(a,95,b,95); // 3
line(a,105,b,105); // 4
line(a,115,b,115); // 5
line(a,125,b,125); // 6
// บรรทัดที่ 1-6 สั่งให้วาดเส้นตรงทางหน้าหนังสือฝั่งซ้าย โดยกำหนดค่า x เป็นตัวแปร a และ b เพื่อไม่ให้สับสนค่าของ x
line(c,75,d,75); // 7
line(c,85,d,85); // 8
line(c,95,d,95); // 9
line(c,105,d,105); // 10
line(c,115,d,115); // 11
line(c,125,d,125); // 12
// บรรทัดที่ 7-12 สั่งให้วากเส้นตรงทางหน้าหนังสือฝั่งซ้าย โดยกำหนดค่า x เป็นตัวแปร c และ d เพื่อไม่ให้สับสนค่าของ x
}

table tennis 2

int xPos; // ประกาศตัวแปร xPos เป็นตัวแปรแบบ global
int tbl;   // ประกาศตัวแปร tbl เป็นตัวแปรแบบ global
void setup()
{
  size(200,200); //กำหนดขนาดของ screen
  xPos = 0; // กำหนดค่าของตัวแปร xPos เป็น 0
  tbl = xPos; // กำหนดค่าของตัวแปร tbl เป็นค่า xPos
}

void draw(){
  background(255); // กำหนดสีให้กับพื้นหลัง เป็นสีขาว
  fill(237,28,36); // กำหนดสีให้กับหน้าไม้ปิงปอง เป็นสีแดง
  ellipse(5,70,40,60);  // วาดวงรี  เป็นหน้าไม้ปิงปอง
  fill(0);  // กำหนดสีให้กับหน้าไม้ปิงปอง เป็นสีดำ
  ellipse(195,70,40,60);  // วาดวงรี  เป็นหน้าไม้ปิงปอง
  fill(128,64,64); //กำหนดสีให้กับด้ามจับไม้ปิงปอง เป็นสีน้ำตาล
  rect(190,100,10,40); // วาดสี่เหลี่ยม เป็นด้ามจับไม้ปิงปอง
  rect(0,100,10,40); // วาดสี่เหลี่ยม เป็นด้ามจับไม้ปิงปอง

  drawpin(xPos);  // เรียกใช้ฟังก์ชั่น drawpin ซึ่งเป็นฟังก์ชั่นประเภท User Function มีการส่งค่า xPos ไปในชุดฟังก์ชั่น

  if(tbl <= width) //กำหนดเงื่อนไข ถ้าค่าของตัวแปร tbl มีค่าน้อยกว่าหรือเท่ากับค่าความกว้าง
  {
    tbl = tbl + 1; // ให้ค่า tbl เพิ่มขึ้นเรื่อยๆ
    xPos = xPos + 1; // ให้ค่า xPos เพิ่มขึ้นเรื่อยๆ
  }
  if(tbl > width || xPos == width) //กำหนดเงื่อนไข ถ้าค่าตัวแปร tbl มีค่ามากกว่าค่าความกว้าง(200) และค่า xPos มีค่าเท่ากับค่าความกว้าง
    {
      tbl = tbl + 1;  //ให้ค่า tbl เพิ่มขึ้นเรื่อยๆ
      xPos = xPos - 1; //ให้ค่า xPos ลดลงเรื่อยๆ
    }
  if(tbl == width*2) // กำหนดเงื่อนไข ถ้าตัวแปร tbl มีค่าเท่ากับค่าความกว้าง * 2 (400) หรือก็คือไปกลับครบ 1 รอบ
    {
       tbl = 0;  //ให้ค่าของตัวแปร tbl กลับมาเป็น 0
    }
 }

void drawpin(int xPos) //คำสั่งสร้างฟังก์ชั่นแบบ User Function ในที่นี้มีชื่อว่า drawpin
{
  fill(255,255,0); // กำหนดสีให้กับลูกปิงปอง เป็นสีเหลือง
  ellipse(xPos, 70, 30, 30);  //วาดวงกลม โดยตำแหน่งค่า x กำหนดเป็นตัวแปร xPos
}

rhythm 2

คลื่น เสียงเพลง ทำให้เรามีชีวิตชีวา

void setup(){
size(200,200);  // กำหนดขนาด screen
background(255);  // กำหนดสีพื้นหลัง เป็นสีขาว
}
int r = 0;  // ประกาศตัวแปร r มีค่าเป็น 0
void draw(){
   fill(0,53,106);  // ใส่สีให้กับวงกลมวงแรกสุด เป็นสีน้ำเงินเข้ม
   ellipse(100,100,r + 60, r + 60); // สั่งให้วาดวงกลม โดยขนาดของวงกลมเป็นตัวแปร r แล้วบวกกับ 60 
   fill(0,112,223);  // ใส่สีให้วงกลมวงถัดมา เป็นสีน้ำเงิน
   ellipse(100,100,r + 40, r + 40); // สั่งให้วาดวงกลม โดยขนาดของวงกลมเป็นตัวแปร r แล้วบวกกับ 40 
   fill(40,148,255); // ใส่สีให้วงกลมวงถัดมา เป็นสีฟ้าเข้ม
   ellipse(100,100,r + 20, r + 20); // สั่งให้วาดวงกลม โดยขนาดของวงกลมเป็นตัวแปร r แล้วบวกกับ 20 
   fill(174,215,255); // ใส่สีให้วงกลมวงถัดมา เป็นฟ้า
   ellipse(100,100,r,r);  // สั่งให้วาดวงกลม โดยขนาดของวงกลมเป็นตัวแปร r 
   fill(232,243,255); // ใส่สีให้วงกลมวงถัดมา เป็นสีฟ้าอ่อน
   ellipse(100,100,r - 20,r - 20); // สั่งให้วาดวงกลม โดยขนาดของวงกลมเป็นตัวแปร r แล้วลบกับ 20 
   r = r + 1;  // เพิ่มค่า r ทำให้ขนาดของวงกลมแต่ละวงเพิ่มขึ้นเรื่อยๆ
   if (r > 300){ // ถ้าตัวแปร r มีค่ามากกว่า 300
     r = 10  // ให้ตัวแปร r มีค่าเท่ากับ 10
     }
}

art 3

สีสัน ศิลปะ จิตนาการสำคัญกว่าความรู้





void setup(){
size(200,200); // กำหนดขนาดของ screen
background(255); //กำหนดสีของพื้นหลัง เป็นสีขาว
}
int r = 0; // ประกาศตัวแปร r กำหนดค่าเป็น 0
void draw(){
fill(random(255),random(255),random(255),255); // ใส่สีให้กับวงกลม โดยให้ random สีไปเรื่อยๆ
ellipse(mouseX,mouseY,r,r); // สั่งให้วาดวงกลม โดยจุดศูนย์กลางวงกลม รับค่าแกน x แกน y จากเมาส์ และรัศมี กำหนดเป็นตัวแปร r 
if (r <= 20){  // ถ้าตัวแปร r มีค่าน้อยกว่าหรือเท่ากับ 20
   r = r + 1;  // ให้เพิ่มค่า r ขึ้นเรื่อยๆ
   }
if (r > 20){ // ถ้าตัวแปร r มีค่ามากกว่า 20
   r = 0;  // ให้ค่าของตัวแปร r กลับมาเป็น 0 
   }
}

Unidentified Flying Object

int xPos;  // ประกาศตัวแปร xPos เป็นตัวแปรแบบ global
int ufo;    // ประกาศตัวแปร ufo เป็นตัวแปรแบบ global
void setup()
{
  size(200,200);  //กำหนดขนาดของ screen
  xPos = 0;  // กำหนดค่าของตัวแปร xPos เป็น 0
  ufo = xPos;  // กำหนดค่าของตัวแปร ufo เป็นค่า xPos
}

void draw()
{
  background(255);  // กำหนดสีให้กับพื้นหลัง เป็นสีขาว
  drawUFO(xPos);  // เรียกใช้ฟังก์ชั่น drawUFO ซึ่งเป็นฟังก์ชั่นประเภท User Function มีการส่งค่า xPos ไปในชุดฟังก์ชั่น

  if(ufo <= width)  //กำหนดเงื่อนไข ถ้าค่าของตัวแปร ufo มีค่าน้อยกว่าหรือเท่ากับค่าความกว้าง(ในที่นี้คือ 200)
  {
    ufo = ufo + 1;  // ให้ค่า ufo เพิ่มขึ้นเรื่อยๆ
    xPos = xPos + 1; //ให้ค่า xPos เพิ่มขึ้นเรื่อยๆ
  }
  if(ufo > width || xPos == width)  //กำหนดเงื่อนไข ถ้าค่าตัวแปร ufo มีค่ามากกว่าค่าความกว้าง(200) และค่า xPos มีค่าเท่ากับค่าความกว้าง 
    {
      ufo = ufo + 1;  //ให้ค่า ufo เพิ่มขึ้นเรื่อยๆ
      xPos = xPos - 1; // ให้ค่า xPos ลดลงเรื่อยๆ
    }
  if(ufo == width*2) // กำหนดเงื่อนไข ถ้าตัวแปร ufo มีค่าเท่ากับค่าความกว้าง * 2 (400) หรือก็คือไปกลับครบ 1 รอบ
    {
       ufo = 0; //ให้ค่าของตัวแปร ufo กลับมาเป็น 0
    }
 }

void drawUFO(int xPos) // คำสั่งสร้างฟังก์ชั่นแบบ User Function ในที่นี้มีชื่อว่า drawUFO
{
  fill(255,255,0);  // กำหนดสีให้กับห้องเครื่องของ UFO เป็นสีเหลือง
  ellipse(xPos, 70, 33, 31); //วาดวงกลม โดยตำแหน่งค่า x กำหนดเป็นตัวแปร xPos 
  fill(128);  //กำหนดสีให้กับตัวถัง UFO เป็นสีเทา
  ellipse(xPos, 74, 80, 20); //วาดวงกลม โดยตำแหน่งค่า x กำหนดเป็นตัวแปร xPos
}

The book

หนังสือคือสิ่งที่ให้ความรู้  และทำให้เราเข้าใกล้ความฝันของเราได้มากยิ่งขึ้น

เราจึงควรอ่านหนังสือกันให้มากๆ จะได้ไม่ลำบากเวลาเดินตามฝัน






void setup(){
size(200,200);  // กำหนดขนาด screen
}
int a = 55;  // กำหนดค่าตัวแปร a เป็นตัวแปร global
int b = 85;  // กำหนดค่าตัวแปร b เป็นตัวแปร global
int c = 115;  // กำหนดค่าตัวแปร c เป็นตัวแปร global
int d = 145;  // กำหนดค่าตัวแปร d เป็นตัวแปร global
void draw(){
background(200,mouseX,mouseY);  // กำหนดสีให้กับพื้นหลัง โดยให้รับค่า x และ y จากเมาส์มา ทำให้พื้นหลังเปลี่ยนสี เวลาที่ขยับเมาส์
fill(0,64,128);  //กำหนดสีให้กับปกหนังสือ เป็นสีน้ำเงินเข้ม
rect(40,55,120,90); // วาดสี่เหลี่ยมเป็นปกหนังสือ
fill(255);  //กำหนดสีให้กับหน้าหนังสือ เป็นสีขาว
rect(45,60,110,80); // วาดสี่เหลี่ยมเป็นหน้าหนังสือ
fill(100,177,255); // กำหนดสีให้กับสันหนังสือ เป็นสีฟ้า
rect(95,55,10,90); // วาดสี่เหลี่ยมเป็นสันหนังสือ

line(a,75,b,75);      // 1
line(a,85,b,85);      // 2
line(a,95,b,95);      // 3
line(a,105,b,105);  // 4
line(a,115,b,115);  // 5
line(a,125,b,125);  // 6
// บรรทัดที่ 1-6 สั่งให้วาดเส้นตรงทางหน้าหนังสือฝั่งซ้าย โดยกำหนดค่า x เป็นตัวแปร a และ b เพื่อไม่ให้สับสนค่าของ x 
line(c,75,d,75);     // 7
line(c,85,d,85);     // 8
line(c,95,d,95);     // 9
line(c,105,d,105); // 10
line(c,115,d,115); // 11
line(c,125,d,125); // 12
// บรรทัดที่ 7-12 สั่งให้วากเส้นตรงทางหน้าหนังสือฝั่งซ้าย โดยกำหนดค่า x เป็นตัวแปร c และ d เพื่อไม่ให้สับสนค่าของ x 
}

table tennis

กีฬา กีฬา เป็นยาวิเศษ

ครั้งนี้นำเสนอปิงปอง







void setup(){
size(200,200);  // กำหนดขนาด screen
}

float y = 0;  // ประกาศตัวแปร y โดยกำหนดให้เป็น float เพราะมีการใช้ค่าที่เป็นทศนิยม 
void draw(){
background(255);  // กำหนดสี background เป็นสีขาว
fill(185,122,87);   // ใส่สีที่จับไม้ปิงปอง เป็นสีน้ำตาล
rect(40,130,40,20);  // สั่งวาดสี่เหลี่ยม เป็นด้านจับ
fill(255,4,4);   // ใส่สีหน้าไม้ เป็นสีแดง
ellipse(110,140,70,50);  // สั่งวาดวงกลม เป็นหน้าไม้
fill(255,255,0);  // ใส่สีลูกปิงปอง เป็นสีเหลือง
ellipse(110,80 + 50*sin(y),20,20);  // วาดวงกลม โดยกำหนดค่าตำแหน่ง y เป็นตัวแปร y คูณกับค่าของ sin ส่วนขนาดของวงกลมไม่เปลี่ยนแปลง
y = y + 1/30; // เพิ่มค่าของ y ขึ้นเรื่อยๆ ทำให้ลุกปิงปองเลื่อนขึ้น-ลง
}

art 2

ศิลปะ นอกจากสีแล้ว รูปภาพต่างๆก็ประกอบด้วย เส้น

มีทั้งเส้นตรง เส้นโค้ง มาประกอบกันเป็นรูปภาพ

โดยใช้จิตนาการของคนเป็นตัวช่วย  ดังนั้นนอกจาก เส้น สี แล้ว จิตนาการก็เป็นสิ่งสำคัญเช่นกัน






void setup(){
size(200,200); // กำหนดขนาดของ screen
}

int x = 0;  // ประกาศตัวแปร x กำหนดค่าเริ่มต้นคือ 0
int y = 0;  // ประกาศตัวแปร y กำหนดค่าเริ่มต้นคือ 0

void draw(){
// x
line(0,20,x,20);     // 1
line(0,40,x,40);     // 2
line(0,60,x,60);     // 3
line(0,80,x,80);     // 4
line(0,100,x,100); // 5
line(0,120,x,120); // 6
line(0,140,x,140); // 7
line(0,160,x,160); // 8
line(0,180,x,180); // 9
//ตั้งแต่บรรทัดที่ 1 - 9 คือ คำสั่งให้วาดเส้นตรงในแนวนอน โดยค่าที่เปลี่ยนแปลงคือค่า x ที่จุดปลายจึงใส่ค่าเป็นตัวแปร x 
// y
line(20,0,20,y);     // 10
line(40,0,40,y);     // 11
line(60,0,60,y);     // 12
line(80,0,80,y);     // 13
line(100,0,100,y); // 14
line(120,0,120,y); // 15
line(140,0,140,y); // 16
line(160,0,160,y); // 17
line(180,0,180,y); // 18
//ตั้งแต่บรรทัดที่ 10 - 18 คือ คำสั่งให้วาดเส้นตรงในแนวตั้ง โดยค่าที่เปลี่ยนแปลงคือค่า y ที่จุดปลายจึงใส่ค่าเป็นตัวแปร y 
x = x + 1;  //เพิ่มค่าตัวแปร x ขึ้นเรื่อยๆ เส้นตรงในแนวนอนจึงขยับ
y = y + 1;  //เพิ่มค่าตัวแปร y ขึ้นเรื่อยๆ เส้นตรงในแนวตั้งจึงขยับ
}

rhythm

คลื่น มันทำให้เกิดเสียง

เมื่อเกิดเสียง ย่อมทำให้เกิดจังหวะ ทำนอง เสียงร้อง กลายมาเป็นดนตรีในที่สุด

หาไม่มีดนตรี ชีวิตเราก็คงไม่มีสีสัน เหมือนที่ว่า

             อันชนใดไม่มีดนตรีกาล                                  ในสันดานเป็นคนชอบกลนัก

      อีกใครฟังดนตรีไม่เห็นเพราะ                                  เขานั้นเหมาะคิดกบฎอัปลักษณ์

             ฤาอุบายเล่ห์ร้ายขมังนัก                                  มโนหนักมืดมั่วเหมือนราตรี

       อีกดวงใจย่อมดำสกปรก                                        ราวนรกเช่นกล่าวมานี้

             ไม่ควรใครไว้ใจในโลกนี้                                 เจ้าจงฟังดนตรีเถิดชื่นใจ

                                                                                         พระราชนิพนธ์แปล ในรัชกาลที่ ๖

                                                                                        (จากต้นฉบับของ วิลเลี่ยม เช็กเปียร์)

void setup(){
size(200,200);      // กำหนดขนาดของ screen
background(255);  // กำหนดสีของ background
}
int r = 0;    // กำหนดตัวแปร r มีค่า 0
void draw(){
   fill(0,53,106);     // ใส่สีให้วงกลมวงนอกสุด
   ellipse(100,100,r + 60, r + 60);  // สั่งให้วาดวงกลม โดยขนาดของวงกลมเป็นตัวแปร r แล้วบวกกับ 60 ทำให้ขนาดของวงกลมนี้ใหญ่สุดในวงกลมที่สั่งวาด
   fill(0,112,223);  // ใส่สีให้วงกลมวงถัดมา
   ellipse(100,100,r + 40, r + 40);  // สั่งให้วาดวงกลม โดยขนาดของวงกลมเป็นตัวแปร r แล้วบวกกับ 40 ทำให้ขนาดของวงกลมนี้เล็กลงมาจากวงกลมวงแรก
   fill(40,148,255); // ใส่สีให้วงกลมวงถัดมา
   ellipse(100,100,r + 20, r + 20); // สั่งให้วาดวงกลม โดยขนาดของวงกลมเป็นตัวแปร r แล้วบวกกับ 20 ทำให้ขนาดของวงกลมนี้เล็กลงมาจากวงกลมวงแรกและวงที่ 2
   fill(174,215,255); // ใส่สีให้วงกลมวงถัดมา
   ellipse(100,100,r,r);  // สั่งให้วาดวงกลม โดยขนาดของวงกลมเป็นตัวแปร r ทำให้ขนาดของวงกลมนี้เล็กเป็นอันดับ 2
   fill(232,243,255); // ใส่สีให้วงกลมวงถัดมา
   ellipse(100,100,r - 20,r - 20); // สั่งให้วาดวงกลม โดยขนาดของวงกลมเป็นตัวแปร r แล้วลบกับ 20 ทำให้ขนาดของวงกลมนี้เล็กที่สุด
   r = r + 5; // เพิ่มค่า r ทำให้ขนาดของวงกลมแต่ละวงเพิ่มขึ้นเรื่อยๆ

}

art

มาพูดถึงเรื่องการวาดรูปกัน

สำหรับเรารูปจะสวยได้ต้องมีสี

และเมื่อเราเรียนคอมพิวเตอร์กัน สีก็จะเกิดจากจุดจุดหนึ่ง

จึงได้ความคิดนี้มา ลองดูโค้ดกัน






void setup(){
size(200,200);
}
int a = 10;
int b = 20;
int c = 30;
int d = 50;
int e = 70;
int f = 90;
int g = 110;
int h = 130;
int i = 150;
int j = 170;
int k = 190;

void draw(){
fill(255,0,0);
ellipse(a,a,b,b);
ellipse(c,a,b,b);
ellipse(d,a,b,b);
ellipse(e,a,b,b);
ellipse(f,a,b,b);
ellipse(g,a,b,b);
ellipse(h,a,b,b);
ellipse(i,a,b,b);
ellipse(j,a,b,b);
ellipse(k,a,b,b);

fill(255,99,23);
ellipse(a,c,b,b);
ellipse(c,c,b,b);
ellipse(d,c,b,b);
ellipse(e,c,b,b);
ellipse(f,c,b,b);
ellipse(g,c,b,b);
ellipse(h,c,b,b);
ellipse(i,c,b,b);
ellipse(j,c,b,b);
ellipse(k,c,b,b);

fill(255,255,0);
ellipse(a,d,b,b);
ellipse(c,d,b,b);
ellipse(d,d,b,b);
ellipse(e,d,b,b);
ellipse(f,d,b,b);
ellipse(g,d,b,b);
ellipse(h,d,b,b);
ellipse(i,d,b,b);
ellipse(j,d,b,b);
ellipse(k,d,b,b);

fill(0,255,0);
ellipse(a,e,b,b);
ellipse(c,e,b,b);
ellipse(d,e,b,b);
ellipse(e,e,b,b);
ellipse(f,e,b,b);
ellipse(g,e,b,b);
ellipse(h,e,b,b);
ellipse(i,e,b,b);
ellipse(j,e,b,b);
ellipse(k,e,b,b);

fill(0,255,255);
ellipse(a,f,b,b);
ellipse(c,f,b,b);
ellipse(d,f,b,b);
ellipse(e,f,b,b);
ellipse(f,f,b,b);
ellipse(g,f,b,b);
ellipse(h,f,b,b);
ellipse(i,f,b,b);
ellipse(j,f,b,b);
ellipse(k,f,b,b);

fill(0,128,255);
ellipse(a,g,b,b);
ellipse(c,g,b,b);
ellipse(d,g,b,b);
ellipse(e,g,b,b);
ellipse(f,g,b,b);
ellipse(g,g,b,b);
ellipse(h,g,b,b);
ellipse(i,g,b,b);
ellipse(j,g,b,b);
ellipse(k,g,b,b);

fill(128,128,255);
ellipse(a,h,b,b);
ellipse(c,h,b,b);
ellipse(d,h,b,b);
ellipse(e,h,b,b);
ellipse(f,h,b,b);
ellipse(g,h,b,b);
ellipse(h,h,b,b);
ellipse(i,h,b,b);
ellipse(j,h,b,b);
ellipse(k,h,b,b);

fill(128,64,64);
ellipse(a,i,b,b);
ellipse(c,i,b,b);
ellipse(d,i,b,b);
ellipse(e,i,b,b);
ellipse(f,i,b,b);
ellipse(g,i,b,b);
ellipse(h,i,b,b);
ellipse(i,i,b,b);
ellipse(j,i,b,b);
ellipse(k,i,b,b);

fill(0);
ellipse(a,j,b,b);
ellipse(c,j,b,b);
ellipse(d,j,b,b);
ellipse(e,j,b,b);
ellipse(f,j,b,b);
ellipse(g,j,b,b);
ellipse(h,j,b,b);
ellipse(i,j,b,b);
ellipse(j,j,b,b);
ellipse(k,j,b,b);

fill(255);
ellipse(a,k,b,b);
ellipse(c,k,b,b);
ellipse(d,k,b,b);
ellipse(e,k,b,b);
ellipse(f,k,b,b);
ellipse(g,k,b,b);
ellipse(h,k,b,b);
ellipse(i,k,b,b);
ellipse(j,k,b,b);
ellipse(k,k,b,b);
}

ถ้าไม่ใช้ตัวแปรจะเกิดอาการสับสนกับโค้ดมากกว่านี้

guitar :D

วนกันมาถึงเรื่องของงง ดนตรี เย้ๆ

เราเป็นคนที่ชอบฟังเพลงมาก แล้วก็อยากเล่นเครื่องดนตรีเป็น

สิ่งที่อยากเล่นให้เป็นมากที่สุดเลยคือ กีตาร์

ตอนนี้ก็เราลองตามหาอ่านวิธีการเล่นในเน็ตอยู่เรื่อยๆ

มาดูรูปที่เราวาดกับโค้ดดีกว่า





void setup(){
size(200,200);
background(255);
}
int x = 10;

void draw(){
fill(185,103,64);
ellipse(100,130,70,95);

fill(192);
ellipse(90,30,x,x);
ellipse(110,30,x,x);
ellipse(90,45,x,x);
ellipse(110,45,x,x);
ellipse(90,60,x,x);
ellipse(110,60,x,x);

fill(0);
ellipse(101,135,30,30);

fill(255);
rect(90,15,20,120);
line(94,15,94,135);
line(98,15,98,135);
line(102,15,102,135);
line(106,15,106,135);
}

battle minton

คราวนี้เรามองลองดูด้านกีฬากันบ้างดีกว่า

กีฬาที่เราชอบก็คือ แบตมินตัน เป็นกีฬาตบลูกขนไก่ไปมา อิอิ

เราชอบเล่นกีฬาแบตมินตันมาก แต่ก็ไม่ได้เก่งอะไรมากมาย

ไปดูรูป กับโค้ดกันดีกว่า






void setup(){
size(200,200);
background(255);
}

int u = 100;

void draw(){

//Shuttlecock
line(48,u + 10,48,u + 35);
line(70,u + 10,70,u + 35);
line(60,u +15,60,u +30);
line(48,u + 10,60,u + 15);
line(70,u +10,60,u + 15);
fill(254,215,186);
ellipse(60,u +40,20,20);

//Battle Minton
fill(0);
rect(u +10,u + 5,20,60);
fill(0,64,128);
ellipse(u + 20,70,70,90);
fill(255);
ellipse(u + 20,70,60,80);

//vertical
line(u,40,u,u);
line(u + 20,30,u + 20,u + 10);
line(u +40,40,u + 40,u);

//horizontal
line(u,40,u + 40,40);
line(90,60,u + 50,60);
line(90,80,u + 50,80);
line(u,u,u + 40,u);
}

โค้ดที่ใช้ในวันนี้ไม่ได้มีความแตกต่างจากเดิมมากนัก แต่จะเน้นการเรียงลำดับ ก่อน - หลัง เมื่อวาดเป็น

รูปออกมา จะมีการซ้อนกันของรูปที่เราวาด โดยกำหนดจากลำดับโค้ดที่เราเขียน โดยโค้ดที่เขียนก่อน

จะโดนโค้ดตัวหลังทับนั้นเอง

eliipse anima

ที่นี้เรามาดูแบบที่ ขยับได้ทั้ง ขยายและยุบกันดีกว่า

void setup(){
size(200,200);
}

float r = 0;
 void draw(){
background (255);
   ellipse (100,100,100 + 50*sin(r),100 + 50*sin(r));
   r = r + 1/50;
 }


ครั้งนี้เราใส่ค่ารัศมีให้เป็นแบบค่า sin ที่จะมีค่าวนเป็นวงกลม

เราจึงได้รัศมีที่ขยายออกและยุบลง สลับกันไปเรื่อยๆ

ellipse minus

แล้วเราก็มาทำ วงกลมยุบบ้างดีกว่าาา





void setup(){
size(200,200);
}
r = 200;
void draw(){
    ellipse(100,100,r,r);
    r = r - 1;
  }

กำหนดตัวแปร ในที่นี่คือ r ให้มีค่า 100

สั่งให้วาดรูปวงกลมโดยกำหนดรัศมีเป็นตัวแปร r

แล้วก็สั่งลดค่าของ r ลงเรื่อยๆ

เราก็จะได้วงกลมอีกรูปแบบนึงแล้ว