Lab 2 - Star (with Functions)

จากความเดิมตอนที่แล้ว (Lab 1) ยูกิได้ใช้คำสาปดาวหกแฉกผนึก Blue Eye White Dragon ไว้แล้ว

แต่ไคบะไม่ลดละความย่อท้อ โดยการสังเวยมอนสเตอร์อีกหลายๆตัว เพื่อเรียก Blue Eye White Dragon ออกมาอีกให้ครบ 3 ตัว เพื่อที่จะ Fusion กันกลายเป็น Blue Eye Ultimate Dragon !!

"หึ !! ทำอะไรข้าไม่ได้หรอก !! ข้ามีคำสาปดาวหกแฉก 3 ใบ !!" ยูกิได้กล่าวเอาไว้



void setup()
{
  // initialization
  size(300,300);
  background(0);
  strokeWeight(4);
  stroke(255,255,0);
  translate(width/2,height/2);
  DrawStar(50,50);
  DrawStar(0,-50);
  DrawStar(-50,50);
}
void DrawStar(int CenterStarX,int CenterStarY)
{
  // variable
  int WidthStar,HeightStar;
  int d;
  int SpaceBetweenCircle=5;
  float RVertical,RSqrt,RCircle;
  // assign variable
  WidthStar = 40;
  HeightStar = 40;
  d = 20;                                                                   //space between base of both triangle
  SpaceBetweenCircle = 10;                                     //space between inside and outside circle
  RVertical = HeightStar/2;                                        //radius from center of star to top vertex of star
  RSqrt = sqrt((pow((d/2),2))+(pow((WidthStar/2),2))); //radius from center of star to side vertex of star
  if(RVertical > RSqrt)
  {
    RCircle = RVertical;
  }
  else
  {
    RCircle = RSqrt;
  }
  // draw outside circle
  fill(0,120,0);
  ellipse(CenterStarX,CenterStarY,(RCircle*2)+(SpaceBetweenCircle*2),(RCircle*2)+(SpaceBetweenCircle*2));
  // draw inside circle
  fill(0,0,100);
  ellipse(CenterStarX,CenterStarY,(RCircle*2),(RCircle*2));
  // draw top vertex triangle
  noFill();
  triangle(CenterStarX,CenterStarY-(HeightStar/2)+3,CenterStarX-(WidthStar/2)+3,CenterStarY+(d/2),CenterStarX+(WidthStar/2)-3,CenterStarY+(d/2));
  // draw bottom vertex triangle
  noFill();
  triangle(CenterStarX,CenterStarY+(HeightStar/2)-3,CenterStarX-(WidthStar/2)+3,CenterStarY-(d/2),CenterStarX+(WidthStar/2)-3,CenterStarY-(d/2));
}

โดยผมนำโค้ดส่วนที่สร้างรูปดาวไปใส่ในฟังก์ชันชื่อ DrawStar โดยมี Parameter เป็นจุดศูนย์กลางของดาว

เมื่อผมเรียกใช้ฟังก์ชัน DrawStar 3 ครั้ง แต่เปลี่ยนค่า Parameter ไม่ให้เหมือนกัน ผมก็ได้ดาว 3 ดวง !!

Lab 2 - Favourite Subject/Topic (with Functions)

Increase/Decrease Space_Left_Screen to move screen to right/left.
Increase/Decrease H_CPU to increase/decrease the height of CPU.
Increase/Decrease H_Disk to move CD-Rom to top/bottom.

Functions
    DrawScreen(int Space_Left_Screen); for draw screen
    DrawCPU(int H_CPU,int H_Disk); for draw CPU

void setup() {
    //variable
    int H_CPU,H_Disk,Space_Left_Screen;
    //assign variable
    H_CPU = 20;
    Space_Left_Screen = 50;
    H_Disk = -10;
    size(360,360);
    background(2,222,83);
    DrawScreen(Space_Left_Screen);
    DrawCPU(H_CPU,H_Disk);
}

