Jia的互動技術日誌 Week01

☝1

這學期的第一個程式

先用簡單的一行程式來複習大一學過的

設置一個視窗

size( 500 , 500 ); 設定視窗大小 ( 寬度 , 高度 );

太無聊了，加上背景吧

background(255,255,0);  背景色(紅,綠,藍);

255,255,0 是黃色 背景變成黃色

💾 程式碼存檔區

///直接模式 Immediate Mode
size(500,500);//視窗大小(寬,高);
background(255,255,0);//背景色(紅,綠,藍);

剛才我們寫的是 直接模式 Immediate Mode

以前學的也都是這樣，打什麼就出現什麼

這學期我們要教的是 互動模式 Interactive Mode (Active Mode)

可以互動會更好玩一些

✌2

所以我們今天的第二個程式

在大一大二學 C 時要 int main(){ ... }

這裡也一樣，只是改成

void setup(){ ... }  設定 剛才的視窗大小、背景顏色就要寫在這邊

void draw(){ ... }  畫圖 每秒畫60次

ellipse(mouseX,mouseY,8,8);  ellipse 是畫圓 用滑鼠控制 8,8 是圓的長寬

執行效果 可以連續的畫出圓

💾 程式碼存檔區

//互動模式 Interactive Mode (Active Mode)
void setup(){ //設定
  size(500,500);
  background(255,255,0);
}
void draw(){ //畫圖 每秒畫60次
  ellipse(mouseX,mouseY,8,8);
}

👌3

因為看了一下學姐的作品

想知道線條怎麼畫出來的

稍微修改一下前面的程式

把背景改成白色

為什麼只有 255 因為白色是 255,0,0

下面比較重要

if(mousePressed){ //如果 mouse有按下去 } 

按下滑鼠...

line(mouseX,mouseY,pmouseX,pmouseY);

畫線(滑鼠座標mouseX,mouseY,到之前滑鼠座標pmouseX,pmouseY);

執行效果 可以自由的畫線

💾 程式碼存檔區

//互動模式 Interactive Mode (Active Mode)
void setup(){ //設定
  size(500,500);
  background(255); //改白色背景 背景(255);
}
void draw(){ //畫圖 每秒畫60次
  if(mousePressed){ //如果 mouse有按下去
    line(mouseX,mouseY,pmouseX,pmouseY);
  }//畫線(滑鼠座標mouseX,mouseY,到之前滑鼠座標pmouseX,pmouseY);
}

剛才學會畫線條了

那是不是知道如何變色後就可以製作簡單的小畫家呢

void keyPressed(){ //如果有按下keyboard的key}

如果按下鍵盤...和上學期電腦圖學的寫法一樣

if(key=='1') ...

stroke 是筆觸 配上RGB就能切換不同顏色的筆刷

執行效果 原始線條為黑色 當按下1時畫出紅色線條 2為綠色 3為藍色

那怎麼畫完儲存呢？

一樣我們寫一個 save 就可以在檔案總管中找到 output.png 這張圖

簡單畫完之後 按下小寫s或大寫S即可保存車車圖片

💾 程式碼存檔區

//互動模式 Interactive Mode (Active Mode)
void setup(){ //設定
  size(500,500);
  background(255); //改白色背景 背景(255);
}
void draw(){ //畫圖 每秒畫60次
  if(mousePressed){ //如果 mouse有按下去
    line(mouseX,mouseY,pmouseX,pmouseY);
  }//畫線(滑鼠座標mouseX,mouseY,到之前滑鼠座標pmouseX,pmouseY);
}
void keyPressed(){ //如果有按下keyboard的key
  if(key=='1')stroke(255,  0,  0); //如果按下數字1 筆觸是紅色
  if(key=='2')stroke(  0,255,  0); //如果按下數字2 筆觸是綠色
  if(key=='3')stroke(  0,  0,255); //如果按下數字3 筆觸是藍色
  if(key=='s'||key=='S')save("output.png");
}

錯誤

prcessing 有個很棒的地方，和之前用的不一樣

不需要完整寫完並編譯後才會得到錯誤資訊

打的過程中遇到灰色底線就是錯誤資訊提醒

項此時就在提示 我們上面已經寫了 void setup() 是互動模式寫法

但下面又寫了 line()... 為直接模式

另一個 processing 的好處 只要我們不清楚任何用法時

選取後按右鍵 > 在參考文件裡找選取的字...

馬上會跳轉至解釋頁面

內容很仔細可以看見格式或是一些效果如何撰寫

所以我們從文件了解到

可以改變筆刷的粗細

strokeWeight(數字);

當按下 +鍵時，筆刷加粗10

當按下 - 鍵時，比說減少1

但是剛才的寫法太過生硬

💾 程式碼存檔區

//互動模式 Interactive Mode (Active Mode)
void setup(){ //設定
  size(500,500);
  background(255); //改白色背景 背景(255);
}
void draw(){ //畫圖 每秒畫60次
  if(mousePressed){ //如果 mouse有按下去
    line(mouseX,mouseY,pmouseX,pmouseY);
  }//畫線(滑鼠座標mouseX,mouseY,到之前滑鼠座標pmouseX,pmouseY);
}
void keyPressed(){ //如果有按下keyboard的key
  if(key=='1')stroke(255,  0,  0); //如果按下數字1 筆觸是紅色
  if(key=='2')stroke(  0,255,  0); //如果按下數字2 筆觸是綠色
  if(key=='3')stroke(  0,  0,255); //如果按下數字3 筆觸是藍色
  if(key=='s'||key=='S')save("output.png");
  if(key=='+')strokeWeight(10);
  if(key=='-')strokeWeight(1);
}

我們設置一個W  int w=1;

所以可以輕鬆地控制筆刷大小

有個同學很聰明一邊按+一邊畫圖

所以我效仿了他，有毛筆的效果

因為最下方有

println(w);

在我們按壓+ -的同時會在小黑印出 w 當下的值

💾 程式碼存檔區

//互動模式 Interactive Mode (Active Mode)
void setup(){ //設定
  size(500,500);
  background(255); //改白色背景 背景(255);
}
void draw(){ //畫圖 每秒畫60次
  if(mousePressed){ //如果 mouse有按下去
    line(mouseX,mouseY,pmouseX,pmouseY);
  }//畫線(滑鼠座標mouseX,mouseY,到之前滑鼠座標pmouseX,pmouseY);
}
int w=1;
void keyPressed(){ //如果有按下keyboard的key
  if(key=='1')stroke(255,  0,  0); //如果按下數字1 筆觸是紅色
  if(key=='2')stroke(  0,255,  0); //如果按下數字2 筆觸是綠色
  if(key=='3')stroke(  0,  0,255); //如果按下數字3 筆觸是藍色
  if(key=='s'||key=='S')save("output.png");
  if(key=='+')strokeWeight(++w);
  if(key=='-')strokeWeight(--w);
  println(w);
}

👋最後

老師介紹了一個網頁

是 processing 的論壇

帶著大家註冊帳號

教學如何在這個論壇上撰寫與發佈

也可以去看看老師之前發佈過的

最後一樣上傳 github