week13 葉正聖老師示範

提醒同學們,明天12/2(一) 是我們互動技術概論第13週的上課。
(1) 請不要忘了帶 Arduino Starter Kit 的實驗設備到學校哦!
(2) 明大要上課的內容是 Project 05 06 07 哦! 同學們今晚可以預習一下。
(3) 我們上課的目的,是為了讓同學們在期末完成自己構思的創意作品,同學們可以邊上課邊思考哦!
(4) 明天同學們記得帶 9V 的方塊電池(25元-60元一顆), 還有找找家裡有沒有一些要用電池的廉價的玩具, 我們可以在學校享受動手改裝的樂趣!


今天的重點在 Project 05, 06, 07 三個

常見問題整理:
問題1: 不會動? 沒有上程式,所以自然就不會動啦!
問題2: 不能上傳? COM Port設錯了, 所以不能上傳!
問題3: 按鈕沒反應? 按鈕在麵包板上沒插好, 請換按鈕試試, 要紮實!
問題4: 跑出來怪怪的? 請試右上角 Serial Monitor 監看!
問題5: 有怪味道? 小心!!  5V 不可以接到 0V (短路!)
問題6: 電容插錯了! 所以訊號怪怪的!

===
展示去年學長姐們做的划船遊戲
展示 http://mmdays.com/2013/10/23/interview-designers-liwei-chan-document/
介紹9V電池怎麼接 (Vin 及GND)

===
Arduino 這個字怎麼發音呢?
1. 聽聽 Google 怎麼說 http://translate.google.com/#it/en/arduino
2. 官方討論區的討論 http://forum.arduino.cc/index.php?topic=7016.0
3. 義大利!

===
想玩3D Printer 嗎? 自己 DIY 做一台吧!
http://jimmyeestudio.blogspot.tw/2013/10/3d-printer-3d-prusa-i3-fablab-taipei-diy.html

week12 葉正聖老師示範

1. Arduino Projects Book 的 Project 03 及 Project 04

http://www.youtube.com/watch?v=yeqHtqOKjFo

http://blog.arduino.cc/2013/07/30/arduino-starter-kit-video-tutorials/
http://forum.arduino.cc/index.php?PHPSESSID=2lv70v95kt2ic2lvqcbos9q9n3&board=86.0


http://quarknet.fnal.gov/fnal-uc/quarknet-summer-research/QNET2011/project_files/teacher_files/Getting_Started_with_Arduino.pdf
http://www.slideshare.net/GonzaloSantiago/arduino-26585969


十二月將邀請叁式曾煒傑創辦人來演講哦!
http://www.thefwa.com/site/heineken-pioneering-bar
http://www.ultracombos.com/blog/archives/2041
http://www.npm.gov.tw/zh-tw/Article.aspx?sNo=04005119

week11 葉正聖老師示範

0. 發Arduno硬體: Arduino Starter Kit、Arduino Mega2560、Arduino Project Book, 每個人手上都有一個板子
0.1. 下載 Arduino 軟體: http://arduino.cc/en/Main/Software 選 1.0.5穩定版 即可

1. 練習第一個範例 File-Examples-Basic-Blink

2. 修改程式,變成展得比較特別的作法

3.

week10 葉正聖老師示範, 期中作品展示

week08 葉正聖老師示範

今天是要做期中作品

2. 示範血條

week07 葉正聖老師示範

兩個人交一份沒關係, 標注你的學號姓名

1. 請列出你今天三個小時,要完成的事
2. 你在期中作品要做到什麼程度
3. Why? 你為什麼要做它

week06 葉正聖老師示範

week05 葉正聖老師示範

今天目標: (1) 會轉動的漂亮的花花, (2) 思考決定期中作品, (3)請用中文多寫一些心得及想要做的事 (老師可以讀)

廖中遠 HW04

PImage imgBird;

