ART:PLAY CIRCLE AND BACKGROUND WITH MOUSE

*โพสนี้สามารถใช้เมาส์เคลื่อนที่ภายในกรอบที่แสดงผล

CODE

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

void draw(){
  background(mouseX,mouseY,mouseX-mouseY); //สีของพื้นหลัง ขึ้นอยู่กับพิกัด(X,Y)ของเม้าส์
  drawCircle(); //ฟังก์ชันที่สร้างขึ้นชื่อdrawCircle() รูปแบบ function without parameter
}

void drawCircle(){ 
  if(mouseY<=150){
    strokeWeight(8);
    stroke(mouseX,mouseY,mouseX+mouseY);
    ellipse(mouseX,mouseY,mouseX,mouseY);
  } //ถ้าพิกัดYของเม้าส์น้อยกว่าหรือเท่ากับ150 จะวาดวงกลมตำแหน่งและขนาดตามพิกัด(X,Y)ของเม้าส์  มีเสันขอบขนาด8  สีของเส้นขอบจะขึ้นอยู่กับพิกัด(X,Y)ของเม้าส์
  if(mouseY>=150){
    noStroke();
    fill(mouseX,mouseY,mouseX+mouseY);
    ellipse(mouseX,mouseY,mouseX,mouseY);
  } //ถ้าพิกัดYของเม้าส์มากกว่าหรือเท่ากับ150 จะวาดวงกลมตำแหน่งและขนาดตามพิกัด(X,Y)ของเม้าส์  ไม่มีเสันขอบ  สีของวงกลมจะขึ้นอยู่กับพิกัด(X,Y)ของเม้าส์
}

จากโค้ด  
mouseX คือตัวแปรระบบ(System Variable)ที่อาศัยการเคลื่อนที่ของเมาส์ในแนวนอนหรือแกนx
mouseY คือตัวแปรระบบ(System Variable)ที่อาศัยการเคลื่อนที่ของเมาส์ในแนวตั้งหรือแกนy

PLAY RECT WITH MOUSE

CODE

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

void draw(){
  background(250); //พื้นหลังสีขาว
  drawRect(); //ฟังก์ชันที่สร้างขึ้น ชื่อdrawRect
}

void drawRect(){
  noStroke(); //ไม่มีเส้นขอบ
  fill(mouseX,mouseY,mouseX+mouseY); //สีของสีเหลี่ยมขึ้นอยู่กับพิกัด(X,Y)ของเม้าส์
  rect(mouseX,mouseY,mouseY,mouseX); //สี่เหลี่ยมที่มีตำแหน่งและขนาดขึ้นอยู่กับพิกัด(X,Y)ของเม้าส์
}

PLAY BACKGROUND WITH MOUSE

CODE

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

void draw(){
  background(mouseX,mouseY,mouseX+mouseY); //สีพื้นหลังขึ้นอยู่กับพิกัด(X,Y)ของเม้าส์
}

ART:Blue Circle

CODE

int a = 0; //Global variable ตัวแปร a มีค่าเท่ากับ0
void setup(){
  size(200,200);
}

void draw(){
  drawCircle(a); //ฟังก์ชันที่สร้างขึ้น ชื่อdrawCircle รูปแบบ function with parameter
  a = a + 1; //ตัวแปร a เท่ากับค่าของ a + 1
}

void drawCircle(int r){ //ค่าของr จะเท่ากับค่าa
  background(r,r,r); //สีพื้นหลังขึ้นอยู่กับค่า r
  noStroke(); //ไม่มีเส้นขอบ
  fill(r,r+100,r+100); //สีของวงกลมขึ้นอยู่กับค่าr
  ellipse(100,100,r,r); //วงกลมพิกัด(100,100) ขนาดขึ้นอยู่กับค่าr
  if(r>=200){ //ถ้าค่าr มากกว่าหรือเท่ากับ200
    a = 0; //ค่าตัวแปรa = 0
  }
}

LAB2:SAND

CODE

int a = 1;          //Global variable
void setup(){
  size(300,300);
}

