แสดงบทความที่มีป้ายกำกับ lab3 แสดงบทความทั้งหมด
แสดงบทความที่มีป้ายกำกับ lab3 แสดงบทความทั้งหมด

วันพฤหัสบดีที่ 11 กรกฎาคม พ.ศ. 2556

SPORT:Shooting action

คำอธิบาย
size ใช้ในการกำหนดขนาดของ Canvas (กว้างxยาว)หากไม่กำหนด Canvas จะมีขนาด100x100
background เป็นการกำหนดสึของพื้นหลัง
fill เป็นการกำหนดสีของรูปที่เราวาด
stroke เป็นการกำหนดสีของเส้น
strokeWeight เป็นการกำหนดขนาดของเส้น
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)โดยการกำหนดจุดนั้นจะกระทำโดยการเวียนในทิศตามเข็นหรือทวนเข็มนาฬิกา
void setup เป็นฟังก์ชันในการประกาศ กำหนดค่า และเป็นสำหรับพื้นฐาน animation มีการเรียกใช้โดยอัตโนมัติ เราไม่ต้องมีการเรียกใช้อีกและยังเป็นฟังก์ชั่นที่จะทำงานก่อนฟังก์ชั่นอื่นๆเสมอไม่ว่าจะวางไว้บนสุดหรือล่างสุดก็จะทำงานก่อนเป็นอันดับเเรก
void draw เป็นฟังก์ชั่นอัตโนมัติที่ไม่ต้องมีการเรียกใช้ จะทำงานซ้ำๆตามที่ได้ให้ค่าเอาไว้
mouseX คือ ตัวแปรที่มีอยู่ในระบบอยู่แล้ว ที่ระบุตำแหน่งของเมาส์ตามแนวแกน X
mouseY คือ ตัวแปรที่มีอยู่ในระบบอยู่แล้ว ที่ระบุตำแหน่งของเมาส์ตามแนวแกน Y

