SPORT:ยิงธนู

size ใช้ในการกำหนดขนาดของ Canvas (กว้างxยาว)หากไม่กำหนด Canvas จะมีขนาด100x100

int … เป็นการประกาศตัวแปร[x, y,หรือ r] เพื่อที่จะกำหนดและเรียกใช้ต่อไป

-การกำหนด = ค่าที่กำหนด เรียกว่า literal เป็นค่าที่ไม่ใช่ตัวแปร สามารถนำไปใช้ได้ในทันที Ex. 10,20, 20+30 โดยที่ค้าข้างขวาจะเป็นตัวกำหนดตัวแปรข้างซ้าย

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

rect เป็นการวาดรูปสี่เหลี่ยมมุมฉากที่กำหนด มุมเพียงจุดเดียว ความกว้างและความยาว

ellipse เป็นการวาดรูปวงกลมวงรีที่ต้องกำหนด(x,y,ความกว้างม,ความยาว)โดย x,y คือจุดศูนย์กลางของวงกลม

triangle เป็นการวาดรูปสามเหลี่ยมที่กำหนดจุดทั้งสามจุด(x1y1x2,y2,x3,y3)

void setup เป็นฟังก์ชันในการประกาศ กำหนดค่า และเป็นสำหรับพื้นฐาน animation มีการเรียกใช้โดยอัตโนมัติ เราไม่ต้องมีการเรียกใช้อีกและยังเป็นฟังก์ชั่นที่จะทำงานก่อนฟังก์ชั่นอื่นๆเสมอไม่ว่าจะวางไว้บนสุดหรือล่างสุดก็จะทำงานก่อนเป็นอันดับเเรก

void draw เป็นฟังก์ชั่นอัตโนมัติที่ไม่ต้องมีการเรียกใช้ จะทำงานซ้ำๆตามที่ได้ให้ค่าเอาไว้

void setup(){//ฟังก์ชันในการประกาศ กำหนดค่า และเป็นสำหรับพื้นฐาน animation มีการเรียกใช้โดยอัตโนมัติ เราไม่ต้องมีการเรียกใช้อีกและยังเป็นฟังก์ชั่นที่จะทำงานก่อนฟังก์ชั่นอื่นๆเสมอไม่ว่าจะวางไว้บนสุดหรือล่างสุดก็จะทำงานก่อนเป็นอันดับเเรก

size(300,300);

}

void drawTarget(){//เป็นฟังก์ชั่นที่เราสร้างขึ้นเอง (user defined function)

int r=20;

int R=25;

int x= 50;

int y=170;

//Target ด้านซ้าย

fill(255, 255, 32);

ellipse(x,y,r+100,R+100);

fill(0, 255, 255);

ellipse(x,y,r+70,R+70);

fill(127, 255, 0);

ellipse(x,y,r+45,R+45);

fill(254,21,14);

ellipse(x,y,r+25,R+25);

fill(0);

ellipse(x,y,r+10,R+10);

fill(245);

ellipse(x,y,r-5,R-5);

//Target ด้านขวา

fill(255, 255, 32);

ellipse(x+100,y-70,r+100,R+100);

fill(0, 255, 255);

ellipse(x+100,y-70,r+70,R+70);

fill(127, 255, 0);

ellipse(x+100,y-70,r+45,R+45);

fill(254,21,14);

ellipse(x+100,y-70,r+25,R+25);

fill(0);

ellipse(x+100,y-70,r+10,R+10);

fill(245);

ellipse(x+100,y-70,r-5,R-5);

}

int x=0;

void drawTanu(){//เป็นฟังก์ชั่นที่เราสร้างขึ้นเอง (user defined function)

triangle(260+x,180,350+x,175,350+x,185);

triangle(250+x,170,340+x,165,340+x,175);

triangle(230+x,150,320+x,145,320+x,155);

x=x-1;//ทำให้ภาพเคลื่อนที่ไปทางซ้ายโดยการลบออกไปทีละ 1

}

void draw(){

background(0);//เรียกใช้ฟังก์ชั่นที่เราสร้างขึ้นเอง (user defined function)

drawTarget();//เรียกใช้ฟังก์ชั่นที่เราสร้างขึ้นเอง (user defined function)

drawTanu();//เรียกใช้ฟังก์ชั่นที่เราสร้างขึ้นเอง (user defined function)

}

MUSIC:DRUMMER BY FUNCTION

คำอธิบาย

size ใช้ในการกำหนดขนาดของ Canvas (กว้างxยาว)หากไม่กำหนด Canvas จะมีขนาด100x100

background เป็นการกำหนดสีของพื้นหลัง

int … เป็นการประกาศตัวแปร[x, y,หรือ r] เพื่อที่จะกำหนดและเรียกใช้ต่อไป

