BASIC:BOX

CODE
void setup(){
    size(200,200);
    background(#90EE90);
    int x=50;
    int y=90;
    int x1=80;
    int y1=50;
    if((y-25)>=0&&x>=0&&(x+x1+25)<=width&&(y+y1)<=height){
        strokeWeight(2);
        stroke(#FF4500);
        line(x,y,x+x1,y);
        line(x,y,x,y+y1);
        line(x,y+y1,x+x1,y+y1);
        line(x+x1,y,x+x1,y+y1);
        line(x,y,x+25,y-25);
        line(x+25,y-25,x+x1+25,y-25);
        line(x+x1+25,y-25,x+x1,y);
        line(x+x1+25,y-25,x+x1+25,y+y1-25);
        line(x+x1,y+y1,x+x1+25,y+y1-25);
        line(x+25,y-25,x+25,y+y1-25);
        line(x+25,y+y1-25,x,y+y1);
        line(x+25,y+y1-25,x+x1+25,y+y1-25);
    }
    else{
        print("Error");
    }
}

จากโค้ด ถ้าเปลี่ยนค่าของตัวแปร x,y,x1,y1 จะทำให้กล่องเลื่อนตำแหน่งและขนาดใหญ่ขึ้นหรือเล็กขึ้นตามค่าที่กำหนดให้ตัวแปรx,y,x1,y1
            และจากฟังก์ชันif((y-25)>=0&&x>=0&&(x+x1+25)<=width&&(y+y1)<=height) ทำให้เมื่อเพิ่มขนาดและเลื่อนตำแหน่งเกินกำหนดจะไม่มีภาพและจะมีคำว่าErrorขึ้น

HAT:Lines 4

CODE
void setup(){
    size(200,200);
    background(#48D1CC);
    int x=50;
    int y=50;
    int x1=50;
    int y1=55;
    if((y+y1)<=height&&(x+x1)<=width&&x>=0&&y>=0){
        strokeWeight(3);
        stroke(#FF4500);
        line(x,y,x+x1,y);
        line(x,y,x,y+y1);
        line(x+x1,y,x+x1,y+y1);
        line(x-(x1/2),y+y1,x+(x1*1.5),y+y1);
    }
    else{
        print("Error");
    }
}

จากโค้ด ถ้าเปลี่ยนค่าของตัวแปร x,y,x1,y1 จะทำให้หมวกเลื่อนตำแหน่งและขนาดใหญ่ขึ้นหรือเล็กขึ้นตามค่าที่กำหนดให้ตัวแปรx,y,x1,y1
            และจากฟังก์ชันif((y+y1)<=height&&(x+x1)<=width&&x>=0&&y>=0) ทำให้เมื่อเพิ่มขนาดและเลื่อนตำแหน่งเกินกำหนดจะไม่มีภาพและจะมีคำว่าError ขึ้น

ART:Circles

CODE

void setup(){
  size(250,250);
  noStroke();
  background(0);
  fill(139,0,0);
  ellipse(125,125,320,320);
  fill(205,0,0);
  ellipse(125,125,300,300);
  fill(238,0,0);
  ellipse(125,125,280,280);
  fill(255,0,0);
  ellipse(125,125,260,260);
  fill(255,69,0);
  ellipse(125,125,240,240);
  fill(255,127,0);
  ellipse(125,125,220,220);
  fill(255,140,0);
  ellipse(125,125,200,200);
  fill(255,165,0);
  ellipse(125,125,180,180);
  fill(255,140,0);
  ellipse(125,125,160,160);
  fill(255,127,0);
  ellipse(125,125,140,140);
  fill(255,69,0);
  ellipse(125,125,120,120);
  fill(255,0,0);
  ellipse(125,125,100,100);
  fill(238,0,0);
  ellipse(125,125,80,80);
  fill(205,0,0);
  ellipse(125,125,60,60);
  fill(139,0,0);
  ellipse(125,125,40,40);
  fill(0);
  ellipse(125,125,20,20);
}

ถ้าเปลี่ยนตำแหน่งคำสั่งจะทำให้ค่าที่ได้ออกมาแตกต่างไปจากเดิม

LOVE:Mickey Mouse

CODE

void setup(){
  size(300,300);
  background(135 ,206 ,250);
 
         //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,245);
  line(94,210,106,210);
  line(94,250,106,250);
 
  line(120,210,120,245);
  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,245);
  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,80,50,50);
  ellipse(185,80,50,50);
            //หัว
  fill(0);
  ellipse(150,127,92.5,96);
 
            //หน้าส่วนบนสีเนื้อ
  fill(255 ,239 ,219);
  ellipse(135,120,40,60);
  ellipse(165,120,40,60);
 
            //ตาขาว
  fill(255,255,255);
  ellipse(135,125,20,40);
  ellipse(165,125,20,40);

            //ตาดำ
  fill(0);
  ellipse(140,130,10,20);
  ellipse(160,130,10,20);
 
            //หน้าส่วนล่างสีเนื้อ
  fill(255 ,239 ,219);
  ellipse(150,155,75,40);
 
            //จมูก
  fill(0);
  ellipse(150,140,20,15);
            //ปาก
  fill(255 ,106 ,106);
  ellipse(150,160,30,10);
}

ถ้าเปลี่ยนตำแหน่งคำสั่งจะทำให้ค่าที่ได้ออกมาแตกต่างไปจากเดิม 

ART:Circles and Lines

CODE

void setup() {
  size(200, 200); //ขนาดของการแสดงภาพ
  background(0 ,191 ,255); //สีพื้นหลังของภาพ

    //หน้าการ์ตูน
  noStroke(); //ไม่มีเส้นขอบ
  fill(0 ,255 ,255); //สีของวงกลม

  ellipse(100,100,250,250); //วงกลมที่พิกัด(100,100) ขนาดของเส้นผ่าศูนย์กลาง(200,200)

  fill(84, 255 ,159); //สีของวงกลม

  ellipse(100,100,230,230); //วงกลมที่พิกัด(100,100) ขนาดของเส้นผ่าศูนย์กลาง(230,230)

  fill(0 ,238 ,118); //สีของวงกลม

  ellipse(100,100,210,210); //วงกลมที่พิกัด(100,100) ขนาดของเส้นผ่าศูนย์กลาง(210,210)

  fill(255 ,192 ,203); //สีของวงกลม

  ellipse(100,100,190,190); //วงกลมที่พิกัด(100,100) ขนาดของเส้นผ่าศูนย์กลาง(190,190)

  fill(238 ,130 ,238); //สีของวงกลม

  ellipse(100,100,170,170); //วงกลมที่พิกัด(100,100) ขนาดของเส้นผ่าศูนย์กลาง(170,170)

  fill(255 ,62 ,150); //สีของวงกลม

  ellipse(100,100,150,150); //วงกลมที่พิกัด(100,100) ขนาดของเส้นผ่าศูนย์กลาง(150,150)

  fill(255 ,64 ,64); //สีของวงกลม

  ellipse(100,100,130,130); //วงกลมที่พิกัด(100,100) ขนาดของเส้นผ่าศูนย์กลาง(130,130)

  fill(255 ,165 ,0); //สีของวงกลม

  ellipse(100,100,110,110); //วงกลมที่พิกัด(100,100) ขนาดของเส้นผ่าศูนย์กลาง(110,110)

  stroke(0); //เส้นขอบสีดำ
  fill(255 ,246 ,143); //สีของวงกลม
  strokeWeight(3); //ขนาดของเส้นขอบ(3)
  ellipse(100, 100, 90, 90); //วงกลมที่พิกัด(100,100) ขนาดของเส้นผ่าศูนย์กลาง(90,90)
  fill(0,0,0); //สีของวงกลม
  ellipse(80,90,10,10); //วงกลมที่พิกัด(80,90) ขนาดของเส้นผ่าศูนย์กลาง(10,10)
  fill(0,0,0); //สีของวงกลม
  ellipse(120,90,10,10); //วงกลมที่พิกัด(120,90) ขนาดของเส้นผ่าศูนย์กลาง(10,10)

  stroke(205 ,92 ,92); //สีของเส้นขอบ
  strokeWeight(10); //ขนาดของเส้นขอบ(10)
  line(80,110,120,110); //เส้นที่ตำแหน่ง x=80,y=110,x1=120,y1=110

  stroke(205 ,85 ,85); //สีของเส้นขอบ
  strokeWeight(10); //ขนาดของเส้นขอบ(10)
  line(81,115,119,115); //เส้นที่ตำแหน่ง x=81,y=115,x1=119,y1=115

  stroke(238 ,99 ,99); //สีของเส้นขอบ
  strokeWeight(10); //ขนาดของเส้นขอบ(10)
  line(82,120,118,120); //เส้นที่ตำแหน่ง x=82,y=120,

  stroke(255 ,106 ,106); //สีเส้นขอบ
  strokeWeight(10); //ขนาดเส้นขอบ
  line(83,125,117,125); //เส้นที่ตำแหน่ง x=83,y=125,x1=117,x2=125

    //ตัวอักษรJ
  stroke(0); //สีดำของเส้นขอบ
  strokeWeight(4); //ขนาดของเส้นขอบ
  line(150,175,150,185); //เส้นที่ตำแหน่ง x=150,y=175,x1=150,x2=185
  line(145,175,164,175); //เส้นที่ตำแหน่ง x=145,y=175,x1=164,x2=175
  line(143,186,149,186); //เส้นที่ตำแหน่ง x=143,y=186,x1=149,x2=186

    //ตัวอักษรA
  line(155,175,155,185); //เส้นที่ตำแหน่ง x=155,y=175,x1=155,x2=185
  line(165,175,165,185); //เส้นที่ตำแหน่ง x=165,y=175,x1=165,x2=185
  line(156,180,164,180); //เส้นที่ตำแหน่ง x=156,y=180,x1=164,x2=180

    //ตัวอักษรN
  stroke(105,105,105); //สีเทาของเส้นขอบ
  strokeWeight(4); //ขนาดของเส้นขอบ
  line(170,175,170,185); //เส้นที่ตำแหน่ง x=170,y=175,x1=170,x2=185
  line(175,175,175,185); //เส้นที่ตำแหน่ง x=175,y=175,x1=175,x2=185
  line(180,175,180,185); //เส้นที่ตำแหน่ง x=180,y=175,x1=180,x2=185
  line(171,175,174,175); //เส้นที่ตำแหน่ง x=171,y=175,x1=174,x2=175
  line(176,186,190,186); //เส้นที่ตำแหน่ง x=176,y=186,x1=190,x2=186
 
    //ตัวอักษรE
  line(181,176,181,185); //เส้นที่ตำแหน่ง x=181,y=176,x1=181,x2=185
  line(182,175,187,175); //เส้นที่ตำแหน่ง x=182,y=175,x1=187,x2=175
  line(182,180,187,180); //เส้นที่ตำแหน่ง x=182,y=180,x1=187,x2=180

}

...

CODE

void setup() {
background(255 ,255 ,255);
  size(200, 200);
noStroke();
fill(0 ,205 ,205);
  ellipse(120,120,80,80);
fill(0 ,238 ,238);
  ellipse(100,100,80,80);
fill(0 ,255 ,255);
  ellipse(80, 80, 80, 80);

}

Testing Processing

Testing Processing.js code
Testing Processing.js code <br />

<script src="http://processingjs.org/js/processing.min.js"></script>

<script data-processing-target="processing-canvas" type="text/processing">


void setup() {
  size(200, 200);
  ellipse(100, 100, 80, 80);
  line(25,200,200,80);
}

</script>

<br />
<canvas id="processing-canvas"> </canvas>