Week01 陳心瑜

FB: 2016互動技術
facebook.com/groups/2016interaction
2016interaction.blogspot.com
(請記得加標籤 03160011_XXX, Week01)

TODO: 看學長姐的作品 2015interaction.blogspot.com

TODO:.做出會動的憤怒鳥

/按播放執行
/help->reference 看程式碼
/

1.先畫一條線
   line(座標,座標,座標,座標)
2.加顏色
   Tools->color selector->選顏色->copy
3.程式碼:

stroke(#106CE8);
line(10,10, 90,10);

4.改視窗大小

   size(     ,     );

5.改線的粗細

   strokeWeight(大小);

6.畫出個彈弓

   先找點座標

   line(100,200, 200,300);

   line(300,200, 200,300);

   line(200,300, 200,400);

7.可以動的彈弓

   要用函式

   void setup(){

      size(600,600);

      stroke(#106CE8);

     strokeWeight(10);

  }

  void draw(){

    background(255);//背景顏色白色不然會出現很多線

    line(100,200,mouseX,mouseY);

    line(300,200,mouseX,mouseY);

    line(100,200, 200,300);///!!!

    line(300,200, 200,300);///!!!

    line(200,300, 200,400);

  }

8.改兩種顏色
 void setup(){
      size(600,600);
  }
  void draw(){
    background(255);//背景顏色白色不然會出現很多線
     stroke(#E3009F);
     strokeWeight(10);
    line(100,200,mouseX,mouseY);
    line(300,200,mouseX,mouseY);
     stroke(#2E14E0);
     strokeWeight(10);
    line(100,200, 200,300);///!!!
    line(300,200, 200,300);///!!!
    line(200,300, 200,400);
  }

9.加圖片
   把圖檔直接拉到裡面

10.在彈弓上的憤怒鳥
   PImage img;
 void setup(){
      size(600,600);
      img=loadImage("bird.png");///放圖檔
      imageMode(CENTER);///把圖放在中心
  }
  void draw(){
    background(255);
     stroke(#E3009F);//線的顏色
     strokeWeight(5);//線的粗細
    line(100,200,mouseX,mouseY);
    image(img,mouseX,mouseY,100,100);//呼叫畫圖函式
    line(300,200,mouseX,mouseY);
     stroke(#2E14E0);//彈弓顏色
     strokeWeight(10);//粗細
    line(100,200, 200,300);///!!!
    line(300,200, 200,300);///!!!
    line(200,300, 200,400);
  }