SPORT:Shooting

คำอธิบาย

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)โดยการกำหนดจุดนั้นจะกระทำโดยการเวียนในทิศตามเข็นหรือทวนเข็มนาฬิกา

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

background(0);//พื้นหลังมีสีดำ

int x=175;//กำหนดจุด x ตามแนวแกน x

int y=130;//กำหนดจุด y ตามแนวแกน y

int r=235;//กำหนดค่าความกว้างความสูงของวงกลม

//เป้ายิงปืน

ellipse(x,y,r,r);//วงกลมสีขาวด้านนอกสุด

ellipse(x,y,r-25,r-25);//วงกลมสีขาวตรงกลาง

ellipse(x,y,r-50,r-50);//วงกลมสีขาวที่ติดกับวงกลมสีดำ

fill(0);//กำหนดเพื่อให้ได้รูปสีดำ

stroke(153);//กำหนดเพื่อให้เส้นของรูปมีสีเทา

ellipse(x,y,r-75,r-75);//วงกลมสีดำวงนอกสุด

ellipse(x,y,r-100,r-100);//วงกลมสีเทาถัดเข้าไป

ellipse(x,y,r-125,r-125);//วงกลมสีเทาถัดเข้าไป

ellipse(x,y,r-150,r-150);//วงกลมสีเทาถัดเข้าไป

ellipse(x,y,r-175,r-175);//วงกลมสีดำวงสุดท้าย

fill(255,5,5);//กำหนดเพื่อให้ได้รูปเป็นสีแดง

ellipse(x,y,r-200,r-200);

ellipse(x,y,r-232,r-232);

//ด้ามปืนและที่ลั่นไกปืน

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);

Music:Drummer

คำอธิบาย

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)

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

background(185);//สีของพื้นหลัง

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

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

int r=90;//ประกาศและกำหนดรัศมีของกลอง

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);

line(141, 135, 141, 156);

line(126, 135, 159, 135);

line(126, 132, 159, 132);

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

int w=60;//ประกาศและกำหนดความกว้างของสี่เหลี่ยม

rect(40, 125, w, 75);//กลองด้านหลัง

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

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

fill(0);//สีดำ

int x1= 10;

int x2= 62;

int x3= 110;

int y1= 250;

int y2= 220;

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;//ประกาศและกำหนดแกน y

int W= 5;//ประกาศและกำหนดความกว้าง

int H= -170;//มีทิศขึ้นด้านบน ส่วนกับทิศปกติ

fill(0);//สีดำ

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

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

//ฉาบ

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

int R1=80;//ประกาศและกำหนดความกว้างของวงกลม

int R2=10;//ประกาศปละกำหนดความสูงของวงกลม

ellipse(230, 100, R1, R2);//ฉาบทางขวา

ellipse(60, 80, R1, R2);//ฉาบทางซ้าย

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

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

int w1= 40;//ประกาศและกำหนดความกว้าง

int h= 45;//ประกาศและกำหนดความสูง

rect(126, y, -w1, -h);//กลองด้านบนซ้าย ข้อสังเกต w และ h ติดลบ คือมันจะมีทิศทางการวาดที่ส่วนทางจากปกติ

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

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)

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

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

//รูปทรงกระบอก

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);//ส่วนของเส้นโค้ง

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)

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 ปากล่างโดยเริ่มจากจุดมุมบนไปมุมกลางและล่างตามลำดับ

Nature of the day.

พื้นฐานการใช้การวาดเส้นตรง(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);