02160473賴緯漢_2015互動技術概論 week1

今天WEEK1的基本練習

1.畫出一個方形

程式碼：
rect("X位置,Y位置,X的大小,Y的大小");
EX:  rect("0,0,20,30");

2.輸出一個圖像

程式碼：
PImage img = loadImage("https://eatplaytranslate.files.wordpress.com/2014/12/523.jpg");
//輸入影像網址
image(img,0,0,100,100);
//輸出圖片

3.影像隨著滑鼠跑

程式碼：
PImage img;
void setup()
{
  size(800,600);//螢幕大小
  img = loadImage("https://eatplaytranslate.files.wordpress.com/2014/12/523.jpg");
}//輸入影像
void draw()
{
image(img,mouseX,mouseY,100,100);//圖片座標位置改成滑鼠移動位置
}//輸出影像

4.輸出下載下來的圖片

先下載一張圖片

點開Show Sketch Folder

把圖片拉進程式框框內並確認
Sketch Folder內有建立data資料
夾，內有你所拉進來的圖

程式碼：
PImage img;
void setup()
{
  size(800,600);
  img = loadImage("12945.png");
}
void draw()
{
image(img,mouseX,mouseY,100,100);
}

5.吃角子老虎(slot machine)

先把下載下來的多張圖片拉進去













程式碼：
PImage [] img = new PImage[5];
void setup()
{
  size(133*5,133);//螢幕大小
  img[0] = loadImage("icon0.png");//五張圖片
  img[1] = loadImage("icon1.png");
  img[2] = loadImage("icon2.png");
  img[3] = loadImage("icon3.png");
  img[4] = loadImage("icon4.png");
}
int y=0,change=0;
void draw()
{
  for(int i=0;i<5;i++)
  {
    image(img[(i+change)%5],i*133,y);//眼前的圖
    image(img[(i+change+1)%5],i*133,y-133);//隱藏的圖
  }
  y+=10;//每次跑程式y跑10
  if(y>133)//若y大於133
  {y=0; change++;}//y等於0
}