-การกำหนด = ค่าที่กำหนด เรียกว่า literal เป็นค่าที่ไม่ใช่ตัวแปร สามารถนำไปใช้ได้ในทันที Ex. 10,20, 20+30 โดยที่ค้าข้างขวาจะเป็นตัวกำหนดตัวแปรข้างซ้าย

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

rect เป็นการวาดรูปสี่เหลี่ยมมุมฉากที่กำหนด มุมเพียงจุดเดียว ความกว้างและความยาวในทิศทางบวก

ellipse เป็นการวาดรูปวงกลมวงรีที่ต้องกำหนด(x,y,ความกว้างม,ความยาว)โดย x,y คือจุดศูนย์กลางของวงกลม

line เป็นการวาดเส้นตรงโดยการกำหนดจุดสองจุด

fill เป็นคำสั่งการใส่สีของรูป

triangle เป็นการวาดรูปสามเหลี่ยมที่กำหนดจุดทั้งสามจุด(x1y1x2,y2,x3,y3)

void setup เป็นฟังก์ชันในการประกาศ กำหนดค่า และเป็นสำหรับพื้นฐาน animation มีการเรียกใช้โดยอัตโนมัติ เราไม่ต้องมีการเรียกใช้อีกและยังเป็นฟังก์ชั่นที่จะทำงานก่อนฟังก์ชั่นอื่นๆเสมอไม่ว่าจะวางไว้บนสุดหรือล่างสุดก็จะทำงานก่อนเป็นอันดับเเรก

void draw เป็นฟังก์ชั่นอัตโนมัติที่ไม่ต้องมีการเรียกใช้ จะทำงานซ้ำๆตามที่ได้ให้ค่าเอาไว้

void setup(){//ฟังก์ชันในการประกาศ กำหนดค่า และเป็นสำหรับพื้นฐาน animation มีการเรียกใช้โดยอัตโนมัติ เราไม่ต้องมีการเรียกใช้อีกและยังเป็นฟังก์ชั่นที่จะทำงานก่อนฟังก์ชั่นอื่นๆเสมอไม่ว่าจะวางไว้บนสุดหรือล่างสุดก็จะทำงานก่อนเป็นอันดับเเรก

size(300,300);//กำหนดขนาดของ canvas

background(185);//พื้นหลังสีเทา

}

int r=90;

int w=60;

