12750343_week02

 week02-1

//week02_1_fill_noStroke_rect
size(400,400); // ok 視窗大小 400x400
background(255); // ok 白色的背景
fill(238); // 填充的色彩
noStroke(); // 不要畫框線
rect(0,0,20,20); // 四邊形 rectangle x,y,w,h
rect(0,40,20,20);
rect(0,80,20,20);

week02-2

// week02_2_for_for_if_rect
size(400,400);
background(255);
fill(238);
noStroke();
float s = 400/14; // 計算 每個格子的大小
for(int i=0; i<14; i++){
  for(int j=0; j<14; j++){
    //rect(0, i*s*2, s, s);
    if( (i+j)%2==0) rect(j*s, i*s, s, s); 
 }
}

week02-3

// week02_3_void_setup_void_draw_stroke_if_mousePressed_line
void setup(){ //一開始,設定一次
  size(400,400);
  background(255);
  fill(238);
  noStroke();
  float s = 400/14; // 計算 每個格子的大小
  for(int i=0; i<14; i++){ // 左手 i 對應 y 座標
    for(int j=0; j<14; j++){ // 右手 j 對應 x 座標
      //rect(0, i*s*2, s, s); // 先試一下位置
      if( (i+j)%2==0) rect(j*s, i*s, s, s); 
   }
  }
}
void draw(){ // 每秒畫60次
  stroke(255,0,0); // 紅色的線
  if(mousePressed) line(mouseX, mouseY, pmouseX, pmouseY);
} // 如果 mouse 按下去, 就畫線, 給兩個座標: 現在的 mouse 和 之前的mouse

week02-4

// week02_4_PIamge_loadImage_background_fill_println
// 新的開始, 要描圖
PImage img;
void setup(){
  size(400, 400);
  img = loadImage("cute.png");
} // 記得把圖檔, (像上週一樣)拉到程式碼裡
void draw(){
  background(img);
  fill(255, mouseX); // 半透明的色彩 白色 ,alpha值是128
  println(mouseX); // 把 mouseX 的值,在下面(小黑)印出來
  rect(0, 0, 400, 400); // 畫超大的四邊形,全部蓋住
}

week02-5 bad

// week02_5a_combine_02_4_and_02_3_bad
// 要描圖,卻出錯
PImage img;
void setup(){
  size(400, 400);
  img = loadImage("cute.png");
} // 記得把圖檔, (像上週一樣)拉到程式碼裡
void draw(){
  background(img);
  fill(255, 200); // 半透明的色彩 白色 ,alpha值是128
  rect(0, 0, 400, 400); // 畫超大的四邊形,全部蓋住
  // 上面是 week02_4, 下面是 week02_3 但線卻無法上去
  stroke(255,0,0); // 紅色的線
  if(mousePressed) line(mouseX, mouseY, pmouseX, pmouseY);
}

week02-5 OK版

// week02_5_ArrayList_Integer_new_for_size_get_add
// 要利用資料結構, 把歷史軌跡 記起來
ArrayList<Integer> x = new ArrayList<Integer>();
ArrayList<Integer> y = new ArrayList<Integer>();
PImage img;
void setup(){
  size(400, 400);
  img = loadImage("cute.png");
} // 記得把圖檔, (像上週一樣)拉到程式碼裡
void draw(){
  background(img);
  fill(255, 200); // 半透明的色彩 白色 ,alpha值是128
  rect(0, 0, 400, 400); // 畫超大的四邊形,全部蓋住
  // 上面是 week02_4, 下面用迴圈,從資料結構取出來
  for(int i=1; i<x.size(); i++){
    line(x.get(i), y.get(i), x.get(i-1), y.get(i-1));
  }
}
void mouseDragged(){
  x.add(mouseX);
  y.add(mouseY);
}

week02-6

