My Art 3

A Target to Shoot

นี่คือเป้ายิงกระสุนหลากสีสัน เป็นรูปภาพนิ่ง มีการใช้คำสั่งให้วาด และนำตัวแปรมาใช้ทั้งหมด 3 ตัว รวมทั้งในการใช้สียังคงใช้คำสั่ง fill() เหมือนเดิม ใช้แค่วงกลมหลายๆ วงมาซ้อนกัน แล้วมาตัดกันด้วยเส้นสี่เส้น ผมเริ่มใช้คำสั่ง void draw ในการวาดเป็นครั้งแรก โดยกำหนดพื้นที่ที่ต้องการด้วยคำสั่ง size() แล้วกำหนดตัวแปรหนึ่งตัวสำหรับวงกลมทุกวง โดยที่ผมยังคงไม่คิดที่จะบวกหรือลบตัวเลขกับตัวแปร ก่อนวาดเส้นสองเส้นตัดกับวงกลมที่เหลือ ผมกำหนดตัวแปรเพิ่มขึ้นอีกสองตัว ใช้ร่วมกับตัวแปรตัวแรก จึงได้แทนค่าทั้งหมดในแต่ละพิกัดของเส้น 4 เส้นที่เอามาต่อกันในรูป หรือสามารถทำเพียงแค่สองเส้น แต่ต้องให้ยาวถึงของแต่ละด้านก็ได้ ขอเชิญทุกคนที่ดูมาลองทำกันได้เลย

Processing Code