void setup(){//void setup เป็นฟังก์ชันในการประกาศ กำหนดค่า และเป็นสำหรับพื้นฐาน animation มีการเรียกใช้โดยอัตโนมัติ เราไม่ต้องมีการเรียกใช้อีกและยังเป็นฟังก์ชั่นที่จะทำงานก่อนฟังก์ชั่นอื่นๆเสมอไม่ว่าจะวางไว้บนสุดหรือล่างสุดก็จะทำงานก่อนเป็นอันดับเเรก
size(300,300);//ขนาดของ canvas
}
void draw(){//void draw เป็นฟังก์ชั่นอัตโนมัติที่ไม่ต้องมีการเรียกใช้ จะทำงานซ้ำๆตามที่ได้ให้ค่าเอาไว้
background(0);//พื้นหลังมีสีดำ
int x=175;//กำหนดจุด x ตามแนวแกน x
int y=130;//กำหนดจุด y ตามแนวแกน y
int r=235;//กำหนดค่าความกว้างความสูงของวงกลม
//เป้ายิงปืน
ellipse(x+mouseX,y+mouseY,r,r);//วงกลมสีขาวด้านนอกสุด
ellipse(x+mouseX,y+mouseY,r-25,r-25);//วงกลมสีขาวตรงกลาง
ellipse(x+mouseX,y+mouseY,r-50,r-50);//วงกลมสีขาวที่ติดกับวงกลมสีดำ
fill(0);//กำหนดเพื่อให้ได้รูปสีดำ
stroke(153);//กำหนดเพื่อให้เส้นของรูปมีสีเทา
ellipse(x+mouseX,y+mouseY,r-75,r-75);//วงกลมสีดำวงนอกสุด
ellipse(x+mouseX,y+mouseY,r-100,r-100);//วงกลมสีเทาถัดเข้าไป
ellipse(x+mouseX,y+mouseY,r-125,r-125);//วงกลมสีเทาถัดเข้าไป
ellipse(x+mouseX,y+mouseY,r-150,r-150);//วงกลมสีเทาถัดเข้าไป
ellipse(x+mouseX,y+mouseY,r-175,r-175);//วงกลมสีดำวงสุดท้าย
fill(255,5,5);//กำหนดเพื่อให้ได้รูปเป็นสีแดง
ellipse(x+mouseX,y+mouseY,r-200,r-200);
ellipse(x+mouseX,y+mouseY,r-232,r-232);
//จะเปลี่ยนตำแหน่งเมื่อเลื่อนเมาส์ซ้ายขวาและขึ้นลง โดยการกำหนด(mouseX)จะเปลี่ยนตำแหน่งไปตามแนวแกนX เมื่อมีการเลื่อนเมาส์ไปตามแนวแกน X และ(mouseY)จะเปลี่ยนตำแหน่งไปตามแนวแกน y เมื่อมีการเลื่อนเมาส์ไปตามแนวแกน Y โดยบวกเพิ่มจากจุดแกนที่ได้ประกาศและกำหนดเอาไว้ใน int
//ด้ามปืนและที่ลั่นไกปืน
int x1=240;
int y1=195;
int x2=y1;
int y2=x2;
int x4=220;
int y3=100;
int y4=y3;
int x3=175;
fill(80,75,75);//สีเทา
quad(x3-50,y3,x3,y3,x3+20,y3+40,x3-30,y3+40);//ที่ลั่นไกปืนสีเทา
quad(x1,y1,x2,y2,x3,y3,x4,y4);//ด้ามปืนสีเทา
fill(0);//สีดำ
quad(x1,y1,x2+8,y2,x3+8,y3,x4,y4);//ด้ามปืนสีดำ
quad(x3-45,y3,x3-3,y3,x3+8,y3+35,x3-25,y3+35);//ที่ลั่นไกปืนสีดำ
//body ของปืน
int X=50;
int Y=60;
int h=50;
int w=185;
fill(186,180,181);//สีเทาอ่อน
rect(X,Y,w,h);//bodyสีเทาอ่อน
fill(0);//สีดำ
rect(X,Y+25,w,h-25);//bodyสีดำ
rect(X,Y,-w+160,h-30);//ปากกระบอกปืน
fill(80,75,75);//สีเทาเข้ม
rect(X,Y+20,w-120,h-20);//อยู่ใกล้ๆกับปากกระบอกปืน
//text
strokeWeight(5);//ขนาดของตัวอักษร
line(20,255,35,250);
line(20,255,35,265);
line(35,265,10,285);
fill(250);//กำหนดสีของภาพที่วาด
ellipse(random(0,250),random(0,250),25,25);//random เป็นสุ่มเอาอย่างใดอย่างหนึ่ง ในที่นี้ใช้ random ในการกำหนดตำแหน่ง x และ y โดยจำกัดขอบเขตการสุ่มอยู่ที่ 0 ถึง 250
}

MUSIC:สีซอ




