pig

จงใจให้ตาหมูโตๆ *-*





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

void draw(){
  background(0,162,232);
  //ear&face
  fill(252,224,194);
  triangle(50,50,70,100,80,60);
  triangle(150,50,130,100,120,60);
  ellipse(100,100,100,100);

  //eye
  fill(0);
  ellipse(80,90,30,30);
  ellipse(120,90,30,30);

  //nose
   fill(255,174,215);
  ellipse(100,120,40,20);
  fill(0);
  ellipse(95,120,5,10);
  ellipse(105,120,5,10);

}

Thai cultural heritage

ประเพณีไหลเรือไฟ






void setup(){
size(500,500);  // กำหนดขนาดของ screen
}
float r = 0;   // ประกาศตัวแปรและกำหนดค่า โดยกำหนดค่า r เป็น float เพราะเลขที่ใช้คำนวณเป็นทศนิยม
float z = 0;   // ประกาศตัวแปรและกำหนดค่า โดยกำหนดค่า z เป็น float เพราะเลขที่ใช้คำนวณเป็นทศนิยม

void draw(){
//bg
background (0,0,53);   // กำหนดสีของ background เป็นสีน้ำเงินเข้มเกือบดำ 
fill(75,183,194);  // กำหนดสีของพื้นน้ำให้เป็นสีฟ้า
rect(0,400,500,500);  // วาดสีเหลี่ยมผืนผ้า ทำเป็นพื้นน้ำ


//moon
fill(255,255,81);  // กำหนดสีให้กับดวงจันทร์ ให้เป็นสีเหลือง 
ellipse(250+ 380*cos(r),500 + 350*sin(r),100,100); // วาดวงกลม เป็นพระจันทร์ โดยตำแหน่งที่อยู่ให้เคลื่อนเป็นวงกลม โดยใช้ตัวแปรคูรกับค่าของ cos และ sin ส่วนรัศมี กำหนดเป็น 100 
r = r + 1/200; // เพิ่มค่า r ไปเรื่อยๆ เพื่อให้ค่าของ cos และ sin ออกมาต่างกันไปเรื่อยๆ ทำให้พระจันทร์เคลื่อนที่เป็นวงกลมได้


//boat
fill(255,128,64); // กำหนดสีให้กับเรือ 
line(250 + 200*sin(z),270,250 + 200*sin(z),350);  // วาดเส้นตรงเป็นเสาธง โดยให้เเสาเคลื่อนที่ในแนวราบจึงเปลี่ยนแปลงค่าแค่ x ทั้ง 2 ค่าโดยใช้ค่า sinในการคำนวณ ส่วนค่า y ทั้ง 2 ค่ากำหนดเป็นค่าคงที่ rect(200 + 200*sin(z),350,100,50);   // วาดสี่เหลี่ยมเป็นตัวเรือ โดยให้เคลื่อนที่ในแนวราบ จึงเปลี่ยนแปลงแค่ค่าเดียวคือ x กำหนดค่าตัวแปร z คูณกับค่า sin ส่วนค่า y ค่าความกว้าง และค่าความยาวของเรือไม่ต้องเปลี่ยนแปลง จึงกำหหนดเป็นตัวเลข 
fill(255,0,0);   // กำหนดสีให้กับธงเรือ 
triangle(250 + 200*sin(z),270,280 + 200*sin(z),290,250 + 200*sin(z),310);  //วาดสามเหลี่ยมเป็นธงเรือ โดยให้ค่า x มีการเปลี่ยนแปลง กำหนดค่าตัวแปร z กับจุด x ทั้ง 3 จุดคูณกับค่าของ sin ส่วนค่า y ไม่มีการเปลี่ยนแปลงเพราะเป็นการเคลื่อนที่แนวราบ จึงกำหนดค่าเป็นตัวเลข 
z = z + 1/100;  // สั่งเพิ่มค่าให้กับ z เพื่อให้ค่าที่คูณกับ sin ออกมามีการเปลี่ยนแปลง ทำให้เรือเคลื่อนที่กลับไปกลับมา 
}

home & sun

เมื่อครั้งที่แล้ว เราวาดแต่บ้านไปใช่ไหมละ

ต่อไปเราก็ใส่พื้นหลังเป็นต้นไม้ เมฆ ท้องฟ้า พระอาทิตย์กัน

มาดูโค้ดกันดีกว่า

void draw()
{
background(0,204,255);
fill(231,47,39);
ellipse(20,20,20,20);


//home
fill(160,147,131);
rect(40,57,20,20);
fill(194,222,242);
triangle(40,57,50,40,60,57);

//land
fill(146,198,131);
ellipse(50,150,150,150);

//cloud
fill(244,244,244);
ellipse(75,4,60,15);
ellipse(80,17,30,10);
}

ปล.
triangle(); >> โค้ดใช้วาดรูป สามเหลี่ยม
rect(); >> โค้ดใช้วาดรูป สี่เหลี่ยม

my home :]

เย้ๆ แล้ววันนี้เราลองมาสร้างบ้านดีกว่า

บ้านในจิตนาการตอนเด็กๆของเราเองแหละ
โตไปเราอยากมีบ้านซักหลังไว้ให้กับคุณพ่อคุณแม่
มันคือความฝันของเรา
บ้านในจิตนาการตอนเด็กๆทุกคนคงออกมาประมาณนี้สินะ  > <

แต่กว่าจะออกมาแบบนี้ได้ เล่นเอามึนไปเหมือนกันนะ มาลองดูโค้ดที่ใช้วาดกันเลยดีกว่าาาา