void DrawScreen(int Space_Left_Screen)
{
    //draw case of screen
    fill(200);
    ellipse(Space_Left_Screen+180,240,100,60);
    quad(Space_Left_Screen+170,190,Space_Left_Screen+190,190,Space_Left_Screen+200,236,Space_Left_Screen+160,250); //bottom
    quad(Space_Left_Screen+160,185,Space_Left_Screen+170,190,Space_Left_Screen+160,250,Space_Left_Screen+145,242); //bottom
    quad(Space_Left_Screen+130,160,Space_Left_Screen+170,140,Space_Left_Screen+170,220,Space_Left_Screen+130,200); //top
    quad(Space_Left_Screen+170,140,Space_Left_Screen+230,130,Space_Left_Screen+230,200,Space_Left_Screen+170,220); //top
    //draw screen
    fill(0,197,227);
    quad(Space_Left_Screen+178,146,Space_Left_Screen+224,138,Space_Left_Screen+224,196,Space_Left_Screen+178,210);
}    
void DrawCPU(int H_CPU,int H_Disk)
{
    //draw CPU
    fill(200);
    quad(80,154-H_CPU,120,146-H_CPU,120,266,80,278);                        //front
    quad(20,134-H_CPU,80,154-H_CPU,80,278,20,254);                            //side
    quad(57,127-H_CPU,120,146-H_CPU,80,154-H_CPU,20,134-H_CPU); //top
    noStroke();
    fill(50);
    quad(83,160-H_Disk,118,152-H_Disk,118,160-H_Disk,83,168-H_Disk); //CD disk1
    quad(83,172-H_Disk,118,164-H_Disk,118,172-H_Disk,83,180-H_Disk); //CD disk2
}

Lab 2 - Tree (with Functions)

Increase Space_Left  for move tree to right side.
Decrease Space_Left for move tree to left side.
Increase Space_Top for move tree to bottom.
Decrease Space_Top for move tree to top.

Functions
DrawTree(int Space_Left,int Space_Top); for draw a tree
DrawApple(int Space_Left,int Space_Top); for draw apples

Here is my coding.

void setup()
{
    //variable
    int Space_Left,Space_Top;
    //assign variable
    Space_Left = 20;
    Space_Top = 80;
    //setup
    size(300,500);
    background(0,238,255);
    DrawTree(Space_Left,Space_Top);
    DrawApple(Space_Left,Space_Top);
    
} 

void DrawTree(int Space_Left,int Space_Top)
{
    //draw tree
    fill(194,88,52);
    noStroke();
    rect(Space_Left+110,Space_Top+150,80,300);
    //add curve to tree
    noStroke();
    fill(0,238,255);
    ellipse(Space_Left+110,Space_Top+300,40,300);
    ellipse(Space_Left+190,Space_Top+300,40,300);
    //add leaf
    noStroke();
    fill(98,255,0);
    ellipse(Space_Left+60,Space_Top+150,80,80);
    ellipse(Space_Left+80,Space_Top+120,80,80);
    ellipse(Space_Left+100,Space_Top+100,80,80);
    ellipse(Space_Left+240,Space_Top+150,80,80);
    ellipse(Space_Left+220,Space_Top+120,80,80);
    ellipse(Space_Left+200,Space_Top+100,80,80);
    ellipse(Space_Left+150,Space_Top+80,120,85);
    ellipse(Space_Left+150,Space_Top+100,120,85);
    ellipse(Space_Left+150,Space_Top+160,150,80);
}

void DrawApple(int Space_Left,int Space_Top)
{
    //add apple
    noStroke();
    fill(255,0,0);
    ellipse(Space_Left+70,Space_Top+150,24,24);
    ellipse(Space_Left+152,Space_Top+160,24,24);
    ellipse(Space_Left+220,Space_Top+140,24,24);
    stroke(125,49,9);
    strokeWeight(4);
    line(Space_Left+70,Space_Top+138,Space_Left+70,Space_Top+128);
    line(Space_Left+152,Space_Top+148,Space_Left+152,Space_Top+138);
    line(Space_Left+220,Space_Top+128,Space_Left+220,Space_Top+118);

}

Lab 1 - Celsius to Fahrenheit

Code แปลงอุณหภูมิจาก องศาเซลเซียส เป็น องศาฟาเรนไฮต์

void setup()

{

    size(200,100);

    background(255);

    

    //variable

    float celsius,fahrenheit;

    //assign

    celsius = 25;

    fill(0)

    fahrenheit = ((celsius/5)*9)+32;

    println(celsius+" Celsius = "+fahrenheit+" Farenheit");

    text(celsius+" Celsius = "+fahrenheit+" Farenheit",30,40);

}

Lab 1 - Soccer Field

ผมเชื่อว่า ทุกๆคนรู้จักกีฬาที่ชื่อว่า ฟุตบอล (หรือถ้าเป็นคนอเมริกันเขาเรียกว่า Soccer) และเชื่อว่ามีคนจำนวนไม่น้อยที่ชื่นชอบในกีฬานี้