void draw(){
  drawSand(a); //User defined function ชื่อdrawSand()  รูปแบบ function with parameter
//ตัวแปร a ของฟังก์ชัน drawSand()
  a = a+1;
 
  if(a==300){ //ถ้าaมีค่าเท่ากับ300 ให้aเท่ากับ1
  a=1;
  }
}

void drawSand(int x){ //เรียกใช้ฟังก์ชันdrawSand
//ตัวแปร x ของฟังก์ชัน drawSand()
  background(x,200+x,200+x); //สีพื้นหลังขึ้นอยู่กับค่าของตัวแปรx
 
    //cloud
  noStroke(); //ไม่มีเส้นขอบ
  fill(250,250,250); //สี(ขาว)ของวงกลม
  ellipse(x,150,90,20); //วงกลมที่พิกัด(x,150) ขนาดเส้นผ่านศูนย์กลาง(90,20)
  ellipse(x-50,50,60,10); //วงกลมที่พิกัด(x-50,50) ขนาดเส้นผ่านศูนย์กลาง(60,10)
  ellipse(x+120,20,80,15); //วงกลมที่พิกัด(x+120,20) ขนาดเส้นผ่านศูนย์กลาง(80,15)
  ellipse(x+200,90,100,20); //วงกลมที่พิกัด(x+200,90) ขนาดเส้นผ่านศูนย์กลาง(100,20)
   
    //sand
  strokeWeight(1); //เส้นขอบขนาด1
  stroke(x+20,x,x+5); //สีของเส้นขอบขึ้นอยู่กับค่าx
  fill(x+20,x,x+5); //สีของสี่เหลี่ยมขึ้นอยู่กับค่าx
  rect(0,200,300,100); //สีเหลี่ยมที่พิกัด(0,200) ขนาด(300,100)
  fill(255,217,121); //สี(น้ำตาลอ่อน)ของสามเหลี่ยม
  triangle(50,250,250,250,150,100); //สามเหลี่ยม
  fill(183,146,54); //สีของสี่เหลี่ยม
  rect(147,75,5,30); //สี่เหลี่ยม
  fill(250,38,105); //สีของสามเหลี่ยม
  triangle(147,70,147,90,170,80); //สามเหลี่ยม
  
    if(x>=185){ //ถ้า x มีค่ามากกว่าหรือเท่ากับ 185 ให้แสดงรูปดอกไม้และคำ
       //flower
      fill(251,255,72); //สีของวงกลม
      ellipse(90,200,10,10); //วงกลมที่พิกัด(90,200) ขนาดเส้นผ่านศูนย์กลาง(10,10)
      ellipse(100,200,10,10); //วงกลมที่พิกัด(100,200) ขนาดเส้นผ่านศูนย์กลาง(10,10)
      ellipse(110,200,10,10); //วงกลมที่พิกัด(110,200) ขนาดเส้นผ่านศูนย์กลาง(10,10)
      ellipse(120,200,10,10); //วงกลมที่พิกัด(120,200) ขนาดเส้นผ่านศูนย์กลาง(10,10)
      ellipse(130,200,10,10); //วงกลมที่พิกัด(130,200) ขนาดเส้นผ่านศูนย์กลาง(10,10)
      ellipse(140,200,10,10); //วงกลมที่พิกัด(140,200) ขนาดเส้นผ่านศูนย์กลาง(10,10)
      ellipse(150,200,10,10); //วงกลมที่พิกัด(150,200) ขนาดเส้นผ่านศูนย์กลาง(10,10)
      ellipse(160,200,10,10); //วงกลมที่พิกัด(160,200) ขนาดเส้นผ่านศูนย์กลาง(10,10)
      ellipse(170,200,10,10); //วงกลมที่พิกัด(170,200) ขนาดเส้นผ่านศูนย์กลาง(10,10)
      ellipse(180,200,10,10); //วงกลมที่พิกัด(180,200) ขนาดเส้นผ่านศูนย์กลาง(10,10)
      ellipse(190,200,10,10); //วงกลมที่พิกัด(190,200) ขนาดเส้นผ่านศูนย์กลาง(10,10)
      ellipse(200,200,10,10); //วงกลมที่พิกัด(200,200) ขนาดเส้นผ่านศูนย์กลาง(10,10)
      ellipse(210,200,10,10); //วงกลมที่พิกัด(210,200) ขนาดเส้นผ่านศูนย์กลาง(10,10)
  
      ellipse(125,150,10,10); //วงกลมที่พิกัด(125,150) ขนาดเส้นผ่านศูนย์กลาง(10,10)
      ellipse(135,150,10,10); //วงกลมที่พิกัด(135,150) ขนาดเส้นผ่านศูนย์กลาง(10,10)
      ellipse(145,150,10,10); //วงกลมที่พิกัด(145,150) ขนาดเส้นผ่านศูนย์กลาง(10,10)
      ellipse(155,150,10,10); //วงกลมที่พิกัด(155,150) ขนาดเส้นผ่านศูนย์กลาง(10,10)
      ellipse(165,150,10,10); //วงกลมที่พิกัด(165,150) ขนาดเส้นผ่านศูนย์กลาง(10,10)
      ellipse(175,150,10,10); //วงกลมที่พิกัด(175,150) ขนาดเส้นผ่านศูนย์กลาง(10,10)
  
       //font
      strokeWeight(5); //เส้นขอบขนาด5
      stroke(20,198,250); //สีของเส้นขอบ
       //เ
      line(80,20,80,50);
       //จ
      line(90,30,100,50);
      line(100,50,100,20);
      line(100,20,87,20);
       //ด
      line(107,50,107,20);
      line(107,50,115,30);
      line(107,20,122,20);
      line(122,20,122,50);
       //ี
      line(107,12,122,12);
      line(122,7,122,12);
       //ย
      line(129,20,129,50);
      line(129,35,134,35);
      line(129,50,143,50);
      line(143,20,143,50);
       //์
      line(140,12,145,7);
       //ท
      line(150,20,150,50);
      line(150,50,164,20);
      line(164,20,164,50);
       //ร
      line(185,50,185,30);
      line(185,30,171,30);
      line(171,30,171,20);
      line(171,20,185,20);
       //า
      line(192,20,206,20);
      line(206,20,206,50); 
       //ย
      line(213,20,213,50);
      line(213,35,218,35);
      line(213,50,227,50);
      line(227,20,227,50);
   }
}

