2025電腦圖學: week02-12750113

week02-1_fill_noStroke_rect

rect:四邊形 recrangle

noStroke() : 不要畫框線

fill(238) : 填充色彩

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_stroke_if_mousePressed

// week02_3_void_setup_void_draw_line
void setup(){ // 一開始，設定1次(貼上剛剛 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++){ // 左手 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_loadImage_fill_println

先照上周一樣把圖片拉進去

把原本的圖片變成底圖

調整透明度，讓圖像有描圖紙一樣

一開始出來是白色

用 mouseX 調整成滑鼠座標在哪，那裡的圖片就會有顯示出來

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

一開始

滑鼠移動到圖片上

week02-5

// week02_5a_combine02_4_and_02_3_bad
// 要描圖，卻出錯，畫不出來
PImage img;
void setup(){
  size(400,400);
  img = loadImage("usachi.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_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("usachi.png");
} // 記得把圖檔，(像上周一樣)拉到程式碼裡
void draw(){
  background(img);
  fill(255,200); // 半透明的色彩，白色，alpha(透明度)值是128
  rect(0,0,400,400); // 畫超大的四邊形，全部蓋住
  // 上面是 week02_4，下面是 week02_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_可以讓線條分開

// week02_6
// 想要有很多段，不要「一筆畫」一直接著畫
ArrayList<Integer> x,y; // 先有兩個「還沒準備好」的(小的)資料結構，等mousePressed，再新增準備
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("usachi.png");
} // 記得把圖檔，(像上周一樣)拉到程式碼裡
void draw(){
  background(img);
  fill(255,200); // 半透明的色彩，白色，alpha(透明度)值是128
  rect(0,0,400,400); // 畫超大的四邊形，全部蓋住
  // 上面是 week02_4，下面是 week02_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_畫圖有座標

// week02_7_
// 想要有很多段，不要「一筆畫」一直接著畫+座標
ArrayList<Integer> x,y; // 先有兩個「還沒準備好」的(小的)資料結構，等mousePressed，再新增準備
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("usachi.png");
} // 記得把圖檔，(像上周一樣)拉到程式碼裡
void draw(){
  background(img);
  fill(255,200); // 半透明的色彩，白色，alpha(透明度)值是128
  rect(0,0,400,400); // 畫超大的四邊形，全部蓋住
  // 上面是 week02_4，下面是 week02_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(){
  // 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_7_keyPressed_if_key_s_for_for_println_vertex_beginShape
// 想要有很多段，不要「一筆畫」一直接著畫
ArrayList<Integer> x,y; // 先有兩個「還沒準備好」的(小的)資料結構，等mousePressed，再新增準備
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("usachi.png");
} // 記得把圖檔，(像上周一樣)拉到程式碼裡
void draw(){
  background(img);
  fill(255,200); // 半透明的色彩，白色，alpha(透明度)值是128
  rect(0,0,400,400); // 畫超大的四邊形，全部蓋住
  // 上面是 week02_4，下面是 week02_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'){ // 如果按下英文小寫 or 大寫 S 想 save 存權的話
    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++){
        println("vertex(" + x.get(i)+ ", " + y.get(i) + ");");
      } // 改在 keyPressed() 按下 s 或 S 時，再印全部
    }
  }
}
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);
}

2025電腦圖學

2025年2月27日星期四

week02-12750113

沒有留言:

張貼留言

2025年2月27日 星期四

week02-12750113

沒有留言:

張貼留言

2025年2月27日星期四