Jia的互動技術日誌 Week02

 ☝1

今天的第一個程式是應景的小程式

因為今天下午的第一堂課剛好遇到 921 防災演練

老師很認真的去翻閱了圖書館的資料和過去的震波資訊

發現在上週 9月15日 在花蓮西寶國小有地震

我們到 GDMS 中央氣象署地震觀測網 註冊帳號後可以下載相關資料

今天要獲得的是 地震波形繪圖

資料選擇 (其實我們也都是第一次使用，不太清楚)

下載 > 等待下載 > 下載內容 : Show Plot

有點小小的 選取範圍可以放大

可以查看每一個點的資料

這是量測出來地震某個方向的數值

HLE : -1042, -3479.7, 1003.7, -1669, -1639.6, -14219, -3655.1, -4917, 9363.2, -4271.8, -24, 681

開始寫程式啦

先匯入陣列

在 java 中讀入陣列的寫法

float 代表浮點數

[ ] 陣列

{ 數字,數字 };

畫一個正方形代表房子

rect(200,200,100,100)

淡淡的背景與小房子

我們想讓房子晃起來

加上 dx 的數值

讓房子有東西向的變化

地震來了 房子搖晃搖晃

float dx 設定 dx 的移動量

float dx = HLE[???]; 陣列裡面裝什麼呢？

算一下有幾個數值 有12筆

所以 int N=12; 有12個數字

frameCount 從無到有走了多少格

frameCount%N 

0%12 0格 1%12 1格 2%12 2格 ...

float dx = HLE[frameCount%N]/100; (除100只是因為數值都是幾千想縮小數字而已)

左右方向晃動

接著我們想匯入其他方向晃動的數值

使用一樣的方式

HLN: -17090, -13711, -22888, -19631, -23818, -18573,-19636,-15648,-18256,-15721,-17776,-15581

HLZ: 11323, 10563, 16417, 10003, 12566, 19520,6046.7,25954,12589,11481,11319,11670

放入 HLN 資料

dy 和 dx 寫法一樣 加入南北向搖晃的數值

frameRate(10) 一秒鐘播十幀

慢速播放 因為剛才搖晃太快

上下左右搖

💾 程式碼存檔區

float [] HLE = {-1042, -3479.7, 1003.7, -1669, -1639.6, -14219, -3655.1, -4917, 9363.2, -4271.8, -24, 681};
float [] HLN = {-17090, -13711, -22888, -19631, -23818, -18573,-19636,-15648,-18256,-15721,-17776,-15581};
int N=12;
void setup(){
  size(500,500);
  frameRate(10);
}
void draw(){
  background(#FFFFF2);
  float dx = HLE[frameCount%N]/100;
  float dy = HLN[frameCount%N]/100;
  rect(200+dx,300+dy,100,100);
}

✌2

我們今天的第二個程式
我們想讀入圖片

PImage P是P語言 Image 代表我要讀入圖片

順帶一提
橘橘的字 像是 float int PImage 代表形狀
藍藍的字 像是 image() loadImage() size() 代表有用的函式

有幾個要注意的重點！
首先是 要注意檔名！
再來要把圖片拉進程式！！！
(我試過了，只要我沒拉入就執行 程式一定會掛掉)

image(img,0,0);
image(定義的名稱,x,y);


還有一個沒有很建議的寫法
image(img,0,0,300,300);
                         長   寬
但運算起來會比較慢，最好還是直接改好圖片大小
💾 程式碼存檔區
PImage img = loadImage("chair.png");
size(500,500);
image(img,80,50);
👌3
結合第一第二個程式 想讀入圖片又能互動
為什麼不能寫 PImage img = loadImage("chair.png");
因為 不能又寫互動模式又寫直接模式 所以 img = loadImage( ); 要寫在 void setup() 中
那 PImage img;為什麼寫在外面？
這樣所有都可以被宣告到
結論：在外面宣告可以，呼叫函式不行

把圖片變成可以互動的 用 mouseX mouseY控制

不太滿意，有殘影

💾 程式碼存檔區
PImage img;
void setup(){
  size(600,600);
  img = loadImage("chair.png");
}
void draw(){
  image(img,mouseX,mouseY,300,400);
}
之前老師畫了一個公主下樓梯的圖

模仿一下

imageMode(CENTER); 滑鼠在正中間(圖片可以在滑鼠正中間)

if(mousePressed){
    image(imgBox,mouseX,mouseY,250,250);
  }else{
  image(img,200,300,300,400);
  }  如果滑鼠壓下去 畫視窗，滑鼠放開畫仙杜瑞拉  

下樓梯的公主(好難畫)

💾 程式碼存檔區
PImage img,imgBox;
void setup(){
  size(600,600);
  img = loadImage("princess.png");
  imgBox = loadImage("box.png");
}
void draw(){
  imageMode(CENTER);
  if(mousePressed){
    image(imgBox,mouseX,mouseY,250,250);
  }else{
  image(img,200,300,300,400);
  }
}
👋最後

上傳 GitHub 吧