ถ้าพูดถึงสโมสรฟุตบอลชื่อดัง ก็มีอยู่หลายสโมสร แต่มีอยู่สโมสรนึง ที่มีความยิ่งใหญ่ มีฐานแฟนคลับที่เหนียวแน่น เป็นสโมสรชื่อดังในลีก England Premier League มาพร้อมกับคำว่า "You'll Never Walk Alone" สโมสรนั้น มีชื่อว่า LIVERPOOL !!

แน่นอนครับ ถ้ากล่าวถึง Liverpool แล้ว มันคือสโมสรที่ผมเชียร์ คือสโมสรที่ผมรักไม่เคยเปลี่ยนแปลง
แม้ว่าสโมสรจะเคยย่ำแย่แค่ไหน จะเคยตกไปอยู่อันดับที่ 7 ตอนปิดฤดูการณ์ หรือช่วงขาขึ้นอย่างฤดูการณ์ 2013-2014 ที่จบที่อันดับที่ 2 โดยแซงทีมคู่ปรับอย่าง Manchester United ที่ฤดูการณ์นั้นอยู่แค่อันดับ 7 หรือแม้กระทั่งกองหน้าตัวสำคัญอย่าง Luis Suarez จะย้ายไปอยู่ทีม Barcelona ก็ตาม แต่สุดท้ายแล้วก็ตาม แต่ผมก็ยังคงรักและเชียร์ทีมนี้อยู่

ถ้าพูดถึงสโมสร Liverpool แล้ว ก็ต้องนึกถึงสนามประจำสโมสร ที่เป็นสนามที่เก่าแก่และมีมนต์ขลังต่อทีมผู้มาเยือนอย่างสนามที่มีชื่อว่า Anfield

ด้วยเหตุนี้ ผมเลยพยายามใช้ Processing เลียนแบบสนาม Anfield ขึ้นมา แต่ด้วยความสามารถที่ผมมี ก็ทำได้เท่านี้แหละครับ =w=



ส่วนนี่คือ Code ของผมครับ

void setup()
{
  //Initialization
  size(550,330);
  background(6,179,0);
  strokeWeight(7);
  stroke(255);
  noFill();
  //Variable
  int dW,dH;
  int WField,HField;
  int SizeCenterCircle;
  float dGoal;
  float dCorner;
 
  /*
  dW = Different distance from width of background to field
  dH = Different distance from height of background to field
  WField = Width of field
  HField = Height of field
  SizeCenterCircle = Width and Height of circle at Center line
  dGoal = Different distance from outline from top to outside of goal area
  dCorner = Different distance from corner of field
  */
 
  //Assign
  dW = 40;
  dH = 40;
  WField = width-(2*dW);
  HField = height-(2*dH);
  SizeCenterCircle = 80;
  dGoal = HField/4;
  dCorner = HField/8;
  //Draw
  rect(dW,dH,WField,HField); //Draw Field
  line(dW+(WField/2),dH,dW+(WField/2),dH+HField); //Draw Center line
  ellipse(width/2,height/2,SizeCenterCircle,SizeCenterCircle); //Draw Circle at Center line
  rect(dW,dH+dGoal,1.25*dGoal,2*dGoal); //Draw Left Goal Area
  rect(dW+WField-(1.25*dGoal),dH+dGoal,1.25*dGoal,2*dGoal); //Draw Right Goal Area
  line(dW,dH+dCorner,dW+dCorner,dH); //Draw Left-Top Corner
  line(dW+WField,dH+dCorner,dW+WField-dCorner,dH); //Draw Right-Top Corner
  line(dW,dH+HField-dCorner,dW+dCorner,dH+HField); //Draw Left-Bottom Corner
  line(dW+WField,dH+HField-dCorner,dW+WField-dCorner,dH+HField); //Draw Right-Bottom Corner
}

dW = ความห่างจากขอบ background ด้านซ้ายจนถึงขอบสนาม
dH = ความห่างจากขอบ background ด้านบนจนถึงขอบสนาม
WField = ความกว้างของสนาม
HField = ความสูงของสนาม
SizeCenterCircle = เส้นผ่านศูนย์กลางของวงกลมกลางสนาม
dGoal = 1/4 ของ HField ซึ่ง ความกว้างของพื้นที่ผู้รักษาประตูคือ 1.25*dGoal
dCorner = ความห่างของเส้นเตะมุมจนถึงมุมของสนาม

Lab 1 - Spoon and Fork

