12750892-黃聖諺的week02課堂筆記

 12750892 week02 作業

課堂作業1:

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

課堂作業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++){ //左手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:

//week02_3_void_setup_void_draw
void setup(){ //一開始設定一次(貼上剛剛 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和之前的 pmouse

課堂作業4:

//week02_4_PImage_loadImage_background_fill_println
//新的開始，要描圖
PImage img;
void setup(){
  size(400,400);
  img = loadImage("funny.png");
} //記得把圖檔(像上周一樣)拉到程式碼中
void draw(){
  background(img);
  fill(255,mouseX);
  println(mouseX); //把 mouseX 的值，在下面「小黑」印出來
  rect(0,0,400,400); //畫超大的四邊形，全部蓋住
}

課堂作業5a:

//week02_5a_combine_02_4_and_02_3_bad
//要描圖卻出錯
PImage img;
void setup(){
  size(400,400);
  img = loadImage("funny.png");
} //記得把圖檔(像上周一樣)拉到程式碼中
void draw(){
  background(img);
  fill(255,200);
  rect(0,0,400,400); //畫超大的四邊形，全部蓋住
  //上面是 week02_4，下面是 week02-3 但線畫不上去
  stroke(255,0,0); //紅色的線
  if(mousePressed) line(mouseX, mouseY, pmouseX, pmouseY);
}

課堂作業5:

//week02_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("funny.png"); //每次新的檔案都要把圖拉進來
} //記得把圖檔(像上周一樣)拉到程式碼中
void draw(){
  background(img);
  fill(255,200);
  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:

//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("funny.png"); //每次新的檔案都要把圖拉進來
} //記得把圖檔(像上周一樣)拉到程式碼中
void draw(){
  background(img);
  fill(255,200);
  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);
}

課堂作業7