week02-12750840

week02_1_fill_noStroke_rect

//week02_1_fill_noStroke_rect
size(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);

week02_2_for_for_if_rect

//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);
  } //下面才是真的程式碼 開始執行程式
}

week02_3_void_setup_void_draw

//week02_3_void_setup_void_draw

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

 

week02_4_PImage_loadingImage_background_fill_printin

//week02_4_PImage_loadingImage_background_fill_printin
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_5a_combine_02_4_and_02_3_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);//畫超大的四邊形全部蓋住
  //上面02_4 下面02_3
  stroke(255,0,0);//紅色的線
  if(mousePressed) line(mouseX, mouseY, pmouseX, pmouseY);
}

week02_5_ArrayList_Integer_new_for_size_get_add_mouseDragge

//week02_5_ArrayList_Integer_new_for_size_get_add_mouseDragge
//要利用資料結構,把歷史軌跡記起來
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);//畫超大的四邊形全部蓋住
  //上面02_4 下面02_3
  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_ArrayList_ArrayList_Integer_for_mousePressed

//week02_6_ArrayList_ArrayList_Integer_for_mousePressed
//想要很多段,不要一筆畫一直接著畫
ArrayList<Integer> x, y;//先有兩個還沒準備好_ 的(小的)資料結構,等mousePresses再新增準備
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);//畫超大的四邊形全部蓋住
  //上面02_4 下面02_3
  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_keyPressed_if_key_s_for_for_println_vertex_beginShape_endShape

//week02_7_keyPressed_if_key_s_for_for_println_vertex_beginShape_endShape
//想要很多段,不要一筆畫一直接著畫
ArrayList<Integer> x, y;//先有兩個還沒準備好_ 的(小的)資料結構,等mousePresses再新增準備
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);//畫超大的四邊形全部蓋住
  //上面02_4 下面02_3
  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'){ //如果按下英文的大小寫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);
}