บอกเลยครับงานนี้ แตกต่างจากงาน Lab 1 - Star แน่นอน เพราะว่านั่งปั่นคืนก่อนส่ง - -.
อะไรๆมันก็ช่างมาประดังกันวันนี้ ผมปั่นงานไม่ทัน ทีหลังจะไม่ดองงานแล้วครับ TT
เพราะฉะนั้น งานนี้อาจจะรูปร่างดูไม่สวยงาม แต่ตัว Coding สามารถปรับแต่งได้มากมายแน่นอนครับ



ส่วนตรงนี้คือ code ของผม

void setup()
{
  //Initialization
  size(300,500);
  background(255);
  stroke(3);
  fill(180);
 
  //Variable
  //Spoon Variable
  int WSpoon , HSpoon ;
  int WSpoonHandle , HSpoonHandle;
  int RefX,RefY;
  //Fork Variable
  int WFork , HFork ;
  int WForkHandle , HForkHandle;
  int Space;
  /*
  W = Width , H = Height
  Reference X , Y at left-top of spoon handle (RefX,RefY)
  Space = space between spoon's handle and fork's handle
  */
 
  //Assign Variable
  //Assign Spoon
  RefX = 90;
  RefY = 200;
  WSpoon = 50;
  HSpoon = 80;
  WSpoonHandle = 20;
  HSpoonHandle = 150;
  //Assign Fork
  WFork = 50;
  HFork = 80;
  WForkHandle = 20;
  HForkHandle = 150;
  Space = 100;
 
  //Draw Spoon
  rect(RefX,RefY,WSpoonHandle,HSpoonHandle); //Draw Spoon's Handle
  ellipse(RefX+(WSpoonHandle/2),RefY-(HSpoon/2),WSpoon,HSpoon); //Draw Spoon
 
  //Draw Fork
  rect(RefX+Space,RefY,WForkHandle,HForkHandle); //Draw Fork's Handle
  beginShape(); //Draw Fork
  vertex(RefX+Space,RefY);
  vertex(RefX+Space-((WFork-WSpoonHandle)/2),RefY);
  vertex(RefX+Space-((WFork-WSpoonHandle)/2),RefY-HSpoon);
  vertex(RefX+Space-((WFork-WSpoonHandle)/2)+((1*WFork)/5),RefY-HSpoon);
  vertex(RefX+Space-((WFork-WSpoonHandle)/2)+((1*WFork)/5),RefY-(HSpoon/2));
  vertex(RefX+Space-((WFork-WSpoonHandle)/2)+((2*WFork)/5),RefY-(HSpoon/2));
  vertex(RefX+Space-((WFork-WSpoonHandle)/2)+((2*WFork)/5),RefY-HSpoon);
  vertex(RefX+Space-((WFork-WSpoonHandle)/2)+((3*WFork)/5),RefY-HSpoon);
  vertex(RefX+Space-((WFork-WSpoonHandle)/2)+((3*WFork)/5),RefY-(HSpoon/2));
  vertex(RefX+Space-((WFork-WSpoonHandle)/2)+((4*WFork)/5),RefY-(HSpoon/2));
  vertex(RefX+Space-((WFork-WSpoonHandle)/2)+((4*WFork)/5),RefY-HSpoon);
  vertex(RefX+Space-((WFork-WSpoonHandle)/2)+WFork,RefY-HSpoon);
  vertex(RefX+Space-((WFork-WSpoonHandle)/2)+WFork,RefY);
  vertex(RefX+Space-((WFork-WSpoonHandle)/2),RefY);
  endShape();
}

ต่อมา เรามาดูกันว่าตัวแปรตัวไหนบ้าง ที่สามารถปรับค่าเพื่อกำหนดขนาดส่วนไหนได้

จากภาพ สามารถเพิ่มลดค่าของตัวแปร เพื่อเพิ่มลดขนาดของส่วนต่างๆได้

ส่วนจุดสีเขียว คือจุดอ้างอิงในการวาดรูปทั้งหมด ซึ่งอยู่ตรงมุมซ้ายบนสุดของด้ามของช้อน สามารถปรับตำแหน่งได้โดยการปรับค่าของตัวแปร RefX และ RefY

ส่วนระยะห่างระหว่างมุมซ้ายบนของด้ามของช้อน กับมุมซ้ายบนของด้ามของส้อม สามารถปรับค่าความห่างได้ที่ตัวแปร Space

Lab 1 - Star

"จะไปเป็นดาวววววโดดเด่นบนฟากฟ้าาาาา~~"

ถ้าพูดถึงดาว แต่ละคนก็มีดาวในจินตนาการตัวเองอยู่

แต่สำหรับผมแล้ว ถ้าพูดถึงดาว ผมนึกถึงสิ่งนี้