void setup(){
}
int t = 50;
void draw() {
background(210,255,255);

//home
fill(247,242,159);
rect(5,t - 5,t + 40,t);
fill(36,36,255);
triangle(5,t - 5,t,10,95,t - 5);

//window
fill(255,255,255);
rect(t + 10,t + 10,t -30,t - 30);
line(t + 10,t + 20,t + 30,t + 20);
line(t + 20,t + 10,t + 20,t + 30);

//door
fill(204,102,0);
rect(t - 30,t + 10,t - 30,t - 15);
fill(0,0,0);
ellipse(t - 25,t + 28,5,5);

}

ครั้งนี้เราทดลองเพิ่มค่าของตัวแปรจากการบวก(+) และ ลดค่าของตัวแปรจากการลบ (-) 

robot

กลับมาแล้วววววว

วันนี้เอารูปภาพที่ใช้โค้ดวาดมาให้ดูกัน ^^

อันนี้เป็นรูป หุ่นยนต์ จะเรียกว่าหุ่นยนต์ก็ไม่ได้อะนะ เพราะมีแต่ส่วนหัว




เรามาดูโค้ดกันดีกว่าาาา ครั้งนี้ลองใช้ตัวแปรเข้ามาช่วยด้วย

void setup(){
background(255);
}

int s = 20;

void draw(){
fill(141);
rect(s,s,s * 3,s * 3);
fill(255,255,168);
ellipse(35,s * 2,s,s);
ellipse(65,s * 2,s,s);

rect(27,s * 3,45,10);
line(35,s * 3,35,70);
line(45,s * 3,45,70);
line(55,s * 3,55,70);
line(65,s * 3,65,70);
line(s * 2,s,s * 2,9);
line(s * 3,s,s * 3,9);


ครั้งนี้ทดลองการใช้ตัวแปรและคูณเพิ่มค่าของตัวแปร โดยใช้สัญลักษณ์ * แทนคำสั่งคูณนั้นเอง

เส้นตรง line

มาแล้ววววว

วันนี้เราจะมาเริ่มเรียนรู้การเขียนโค้ดกัน

อย่างแรกเลยคือการวาดรูป แล้วการวาดรูปอย่างแรกที่ทุกคนต้องทำและเขียนได้ก่อนสิ่งอื่นๆคือ เส้นตรงนั้นเอง

เพราะเส้นตรงคือส่วนประกอบของรูปภาพทุกรูป วันนี้เราจึงจะมาลองเขียนเส้นตรงกัน
(ใครมีโปรแกรมเปิดมันขึ้นมา ใครไม่มีเข้าหน้าเว็บนี้แล้วมาลองทำไปพร้อมกันนะ)
http://processingjs.org/tools/processing-helper.html


line(X1,Y1,X2,Y2);

คำสั่งโค้ดด้านบนนี้คือ คำสั่งในการวาดเส้นตรง โดยเราจะใส่ค่าแกน x แกน y เข้าไป โดยจะมีค่า 4 ค่าคือ ค่าแกน x แกน y จุดเริ่มต้นและ ค่าแกน x แกน y จุดสุดท้าย โดยเราสามารถวาดเส้น ตรงใน
แนวตั้ง

line(50,5,50,95);








แนวนอน

line(5,50,95,50);








แนวทแยง

line(5,5,95,95);








หรือแม้แต่เอาท้ง 3 เส้นนี้มารวมกันก็ยังได้

ลองไปทำกันดูนะ ที่นี้เราก็สามารถวาดรูปได้หลายรูปเลยจากคำสั่งนี้เพียงคำสั่งเดียวเช่น

line(20,70,80,70);
line(30,40,30,70);
line(30,40,70,40);
line(70,40,70,70);








ชัดชะ!!! เราก็ได้หมวกมาหนึ่งใบแล้วววววว หรือคนหลายคนอาจจะเรียนฟิสิกส์กันมา ก็เป็นไปได้ที่จะหลอนมองว่ามันเป็นวัตถุวางอยู่บนพื้นก็ได้นะ 555+

วันนี้ก็หมดเรื่องแล้ว พบกันคราวหน้าาาาา  เอาเจ้า line ไปลองเล่นกันดูนะจ๊ะ อิอิ

ยินดีต้อนรับบบ

ยินดีต้อนรับเข้าสู้ บล็อกของข้าน้อยยยยย

บอกกันไว้ก่อนเลยว่าบล็อกนี้จะพูดถึง เอยถึง กล่าวถึงแต่โปรแกรมคอมพิวเตอร์ล้วนๆ

เราสร้างบล็อกนี้ขึ้นเพื่อมาระบายโค้ดโปรแกรมที่เราเขียนได้ เพราะกว่าจะวาดกัน
เขียนกันขึ้นมาได้ นานนะเธอ เราเลยอดไม่อยู่ต้องเอามาลงในนี้ 555+

เข้าใจตรงกันนะจ้าาาา

โปรแกรมที่เราใช้เขียนโปรแกรมคือ

Processing

หลายคนคงงงว่าโปรแกรมเขียนโค้ดนี้มันคืออะไร อยากจะบอกว่า เราเป็นคนเรียนเรายังงงเองเลยละ 555+ 

รู้แต่ว่าต้องเขียนให้เป็นแล้วเอาไปสอบ โว้วๆ

เริ่มต้นตอนแรกเลยคือโหลดโปรแกรมมาใช้ หรือถ้าใครไม่อยากโหลดแต่อยากลองทำก็เข้าไปในหน้าเว็บนี้ได้นะจ๊ะ

http://processingjs.org/tools/processing-helper.html

เอาละถ้าพร้อมแล้วก็ไปลุยเขียนโค้ดโปรแกรมกันนนน เย้ๆ