再.. 再課兩單.. 互動技術概論 - Week02

今天有921的地震演練，所以今天是有關於地震的小程式。

首先先把會晃動的地區畫出來。

程式碼：

float [] HLE = {-1042, -3479.7, 1003.7, -1669, -1639.6, -14219, -3655.1, -4917, 9363.2, -4271.8, -24, 681};
void setup()
{
  size(500, 500);
}
void draw()
{
  background(#FFFFF2);
  rect(200+dx, 200,  100, 100);
}

----------------------------------------------------------------------------------

加上了x軸的變數之後，就會發現白色方格開始左右晃動。

程式碼：

float [] HLE = {-1042, -3479.7, 1003.7, -1669, -1639.6, -14219, -3655.1, -4917, 9363.2, -4271.8, -24, 681};
int N =12;
void setup()
{
  size(500, 500);
}
void draw()
{
  background(#FFFFF2);
  float dx = HLE[frameCount%N]/100;
  rect(200+dx, 200,  100, 100);
}

----------------------------------------------------------------------------------

做完x軸的晃動後，再加上y軸的晃動。

程式碼：

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

----------------------------------------------------------------------------------

簡單的讀入圖檔。

* 打完程式碼後要記得把圖片拉進程式碼裡。

程式碼：

PImage img = loadImage("chair_1.JPG");
size(300, 300);
image(img, 0, 0);

----------------------------------------------------------------------------------
加上滑鼠，圖片就會跟著滑鼠移動。

程式碼：
PImage img;
void setup()
{
  size(600, 600);
  img = loadImage("chair_1.JPG");
}
void draw()
{
  image(img, mouseX, mouseY, 300,300);
}

----------------------------------------------------------------------------------
利用剛剛的程式，讓圖片看起來像下樓的樣子。

程式碼：
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);
  }
  else
  {
    image(img, 300,300,  220,300);
  }
}