ไคบะ : เทิร์นของข้า ขอสังเวยมอนสเตอร์ 3 ตัว เพื่อเรียก Blue Eye White Dragon !!
ยูกิ : หึ เจ้าจบสิ้นแล้ว ขอเปิดการ์ดกับดัก "คำสาปดาวหกแฉก" !!
ไคบะ : ม่ายยยยยยยยยยยยยยยยยยยยย~~~

ใช่แล้วครับ มันคือ การ์ดกับดัก "คำสาปดาวหกแฉก" จากการ์ตูนเรื่อง YU-GI-OH แม้เรื่องนี้มันจะเป็นการ์ตูนที่เก่าแล้ว แต่การ์ดใบนี้ ผมยังจำมันได้เสมอ

ว่าแล้ว ผมก็ใช้ Processing วาดรูปเลียนแบบการ์ดใบนี้เอาซะเลย


ส่วนนี่ก็คือ code ของผม

 void setup()
{
  // initialization
  size(300,300);
  background(0);
  strokeWeight(4);
  stroke(255,255,0);
  translate(width/2,height/2);
  // variable
  int CenterStarX,CenterStarY;
  int WidthStar,HeightStar;
  int d;
  int SpaceBetweenCircle;
  float RVertical,RSqrt,RCircle;
  // assign variable
  CenterStarX = 0;
  CenterStarY = 0;
  WidthStar = 160;
  HeightStar = 184;
  d = 100; //space between base of both triangle
  SpaceBetweenCircle = 40; //space between inside and outside circle
  RVertical = HeightStar/2; //radius from center of star to top vertex of star
  RSqrt = sqrt((pow((d/2),2))+(pow((WidthStar/2),2))); //radius from center of star to side vertex of star
  if(RVertical > RSqrt)
  {
    RCircle = RVertical;
  }
  else
  {
    RCircle = RSqrt;
  }
  // draw outside circle
  fill(0,120,0);
  ellipse(CenterStarX,CenterStarY,(RCircle*2)+(SpaceBetweenCircle*2),(RCircle*2)+(SpaceBetweenCircle*2));
  // draw inside circle
  fill(0,0,100);
  ellipse(CenterStarX,CenterStarY,(RCircle*2),(RCircle*2));
  // draw top vertex triangle
  noFill();
  triangle(CenterStarX,CenterStarY-(HeightStar/2)+3,CenterStarX-(WidthStar/2)+3,CenterStarY+(d/2),CenterStarX+(WidthStar/2)-3,CenterStarY+(d/2));
  // draw bottom vertex triangle
  noFill();
  triangle(CenterStarX,CenterStarY+(HeightStar/2)-3,CenterStarX-(WidthStar/2)+3,CenterStarY-(d/2),CenterStarX+(WidthStar/2)-3,CenterStarY-(d/2));
}

ขอบ่นแปปนึง

อย่างแรกเลย ผมเกลียดระบบพิกัดแกน X,Y ของ Processing มากเลย
ทำไมรึ ? ก็เพราะว่ามันไม่เหมือนกับระบบพิกัดฉากในวิชาคณิตศาสตร์ไงล่ะครับ
จุด (0,0) ไปอยู่มุมซ้ายบนของ background ผมเลยใช้คำสั่ง translation(width/2,height/2) เพื่อให้จุด (0,0) อยู่ตรงกลาง
และก็อีกอย่างที่ทำให้ผมเกลียดมัน คือ แกน Y เมื่อเลื่อนขึ้นด้านบน แทนที่จะเป็นค่า +Y ดันเป็น -Y ซะอย่างงั้น


ช่างมันเถอะ !! เรามาต่อกันดีกว่า

รูปดาวรูปนี้ เพิ่มใช้เป็นสามเหลี่ยม 2 รูปกลับหัวแล้วมาซ้อนกัน อีกทั้งยังใส่วงกลม 2 วงซ้อนกัน จนกลายเป็นดาวอย่างที่เห็น

ต่อมา จาก code ด้านบน เราสามารถแก้อะไรได้บ้าง

CenterStarX : พิกัด X ของจุดศูนย์กลางของดาว
CenterStarY : พิกัด Y ของจุดศูนย์กลางของดาว
HeightStar : ความสูงของดาว
WidthStar : ความกว้างของดาว
d : ระยะห่างระหว่างฐานของสามเหลี่ยม






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