จากโค้ด  Global variable คือ ตัวแปร a ซึ่งสามารถเรียกนำไปใช้ได้ทุกฟังก์ชัน
(จาก a = a + 1; จะทำให้ภาพมีการเปลี่ยนตำแหน่ง ซึ่งเป็นพื้นฐานของการทำAnimation)
             User defined function คือ drawSand() ซึ่งเป็นฟังก์ชันที่สร้างขึ้นมาเอง
             ตัวแปร x จะมีค่าเท่ากับตัวแปร a เนื่องจาก drawSand(a) เป็นฟังก์ชันที่สร้างขึ้น และ drawSand(int x) เป็นการเรียกใช้ฟังก์ชันที่สร้างขึ้น ทำให้ค่าตัวแปรใน() มีค่าเท่ากัน

LAB2:KITE

CODE

int a = 0;          //Global variable

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

void draw(){
  drawKite(a);          //User defined function รูปแบบ function with parameter  //ตัวแปร a ของฟังก์ชัน drawKite()
  a = a+1;
   
  if(a==800){ //ถ้าตัวแปร a มีค่าเท่ากับ 800 ให้ค่าตัวแปร a เท่ากับ 0
    a = 0;
  }
}

void drawKite(int x){         //ตัวแปร x ของฟังก์ชัน drawKite()
  background(191,248,255);

    //cloud
  noStroke();
  fill(250,250,250);
  ellipse(x,50,60,20);
  ellipse(x-50,150,90,20);
  ellipse(x-150,40,40,10);
  ellipse(x+150,120,100,30);
  ellipse(x-300,90,60,20);
  ellipse(x-450,60,60,20);
  ellipse(x-250,200,60,10);
  ellipse(x-100,250,80,20);
  ellipse(x-400,150,90,20);
  ellipse(x-500,250,100,20);
 
    //rope
  stroke(0);
  line(400-x,100,450-(x/2),300);
 
    //kite
  noFill();
  strokeWeight(30);
  stroke(199,247,110);
  curve(250-x,135,500-x,135,800-x,135+(x/10),1000-x,135-(x/5));
 
    //face
  strokeWeight(1);
  fill(50,200,50);
  stroke(150,200,50);
  ellipse(400-x,135,70,70);
  triangle(410-x,100,410-x,170,510-x,135);
  fill(252,252,189);
  rect(410-x,115,10,40);
  rect(420-x,115,10,40);
  rect(430-x,115,10,40);
  rect(440-x,115,10,40);
 
    //mouth
  noStroke();
  fill(250,8,8);
  rect(410-x,130,25,10);
  triangle(435-x,130,435-x,135,440-x,130);
  triangle(435-x,140,435-x,135,440-x,140);
 
    //eye
  fill(250,250,250);
  ellipse(390-x,120,15,15);
  ellipse(390-x,150,15,15);
  fill(0);
  ellipse(390-x,150,8,8);
  ellipse(390-x,120,8,8);
}

