2024互動技術: SY-BlingBangBang week05 cwa typhoon images & 單擺

[TODO]

上課內容：

cwa typhoon images(照片匯入)

// week05_1_cwa_typhoon_images
// 存檔後，Ctrl-k 開檔案總管，看 data 目錄裡，一堆圖檔
PImage img = loadImage("TWI_IR1_CR_800-2024-10-02-08-00.jpg");
size(800,800);
background(img); //若圖的大小，與size()相同，可直接把圖當背景



cwa typhoon images
// week05_2_cwa_typhoon_array_loadStrings
// 老師準備了 list.txt 裡面有299行(很多圖檔的檔名)
int N=299; //剛好有299張圖
PImage[] imgs = new PImage[299]; //準備好299張圖對應的陣列
void setup(){
  size(800,800);
  //把list.txt的299行，放入filenames裡
  String[] filenames = loadStrings("list.txt");
  for(int i=0; i<N; i++){ //把每一張圖都讀進來
    imgs[i]= loadImage(filenames[i]);
  } //這個迴圈會跑很久，因為圖檔很多
}
void draw(){
  int i = frameCount % N; //照時間輪 %N 取餘數，以免超過陣列大小
  background(imgs[i]); //現在要顯示第i張圖
}


cwa typhoon images(移動+縮放)
// week05_3_cwa_typhoon_2750
// 整合上週 & 今天的程式
PImage img;
void setup(){
    size(500,500); //小視窗、大圖片
    img = loadImage("LCC_VIS_TRGB_2750-2024-10-02-07-40.jpg");
}
float s=1.0, x=0, y=0;
float realX=0, realY=0;
void draw(){
  background(255); //白背景
  translate(x,y); //要加上一個移動量 x,y
  scale(s);
  image(img, 0, 0);
}
void mouseDragged(){ //void mouseDragged()
  x += mouseX - pmouseX;
  y += mouseY - pmouseY;
}
void mouseWheel(MouseEvent e){
  realX = (mouseX - x)/s; //地圖上，真的座標
  realY = (mouseY - y)/s; //地圖上，真的座標
  float oldS = s;
  if(e.getCount()<0) s*=1.1; //大於、小於，可決定縮放的方向
  else s*=0.9;
  x = x+realX*oldS - realX*s;
  y = y+realY*oldS - realY*s;
}


cwa typhoon images(補充：超出圖片，縮小會自動拉回)
// week05_3_cwa_typhoon_2750
// 整合上週 & 今天的程式
PImage img;
void setup(){
    size(500,500); //小視窗、大圖片
    img = loadImage("LCC_VIS_TRGB_2750-2024-10-02-07-40.jpg");
}
float s=1.0, x=0, y=0;
float realX=0, realY=0;
void draw(){
  background(255); //白背景
  translate(x,y); //要加上一個移動量 x,y
  scale(s);
  image(img, 0, 0);
}
void mouseDragged(){ //void mouseDragged()
  x += mouseX - pmouseX;
  y += mouseY - pmouseY;
}
void mouseWheel(MouseEvent e){
  realX = (mouseX - x)/s; //地圖上，真的座標
  realY = (mouseY - y)/s; //地圖上，真的座標
  float oldS = s;
  if(e.getCount()<0) s*=1.1; //大於、小於，可決定縮放的方向
  else s*=0.9;
  x = x+realX*oldS - realX*s;
  y = y+realY*oldS - realY*s;
  if(x>0) x=0;
  if(y>0) y=0;
  if(s<0.2){
    x=0;
    y=0;
    s=0.2;
  }
}




單擺(線條+拉線條)
// week05_4_pendulum_mouseDragged_x_y
void setup(){
  size(400,600);
}
float x=200, y=300;
void draw(){
  background(255);
  line(200,100,x,y);
  ellipse(x,y,30,30);
}
void mouseDragged(){
  x=mouseX;
  y=mouseY;
}


