week02_12750156_黃映綺

 課堂作業1 fill_noStroke_rect

//看不到 File-Preference，字型放大

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);

課堂作業2 for_for_if_rect

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);

   }//下面才是真的程式碼, 完成畫格子的任務

}

課堂作業3  void_setup_void_draw_stroke_if_mousePressed_line

void setup(){ //一開始,設定1次(貼上week02_2的程式)

  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

課堂作業4  PImage_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); //畫超大的四邊形，全部蓋住

}

課堂作業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_5但線卻無法上去

  stroke(255,0,0); //紅色的線

  if(mousePressed) line(mouseX, mouseY, pmouseX, pmouseY);

}

課堂作業5 ArrayList_Integer_new_for_size_get_add_mouseDragged

//要利用資料結構,把歷史軌跡 記起來

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);

}

課堂作業6  

ArrayList_ArrayList_Integer_for_for_mousePressed_new_add

//想要有很多段, 不要「一筆畫」 一直接著畫

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++){

    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);

}

課堂作業7 keyPressed_if_key_s_for_for_println_vertex_beginShape_endSghape

//想要有很多段, 不要「一筆畫」 一直接著畫

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++){

    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'){ //如果按下英文的小寫 或 大寫 s 想 save 存檔的話

    for(int I=0; I<xx.size(); I++){ //大寫I 對應大的資料結構

      ArrayList<Integer> x = xx.get(I); // 取出裡面的小的資料結構

      ArrayList<Integer> y = yy.get(I);

      println("beginShape();"); //beginShape

      for(int i=1; i<x.size(); i++){ // 小的，再照舊畫

        println("vertx(" + x.get(i) + "," + y.get(i) + ");" ); 

      } //改再 keyPressed() 按下s 或Ｓ 時 再印全部!

      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_homework

//想要有很多段, 不要「一筆畫」 一直接著畫

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++){

    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'){ //如果按下英文的小寫 或 大寫 s 想 save 存檔的話

    for(int I=0; I<xx.size(); I++){ //大寫I 對應大的資料結構

      ArrayList<Integer> x = xx.get(I); // 取出裡面的小的資料結構

      ArrayList<Integer> y = yy.get(I);

      println("beginShape();"); //beginShape

      for(int i=1; i<x.size(); i++){ // 小的，再照舊畫

        println("vertex(" + x.get(i) + "," + y.get(i) + ");" ); 

      } //改再 keyPressed() 按下s 或Ｓ 時 再印全部!

      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(){

  beginShape();

vertex(143,112);

vertex(155,112);

vertex(175,112);

vertex(210,112);

vertex(240,112);

vertex(270,112);

vertex(292,112);

vertex(305,112);

vertex(312,112);

vertex(313,112);

endShape();

}