// week02_6_
// 想要有很多段, 不要(一筆畫)一直接著畫
ArrayList<Integer> x, y; // 先有2個還沒準備好的資料結構
ArrayList<ArrayList<Integer>> xx = new ArrayList<ArrayList<Integer>>();
ArrayList<ArrayList<Integer>> yy = new ArrayList<ArrayList<Integer>>();
PImage img;
void setup(){
  size(400, 400);
  img = loadImage("cute.png");
} // 記得把圖檔, (像上週一樣)拉到程式碼裡
void draw(){
  background(img);
  fill(255, 200); // 半透明的色彩 白色 ,alpha值是128
  rect(0, 0, 400, 400); // 畫超大的四邊形,全部蓋住
  // 上面是 week02_4, 下面用迴圈,從資料結構取出來
  for(int I=0; I<xx.size(); I++){ // 大寫I 對應大的資料結構
    ArrayList<Integer> x = xx.get(I); // 取出裡面的小的資料結構
    ArrayList<Integer> y = yy.get(I);
    for(int i=1; i<x.size(); i++){ // 小的, 再照舊畫
      line(x.get(i), y.get(i), x.get(i-1), y.get(i-1));
    }
  }
}
void mouseDragged(){
  x.add(mouseX);
  y.add(mouseY);
}
void mousePressed(){ //滑鼠按下去時,建(新的) 資料結構 
  x = new ArrayList<Integer>(); xx.add(x);
  y = new ArrayList<Integer>(); yy.add(y);
}

week02-7

// week02_7_keyPressed_if_key_s_for_for_println_vertex_beginShape
ArrayList<Integer> x, y; // 先有2個還沒準備好的資料結構
ArrayList<ArrayList<Integer>> xx = new ArrayList<ArrayList<Integer>>();
ArrayList<ArrayList<Integer>> yy = new ArrayList<ArrayList<Integer>>();
PImage img;
void setup(){
  size(400, 400);
  img = loadImage("cute.png");
} // 記得把圖檔, (像上週一樣)拉到程式碼裡
void draw(){
  background(img);
  fill(255, 200); // 半透明的色彩 白色 ,alpha值是128
  rect(0, 0, 400, 400); // 畫超大的四邊形,全部蓋住
  // 上面是 week02_4, 下面用迴圈,從資料結構取出來
  for(int I=0; I<xx.size(); I++){ // 大寫I 對應大的資料結構
    ArrayList<Integer> x = xx.get(I); // 取出裡面的小的資料結構
    ArrayList<Integer> y = yy.get(I);
    for(int i=1; i<x.size(); i++){ // 小的, 再照舊畫
      line(x.get(i), y.get(i), x.get(i-1), y.get(i-1));
    }
  }
}
void keyPressed(){
  if(key=='s' || key=='S'){
    for(int I=0; I<xx.size(); I++){ // 大寫I 對應大的資料結構
      ArrayList<Integer> x = xx.get(I); // 取出裡面的小的資料結構
      ArrayList<Integer> y = yy.get(I);
      println("beginShape();");
      for(int i=1; i<x.size(); i++){ // 小的, 再照舊畫
        println("vertex(" + x.get(i) + ", " + y.get(i) + ");");
      }
      println("endShape();");
    }
  }
}
void mouseDragged(){
  //println("vertex(mouseX, mouseY);");
  //println("vertex(" + mouseX + ", " + mouseY +");"); // 不要在這裡印
  x.add(mouseX);
  y.add(mouseY);
}
void mousePressed(){ //滑鼠按下去時,建(新的) 資料結構 
  x = new ArrayList<Integer>(); xx.add(x);
  y = new ArrayList<Integer>(); yy.add(y);
}

week02-8