void draw() {
    size(200, 200); //ใช้คำสั่งนี้ในการกำหนดพื้นที่ตามแกน X และ Y
    int s = 100; //นี่คือตัวแปรตัวแรก
    fill(#F71111); //ใช้คำสั่งนี้เติมสีที่ต้องการ โดยใช้แม่สี หรือเครื่องหมาย #
    ellipse(s, s, 180, 180); //จุดที่หนึ่งและสองคือตำแหน่งหรือพิกัดตามแกน X และ Y ส่วนจุดที่สามและสี่คือความกว้างและสูง ตามลำดับ
    fill(#0DF702);
    ellipse(s, s, 150, 150); //ellipse(X, Y, width, height)
    fill(#F2F702);
    ellipse(s, s, 120, 120);
    fill(#020CF7);
    ellipse(s, s, 90, 90);
    fill(#F59516);
    ellipse(s, s, 60, 60);
    fill(#9B0CF5);
    ellipse(s, s, 30, 30);
    int t = 200; //ใช้ int แล้วตามด้วยตัวแปรเพื่อระบุว่าเป็นจำนวนเต็ม
    int u = 0; //ตัวแปรตัวที่สามและสี่ สามารถเพิ่มตัวแปรได้มากกว่านี้
    line(s, u, s, s);
    line(s, t, s, s);
    line(s, s, t, s);
    line(s, s, u, s); //line(X1, Y1, X2, Y2)
}                           

Canvas

My Art 2

Four Tiangles in Circle

รูปนี้ทำเลียนแบบลายผ้า หรือรูปทรงเรขาคณิต 2 อย่างมาซ้อนกัน คือ วงกลม และสามเหลี่ยม ในรูปนี้ผมใช้เส้นทแยงมุม ซึ่งเป็นเส้นตรง 2 เส้นมาตัดกัน เพื่อแบ่งรูปสี่เหลี่ยมเป็นรูปสามเหลี่ยมสี่รูป นอกจากนั้นยังใช้คำสั่ง stroke() และ fill() เพื่อตกแต่งสีตามที่ต้องการ ยังมีการนำตัวแปรมาใช้แทนค่าตัวเลขตามที่ผมต้องการ โดยทั้งหมดนี้รวมอยู่ในคำสั่ง void draw เป็นการวาดรูปที่ง่าย และขนาดพื้นที่ตามปกติ ขอเชิญทุกคนที่ดูนั้นทำกันได้ หรือจะทำให้เป็นรูปทรงใดๆ ก็ได้ตามที่ต้องการ

Processing Code

void draw() {

  background(#61FF08); //เติมสีตามแม่สี หรือเครื่องหมาย # กับค่าที่ระบุ

  int w = 0;

  int x = 50;

  int y = 100;

  int z = 80; //ควรกำหนดตัวให้มากพอสมควร

  fill(#FFF303); //เติมสีตามแม่สี หรือเครื่องหมาย # กับค่าที่ระบุจาก Color Selector

  ellipse(x, x, z, z); //จุดที่หนึ่งและสองคือตำแหน่งพิกัดตามแกน X และ Y และจุดที่สามและสี่คือความกว้างและสูง ตามลำดับ

  fill(#03F4FF); //ellipse(X, Y, width, height)

  rect(23, 22, 55, 57); //rect(X, Y, width, height)

  stroke(#D10808); //ใช้สำหรับใส่สีให้กับเส้น และใส่ตัวเลขตามแม่สี หรือ # 

  line(x, x, y, w); 

  line(x, x, y, y);

  line(x, x, w, w); //มีเพียงรูปสี่เหลี่ยมเท่านั้นที่ีเป็นตัวเลขตามปกติ

  line(y, w, w, y); //line(X1, Y1, X2, Y2)                                                 
}                                                                           

Canvas

My Art 1

Star of Davis

สำหรับรูปนี้ผมเอาแนวคิดในการนำสามเหลี่ยมสองรูปมาซ้อนกัน และนำวงกลมมาครอบไว้ เพื่อทำให้เป็นรูปวงแหวนดาวหกแฉก เอาไว้ตรงกลางภาพ และยังคงใช้คำสั่ง fill() ในการตกแต่งเหมือนกัน นอกจากนั้นก็ไม่ได้ใช้คำสั่งอื่นใดๆ เลย เพราะนี่เป็นภาพที่สองที่ผมออกแบบ อันดับแรกเริ่มจากการวาดรูปวงกลมขนาดใหญ่ไว้ตรงกลางภาพ แล้ววาดรูปทรงสามเหลี่ยมที่มีขนาดเท่าๆ กัน 2 รูป วางทับกันโดยกลับหัวกัน จากนั้นจึงนำตัวแปรให้แทนตัวเลข และยังมีการบวกหรือลบตัวเลขกับตัวแปรให้ได้ค่าตามที่ต้องการ สำหรับครั้งนี้ ผมให้ค่าตัวแปรแต่ละตัวแทนหนึ่งรูปทรงเท่านั้น ขอเชิญทุกคนลองทำกันได้ หรือจะนำไปดัดแปลงตามที่ต้องการก็ได้ สำหรับผมแล้ว รูปนี้เป็นรูปที่ผมเริ่มใช้ตัวแปรเป็นรูปแรก

Processing Code

//Star of Davis

size(100, 110); //ใช้คำสั่งนี้กำหนดพื้นที่หรือ size(width, height)

fill(#F7F702); //ใช้คำสั่งนี้เติมสีโดยใช้แม่สี หรือเครื่องหมาย # ที่ดูจาก Color Selector ได้

int x = 51;

ellipse(x, x+8, x+36, x+24); //ellipse(X, Y, width, height)

fill(#0017FC);

int y = 80;

triangle(y-65, y, y-30, y-60, y+6, y); //triangle(X1, Y1, X2, Y2, X3, Y3)

fill(#FF0A0A);

int z = 40;

triangle(z-25, z, z+46, z, z+10, z+55);
//ในรูปสามเหลี่ยม จุดที่หนึ่งและสองคือพิกัดตามแกน X1 และ Y1 จุดที่สามและสี่คือพิกัดตามแกน X2 และ Y2 และจุดที่ห้าและหกคือพิกัดตามแกน X3 และ Y3

Canvas

Doraemon

Doraemon

ในรูปแรกนี้ ผมพยายามวาดรูปโดราเอมอน โดยใช้เวลานานในการนำรูปทรงต่างๆ และเส้นมาซ้อนกัน ตกแต่งสีด้วยคำสั่ง fill() นี่เป็นเพียงการวาดภาพนิ่งธรรมดาเท่านั้่น ไม่ว่าใครๆ ก็สามารถทำได้

Processing Code

//Doraemon

fill(#151EFF);

ellipse(50,90,90,90);

fill(#FFFFFF);

ellipse(50,90,60,80);

fill(#FC0303);

ellipse(50,60,64,40);

fill(#151EFF);

ellipse(50,38,72,72);

fill(#FFFFFF);

ellipse(50,45,58,58);

fill(#FFFFFF);

ellipse(37,24,25,28);

fill(#FFFFFF);

ellipse(63,24,25,28);

fill(#050101);

ellipse(59,26,8,10);

fill(#050101);

ellipse(40,26,8,10);

fill(#FFFFFF);

ellipse(59,28,5,5);

fill(#FFFFFF);

ellipse(41,28,5,5);

fill(#F70C0C);

ellipse(50,38,12,12);

fill(#FFFFFF);

ellipse(52,39,6,6);

fill(#F5FA05);

ellipse(50,82,12,12);

fill(#030300);

ellipse(51,84,3,3);

line(75,65,54,60);

line(75,55,54,55);

line(75,45,54,50);

line(25,65,45,60);

line(25,55,45,55);

line(25,45,45,50);

line(50,65,50,45);

line(66,66,66,66);

line(35,66,66,66);

line(30,92,70,92);

line(70,160,70,92);

line(30,160,29,92);

line(44,83,57,79);

line(52,85,52,87);

Canvas

Test Processing

Testing Processing.js code
นี่เป็นเพียงการทดสอบการใช้ code ครั้งแรกของผม