void setup(){//void setup เป็นฟังก์ชันในการประกาศ กำหนดค่า และเป็นสำหรับพื้นฐาน animation มีการเรียกใช้โดยอัตโนมัติ เราไม่ต้องมีการเรียกใช้อีกและยังเป็นฟังก์ชั่นที่จะทำงานก่อนฟังก์ชั่นอื่นๆเสมอไม่ว่าจะวางไว้บนสุดหรือล่างสุดก็จะทำงานก่อนเป็นอันดับเเรก
size(300,300);//กำหนดขนาดของ canvas
}
int x=10;//ประกาศและกำหนด
int a=0;
void drawHit(){//เป็นฟังก์ชั่นที่เราสร้างขึ้นมาเอาเอง
noFill();//เป็นคำสั่งที่้บอกว่าไม่ใช้สี
strokeWeight(2);//เป็นคำสั่งที่ใช้ในการกำหนดขนาดของเส้นที่ใช้ในการวาด
line(65+x+a,199,235+x+a,199);//เส้นตรงที่แสดงถึงสายสำหรับสี
arc(150+x+a,200,150,15,0,PI);//ส่วนโค้งที่ใช้สีซอ
}
void drawSor(){//เป็นฟังก์ชั่นที่เราสร้างขึ้นมาเอาเอง
fill(0);//สีดำ
quad(150,260,155,260,148,50,157,45);//ด้ามซอที่ใช้จับ
quad(130,80,175,70,175,75,130,85);//ที่ปรับเสียงปรับสายซอ
quad(130,90,175,80,175,85,130,95);//ที่ปรับเสียงปรับสายซอ
fill(#A0522D);//การใส่สีโดยการใช้โค้ด
quad(145,198,145,232,175,217,175,190);บริเวณที่ถูกสีให้เกิดเสียง(แหล่งกำเนิดเสียง)
arc(173,204,28,28,TWO_PI-PI/2,TWO_PI+PI/2);//บริเวณที่ถูกสีให้เกิดเสียง(แหล่งกำเนิดเสียง) ข้อสังเกต PI ไม่ได้ประกาศและกำหนดเอามาใช้ได้อย่างไร นำมาใช้ได้PIมีค่าในตัวหรือในระบบของมันอยู่แล้ว(system variable)
fill(#FFE4B5);//การใส่สีโดยการใช้โค้ด
ellipse(145,215,30,34);//บริเวณที่ถูกสีให้เกิดเสียง(แหล่งกำเนิดเสียง)
strokeWeight(2.5);//เป็นคำสั่งที่ใช้ในการกำหนดขนาดของเส้นที่ใช้ในการวาด
line(140,82,145,232);//สายซอตามแนวแกน y
}
void draw(){//เป็นฟังก์ชั่นอัตโนมัติที่ไม่ต้องมีการเรียกใช้ จะทำงานซ้ำๆตามที่ได้ให้ค่าเอาไว้
background(random(165),random(123),random(12));//random เป็นสุ่มเอาอย่างใดอย่างหนึ่ง ในที่นี้ใช้ random ในการกำหนดสีของ canvas
void drawSor();//จะเรียกใช้ฟังก์ชั่นที่เราสร้างเองโดยอัตโนมัติ
drawHit();//จะเรียกใช้ฟังก์ชั่นที่เราสร้างเองโดยอัตโนมัติ
if ( x<=50){//เงื่อนไขถ้า x น้อยกว่าหรือเท่ากับ 50 ให้ x บวก 1เพิ่มขึ้นไปเรื่อยๆทุกครั้ง
x = x+1;
}else{//แล้ว
if (a<=-40) {//ถ้า a น้อยกว่าหรือเท่ากับ -40 ให้ aและ x เท่ากับ 0
a= 0;
x=0;
}else{//แล้วให้ -2 ต่อไปเรื่อยๆ
a = a-2;
}
}
}

UFO

size ใช้ในการกำหนดขนาดของ Canvas (กว้างxยาว)หากไม่กำหนด Canvas จะมีขนาด100x100
background เป็นการกำหนดสีของพื้นหลัง
int … เป็นการประกาศตัวแปร[x, y,หรือ r] เพื่อที่จะกำหนดและเรียกใช้ต่อไป
-การกำหนด = ค่าที่กำหนด เรียกว่า literal เป็นค่าที่ไม่ใช่ตัวแปร สามารถนำไปใช้ได้ในทันที Ex. 10,20, 20+30 โดยที่ค้าข้างขวาจะเป็นตัวกำหนดตัวแปรข้างซ้าย
-การเรียกใช้ = จะทำโดยการนำเอาตัวแปรที่ประกาศและกำหนดนั้นไปไว้ตรงบริเวณที่ต้องการ
ellipse เป็นการวาดรูปวงกลมวงรีที่ต้องกำหนด(x,y,ความกว้างม,ความยาว)โดย x,y คือจุดศูนย์กลางของวงกลม
arc เป็นการวาดส่วนโค้งของทรงกลม (x,y,ความกว้าง,ความสูง,มุมเริ่มต้น, มุมสิ้นสุด) โดย x,y คือจุดศูนย์กลางของวงกลม และมุมจะกำหนดในค่าของ PI=180 องศา TWO_PI=360 องศา 0=0องศา
void setup เป็นฟังก์ชันในการประกาศ กำหนดค่า และเป็นสำหรับพื้นฐาน animation มีการเรียกใช้โดยอัตโนมัติ เราไม่ต้องมีการเรียกใช้อีกและยังเป็นฟังก์ชั่นที่จะทำงานก่อนฟังก์ชั่นอื่นๆเสมอไม่ว่าจะวางไว้บนสุดหรือล่างสุดก็จะทำงานก่อนเป็นอันดับเเรก
void draw เป็นฟังก์ชั่นอัตโนมัติที่ไม่ต้องมีการเรียกใช้ จะทำงานซ้ำๆตามที่ได้ให้ค่าเอาไว้


void setup() {
size(300, 300);
}
int x=0;
int y=0;
int a=0;
int b=0;
int c=0;
int d=0;
void draw() {
background(random(1, 10), random(0, 1), random(5, 98));
fill(15);
ellipse(100+x+y, 100, 45, 45);//วงกลมด้านหลังจาน UFO 2
ellipse(100+x+y, 100, 100, 20);//จาน UFO 2
fill(25);
ellipse(0+b+a, 190, 65, 65);//วงกลมด้านหลังจาน UFO 3
ellipse(0+b+a, 190, 150, 30);//จาน UFO 3
drawUFO1(c, d) ;
//เงื่อนไขต่าง
if ( x<=90) {//ถ้า x น้อยกว่าหรือเท่ากับ 90 ให้ x+5 ทุกครั้งไปเรื่อยๆ
x = x+5;
}
else{//แล้วถ้า y น้อยกว่าหรือเท่า -90 ให้ yและx เท่ากับ 0
if (y <=-90) {
y= 0;
x=0;
}//แล้วให้ y บวก4 ทุกๆครั้ง
else {
y = y-4;
}
if (a<=80) {
a = a+2;
}
else
if (b <=-80) {
b=0;
a=0;
}
else {
b = b-1;
}
if ( c<=80) {
c = c+3;
}
else
if (d <=-80) {
d= 0;
c=0;
}
else {
d = d-5;
}
}
void drawUFO1(intc,intd){//เป็นฟังก์ชั่นที่เราสร้างขึ้นมาเอง (user defined function)
strokeWeight(3);//ขนาดของเส้นที่ใช้วาด
fill(#36648B);//การใส่สีโดยการใช้โค้ดสี
ellipse(250-c-d,230,70,130);
ellipse(250-c-d,250,200,70);
fill(#AFEEEE);//การใส่สีโดยการใช้โค้ดสี
arc(250-c-d,230,120,40,0,PI);
arc(250-c-d,230,110,160,PI,TWO_PI);
arc(250-c-d,230,70,130,PI,TWO_PI);
fill(54,122,234);//สีฟ้า
ellipse(250-c-d,195,35,35);//ตาสีฟ้าของมนุษย์ต่างดาว
fill(0);//สีดำ
ellipse(250-c-d,195,15,15);//ตาดำของมนุษย์ต่างดาว
arc(250-c-d,225,30,15,0,PI);
fill(254,123,125);
ellipse(190-c-d,230,20,20);
ellipse(225-c-d,250,20,20);
ellipse(275-c-d,250,20,20);
ellipse(310-c-d,230,20,20);
}

วันพุธที่ 10 กรกฎาคม พ.ศ. 2556

LOVE:Angry Bird(พื้นหลังขยับ)

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

void setup(){// เป็นฟังก์ชันในการประกาศ กำหนดค่า และเป็นสำหรับพื้นฐาน animation มีการเรียกใช้โดยอัตโนมัติ เราไม่ต้องมีการเรียกใช้อีกและยังเป็นฟังก์ชั่นที่จะทำงานก่อนฟังก์ชั่นอื่นๆเสมอไม่ว่าจะวางไว้บนสุดหรือล่างสุดก็จะทำงานก่อนเป็นอันดับเเรก
size(500,500);//ขนาดของ canvas
ellipse(0,0,0,0);
ellipse(0,500,0,0);
ellipse(500,0,0,0);
ellipse(500,500,0,0);
ellipse(250,250,0,0);
}
int r=0;//ประกาศและกำหนด
void draw(){//เป็นฟังก์ชั่นอัตโนมัติที่ไม่ต้องมีการเรียกใช้ จะทำงานซ้ำๆตามที่ได้ให้ค่าเอาไว้
fill(0,238,238);
ellipse(0,0,r,r);
ellipse(0,500,r,r);
fill(0,206,209);
ellipse(500,0,r,r);
fill(0,178,238);
ellipse(500,500,r,r);
fill(30,144,255);
ellipse(250,250,r,r);
fill(0,178,238);
ellipse(250,250,r-50,r-50);
drawAngrybird();
r=r+15;//เพิ่มค่า r ครั้งละ 15 ครั้งทำให้ขนาดของรัศมีเพิ่มขึ้นเรื่อยๆ
if(r>500){//ถ้าค่า r เพิ่มมากกว่า 500 r จะกลับไปมีค่าเท่ากับ 0 เหมือนเดิม
r=0;
}
}
void drawAngrybird(){//เป็นฟังก์ชั่นที่เรากำหนดเอง สร้างขึ้นมาเอง(user defined function)
//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
quad(190, 255, 290, 200, 270, 220, 280, 240);//Black eyebrows
triangle(170, 254, 110, 240, 105, 215); //Black eyebrows
int R1=20;
int R2=R1-5;
ellipse(130, 262, R1, R2);//Black eye
ellipse(219, 266, R1, R2);//Black eye
//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
}

ART:Arts of SHAPE & FORM(เปลี่ยนสีพื้นหลังโดยเลื่อนเมาส์)

ART
size ใช้ในการกำหนดขนาดของ Canvas (กว้างxยาว)หากไม่กำหนด Canvas จะมีขนาด100x100
background เป็นการกำหนดสีของพื้นหลัง
int … เป็นการประกาศตัวแปร[x, y,หรือ r] เพื่อที่จะกำหนดและเรียกใช้ต่อไป
-การกำหนด = ค่าที่กำหนด เรียกว่า literal เป็นค่าที่ไม่ใช่ตัวแปร สามารถนำไปใช้ได้ในทันที Ex. 10,20, 20+30 โดยที่ค้าข้างขวาจะเป็นตัวกำหนดตัวแปรข้างซ้าย
-การเรียกใช้ = จะทำโดยการนำเอาตัวแปรที่ประกาศและกำหนดนั้นไปไว้ตรงบริเวณที่ต้องการ
rect เป็นการวาดรูปสี่เหลี่ยมมุมฉากที่กำหนด มุมเพียงจุดเดียว ความกว้างและความยาว
ellipse เป็นการวาดรูปวงกลมวงรีที่ต้องกำหนด(x,y,ความกว้างม,ความยาว)โดย x,y คือจุดศูนย์กลางของวงกลม
arc เป็นการวาดส่วนโค้งของทรงกลม (x,y,ความกว้าง,ความสูง,มุมเริ่มต้น, มุมสิ้นสุด) โดย x,y คือจุดศูนย์กลางของวงกลม และมุมจะกำหนดในค่าของ PI=180 องศา TWO_PI=360 องศา 0=0องศา
quad เป็นการวาดที่สามารถกำหนดมุมได้สี่มุมโดยกำหนดเป็นจุด x,y (x1,y1,x2,y2,x3,y3,x4,y4)โดยการกำหนดจุดนั้นจะกระทำโดยการเวียนในทิศตามเข็นหรือทวนเข็มนาฬิกา
triangle เป็นการวาดรูปสามเหลี่ยมที่กำหนดจุดทั้งสามจุด(x1y1x2,y2,x3,y3)
void setup เป็นฟังก์ชันในการประกาศ กำหนดค่า และเป็นสำหรับพื้นฐาน animation มีการเรียกใช้โดยอัตโนมัติ เราไม่ต้องมีการเรียกใช้อีกและยังเป็นฟังก์ชั่นที่จะทำงานก่อนฟังก์ชั่นอื่นๆเสมอไม่ว่าจะวางไว้บนสุดหรือล่างสุดก็จะทำงานก่อนเป็นอันดับเเรก
void draw เป็นฟังก์ชั่นอัตโนมัติที่ไม่ต้องมีการเรียกใช้ จะทำงานซ้ำๆตามที่ได้ให้ค่าเอาไว้
mouseX คือ ตัวแปรที่มีอยู่ในระบบอยู่แล้ว ที่ระบุตำแหน่งของเมาส์ตามแนวแกน X
mouseY คือ ตัวแปรที่มีอยู่ในระบบอยู่แล้ว ที่ระบุตำแหน่งของเมาส์ตามแนวแกน Y


void setup() {//มีการเรียกใช้ฟังก์ชั่นและคำสั่งภายในโดยอัตโนมัติ เราไม่ต้องเรียกใช้อีก
size(300, 300);
}
void draw () {
//เปลี่ยนสี background
background (53,mouseX,mouseY);//จะเปลี่ยนสีเมื่อเลื่อนเมาส์ไปมา โดยการกำหนด(mouseX)เปลี่ยนสีเมื่อ มีการเลื่อนเมาส์ไปตามแนวแกน X และ(mouseY)เปลี่ยนสีเมื่อมีการเลื่อนเมาส์ไปตามแนวแกน Y
//รูปทรงกระบอก
int x;//การประกาศ
x=220;//กำหนด
int y=70;//ประกาศพร้อมกำหนด
int d=y-10;//ประกาศพร้อมกำหนด(เส้นผ่านศูนย์กลางของรัศมี) ข้อสังเกตเราสามารถกำหนด y-10 ได้เลยเพราะเราได้ประกาศและกำหนดค่า y เอาไว้แล้วโดยจะดึงเอาค่า y ที่ได้ประกาศและกำหนดไว้มาคำนวณให้เราไปในตัวเพื่อที่เรานำค่านั้นไปใช้ได้เลย
rect(x,y,d,90); //การเรียกใช้
ellipse(x+30,y,d,5); //การเรียกใช้ ข้อสังเกต x+30 ใช้ได้เพราะได้ประกาศและกำหนดตัวแปรเอาไว้แล้ว โดยจะทำการดึงเอาค่าที่ได้ประกาศและกำหนดนั้นมาใช้และคำนวณให้เราไปด้วยในตัว
arc(x+30,y+90,d,15,0,PI);//ข้อสังเกต PI ไม่ได้ประกาศและกำหนดเอามาใช้ได้อย่างไร นำมาใช้ได้PIมีค่าในตัวของมันอยู่แล้ว(system variable)
rect(x-20,y+50,d,75);
ellipse(x+30-20,y+50,d,12);
arc(x+30-20,y+50+75,d,20,0,PI);
//กล่องสี่เหลี่ยมและสามเหลี่ยมที่ซ้อนกันอยู่
int x1=x-140;//80
int x2=x1+60;//140
int y1=y+50;//120
int y2=y+35;//105
int y3=y2+95;//200
int y4=y1+100;//220
//กล่องสี่เหลี่ยม
quad(x1,y1,x2,y2,x2,y3,x1,y4);//รูปสี่เหลี่ยมด้านหน้าสุดที่ติดกับทรงกรวย โดยเริ่มจากมุมบนซ้ายไปบนขวาไปล่างขวาและไปล่างขวา
quad(x1,y1,x2,y2,x2-65,y2-25,x1-60,y1-30);//รูปสี่เหลี่ยมด้านบน โดยเริ่มจากการกำหนดจุดล่างซ้ายไปล่างขวาไปบนขวาและไปบนซ้าย
quad(x1-60,y1-30,x1,y1,x1,y4,x1-60,y4-50);//รูปสี่เหลี่ยมด้านข้างที่ถูสามเหลี่ยมทับ โดยเริ่มจากการกำหนดจุดบนซ้ายไปบนขวาไปล่างขวาและไปล่างซ้ายของรูป
//กล่องสามเหลี่ยม
quad(x1,y1+10,x1,y4-30,x1-30,y4-30+10,x1-30,y1+15);//รูปสี่เหลี่ยมด้านหน้าโดยเริ่มจากการกำหนดจุดบนขวาไปล่างขวาไปล่างซ้ายและไปบนซ้ายของรูป
quad(x1,y1+10,x1-30,y1+15,x1-75,y1-10,x1-50,y1-15);//รูปสี่เหลี่ยมด้านบนโดยเริ่มจากการกำหนดจุดล่างขวาไปบนขวาไปบนซ้ายและไปล่างซ้ายของรูป
triangle(x1-75,y1-10,x1-30,y4-30+10,x1-30,y1+15);//รูปสามเหลี่ยมโดยเริ่มจากการกำหนดจุดบนซ้ายไปล่างขวาและไปบนขวา
//รูปทรงกลม
int r=65;//ประกาศและกำหนดตัวแปร r
ellipse(x1,y1-50,r,r);//
//รูปทรงกรวย
triangle(x+20,y+50+85,x+20-120,y+50+85,x+20-60,y+15);//รูปสามเหลี่ยมโดยเริ่มจากการกำหนดจุดล่างขวาไปบนและไปล่างซ้าย
arc(x+20-60,y+50+84,2*d,50,0,PI);//ส่วนของเส้นโค้ง
}