Drum[Music]

ต่อไปนี้ จะป็นการวาดรูปแบบใช้ function แต่มีการนำ condition เข้ามาเพิ่มเพื่อให้ ภาพสามารถเคลื่อนไหวได้ ในครั้งนี้เราจะใช้ เงื่อนไขแบบซ้อนเงื่อนไข เพื่อให้มีการเคลื่อนไหวแบบกลับไปกลับมานะค่ะ

//เริ่มจากส่วนแรกก่อน ก็เป็นฟังก์ชัน setup เพราะ function แรกของการทำงาน จะประกาศ กำหนด แต่ไม่ต้องเรียกใช้ เพราะจะเรียกใช้เองอัตโนมัติ

void setup(){

size(500,500););//เป็นคำสั่งที่กำหนด canvas ของภาพนี้ โดย มีการกำหนดค่าโดย (ความกว้าง,ความสูง)

}

// ส่วนนี้เป็นการประกาศ ตัวแปรแบบ Global

int r=150;//ใช้กำหนดความกว้างและรัศมี ของกลอง

int i=0;//ใช้ในการกำหนดเงื่อนไข

int e=0;

int d=0,j=0;

int m=0,s=0; 

 //ต่อไปเป็นส่วนของ function void draw() ฟังก์ชั่นนี้ ก็มีการประกาศ กำหนด แต่ไม่ต้องเรียกใช้ เพราะมันจะเรียกใช้เองโดยอัตโนมัติเราจะมีการกำหนดเงื่อนไขไว้ในส่วนนี้ โดย condition ที่ใช้ในส่วนนี้จะเป็นแบบเงื่อนไข ซ้อนเงื่อนไข จะมีการเคลื่อนไหวแบบกลับไปกลับมา

void draw(){

background(187,229,250);//เป็นการกำหนดสีของพื้นหลัง โดยการกำหนดค่าจะเป็น background(R,G,B); โดยมีค่าอยู่ในช่วง 0-255

drawDrum(r);//เป็นส่วนที่เรียกใช้void drawDrum() โดยรับค่า r มาใช้ใน function (แบบ parameter)

drawNote(m,s);//เป็นส่วนที่เรียกใช้void drawNote() โดยรับค่า m,s มาใช้ใน function (แบบ parameter)

drawDrumstick(i,e,d,j);//เป็นส่วนที่เรียกใช้void drawDrumstick() โดยรับค่า i,e,d,j มาใช้ใน function (แบบ parameter)
if(e<120){
    e=e+1;
  }else{
  if(i<-120){
    i=2; e=2;
  }else{
    i=i-1;
  } 

       }//condition for drumstick left เงื่อนไข e<120  แล้ว e=e+1; จะมีการลดลงทีละ 1คือขยับกลับมา
             if(d<100){
            d=d+1;
                 }else{

    if(j<-100){
    j=2; d=2;
    }else{
      j=j-1;
    }

}//condition for drumstick right

   if(m<70){
    m=m+1;
  }else{
  if(s<-70){
    m=0; s=0;
  }else{
    s=s-1;
  }

    }//condition for Note
}

void drawDrum(int r){

stroke(16,118,121);//เป็นคำสั่งที่ใช้ในการกำหนดสีเส้นขอบ stroke(R,G,B); โดยมีค่าอยู่ในช่วง 0-255

fill(29,44,70);//ใส่สีของด้านในกลอง

ellipse(200,200,r,r+100);

fill(random(37),random(227),random(232));//เป็นคำสั่งที่ใช่ในการใส่สี แต่มีการใช้คำสั่งrandom()เพื่อทำให้มันสุ่มค่าสี

ellipse(250,200,r,r+100);

line(200,75,250,75);

line(200,325,250,325);

line(125,185,175,185);

line(125,205,175,205);

rect(140,185,25,20);//คำสั่งที่ใช้วาดสี่เหลี่ยม rect(x,y,w,h);

}//นี้จะเป็นการประกาศและกำหนด user defined function ฟังก์ชันที่ใช้วาดกลอง

void drawDrumstick(int i,int e,int d,int j){

strokeWeight(3);//เป็นคำสั่งที่ใช้ในการกำหนดความหนาของเส้นขอบ

fill(123,234,129);

ellipse(270+d+j,195,30,30);//เป็นคำสั่งที่ใช้วาดวงรี ellipse(x,y,w,h);

line(270+d+j,210,285+d+j,305);//drumstick 2

ellipse(260+i+e,200,30,30);

line(255+i+e,215,240+i+e,320);//front

}//นี้จะเป็นการประกาศและกำหนด user defined function ฟังก์ชันที่ใช้วาดไม้ตีกลอง

void drawNote(int m,int s){

line(35+s+m,350+s+m,75+s+m,360+s+m);//ใช้คำสั่งวาดเส้น แต่เรามีการบวก s m เข้าไป เพื่อทำให้ขยับตามเงื่อนไข

line(35+s+m,350+s+m,39+s+m,400+s+m);

line(75+s+m,360+s+m,67+s+m,400+s+m);

ellipse(30+s+m,400+s+m,25,9););//ใช้คำสั่งวาดวงรี แต่เรามีการบวก s m เข้าไป เพื่อทำให้ขยับตามเงื่อนไขในแนว x,y

ellipse(60+s+m,400+s+m,25,7);//left

line(400+s+m,35+s+m,440+s+m,30+s+m);

line(400+s+m,35+s+m,410+s+m,85+s+m);

line(440+s+m,30+s+m,435+s+m,80+s+m);

ellipse(400+s+m,85+s+m,25,9);

ellipse(425+s+m,80+s+m,25,7);

}//นี้จะเป็นการประกาศและกำหนด user defined function ฟังก์ชันที่ใช้วาดตัวโน้ต