void drawDrum(){//เป็นฟังก์ชั่นที่เรากำหนดหรือสร้างขึ้นมาเอง(user defined function)

//กลองด้านหน้า

fill(#71AF15);//การใส่สีโดยการใช้โค้ดสี

ellipse(145, 195, r, r);//กลองด้านหน้า

fill(185);//สีเทา

ellipse(150, 210, r, r);//ขอบกลองด้านหน้าเป็นขอบสีเทา

fill(0);//สีดำ

ellipse(150, 210, r-5, r-5);//กลองด้านหน้าที่เป็นสีดำ

line(145, 135, 145, 156);//เส้นเชื่อมต่อระหว่างกลองตามแนวแกน y

line(141, 135, 141, 156);//เส้นเชื่อมต่อระหว่างกลองตามแนวแกน y

line(126, 135, 159, 135);//เส้นเชื่อมต่อระหว่างกลองตามแนวแกน x

line(126, 132, 159, 132);//เส้นเชื่อมต่อระหว่างกลองตามแนวแกน x

fill(#548919);//การใส่สีโดยการใช้โค้ดสี

rect(40, 125, w, 75);//กลองด้านหลังด้านซ้ายที่สูงๆ

rect(195,150, w, 30);//กลองด้านหลังด้านขวา

}

int x1= 10;

int x2= 62;

int x3= 110;

int y1= 250;

int y2= 220;

void drawLegDrum(){//เป็นฟังก์ชั่นที่เรากำหนดหรือสร้างขึ้นมาเอง(user defined function)

//ขาตั้งกลอง

fill(0);

triangle(x1, y1, x2, y2, x3, y1);//ขาตั้งกลองด้านซ้าย

triangle(x1+170, y1, x2+170, y2, x3+170, y1);//ขาตั้งกลองด้านขวา

fill(185);

triangle(18, y1, 62, y2, 102, y1);//ขาตั้งกลองด้านซ้าย

triangle(188, y1, 232, y2, 272, y1);//ขาตั้งกลองด้านขวา

int Y=250;

int W= 5;

int H= -170;

fill(0);

rect(230, Y, W, H);//ขาตั้งกลอง

rect(60, Y, W, H-20);//ขาตั้งกลอง

}

void drawChape(){//เป็นฟังก์ชั่นที่เรากำหนดหรือสร้างขึ้นมาเอง(user defined function)

//ฉาบ

fill(#A07534);//การใส่สีโดยการใช้โค้ดสี

int R1=80;//การประกาศและกำหนด

int R2=10;

ellipse(230, 100, R1, R2);//ฉาบ

ellipse(60, 80, R1, R2);//ฉาบ

}

void drawBackDrum(){//เป็นฟังก์ชั่นที่เรากำหนดหรือสร้างขึ้นมาเอง(user defined function)

fill(#94ED37);//การใส่สีโดยการใช้โค้ดสี

int y= 145;//การประกาศและกำหนด

int w1= 40;

int h= -45;

rect(126, y, -w1, h);//กลองด้านบนซ้าย

rect(159, y, w1, h);//กลองบนขวา

}

void draw(){//ฟังก์ชั่นอัตโนมัติที่ไม่ต้องมีการเรียกใช้ จะทำงานซ้ำๆตามที่ได้ให้ค่าเอาไว้

drawDrum();//เรียกใช้ฟังก์ชั่นชื่อ drawDrum

drawLegDrum();//เรียกใช้ฟังก์ชั่นชื่อ drawLegDrum

drawChape();//เรียกใช้ฟังก์ชั่นชื่อ drawChape ซึ่งเป็นฟังก์ชั่นที่เราได้สร้างขึ้นมาเอง(สามารถดูได้ที่ด้านบน)

drawBackDrum();//เรียกใช้ฟังก์ชั่นชื่อ drawBackDrum ซึ่งเป็นฟังก์ชั่นที่เราสร้างขึ้นมาเอง

}

คลื่นซ้อนทับ

void setup(){//ฟังก์ชันในการประกาศ กำหนดค่า และเป็นสำหรับพื้นฐาน animation มีการเรียกใช้โดยอัตโนมัติ เราไม่ต้องมีการเรียกใช้อีกและยังเป็นฟังก์ชั่นที่จะทำงานก่อนฟังก์ชั่นอื่นๆเสมอไม่ว่าจะวางไว้บนสุดหรือล่างสุดก็จะทำงานก่อนเป็นอันดับเเรก

  size(200,200);
 
  ellipse(0,0,0,0);
  ellipse(0,200,0,0);
  ellipse(200,0,0,0);
  ellipse(200,200,0,0);
 
  ellipse(100,100,0,0);
}
int r=0; // เป็นการประกาศตัวแปร แบบ Global
void draw(){//ฟังก์ชั่นอัตโนมัติที่ไม่ต้องมีการเรียกใช้ จะทำงานซ้ำๆตามที่ได้ให้ค่าเอาไว้
  fill(118,238,198);
  fill(0,238,238);
  ellipse(0,0,r,r);
  fill(0,206,209);
  ellipse(0,200,r,r);
  fill(0,178,238);
  ellipse(200,0,r,r);
  ellipse(200,200,r,r);
  fill(30,144,255);
  ellipse(100,100,r,r);
  fill(0,178,238);
  ellipse(100,100,r-50,r-50);
    r=r+5;
  if(r>190){
     r=0;
   }//เงื่อนไขที่เราใช้เพื่อกำหนดให้วงกลมขยับ  โดยเมื่อ r>190 จะทำให้
}  r เพิ่มขึ้นอีก 5 ในที่นี้ เรากำหนดไว้ที่ความกว้าง และ รัศมีของวงรี จึงทำให้ วงรีขยายใหญ่ขึ้น

ART:Smile Circle(function)

size(300,300);//ขนาดของ Canvas

background(79,0,0);//ใส่สีพื้นหลังเป็นสีแดงเข้มมากๆเกือบน้ำตาล

strokeWeight(5);//ขนาดของเส้นที่ใช้วาดรูป

fill(250,50,0);//สีของภาพที่วาด

int x=40;//การกำหนดและประกาศ

int x1=x+75;

int x2=x1+75;

int x3=x2+75;

int y=50;

int y1=60;

int y2=40;

int y3=y;

drawCircle(x,y);//เรียกใช้ฟังก์ชันที่เราสร้างเอง (user defined function)

drawCircle(x2,y2);

drawCircle(x,y+80);

drawCircle(x2,y2+80);

drawCircle(x1,y1);

drawCircle(x3,y3);

drawCircle(x,y+80+80);

drawCircle(x1,y1+80+80);

drawCircle(x2,y2+80+80);

drawCircle(x3,y3+80);

drawCircle(x3,y3+80+80);

drawCircle(x,y+80+80+80);

drawCircle(x1,y1+80+80+80);

drawCircle(x2,y2+80+80+80);

drawCircle(x3,y3+80+80+80);

fill(250,250,0);

drawCircle(x1,y1+80);

void drawCircle(int x, int y){//ประกาศกำหนดฟังก์ชันที่เราสร้างเอง (user defined function)

ellipse(x,y,80,80);

ellipse(x-13,y-10,20,20);

ellipse(x+13,y-10,20,20);

arc(x,y+10,50,30,0,PI);

}//

LOVE:Wave of water.

Wave of water.

size(300,300);//กำหนดขนาดของภาพ

background(12,112,145);//สีของพื้นหลังเป็นสีฟ้าน้ำเงินเข้ม

stroke(245);//เส้นที่ใช้ในการวาดรูปเป็นสีขาว

//คลื่นน้ำ(เริ่มจากวงใหญ่ที่สุดมาเล็กที่สุด) โดยใช้ฟังก์ชันในการช่วยวาด

fill(12,102,145);//สีของภาพที่วาดออกมา

drawCircle(810,290);

drawCircle(640,220);

drawCircle(520,180);

drawCircle(420,150);

strokeWeight(2);//ขนาดของเส้นที่วาด

drawCircle(310,110);

fill(25,123,234);//สีของภาพเป็นสีฟ้า

drawCircle(280,100);

fill(12,102,145);//สีของภาพเป็นสีฟ้าน้ำเงินเข้ม

drawCircle(260,90);

strokeWeight(1);//ขนาดของเส้นที่วาด

drawCircle(240,80);

strokeWeight(3);//ขนาดของเส้นที่วาด

drawCircle(220,70);

fill(25,123,234);//สีของภาพเป็นสีฟ้า

drawCircle(180,50);

fill(12,102,145);//สีของภาพเป็นสีฟ้าน้ำเงินเข้ม

drawCircle(160,40);

drawCircle(110,25);

fill(25,123,234);//สีของภาพเป็นสีฟ้า

drawCircle(60,15);

void drawCircle(int r,int R){

ellipse(150,150,r,R);

}//

//หยดน้ำ

fill(25,123,234);//สีของหยดน้ำมีสีเป็นสีฟ้าน้ำเงินอ่อนๆ

stroke(25,89,234);//สีของเส้นเป็นสีน้ำเงิน

int y =125;//การกำหนดและประกาศจุดบนแกน y

int rad =20;//การกำหนดและประกาศความกว้างความสูงของวงกลม

ellipse(150,y,rad,rad);//เรียกใช้ค่า y และ rad

ellipse(150,y-40,rad,rad);//y-40=85 โปรแกรมจะทำการคำนวณให้เลยเราไม่ต้องคำนวณเอง

ellipse(150,y-80,rad,rad);//y-80=45 โปรแกรมจะทำการคำนวณให้เลยเราไม่ต้องคำนวณเอง

animation "Tradition buffalo race"

int x= 0;//การประกาศและกำหนดภายนอกฟังก์ชั่น(ต้องมีการกำหนดภายนอกฟังก์ชั่นจึงจะเป็น Global หากกำหนดในฟังก์ชั่นจะเป็น Local ที่กำหนดค่าเพียงครั้งเดียว ซึ่งไม่ใช่หลักการสร้างภาพ animation ทำให้ภาพมีขนาดเท่าเดิมc]tไม่เกิดภาพ animation ได้

//ต่อไปเป็นการสร้างฟังก์ชั่นที่จะต้องใช้

void buf(int x){

fill(12);

triangle(180-x, 40, 186-x, 54, 200-x, 30);

triangle(160-x, 40, 154-x, 54, 140-x, 30);

//body

fill(123);

triangle(170-x, 60, 150-x, 98, 190-x, 98);

fill(235, 126, 12);

quad(150-x, 98, 190-x, 98, 184-x, 110, 156-x, 110);

line(170-x, 100, 170-x, 110);

//head

fill(123);

int r= 40;

int rd=15;

ellipse(170-x, 60, r, 44);

fill(56);

ellipse(170-x, 67, 10, 5);

fill(245);

ellipse(156-x, 58, rd, rd);

ellipse(182-x, 58, rd, rd);

triangle(166-x, 40, 174-x, 40, 170-x, 50);

line(150-x, 58, 160-x, 58);

line(175-x, 58, 185-x, 58);

line(165-x, 77, 174-x, 77);

}

void setup(){//มีการเรียกใช้ฟังก์ชั่นและคำสั่งภายในโดยอัตโนมัติ เราไม่ต้องเรียกใช้อีก

size(200, 200)//ขนาดของ Canvas;

}

void draw(){

background(0, 193, 195);

fill(234,159,87);

triangle(0, 100, 240, 95, 0, 240);

buf(x);//เรียกใช้ฟังก์ชั่น buf ที่สร้างไว้ด้านบน

x=x+1;//กำหนดเพื่อให้ buf สามารถขยับเลื่อนไปได้

}