อย่างแรก เราต้องหารัศมีของวงกลมก่อน โดยรัศมีของวงกลม คือ ตั้งแต่จุดศูนย์กลางของดาว จนถึงยอดแหลมของดาว แต่ทว่า มันมีตั้งหลายยอดแหลม แล้วจะใช้รัศมีของยอดแหลมไหนล่ะ

งั้นเอาอย่างงี้ละกัน ผมดูคร่าวๆแล้ว มันมีรัศมีอยู่ 2 ค่า คือ รัศมีจากจุดศูนย์กลางไปยอดแนวตั้ง กับ รัศมีจากจุดศูนย์กลางไปยอดด้านข้าง

จากรูป RVertical = HeightStar/2
ส่วน RSqrt หาโดยทฤษฏีบทที่แสนยาก (หรอ)
ด้วยทฤษฏีบทของพีทาโกรัส
RSqrt^2 = (d/2)^2 + (WidthStar/2)^2
เพระาฉะนั้น
RSqrt = sqrt((d/2)^2 + (WidthStar/2)^2)




แล้วทีนี้ เราจะใช้รัศมีค่าไหนในการสร้างวงกลมล่ะ ?
สิ่งที่ผมต้องการ ก็แค่ต้องการไม่ให้ยอดแหลมใดๆเกินออกมานอกวงกลม ดังนั้น ผมจึงเลือกใช้รัศมีที่มีค่ามากที่สุดมาเป็นรัศมีของวงกลม ด้วย code นี้

if(RVertical > RSqrt)
  {
    RCircle = RVertical;
  }
  else
  {
    RCircle = RSqrt;
  }

ทีนี้ ผมก็จะได้ค่า RCircle มาเป็นรัศมีของวงกลมวงในแล้ว เย้ๆ

ส่วนวงกลมวงนอก ผมก็สร้างตัวแปรชื่อ SpaceBetweenCircle เพื่อเก็บค่าระยะห่างระหว่างวงกลมวงนอกและวงกลมวงใน
เวลาผมสร้างวงกลมวงนอก ผมก็นำ RCircle มาบวกกับ SpaceBetweenCircle แค่นี้ผมก็ได้วงกลมวงนอกแล้ว

แต่สุดท้าย เวลาสร้างรูป ผมต้องสร้างวงกลมวงนอกก่อน ตามด้วยวงกลมวงใน และปิดท้ายด้วยสร้างดาว เป็นอันเสร็จสมบูรณ์ เย้ 

Lab 1 - Hope and Dream (with Variable)

Increase/Decrease Left_M for move a man to right/left.
Increase/Decrease Left_M for move a woman to right/left.

From Lab-0. It has space between us.
I feel lonely. I miss her.
So I'll go to right and make her to left.
So we'll nearly and don't feel alone.

Here is my coding

void setup()
{
  //variable
  int Left_M,Left_F;
  //assign variable
  Left_M = 60; //inc = man to right , dec = man to left
  Left_F = -60; //inc = woman to right , dec = woman to left
  size(500,300);
  background(134,255,74);
  noStroke();
  //Draw man
  fill(255,214,156); //face
  ellipse(Left_M+150,100,30,30); //face
  fill(0); //hair
  beginShape(); //hair
  vertex(Left_M+133,95);//1
  bezierVertex(Left_M+138,82,Left_M+162,82,Left_M+167,95); //2
  vertex(Left_M+133,95);//3
  endShape();

  fill(0,151,252); //shirt
  beginShape(); //shirt
  vertex(Left_M+135,115); //1
  vertex(Left_M+165,115); //2
  vertex(Left_M+190,140); //3
  vertex(Left_M+180,150); //4
  vertex(Left_M+165,135); //5
  vertex(Left_M+165,180); //6
  vertex(Left_M+135,180); //7
  vertex(Left_M+135,135); //8
  vertex(Left_M+120,150); //9
  vertex(Left_M+110,140); //10
  vertex(Left_M+135,115); //11,1
  endShape();
  fill(20,25,33); //jeans
  beginShape(); //jeans
  vertex(Left_M+165,180); //1
  vertex(Left_M+170,245); //2
  vertex(Left_M+155,245); //3
  vertex(Left_M+150,200); //4
  vertex(Left_M+145,245); //5
  vertex(Left_M+130,245); //6
  vertex(Left_M+135,180); //7
  endShape();

  //Draw woman
  fill(255,214,156); //face
  ellipse(Left_F+350,100,30,30); //face
  fill(255,0,238); //shirt
  beginShape(); //shirt
  vertex(Left_F+335,115); //1
  vertex(Left_F+365,115); //2
  vertex(Left_F+390,140); //3
  vertex(Left_F+380,150); //4
  vertex(Left_F+365,135); //5
  vertex(Left_F+365,180); //6
  vertex(Left_F+335,180); //7
  vertex(Left_F+335,135); //8
  vertex(Left_F+320,150); //9
  vertex(Left_F+310,140); //10
  vertex(Left_F+335,115); //11,1
  endShape();
  fill(0); //hair
  beginShape(); //hair
  vertex(Left_F+360,93); //1
  vertex(Left_F+340,93); //2
  vertex(Left_F+340,125); //3
  vertex(Left_F+330,125); //4
  vertex(Left_F+330,93); //5
  bezierVertex(Left_F+335,72,Left_F+365,72,Left_F+370,93); //6
  vertex(Left_F+370,125); //7
  vertex(Left_F+360,125); //8
  vertex(Left_F+360,93); //9
  endShape();
  fill(20,25,33); //skirt
  beginShape(); //skirt
  vertex(Left_F+365,180); //1
  vertex(Left_F+380,245); //2
  vertex(Left_F+320,245); //3
  vertex(Left_F+335,180); //4
  endShape();

  //Draw HEART !!
  beginShape();
  fill(255,0,0);
  vertex(250,100); //1
  bezierVertex(200,60,220,20,250,40);
  bezierVertex(280,20,300,60,250,100);
  endShape();
} 