單擺(線條+拉線條+計算輔助線PVector-->綠、紅色線)
// week05_5_pendulum_cos_sin_draw_line
void setup(){
  size(400,600);
}
float x=200, y=300;
void draw(){
  background(255);
  stroke(0); //原來是黑色的線
  line(200,100,x,y);
  ellipse(x,y,30,30);
  stroke(255,0,0); //紅色往下的線
  line(x,y,x,y+100);
  PVector d = new PVector(x-200, y-100).normalize(); //長度1
  PVector d2 = new PVector(0, 1);
  float g = PVector.dot(d,d2);
  d.mult(100*g);
  stroke(0,255,0); //綠色往左下的線
  line(x, y, x+d.x, y+d.y);
}
void mouseDragged(){ //void mouseDragged()
  x=mouseX;
  y=mouseY;
}


PVector 物件導向-用法
// week05_6_PVector_new_PVector_x_y
void setup(){
  size(400,600);
  c= new PVector(200,100); //new 出新物件
  p= new PVector(200,130); //new 出新物件
}
PVector c, p; //PVector 物件導向
void draw(){
  background(255);
  ellipse(c.x, c.y, 10, 10); //使用物件的 c.x
  ellipse(p.x, p.y, 10, 10);
}


PVector 物件導向-用法(數值修改)
// week05_6_PVector_new_PVector_x_y
void setup(){
  size(400,600);
  c= new PVector(200,100); //new 出新物件
  p= new PVector(300,230); //new 出新物件
}
PVector c, p; //PVector 物件導向
void draw(){
  background(255);
  ellipse(c.x, c.y, 10, 10); //使用物件的 c.x
  ellipse(p.x, p.y, 10, 10);
}



單擺(線條+拉線條+計算輔助線PVector-->藍色線)
// week05_7_pendulum_PVector_normalize_dot_mult
void setup(){
  size(400,600);
}
float x=200, y=300;
void draw(){
  background(255);
  stroke(0); //原來是黑色的線
  line(200,100,x,y);
  ellipse(x,y,30,30);
  stroke(255,0,0); //紅色往下的線
  line(x,y,x,y+100);

  PVector d = new PVector(x-200, y-100).normalize(); //長度1
  PVector d2 = new PVector(0, 1);
  float g = PVector.dot(d,d2);
  d.mult(100*g);
  stroke(0,255,0); //綠色往左下的線
  line(x, y, x+d.x, y+d.y);

  PVector N = new PVector(d.y, -d.x).normalize();
  N.mult(100*sin((g))); //g是cos(a)，acos(g)就是角度a
  stroke(0,0,255); //藍色往右下的線
  line(x, y, x+N.x, y+N.y);
}
void mouseDragged(){ //void mouseDragged()
  x=mouseX;
  y=mouseY;
}


單擺(未成功)
// week05_8_pendulum_not_OK_PVector_sub_velocity
void setup(){
  size(400,600);
}
float x=200, y=300;
void draw(){
  background(255);
  stroke(0); //原來是黑色的線
  line(200,100,x,y);
  ellipse(x,y,30,30);
  stroke(255,0,0); //紅色往下的線
  line(x,y,x,y+100);

  PVector d = new PVector(x-200, y-100).normalize(); //長度1
  PVector d2 = new PVector(0, 1);
  float g = PVector.dot(d,d2);
  d.mult(100*g);
  stroke(0,255,0); //綠色往左下的線
  line(x, y, x+d.x, y+d.y);

  PVector N = PVector.sub(d2.mult(100), d);
  //PVector N = new PVector(d.y, -d.x).normalize(); //未成功
  //N.mult(100*sin((g))); //g是cos(a)，acos(g)就是角度a //未成功
  stroke(0,0,255); //藍色往右下的線
  line(x, y, x+N.x, y+N.y);
  
  
  v.x += N.x / 1000;//x += N.x / 100;
  v.y += N.y / 1000;//y += N.y / 100;
  x += v.x;
  y += v.y;
}
PVector v = new PVector(); //球的速度，一開始是0
void mouseDragged(){ //void mouseDragged()
  x=mouseX;
  y=mouseY;
}