จากโค้ด  Global variable คือ ตัวแปร a ซึ่งสามารถเรียกนำไปใช้ได้ทุกฟังก์ชัน
(จาก a = a + 1; จะทำให้ภาพมีการเปลี่ยนตำแหน่ง ซึ่งเป็นพื้นฐานของการทำAnimation)
             User defined function คือ drawKite() ซึ่งเป็นฟังก์ชันที่สร้างขึ้นมาเอง
             ตัวแปร x จะมีค่าเท่ากับตัวแปร a เนื่องจาก drawKite(a) เป็นฟังก์ชันที่สร้างขึ้น และ drawKite(int x) เป็นการเรียกใช้ฟังก์ชันที่สร้างขึ้น ทำให้ค่าตัวแปรใน() มีค่าเท่ากัน

ART:SUNRISE3

CODE
int count=1;          //Global variable
void setup() {
  size(200, 200);
}

void draw() {
  drawSun(count);          //User defined function
  count = count + 1;          //ตัวแปร count เท่ากับค่าของ count + 1
}

void drawSun(int y){          //เรียกใช้ฟังก์ชันชื่อ drawSun()
  background(0,y+100,y+100);          //สีพื้นหลังเปลี่ยนไปตามค่าของตัวแปร y

    // cloud
  fill(40+y,40+y,40+y);
  ellipse(157, 4, 87, 18);
  fill(70+y,70+y,70+y);
  ellipse(173, 24, 45, 20);

    // sun
  fill(y+200,y,y);
  ellipse(y,150-y,30,30);

    // house
  noStroke();
  fill(100+y,100+y,100+y);
  rect(70,100,60,57);

    //door
  fill(50+y,100-y,100-y);
  rect(90,123,20,27,8);

    // treebrown
  noStroke();
  rect(25,60,10,105);

    // roof
  stroke(50+y,80-y,85-y);
  triangle(70,100,100,65,129,100);

    // earth
  fill(y,100+y,10-y);
  noStroke();
  ellipse(100, 230, 250, 170);

    // bush
  fill(y,100+y,y);
  ellipse(176, 145, 31, 30);
  fill(y,60+y,y);
  ellipse(157, 145, 18, 18);

    // tree
  noStroke();
  fill(y,y+20,10-y);
  ellipse(37, 99, 55, 38);
  fill(y,y+50,10-y);
  ellipse(31, 81, 50, 56);
  fill(y,y+90,10-y);
  ellipse(26, 100, 46, 41);

    //cloud
  fill(100+y,100+y,100+y);
  ellipse(153, 36, 50, 27);

  if(y==150){          //ถ้าตัวแปร y มีค่าเท่ากับ 150 ให้ค่าตัวแปร count เท่ากับ 1
    count=1;
  }
}

จากโค้ด  if(y==150){
                count = 1;
             }
