BK Week06 typhoon + pendulum

Processing 程式碼

匯入衛星圖

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


利用 list.txt 一次匯入好多張照片 動起來
// 老師準備了 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張
}


匯入大圖 開小視窗 利用mouse 放大 縮小 移動畫面
// 整合上週 & 今天的程式
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(0); //白背景
  translate(x, y);
  scale(s);
  image(img, 0, 0);
}
void mouseDragged() {
  x += mouseX - pmouseX;
  y += mouseY - pmouseY;
}
void mouseWheel(MouseEvent e) {
  // 中心 + 真實座標*s == mouseX,mouseY
  // 真實座標 == ((mouseX,mouseY) - 中心) / s

  // 如果有 s 縮放, 把新的中心算出來
  // 舊中心 + 真實座標*舊s == 新中心 + 真實座標*新s

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



畫一個單擺 利用 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, 40, 40);
}
void mouseDragged() {
  x = mouseX;
  y = mouseY;
}


加上 綠色 紅色 的線 判斷單擺的重心
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); //長度2
  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() {
  x = mouseX;
  y = mouseY;
}


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


再利用sin加上 藍色線 代表方向力 之後可以靠這個判斷加速度的值
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); //長度2
  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(); //長度1
  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() {
  x = mouseX;
  y = mouseY;
}


會動了 但重力太重了 尚未完成......
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); //長度2
  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);
  stroke(0, 0, 255); //藍色線往右下
  line(x, y, x+N.x, y+N.y);
  
  v.x += N.x / 1000;
  v.y += N.y / 1000;
  x += v.x;
  y += v.y;
}
PVector v = new PVector(); //球的速度, 一開始是0
void mouseDragged() {
  x = mouseX;
  y = mouseY;
}