Lab 1 - Favourite Subject/Topic (with Variable)

Increase/Decrease Space_Left_Screen to move screen to right/left.
Increase/Decrease H_CPU to increase/decrease the height of CPU.
Increase/Decrease H_Disk to move CD-Rom to top/bottom.

void setup() {
    //variable
    int H_CPU,H_Disk,Space_Left_Screen;
    //assign variable
    H_CPU = 20;
    Space_Left_Screen = 50;
    H_Disk = -10;
    size(360,360);
    background(2,222,83);
    //draw case of screen
    fill(200);
    ellipse(Space_Left_Screen+180,240,100,60);
    quad(Space_Left_Screen+170,190,Space_Left_Screen+190,190,Space_Left_Screen+200,236,Space_Left_Screen+160,250); //bottom
    quad(Space_Left_Screen+160,185,Space_Left_Screen+170,190,Space_Left_Screen+160,250,Space_Left_Screen+145,242); //bottom
    quad(Space_Left_Screen+130,160,Space_Left_Screen+170,140,Space_Left_Screen+170,220,Space_Left_Screen+130,200); //top
    quad(Space_Left_Screen+170,140,Space_Left_Screen+230,130,Space_Left_Screen+230,200,Space_Left_Screen+170,220); //top
    //draw screen
    fill(0,197,227);
    quad(Space_Left_Screen+178,146,Space_Left_Screen+224,138,Space_Left_Screen+224,196,Space_Left_Screen+178,210);
    //draw CPU
    fill(200);
    quad(80,154-H_CPU,120,146-H_CPU,120,266,80,278); //front
    quad(20,134-H_CPU,80,154-H_CPU,80,278,20,254); //side
    quad(57,127-H_CPU,120,146-H_CPU,80,154-H_CPU,20,134-H_CPU); //top
    noStroke();
    fill(50);
    quad(83,160-H_Disk,118,152-H_Disk,118,160-H_Disk,83,168-H_Disk); //CD disk1
    quad(83,172-H_Disk,118,164-H_Disk,118,172-H_Disk,83,180-H_Disk); //CD disk2
}

Lab 1 - Tree (with Variable)

Increase Space_Left  for move tree to right side.
Decrease Space_Left for move tree to left side.
Increase Space_Top for move tree to bottom.
Decrease Space_Top for move tree to top.

Example
Space_Left = 20
It's mean move to right side 20 points.
Space_Top = 80
It's mean move to bottom 80 points.

