XX - Week01

=========================================================================

FIRST

這學期要利用Processing來做互動技術的課程

1.先利用設定來讓中文字顯示跟調整字體的大小，並利用程式碼秀出畫面

2.讓背景的顏色改變一下，這個是直接模式Immediate Mode

size(500,500);//視窗大小(寬,高)
background(255,255,0); //背景(紅,綠,藍)

3.在draw函式中用ellipse就可呈現滑鼠移動時會有圓點跟著動的畫面，這個是互動模式 Interactive Mode (Active Mode)

void setup(){ //設定
  size(500,500);
  background(255,255,0);
}
void draw(){//畫圖 每秒畫60次
  ellipse(mouseX, mouseY, 8, 8);
}

註：移動的越快圓與圓的間隔就越大

4.將ellipse改寫為mousePressed再加上line就可以畫出線條了

  if(mousePressed){//如果mouse有按下去的話
    line(mouseX, mouseY, pmouseX, pmouseY);
  }//畫線(滑鼠座標mouseX,mouseY,到之前滑鼠座標pmouseX,pmouseY);

5.執行後就可以動手畫畫看了

6.加上keyPressed就能夠將線條換顏色了

void keyPressed(){
  if(key=='1') stroke(255, 0, 0);
  if(key=='2') stroke(0, 255, 0);
  if(key=='3') stroke(0, 0, 255);
  if(key=='s' || key=='S') save("output.png");
}

7.實做出來只需要按下數字鍵就可以改變顏色了

(註：要切換到英文輸入法)

8.多加上save("檔名");就可以直接幫你儲存當下所畫出的畫

  if(key=='s' || key=='S') save("output.png");

9.按下s或是S鍵後儲存，就能在資料夾中看到你的檔案了

10.先將上面的程式碼都先放到在github新增的2023interaction倉庫裡面

11.在keyPressed中加上筆畫的粗細(輕重)，利用strokeWeight就能做到

  if(key=='+') strokeWeight(10);
  if(key=='-') strokeWeight(1);

12.實際做做看吧，會發現粗細很明顯，是因為目前只用了10跟1的大小

13.將10跟1改成由變數去控制大小

int w;
void keyPressed(){
  if(key=='1') stroke(255, 0, 0); //紅
  if(key=='2') stroke(0, 255, 0); //綠
  if(key=='3') stroke(0, 0, 255); //藍
  if(key=='s' || key=='S') save("output.png"); //存成png檔
  if(key=='+') strokeWeight(++w);
  if(key=='-') strokeWeight(--w);
  println(w);
}

14.按下+-就可以改變粗細了，最下面會印出你目前的粗細大小為多少

(註：不能為負號，程式會當掉)

15.先註冊一個OpenProcessing的帳號，按下右上角的CREATE A SKETCH

16.可以放程式碼在上面，記得要選擇最右邊的Pjs檔案，可以試著執行看看