เมื่อตัวแปร y มีค่าเท่ากับ150 ให้ตัวแปร count มีค่าเท่ากับ 1 เพื่อให้ทำซ้ำซึ่งค่าตัวแปร count เท่ากับ 1 ตรงกับค่าเริ่มต้นของตัวแปร count จะทำให้เริ่มต้นใหม่
แต่ถ้าเปลี่ยนค่า (เงื่อนไข) ให้มีค่าน้อยกว่า150 นั้นจะทำให้เริ่มดวงอาทิตย์ครั้งต่อไปเร็วขึ้นและถ้าเปลี่ยนค่าตัวแปร count ใน{ } ให้มากกว่า 1 ก็จะทำให้ดวงอาทิตย์เริ่มที่ตำแหน่งมากกว่าครั้งแรก 
ดังรูป ให้            if(y>=100){
                          count = 50; 
                        }

LAB2:SUNSET

CODE

int count=1;
void setup() {
size(200, 200);

}

void draw() {
 
  background(#99FFFF);

  // house
  stroke(0);
  line(70, 100, 130, 100);
  line(70, 100, 70, 147);
  line(130, 100, 130, 147);

  // roof
  stroke(#FF0033);
  line(70, 100, 100, 60);
  line(130, 100, 100, 60);

  // tree
  stroke(#00FF00);
  line(39, 157, 24, 60);
  line(53, 151, 24, 60);
  noStroke();
  fill(#00FF00);
  ellipse(37, 99, 55, 38);
  fill(#00DD00);
  ellipse(31, 81, 50, 56);
  fill(#99FF33);
  ellipse(26, 100, 46, 41);

  //cloud
  fill(#CCFFCC);
  ellipse(153, 36, 50, 27);

drawSun(count);

count = count + 1;
}

void drawSun(int y){
 fill(y+200,y,y);
  ellipse(150,y,30,30);

    // earth
  fill(y,y+150,y);
  noStroke();
  ellipse(100, 230, 250, 170);

  // bush
  fill(#66FF66);
  ellipse(176, 145, 31, 30);
  fill(#00FF00);
  ellipse(157, 145, 18, 18);

  // cloud
  fill(#FFFFFF);
  ellipse(157, 4, 87, 18);
  fill(#FFFFCC);
  ellipse(173, 24, 45, 20);

if(y==150){
  count=0;
}
}

ART:HOUSE

CODE
void setup() {
    size(200, 200);  //ขนาดภาพ
    background(#99FFFF);  //สีพื้นหลัง

        // earth
    fill(#66FF66);  //สีของวงกลม
    noStroke();  //ไม่มีเส้นขอบ
    ellipse(100, 230, 250, 170);  //วงกลม

        // house
    stroke(0);  //สีเส้น
    line(70, 100, 130, 100);  //เส้น
    line(70, 100, 70, 147);  //เส้น
    line(130, 100, 130, 147);  //เส้น
   
        // roof
    stroke(#FF0033);  //สีเส้น
    line(70, 100, 100, 60);  //เส้น
    line(130, 100, 100, 60);  //เส้น

        // tree
    stroke(#00FF00);  //สีเส้น
    line(39, 157, 24, 60);  //เส้น
    line(53, 151, 24, 60);  //เส้น
    noStroke();  //ไม่มีเส้นขอบ
    fill(#00FF00);  //สีวงกลม
    ellipse(37, 99, 55, 38);  //วงกลม
    fill(#00DD00);  //สีวงกลม
    ellipse(31, 81, 50, 56);  //วงกลม
    fill(#99FF33);   //สีวงกลม
    ellipse(26, 100, 46, 41);  //วงกลม

        // bush
    ellipse(176, 145, 31, 30);  //วงกลม
    fill(#00FF00);   //สีวงกลม
    ellipse(157, 145, 18, 18);  //วงกลม

        // cloud
    fill(#FFFFFF);   //สีวงกลม
    ellipse(157, 4, 87, 18);  //วงกลม
    fill(#FFFFCC);   //สีวงกลม
    ellipse(173, 24, 45, 20);  //วงกลม

        //sun
    int x=143;  //ตัวแปรที่กำหนด
    int y=20;  //ตัวแปรที่กำหนด
    int x1=30;  //ตัวแปรที่กำหนด
    int y1=30;  //ตัวแปรที่กำหนด
    int c1=255;  //ตัวแปรที่กำหนด
    int c2=200;  //ตัวแปรที่กำหนด
    int c3=0;  //ตัวแปรที่กำหนด
    fill(c1,c2,c3);   //สีวงกลม
    ellipse(x,y,x1,y1);  //วงกลม

        //cloud1
    fill(#CCFFCC);   //สีวงกลม
    ellipse(153, 36, 50, 27);  //วงกลม
}

จากโค้ด ถ้ามีการเปลี่ยนค่าของตัวแปร x,y,x1,y1 จะทำให้ดวงอาทิตย์เปลี่ยนตำแหน่งได้ตามค่าของตัวแปร x,y และค่าของตัวแปรx1,y1จะทำให้ดวงอาทิตย์มีขนาดใหญ่หรือเล็กตามค่าของตัวแปรx1,y1
            และถ้าเปลี่ยนค่าของตัวแปร c1,c2,c3 จะทำให้ดวงอาทิตย์เปลี่ยนสี
            และการวางตำแหน่งโค้ดของ cloud1 ไว้ข้างล่างสุดเพื่อให้สามารถบังดวงอาทิตย์ได้ เพราะการวางไว้ตำแหน่งล่างสุดคำสั่งนั้นจะอยู่หน้าสุดของคำสั่งข้างบนทั้งหมด
ตัวอย่าง

ให้ x = 50 y = 40 x1 = 40 y1 = 30 c1=103 c2=20 c3=30  
จะได้ดวงอาทิตย์สีน้ำตาลและกว้างมากขึ้น  

ART:YELLOW

CODE
void setup(){
    size(250,250);
    background(#FFFF33);
    drawTarget(70,64); //ฟังก์ชันตำแหน่งตา
    drawTarget(180,64); //ฟังก์ชันตำแหน่งตา
    mouse(50,150); //ฟังก์ชันตำแหน่งปาก
    mouse(50,190); //ฟังก์ชันตำแหน่งปาก
    shy(50,125); //ฟังก์ชันตำแหน่งแก้ม
    shy(200,125); //ฟังก์ชันตำแหน่งแก้ม
}

void drawTarget(int a,int s){
    fill(255,255,255); //สีขาว
    ellipse(a,s,80,80); //ตาขาว
    fill(0); //สีดำ
    ellipse(a,s,40,40); //ตาดำ
}

void mouse (int q,int w){
    fill(255,255,255); //สีขาว
    rect(q,w,150,40);
    rect(q,w,120,40);
    rect(q,w,90,40);
    rect(q,w,60,40);
    rect(q,w,30,40);
}

void shy(int e,int r){
    noStroke();
    fill(#FF9966); //สีชมพู
    ellipse(e,r,80,30);
}

จากโค้ด void drawTarget(),void mouse(),void shy() เป็นการเรียกใช้ฟังก์ชัน  และใน()จะมีตัวแปร  ซึ่งตัวแปรเหล่านั้นจะมาจากค่าที่กำหนดไว้ของแต่ละฟังก์ชัน
            และการวางตำแหน่ง ตาดำ ถ้าอยู่ข้างบนตาขาวจะไม่เห็นตาดำ ดังรูป

LOVE:MICKEYS

CODE

void setup(){
  size(300,300);
  background(135 ,206 ,250);
  drawTarget(60,10);
  drawTarget(-60,10);
}
void drawTarget(int a,int s){
            //ตัวอักษรMICKEY
  strokeWeight(10);
  stroke(255 ,0 ,0);
  line(50,210,50,250);
  line(50,210,65,225);
  line(65,225,80,210);
  line(80,210,80,250);
 
  line(100,210,100,250);
  line(94,210,106,210);
  line(94,250,106,250);
 
  line(120,210,120,250);
  line(120,210,140,210);
  line(120,250,140,250);
 
  line(155,210,155,250);
  line(176,210,155,230);
  line(155,230,176,250);
 
  line(191,210,191,250);
  line(191,210,211,210);
  line(191,230,211,230);
  line(191,250,211,250);
 
  line(226,210,239,230);
  line(239,230,239,250);
  line(239,230,252,210);

           //หู
  noStroke();
  fill(0);
  ellipse(115+a,80+s,50,50);
  ellipse(185+a,80+s,50,50);

           //หัว
  fill(0);
  ellipse(150+a,127+s,92.5,96);

           //หน้าส่วนบน
  fill(255 ,239 ,219);
  ellipse(135+a,120+s,40,60);
  ellipse(165+a,120+s,40,60);

           //ตาขาว 
  fill(255,255,255);
  ellipse(135+a,125+s,20,40);
  ellipse(165+a,125+s,20,40);

           //ตาดำ
  fill(0);
  ellipse(140+a,130+s,10,20);
  ellipse(160+a,130+s,10,20);

           // หน้าส่วนล่าง
  fill(255 ,239 ,219);
  ellipse(150+a,155+s,75,40);

           //จมูก
  fill(0);
  ellipse(150+a,140+s,20,15);

           //ปาก
  fill(255 ,106 ,106);
  ellipse(150+a,160+s,30,10);
}

จากโค้ด void drawTarget()เป็นการเรียกใช้ฟังก์ชัน  และใน()จะมีตัวแปร  ซึ่งตัวแปรเหล่านั้นจะมาจากค่าที่กำหนดไว้ของฟังก์ชัน
            และการวางตำแหน่ง รูปทรงที่อยากให้อยู่ด้านหน้าสุด ให้เขียนไว้ล่างสุด
ตัวอย่าง    เขียนหัวไว้ล่างสุด  จะได้ดังรูป

ART:BOXS

CODE
void setup(){
    size(250,250);
    background(255 ,218 ,185);
    drawTarget(5,52);
    drawTarget(30,1);
    drawTarget(-5,-50);
}

void drawTarget(int a,int s){
    strokeWeight(2);
    stroke(#FF4500);
    int x=50;
    int y=90;
    int x1=80;
    int y1=50; 

          //boxs
    line(x+a,y+s,x+x1+a,y+s);
    line(x+a,y+s,x+a,y+y1+s);
    line(x+a,y+y1+s,x+x1+a,y+y1+s);
    line(x+x1+a,y+s,x+x1+a,y+y1+s);
    line(x+a,y+s,x+25+a,y-25+s);
    line(x+25+a,y-25+s,x+x1+25+a,y-25+s);
    line(x+x1+25+a,y-25+s,x+x1+a,y+s);
    line(x+x1+25+a,y-25+s,x+x1+25+a,y+y1-25+s);
    line(x+x1+a,y+y1+s,x+x1+25+a,y+y1-25+s);
    line(x+25+a,y-25+s,x+25+a,y+y1-25+s);
    line(x+25+a,y+y1-25+s,x+a,y+y1+s);
    line(x+25+a,y+y1-25+s,x+x1+25+a,y+y1-25+s);
}

จากโค้ด ถ้าเปลี่ยนค่าของตัวแปร x,y,x1,y1 จะทำให้กล่องเลื่อนตำแหน่งและขนาดใหญ่ขึ้นหรือเล็กขึ้นตามค่าที่กำหนดให้ตัวแปรx,y,x1,y1
ตัวอย่าง         ให้ x=20,y=100,x1=40,y1=80 จะได้ดังรูป

BASIC:2

CODE
void setup(){
    size(200,200);    
    background(255 ,218 ,185);
    drawTarget(10,-50);
    drawTarget(10,20);
}

void drawTarget(int p,int j){
    int x=50;
    int y=90;
    int x1=80;
    int y1=50;
    strokeWeight(2);
    stroke(#FF4500);
    line(x+p,y+j,x+x1+p,y+j);
    line(x+p,y+j,x+p,y+y1+j);
    line(x+p,y+y1+j,x+x1+p,y+y1+j);
    line(x+x1+p,y+j,x+x1+p,y+y1+j);
}

จากโค้ด ถ้าเปลี่ยนค่าของตัวแปร x,y,x1,y1 จะทำให้กล่องเลื่อนตำแหน่งและขนาดใหญ่ขึ้นหรือเล็กขึ้นตามค่าที่กำหนดให้ตัวแปรx,y,x1,y1