Here is my coding.
void setup()
{
    //variable
    int Space_Left,Space_Top;
    //assign variable
    Space_Left = 20;
    Space_Top = 80;
    //setup
    size(300,500);
    background(0,238,255);
    //draw tree
    fill(194,88,52);
    noStroke();
    rect(Space_Left+110,Space_Top+150,80,300);
    //add curve to tree
    noStroke();
    fill(0,238,255);
    ellipse(Space_Left+110,Space_Top+300,40,300);
    ellipse(Space_Left+190,Space_Top+300,40,300);
    //add leaf
    noStroke();
    fill(98,255,0);
    ellipse(Space_Left+60,Space_Top+150,80,80);
    ellipse(Space_Left+80,Space_Top+120,80,80);
    ellipse(Space_Left+100,Space_Top+100,80,80);
    ellipse(Space_Left+240,Space_Top+150,80,80);
    ellipse(Space_Left+220,Space_Top+120,80,80);
    ellipse(Space_Left+200,Space_Top+100,80,80);
    ellipse(Space_Left+150,Space_Top+80,120,85);
    ellipse(Space_Left+150,Space_Top+100,120,85);
    ellipse(Space_Left+150,Space_Top+160,150,80);
    //add apple
    noStroke();
    fill(255,0,0);
    ellipse(Space_Left+70,Space_Top+150,24,24);
    ellipse(Space_Left+152,Space_Top+160,24,24);
    ellipse(Space_Left+220,Space_Top+140,24,24);
    stroke(125,49,9);
    strokeWeight(4);
    line(Space_Left+70,Space_Top+138,Space_Left+70,Space_Top+128);
    line(Space_Left+152,Space_Top+148,Space_Left+152,Space_Top+138);
    line(Space_Left+220,Space_Top+128,Space_Left+220,Space_Top+118);
}

Lab 0 - Hope and Dream

My Hope and Dream is having a nice family in the future.

Here is my coding

void setup()
{
  size(500,300);
  background(134,255,74);
  noStroke();
  //Draw man
  fill(255,214,156); //face
  ellipse(150,100,30,30); //face
  fill(0); //hair
  beginShape(); //hair
  vertex(133,95);//1
  bezierVertex(138,82,162,82,167,95); //2
  vertex(133,95);//3
  endShape();

  fill(0,151,252); //shirt
  beginShape(); //shirt
  vertex(135,115); //1
  vertex(165,115); //2
  vertex(190,140); //3
  vertex(180,150); //4
  vertex(165,135); //5
  vertex(165,180); //6
  vertex(135,180); //7
  vertex(135,135); //8
  vertex(120,150); //9
  vertex(110,140); //10
  vertex(135,115); //11,1
  endShape();
  fill(20,25,33); //jeans
  beginShape(); //jeans
  vertex(165,180); //1
  vertex(170,245); //2
  vertex(155,245); //3
  vertex(150,200); //4
  vertex(145,245); //5
  vertex(130,245); //6
  vertex(135,180); //7
  endShape();

  //Draw woman
  fill(255,214,156); //face
  ellipse(350,100,30,30); //face
  fill(255,0,238); //shirt
  beginShape(); //shirt
  vertex(335,115); //1
  vertex(365,115); //2
  vertex(390,140); //3
  vertex(380,150); //4
  vertex(365,135); //5
  vertex(365,180); //6
  vertex(335,180); //7
  vertex(335,135); //8
  vertex(320,150); //9
  vertex(310,140); //10
  vertex(335,115); //11,1
  endShape();
  fill(0); //hair
  beginShape(); //hair
  vertex(360,93); //1
  vertex(340,93); //2
  vertex(340,125); //3
  vertex(330,125); //4
  vertex(330,93); //5
  bezierVertex(335,72,365,72,370,93); //6
  vertex(370,125); //7
  vertex(360,125); //8
  vertex(360,93); //9
  endShape();
  fill(20,25,33); //skirt
  beginShape(); //skirt
  vertex(365,180); //1
  vertex(380,245); //2
  vertex(320,245); //3
  vertex(335,180); //4
  endShape();

  //Draw HEART !!
  beginShape();
  fill(255,0,0);
  vertex(250,100); //1
  bezierVertex(200,60,220,20,250,40);
  bezierVertex(280,20,300,60,250,100);
  endShape();
}

Lab 0 - Favourite Subject/Topic

My favourite Subject/Topic is COMPUTER !!

Here is my coding

void setup() {
  size(360,360);
    background(2,222,83);
    //draw case of screen
    fill(200);
    ellipse(180,240,100,60);
    quad(170,190,190,190,200,236,160,250); //bottom
    quad(160,185,170,190,160,250,145,242); //bottom
    quad(130,160,170,140,170,220,130,200); //top
    quad(170,140,230,130,230,200,170,220); //top
    //draw screen
    fill(0,197,227);
    quad(178,146,224,138,224,196,178,210);
    //draw CPU
    fill(200);
    quad(80,154,120,146,120,266,80,278); //front
    quad(20,134,80,154,80,278,20,254); //side
    quad(57,127,120,146,80,154,20,134); //top
    noStroke();
    fill(50);
    quad(83,160,118,152,118,160,83,168); //CD disk1
    quad(83,172,118,164,118,172,83,180); //CD disk2
}