// week02_8_homework is here
ArrayList<Integer> x, y; // 先有2個還沒準備好的資料結構
ArrayList<ArrayList<Integer>> xx = new ArrayList<ArrayList<Integer>>();
ArrayList<ArrayList<Integer>> yy = new ArrayList<ArrayList<Integer>>();
PImage img;
void setup(){
  size(400, 400);
  img = loadImage("cute.png");
} // 記得把圖檔, (像上週一樣)拉到程式碼裡
void draw(){
  background(img);
  fill(255, 200); // 半透明的色彩 白色 ,alpha值是128
  rect(0, 0, 400, 400); // 畫超大的四邊形,全部蓋住
  // 上面是 week02_4, 下面用迴圈,從資料結構取出來
  for(int I=0; I<xx.size(); I++){ // 大寫I 對應大的資料結構
    ArrayList<Integer> x = xx.get(I); // 取出裡面的小的資料結構
    ArrayList<Integer> y = yy.get(I);
    for(int i=1; i<x.size(); i++){ // 小的, 再照舊畫
      line(x.get(i), y.get(i), x.get(i-1), y.get(i-1));
    }
  }
  noFill();
  strokeWeight(5);
  draw1();
}
void keyPressed(){
  if(key=='s' || key=='S'){
    for(int I=0; I<xx.size(); I++){ // 大寫I 對應大的資料結構
      ArrayList<Integer> x = xx.get(I); // 取出裡面的小的資料結構
      ArrayList<Integer> y = yy.get(I);
      println("beginShape();");
      for(int i=1; i<x.size(); i++){ // 小的, 再照舊畫
        println("vertex(" + x.get(i) + ", " + y.get(i) + ");");
      }
      println("endShape();");
    }
  }
}
void mouseDragged(){
  //println("vertex(mouseX, mouseY);");
  //println("vertex(" + mouseX + ", " + mouseY +");"); // 不要在這裡印
  x.add(mouseX);
  y.add(mouseY);
}
void mousePressed(){ //滑鼠按下去時,建(新的) 資料結構 
  x = new ArrayList<Integer>(); xx.add(x);
  y = new ArrayList<Integer>(); yy.add(y);
}
void draw1(){
vertex(138, 22);
vertex(138, 25);
vertex(138, 26);
vertex(138, 31);
vertex(138, 34);
vertex(138, 35);
vertex(138, 36);
vertex(138, 38);
vertex(138, 39);
vertex(138, 40);
vertex(138, 42);
vertex(138, 45);
vertex(140, 46);
vertex(140, 47);
vertex(140, 49);
vertex(140, 50);
vertex(140, 51);
vertex(140, 52);
vertex(140, 53);
vertex(141, 54);
vertex(141, 55);
vertex(141, 56);
vertex(141, 57);
vertex(141, 59);
vertex(141, 60);
vertex(142, 61);
vertex(142, 63);
vertex(142, 64);
vertex(142, 65);
vertex(142, 66);
vertex(142, 68);
vertex(140, 68);
vertex(139, 68);
vertex(138, 68);
vertex(137, 68);
vertex(136, 68);
vertex(135, 68);
vertex(134, 67);
vertex(133, 67);
vertex(132, 65);
endShape();
beginShape();
vertex(169, 21);
vertex(170, 21);
vertex(171, 21);
vertex(172, 20);
vertex(172, 19);
vertex(174, 19);
vertex(175, 18);
vertex(176, 18);
vertex(177, 18);
vertex(179, 17);
vertex(180, 17);
vertex(181, 17);
vertex(183, 17);
vertex(183, 16);
vertex(185, 16);
vertex(186, 14);
vertex(188, 14);
vertex(189, 14);
vertex(190, 14);
vertex(192, 14);
vertex(193, 14);
vertex(194, 14);
vertex(195, 14);
vertex(196, 15);
vertex(197, 16);
vertex(197, 17);
vertex(197, 19);
vertex(197, 20);
vertex(197, 21);
vertex(197, 22);
vertex(197, 24);
vertex(197, 25);
vertex(197, 26);
vertex(197, 28);
vertex(197, 29);
vertex(197, 30);
vertex(197, 31);
vertex(197, 33);
vertex(197, 34);
vertex(197, 35);
vertex(196, 37);
vertex(196, 38);
vertex(195, 38);
vertex(194, 38);
vertex(193, 38);
vertex(191, 38);
vertex(189, 39);
vertex(189, 40);
vertex(187, 40);
vertex(186, 40);
vertex(185, 41);
vertex(182, 41);
vertex(181, 42);
vertex(180, 42);
vertex(178, 42);
vertex(177, 42);
vertex(176, 42);
vertex(174, 42);
vertex(173, 42);
vertex(171, 42);
vertex(170, 44);
vertex(169, 44);
vertex(168, 44);
endShape();
beginShape();
vertex(166, 20);
vertex(167, 21);
vertex(169, 22);
vertex(169, 24);
vertex(169, 25);
vertex(169, 27);
vertex(169, 29);
vertex(169, 30);
vertex(169, 32);
vertex(169, 33);
vertex(169, 34);
vertex(169, 37);
vertex(169, 39);
vertex(169, 40);
vertex(169, 43);
vertex(169, 44);
vertex(169, 45);
vertex(169, 46);
vertex(169, 47);
vertex(169, 48);
vertex(169, 49);
vertex(169, 54);
vertex(171, 56);
vertex(171, 57);
vertex(171, 58);
vertex(171, 61);
vertex(173, 62);
vertex(174, 62);
vertex(175, 62);
vertex(177, 62);
vertex(178, 62);
vertex(179, 62);
vertex(180, 62);
vertex(182, 62);
vertex(183, 62);
vertex(184, 60);
vertex(186, 60);
vertex(187, 60);
vertex(188, 60);
vertex(190, 59);
vertex(191, 58);
vertex(192, 56);
vertex(194, 56);
vertex(195, 56);
vertex(196, 56);
vertex(196, 55);
vertex(197, 55);
vertex(199, 54);
vertex(199, 53);
vertex(201, 52);
vertex(201, 51);
vertex(202, 51);
vertex(203, 51);
vertex(205, 51);
vertex(206, 50);
vertex(206, 49);
vertex(207, 49);
vertex(208, 48);
vertex(208, 47);
vertex(209, 46);
vertex(209, 45);
endShape();
beginShape();
vertex(182, 22);
vertex(183, 23);
vertex(183, 24);
vertex(184, 24);
vertex(184, 26);
vertex(184, 27);
vertex(184, 28);
vertex(184, 29);
vertex(184, 31);
vertex(184, 32);
vertex(184, 33);
vertex(185, 35);
vertex(185, 36);
endShape();
beginShape();
vertex(239, 21);
vertex(239, 20);
vertex(239, 19);
vertex(240, 18);
vertex(241, 17);
vertex(242, 17);
vertex(243, 17);
vertex(245, 17);
vertex(247, 16);
vertex(249, 16);
vertex(250, 16);
vertex(251, 16);
vertex(252, 16);
vertex(252, 17);
vertex(253, 19);
vertex(253, 20);
vertex(253, 21);
vertex(253, 22);
vertex(253, 24);
vertex(253, 25);
vertex(253, 26);
vertex(253, 28);
vertex(253, 30);
vertex(252, 31);
vertex(251, 34);
vertex(250, 34);
vertex(248, 34);
vertex(248, 36);
vertex(248, 37);
vertex(248, 38);
vertex(248, 40);
vertex(248, 43);
vertex(247, 43);
vertex(246, 45);
vertex(246, 46);
vertex(245, 46);
vertex(244, 46);
vertex(243, 46);
vertex(243, 45);
vertex(242, 44);
vertex(241, 44);
vertex(240, 44);
vertex(239, 44);
vertex(239, 43);
vertex(237, 43);
endShape();
beginShape();
vertex(239, 24);
vertex(239, 25);
vertex(239, 26);
vertex(239, 27);
vertex(240, 28);
vertex(240, 30);
vertex(240, 31);
vertex(240, 32);
vertex(240, 33);
vertex(240, 35);
vertex(240, 36);
vertex(240, 37);
vertex(240, 39);
vertex(240, 40);
vertex(240, 41);
vertex(240, 42);
vertex(240, 44);
vertex(240, 45);
vertex(240, 46);
vertex(239, 48);
vertex(239, 49);
vertex(239, 50);
vertex(239, 51);
vertex(239, 53);
vertex(239, 54);
vertex(239, 55);
vertex(239, 56);
vertex(239, 58);
vertex(239, 59);
endShape();
beginShape();
vertex(270, 16);
vertex(271, 16);
vertex(275, 16);
vertex(277, 16);
vertex(278, 16);
vertex(279, 16);
vertex(281, 16);
vertex(283, 16);
vertex(284, 16);
vertex(285, 17);
vertex(286, 18);
vertex(287, 19);
vertex(288, 19);
vertex(289, 19);
vertex(289, 20);
vertex(290, 20);
vertex(292, 20);
vertex(293, 20);
vertex(294, 20);
vertex(296, 21);
vertex(297, 21);
vertex(298, 21);
vertex(299, 22);
vertex(300, 23);
endShape();
beginShape();
vertex(290, 23);
vertex(290, 25);
vertex(291, 26);
vertex(291, 27);
vertex(291, 28);
vertex(291, 29);
vertex(291, 31);
vertex(291, 32);
vertex(291, 33);
vertex(291, 35);
vertex(291, 36);
vertex(291, 37);
vertex(291, 38);
vertex(291, 40);
vertex(291, 41);
vertex(291, 42);
vertex(291, 44);
vertex(291, 45);
vertex(291, 46);
vertex(291, 47);
vertex(291, 49);
vertex(291, 50);
vertex(291, 51);
vertex(291, 52);
vertex(291, 55);
vertex(290, 57);
vertex(290, 58);
vertex(290, 59);
vertex(290, 62);
vertex(290, 65);
vertex(290, 67);
vertex(289, 68);
vertex(289, 69);
vertex(287, 71);
vertex(287, 72);
vertex(286, 74);
vertex(285, 76);
vertex(284, 76);
vertex(283, 76);
vertex(283, 77);
vertex(282, 77);
vertex(280, 77);
vertex(280, 76);
vertex(279, 76);
vertex(277, 75);
vertex(276, 73);
vertex(275, 73);
vertex(275, 72);
endShape();
beginShape();
vertex(274, 35);
vertex(274, 36);
vertex(274, 37);
vertex(275, 38);
vertex(276, 39);
vertex(276, 40);
vertex(276, 41);
vertex(277, 42);
vertex(277, 44);
vertex(277, 45);
vertex(277, 46);
vertex(277, 47);
vertex(277, 48);
vertex(276, 48);
vertex(275, 49);
vertex(273, 50);
vertex(273, 51);
vertex(272, 51);
vertex(271, 50);
vertex(270, 49);
vertex(270, 47);
vertex(270, 46);
vertex(269, 44);
vertex(268, 43);
vertex(268, 42);
vertex(268, 41);
vertex(268, 40);
vertex(268, 38);
vertex(268, 37);
vertex(268, 36);
vertex(268, 35);
vertex(269, 35);
vertex(270, 35);
vertex(272, 34);
vertex(273, 34);
vertex(274, 34);
vertex(275, 35);
endShape();
beginShape();
vertex(329, 32);
vertex(331, 32);
vertex(332, 32);
vertex(333, 32);
vertex(334, 32);
vertex(336, 32);
vertex(337, 32);
vertex(338, 32);
vertex(339, 32);
vertex(339, 33);
vertex(340, 34);
vertex(341, 34);
vertex(342, 34);
vertex(343, 35);
vertex(344, 35);
vertex(345, 36);
vertex(345, 37);
vertex(346, 37);
vertex(347, 37);
vertex(348, 37);
vertex(350, 37);
vertex(351, 38);
vertex(352, 40);
vertex(353, 40);
vertex(354, 41);
vertex(354, 42);
vertex(354, 43);
vertex(355, 43);
vertex(355, 44);
vertex(355, 46);
vertex(354, 47);
vertex(353, 49);
vertex(353, 50);
vertex(351, 51);
vertex(351, 53);
vertex(351, 55);
endShape();
beginShape();
vertex(343, 39);
vertex(343, 41);
vertex(342, 42);
vertex(342, 43);
vertex(342, 45);
vertex(341, 46);
vertex(341, 47);
vertex(341, 48);
vertex(341, 50);
endShape();
beginShape();
vertex(328, 53);
vertex(330, 52);
vertex(330, 51);
vertex(332, 51);
vertex(333, 51);
vertex(334, 51);
vertex(336, 51);
vertex(337, 51);
vertex(338, 51);
vertex(339, 51);
vertex(341, 51);
vertex(342, 51);
vertex(343, 51);
vertex(346, 51);
vertex(347, 51);
vertex(349, 51);
vertex(350, 51);
vertex(351, 51);
vertex(352, 51);
endShape();
beginShape();
vertex(331, 35);
vertex(331, 36);
vertex(331, 38);
vertex(331, 39);
vertex(331, 40);
vertex(331, 41);
vertex(331, 43);
vertex(331, 44);
vertex(331, 45);
vertex(331, 46);
vertex(331, 48);
vertex(331, 49);
vertex(331, 50);
vertex(331, 51);
vertex(331, 53);
vertex(331, 54);
vertex(331, 55);
vertex(331, 57);
vertex(331, 58);
vertex(331, 59);
vertex(331, 60);
vertex(331, 62);
vertex(331, 63);
vertex(331, 64);
vertex(331, 65);
vertex(331, 67);
vertex(331, 68);
vertex(331, 69);
vertex(331, 71);
vertex(331, 72);
vertex(335, 72);
vertex(338, 72);
vertex(339, 72);
vertex(341, 72);
vertex(342, 72);
vertex(344, 72);
vertex(345, 72);
vertex(347, 72);
vertex(349, 72);
vertex(351, 72);
vertex(353, 73);
vertex(353, 74);
vertex(355, 74);
vertex(356, 75);
vertex(358, 75);
vertex(360, 75);
vertex(361, 75);
vertex(362, 75);
vertex(362, 74);
endShape();
}