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 สามารถขยับเลื่อนไปได้
}
size(200, 200);
background(12, 162, 245);
fill(112, 312, 142);
quad(0, 60, 200, 60, 200, 200, 0, 200);
//
fill(143, 243, 12);
triangle(0, 60, 90, 10, 150, 60);
fill(52, 383, 12);
triangle(80, 70, 175, 5, 230, 70);
//
line(10, 80, 20, 165);
fill(673, 72, 250);
ellipse(10, 80, 20, 30);
ellipse(10, 110, 20, 30);
ellipse(0, 95, 30, 20);
ellipse(25, 95, 30, 20);
ellipse(10, 95, 10, 10);
//
line(35,70, 35, 155);
ellipse(35, 70, 20, 30);
ellipse(35, 95, 20, 30);
ellipse(25, 80, 30, 20);
ellipse(50, 80, 30, 20);
ellipse(35, 80, 10, 10);
//
line(100, 80, 95, 185);
ellipse(100, 80, 25, 45);
ellipse(100, 120, 25, 45);
ellipse(80, 100, 45, 25);
ellipse(120, 100, 45, 25);
ellipse(100, 100, 20, 20);
//
line(50, 100, 75, 175);
fill(233, 42, 210);
ellipse(50, 100, 20, 30);
ellipse(50, 125, 20, 30);
ellipse(35, 110, 30, 20);
ellipse(65, 110, 30, 20);
ellipse(50, 110, 10, 10);
//
line(125, 105, 100, 198);
ellipse(125, 105, 30, 55);
ellipse(125, 155, 30, 55);
ellipse(100, 130, 55, 30);
ellipse(150, 130, 55, 30);
ellipse(125, 125, 25, 25);
//
fill(213, 12, 160);
ellipse(170, 160, 40, 65);
ellipse(140, 185, 65, 40);
ellipse(205, 185, 65, 40);
ellipse(170, 190, 30, 30);
size ใช้ในการกำหนดขนาดของ Canvas (กว้างxยาว)หากไม่กำหนด Canvas จะมีขนาด100x100
int … เป็นการประกาศตัวแปร[x, y,หรือ r] เพื่อที่จะกำหนดและเรียกใช้ต่อไป
-การกำหนด = ค่าที่กำหนด เรียกว่า literal เป็นค่าที่ไม่ใช่ตัวแปร สามารถนำไปใช้ได้ในทันที Ex. 10,20, 20+30 โดยที่ค้าข้างขวาจะเป็นตัวกำหนดตัวแปรข้างซ้าย
-การเรียกใช้ = จะทำโดยการนำเอาตัวแปรที่ประกาศและกำหนดนั้นไปไว้ตรงบริเวณที่ต้องการ
rect เป็นการวาดรูปสี่เหลี่ยมมุมฉากที่กำหนด มุมเพียงจุดเดียว ความกว้างและความยาว
ellipse เป็นการวาดรูปวงกลมวงรีที่ต้องกำหนด(x,y,ความกว้างม,ความยาว)โดย x,y คือจุดศูนย์กลางของวงกลม
quad เป็นการวาดที่สามารถกำหนดมุมได้สี่มุมโดยกำหนดเป็นจุด x,y (x1,y1,x2,y2,x3,y3,x4,y4)โดยการกำหนดจุดนั้นจะกระทำโดยการเวียนในทิศตามเข็นหรือทวนเข็มนาฬิกา
triangle เป็นการวาดรูปสามเหลี่ยมที่กำหนดจุดทั้งสามจุด(x1y1x2,y2,x3,y3)
size(500,500);//กำหนดขนาดของ canvas
//Background
background(132, 356, 123);//Green color (สีพื้นหลัง)
fill(24, 450, 44);//สีวงกลมพื้นหลังของ canvas
int r= 350;//ประกาศพร้อมการกำหนด
int x1;//ประกาศ
x1= 0;//กำหนด
int y1= 0;//ประกาศและกำหนด
int x2= 500;
int y2= 500;
//วงกลมที่เป็นพื้นหลังของ canvas
ellipse(x1, y1, r, r);//บนซ้าย
ellipse(x2, y1, r, r);//บนขวา
ellipse(x1, y2, r, r);//ล่างซ้าย
ellipse(x2, y2, r, r);//ล่างขวา
//Hair
fill(0);//Black color
triangle(350, 40, 310, 120, 250, 100);//Hair
triangle(400, 90, 300, 120, 300, 85);//Hair
triangle(310, 40, 260, 100, 300, 100);//Hair
//Body
fill(450, 12, 12);//Red color
int R=300;
ellipse(270, 240, R, R);//Red body
//Eyes
fill(245);//White color
int radius=60;
ellipse(230, 270, radius, radius-10);//White eye
ellipse(140, 266, radius-7, radius-17);//White eye
fill(152, 242);//Gray color
int r1=35;
ellipse(137, 265, r1, r1-10);//Gray eye
ellipse(225, 268, r1+5, r1-5);//Gray eye
fill(0);//Black color
int R1=20;
int R2=R1-5;
ellipse(130, 262, R1, R2);//Black eye
ellipse(219, 266, R1, R2);//Black eye
quad(190, 255, 290, 200, 270, 220, 280, 240);//Black eyebrowsด้านขวาโดยเริ่มจากหัวคิ้วไปหางคิ้วด้านบนไปหางคิ้วตรงกลางและไปหางคิ้วด้านล่าง
triangle(170, 254, 110, 240, 105, 215); //Black eyebrows ด้านซ้ายโดยเริ่มจากหัวคิ้วไปหางคิ้วด้านล่างและไปหางคิ้วด้านบน
//Mouth
fill(235, 454, 0);//Yellow color
triangle(173, 270, 210, 310, 70, 370);//Yellow mouth ปากบนโดยเริ่มจากจุดมุมบนไปมุมกลางและล่างตามลำดับ
triangle(210, 310, 190, 342, 110, 355);//Yellow mouth ปากล่างโดยเริ่มจากจุดมุมบนไปมุมกลางและล่างตามลำดับ
พื้นฐานการใช้การวาดเส้นตรง(line) วงกลมวงรี(ellipse) การลากเส้น(stroke) การใส่สี(fill) การประกาศ(int)และการเรียกใช้
//wall
background(13, 174, 240);
fill(10, 184, 43);
stroke(102, 184, 0);
ellipse(78, 89, 85, 45);
fill(100, 190 ,0);
ellipse(25, 95, 80, 25);
//clouds
fill(245)
stroke(245)
//ก้อนเมฆทางซ้าย
ellipse(30, 30, 35, 5);
ellipse(22, 25, 10, 10);
ellipse(32, 25, 20, 15);
//ก้อนเมฆทางขวา
ellipse(98, 40, 25, 2);
ellipse(98, 38, 10, 7);
//sun
fill(302, 94, 2);
ellipse(95, 5, 25, 25);
//เส้นแสงของพระอาทิตย์
line(80, 20, 75, 25);
line(75, 10, 65, 11);
line(90, 25, 90, 30);
//tree
stroke(100);
line(10, 90, 13, 65);
line(14, 90, 14, 65);
//leaf
fill(3, 154, 40);
stroke(3, 154, 30);
ellipse(13, 60, 20, 30);
fill(3, 164, 30);
ellipse(8, 67, 25, 15);
ellipse(15, 67, 25, 15);
//paling
stroke(100);
//เส้นแนวตั้ง
int y= 100;
int y2= 85;
line(90, y, 90, y2);
line(92, y, 92, y2);
line(80, y, 80, y2);
line(82, y, 82, y2);
line(71, y, 71, y2);
line(73, y, 73, y2);
line(62, y, 62, y2);
line(64, y, 64, y2);
line(62, y2, 64, y2);
line(73, y2, 71, y2);
line(82, y2, 80, y2);
line(90, y2, 92, y2);
//เส้นแนวนอน
int x= 58;
int y= 88;
line(x, y, 100, y);
int y= 90;
line(x, y, 100, y);
line(x, y, x, 88);
int y= 95;
line(x, y, 100, y);
int y= 97;
line(x, y, 100, y);