void setup() {

  size(400, 400);

  background(255);

  noStroke();

  colorMode(HSB, 100);

  for (int i = 0; i < 100; i++) {

    for (int j = 0; j < 100; j++) {

      stroke(i, j, 100);

      point(i, j);

    }

  }  

  //imgBird=loadImage("http://www.uusucai.com/d/file/gif/2013/04/24/14cfda7a5eb86e79690b087366dccd4d.gif");

  imgBird=loadImage("pen1.gif");

  imageMode(CENTER);

  cursor(imgBird);

  stroke(#000000);

  strokeWeight(1);  

  line(330, 20, 380, 20);

  strokeWeight(4);  

  line(330, 40, 380, 40);

  strokeWeight(10);  

  line(330, 70, 380, 70);

}

void draw() {

}

void mousePressed() {

  if (mouseX<100 && mouseY<100) stroke(mouseX, mouseY, 100);

  

  if(mouseX>300 && mouseY<30) strokeWeight(1);

  else if(mouseX>300 && mouseY<50) strokeWeight(4);

  else if(mouseX>300 & mouseY<90) strokeWeight(10);

}

void mouseDragged() {

  line(mouseX, mouseY, pmouseX, pmouseY);

}

void keyPressed() {

    if (key=='s')    save("draw.jpg");

  }

week04 葉正聖老師示範小畫家

課堂作業: (1) 做出你的小畫家,做得越好,分數越高 (老師沒有教到的功能你去找出來,分數更高)

課堂作業: (2) 目前的心得,請分享 (不要講太難)

week03 葉正聖老師示範

1. 今天目標: 畫出一個五子棋
1.1. 使用 Tool- Color Selector, 挑出你要的顏色, 可用 R,G,B 來描述,也可用 #0B33FF 之類的像亂碼的數字來設定顏色
1.2. 要畫外框,可以用 rect()來畫, 要修改填充的顏色可以用fill(), 要讓畫的內部不要填充, 可以查看 Help-Reference 後,在 fill()樓上樓下相關的地方找到你要的功能 (ex. noFill() )
1.3. 使用 stroke() 來調畫線stroke的顏色, 在 Help-Reference 裡面可以找 stroke 相關的功能,像是比較粗的 stroke 可以用 strokeWeight() 來設定權重粗細
1.4. 想要畫裡面的細黑線,可以用 line() 來畫,配上不同的 strokeWeight() 粗細




2.

1. Google 美女工程師, 程式語言用 Ruby, C++, Processing 

1.1. TODO: 請去找一下 Processing 寫出來的作品 

1.2. TODO: 用 Youtube 分享,按Blogger 把 HTML的 <iframe...> 貼在你的作業中

1.3. 下載 Processing 

2. TODO: 寫出你的第一個Processing 程式碼: Hello World 變 Hello Kitty

3. TODO: 請找一張圖,用小畫家(mspaint)輔佐你,畫出你的 Processing 圖, 並都貼出來。

4. TODO: 請寫下你的心得 (1) 你學了什麼東西, (2) 有什麼東西不懂, (3) , 還想學什麼

貼你覺得有意思的影片, 使用youtube 的分享, Blogger 分享, 兩邊都改成 HTML, 貼上 

HTML 

week02 葉正聖老師示範

1. Processing 啟動, 有問題的同學請再下載download
http://processing.org

2. 試 for迴圈

3. 試用 Processing-Help-Reference
3.1. 找 rect() 函式
3.2. 看看 rect() 樓上樓下的相關函式, 並嘗試畫出和老師不同的圖  [課堂作業1]

4. 那想要改變顏色呢?
4.1. fill() 是填充的顏色, stroke()是筆的顏色
4.2. 透明的顏色(alpha),其實也是顏色(color) [課堂作業2]把你獨一無二的圖,加點不同的色彩吧

5. 加一點點滑鼠的互動吧! 可以使用 mouseX 及 mouseY 的值,來進行色彩繽紛的運算

6. 亂數 random(數字上界) 來設定初始的亂數值 [課堂作業3] 利用mouseX,mouseY,random()做設計

 [課堂作業4] 請大家寫一下到現在的心得 (ex. 速度, 內容, 想學的東西, 期待、希望、夢想..)

Week01 葉正聖老師示範

0. 課程準備
0.1. 加入 課程FB社團
0.2. Google文件 填寫修課資料 (學號姓名,email,電話)
0.3. 加入 Blog, 設定

編交作業方式: tag: 000葉正聖老師, Week01, 00160011葉大明
逗號隔開, 學號姓名間不要有空格



1. 看一下去年學長姐們做的成果 (划船、吃角子老虎、數位手套、直昇機控制搖桿), 聖誔老公公下樓梯
2. 試著執行 Processing

size(600,600);
background(255, 0, 0);
rect(100,100, 200,200);

第二節課的範例
可以看一下老師做的 Angry Birds Brick
http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/

size(600,600);
background(255, 0, 0);
rect(100,100, 200,200);
PImage imgBird=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/bird.png");
PImage imgPig =loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/pig.gif");
image(imgBird, 0,0);
image(imgPig, 200,200,  100,100

第三節課的範例
PImage imgBird, imgPig;

void setup() {
  size(600, 600);
  imgBird=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/bird.png");
  imgPig =loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/pig.gif");
  imageMode(CENTER);
}

void draw() {
  background(255, 0, 0);
  image(imgBird, mouseX, mouseY);
  image(imgPig, 200, 200, 100, 100);
}

https://class.coursera.org/digitalmedia-001/lecture/index