再..再一單就好 互動技術概論 - Week01 - Mouse

 開啟processing程式

一開始視窗的文字會很小，所以要開啟偏好設定把文字改大。

如果要使用中文字，則字形要選擇中文 (Ex : 標楷體)。

跑出來的結果會是一個500x500的視窗。

把背景加上顏色。

程式碼：

//直接模式
size(500, 500); //window大小(寬,高)
background(50,50,150); //背景(R,G,B)

加上與滑鼠的互動。

滑鼠經過的地方都會留下白點。

程式碼：

//互動模式
void setup() //設定
{
  size(500,500);
  background(50,50,150);
}

void draw() //畫圖，每秒畫60次
{
  ellipse(mouseX, mouseY, 8, 8);
}

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

將繪圖設定改成按下滑鼠後才出現線條。

程式碼：

//互動模式
void setup() //設定
{
  size(500,500);
  background(255);
}

void draw() //畫圖，每秒畫60次
{
  if(mousePressed) //如果滑鼠有按下去
  {
    line(mouseX, mouseY, pmouseX, pmouseY);
    //畫線(原本滑鼠的座標到pmouseX,pmouseY的位置)
  }
}

按下數字鍵改變顏色。

如果要存下畫的圖片，要加一個save的程式碼。

程式碼：

//互動模式
void setup() //設定
{
  size(500,500);
  background(255);
}

void draw() //畫圖，每秒畫60次
{
  if(mousePressed) //如果滑鼠有按下去
  {
    line(mouseX, mouseY, pmouseX, pmouseY);
    //畫線(原本滑鼠的座標到pmouseX,pmouseY的位置)
  }
}

void keyPressed()
{
  if(key=='1') stroke(150,50,50); //按下數字1，筆的顏色變成深紅
  if(key=='2') stroke(150,150,50); //按下數字2，筆的顏色變成青綠
  if(key=='3') stroke(50,50,150); //按下數字3，筆的顏色變成深藍
  if(key=='s'||key=='S') save("output.png"); //存檔
}
--------------------------------------------------------------------------------------
用按鍵更改筆的粗細。


利用'+'和'-'改變筆的粗度。


程式碼：

//互動模式
void setup() //設定
{
  size(500,500);
  background(255);
}

void draw() //畫圖，每秒畫60次
{
  if(mousePressed) //如果滑鼠有按下去
  {
    line(mouseX, mouseY, pmouseX, pmouseY);
    //畫線(原本滑鼠的座標到pmouseX,pmouseY的位置)
  }
}

int w=1;
void keyPressed()
{
  if(key=='1') stroke(150,50,50); //按下數字1，筆的顏色變成深紅
  if(key=='2') stroke(150,150,50); //按下數字2，筆的顏色變成青綠
  if(key=='3') stroke(50,50,150); //按下數字3，筆的顏色變成深藍
  if(key=='s'||key=='S') save("output.png"); //存檔
  if(key=='+')strokeWeight(++w); //按下'+'筆的粗度變粗。
  if(key=='-')strokeWeight(--w);  //按下'-'筆的粗度變細。
  print(w);
}