Upload
yo-to
View
325
Download
2
Embed Size (px)
DESCRIPTION
2014/5/17(土)に開催された「html5j エンタメ技術部 第2回勉強会 〜 Web技術者のためのArduino入門 – 実践編 〜」で用いた資料や追加補足資料です。 下記の3つのうち、1つ目に関する資料です。 1)Arduinoの回路を組んでみる、プログラムで制御する 2)JavascriptでArduinoを制御してみる 3)Websocketによるセンサー情報の送受信 ※ イベントページ ⇒ http://atnd.org/events/50467
Citation preview
html5j エンタメ技術部
5/17(土)13:30~@インターネットイニシアティブ 17階 中会議室
~ Web技術者のためのArduino入門 ~
第2回勉強会
- 実践編(資料 1/2) -
本日の流れはじめに
Arduinoの回路を組んでみる、プログラムで制御する
(休憩)
JavascriptでArduinoを制御してみる
Websocketによるセンサー情報の送受信
(休憩)
自由課題、自由課題の内容共有
おわりに
この資料の内容
これらは別資料に
Arduino?公式サイトによると・・・(http://www.arduino.cc/)
Arduino is an open-source electronics prototyping platform based on flexible, easy-to-use hardware and software. It's intended for artists, designers, hobbyists and anyone interested in creating interactive objects or environments.
Arduino?こんな感じ?オープンソースのプロトタイピングプラットフォーム
簡単に扱えるハードウェアとソフトウェアのセット
アーティスト、デザイナー、趣味で利用する方など、どんな方でもインタラクティブなものがつくれますよ~♪
Arduino?ハードウェアの試作が簡単に!LEDを制御してみたり
温度・音・光センサーの入力を利用したハードウェアを作ったり
Perfumeの紅白歌合戦の衣装にも使われたとか・・・(http://www.daito.ws/work/nhk_kouhaku_63.html#3)
Arduino?Arduioに関するTEDトーク
マッシモ・バンジ「想像力をオープンソース化するArdurino」http://www.ted.com/talks/massimo_banzi_how_arduino_is_open_sourcing_imagination.html
何が必要?PC(Windows, Mac, Linux)
ハードウェア
Arduino基板
USBケーブル
ソフトウェア
Arduino IDE(オープンソース)
LEDを光らせるだけならこれだけ
回路を組んでみる前にArduino・電子工作の基本の話を
お手元の部品を実際に確認しつつ、お聞きください
回路を組んでみる前にArduino・電子工作の基本の話を
第1回勉強会 セッション3:「JavaScript と Arduino でオリジナルデバイスを作ろう」http://www.slideshare.net/YoshihiroIwanaga/javascript-arduino
※ 下記の資料の「ページ1~25」をご参照ください!
LEDを光らせてみる「エルチカ」 ⇒ プログラミングで言う 「Hello World !」
セッティングの補足
Arduino IDE を http://arduino.cc/en/Main/Software の「Download」から、 ご自身のOSにあったものを入手。
LEDを光らせてみる ~ おおまかな手順1. PCとArduinoをUSBケーブルで接続
2. Arduino IDE を起動
3. プログラムを開く
4. 実行
LEDを光らせてみる ~ プログラムを開く
IDEのメニュー内の「ファイル」から
> スケッチの例
> 01.Basics
> Blink
を開く
LEDを光らせてみる ~ プログラムを書きこんでみる
ここを押すIDEの上部のボタンの
ここに注目!!
実際に見てみましょう!!
PCにつないだだけで、いきなり光ってる!?
Arduinoの起動と終了送り込んだプログラムは、電源が入ると実行されます。電源を抜いても残ったままです。(出荷時にはエルチカのプログラムがすでに 入っていたり・・・)= つないだだけで、以前に送り込んだ プログラムがいきなり実行されたりします。
終了する、という操作はないため、終了させたいときは電源を切ればOKです。
プログラムを変更してみる
例えば、時間を 1/10 にしてみたり
~ プログラムが実際に送り 込まれているかを確認する
LEDを光らせてみる ~ 新規ファイルを作って プログラムを書く
ここを押すIDEの上部のボタンの
LEDを光らせてみる ~ 点滅速度を変える// 最初に1回だけ処理される部分
void setup() {
pinMode(13, OUTPUT); // 13番ピンを出力に設定}
// 繰り返し実行される部分void loop() {
digitalWrite(13, HIGH); // LEDを点ける delay(1000); // 1秒待つ digitalWrite(13, LOW); // LEDを消す delay(1000); // 1秒待つ
}
例えば「 delay(100); 」とかにしてみる。=「0.1秒待つ」処理になる
いろんな部品を試してみる!
とりあえず試してみる~ その2 ~
部品をつなぐ
実際にやってみましょう!!まずは、部品を接続
LEDを光らせてみる// 最初に1回だけ処理される部分
const int LED = 9; // 9番ピンにLEDをつないでいる
void setup() {
pinMode(LED, OUTPUT); // LEDに出力}
// 繰り返し実行される部分void loop() {
digitalWrite(LED, HIGH); // LEDを点ける delay(1000); // 1秒待つ digitalWrite(LED, LOW); // LEDを消す delay(1000); // 1秒待つ
}
ソースコードについては、こちらもご参照いただけます
https://github.com/yo-to/html5j-entech/tree/master/001
短縮URL http://goo.gl/95bGuo
⇒ 上記の中の「b1_Blink_9」
実際に見てみましょう!!
点滅!
さらに試してみる~ デジタルでアナログ ~
先ほどのプログラムの遅延をかなり小さくする
&割合を変えてみる
もう少し簡単な方法が!
LEDの明るさ、モーターの回転数等を制御する「analogWrite」
LEDを光らせてみる// 最初に1回だけ処理される部分
const int LED = 9; // 9番ピンにLEDをつないでいる
void setup() {
pinMode(LED, OUTPUT); // LEDに出力}
// 繰り返し実行される部分void loop() {
analogWrite(LED, 255); // 出力最大(値は 0~255)}
使えるピンが決まっているので注意!!
実際にやってみましょう!!
光ったまま
まずは、接続は先ほどと同じ
明るさを実際に変化させてみる
LEDでフェードイン/アウト// 最初に1回だけ処理される部分
const int LED = 9; // 9番ピンにLEDをつないでいる
int i = 0;
void setup() {
pinMode(LED, OUTPUT); // LEDに出力
}
// 繰り返し実行される部分
void loop() {
for(i=0; i<255; i++) {
analogWrite(LED, i); // 出力を徐々に大きくしていく
delay(10); // 変化が目に見えるように遅延を加える
}
for(i=255; i>0; i--) {
analogWrite(LED, i); // 出力を徐々に小さくしていく
delay(10);
}
}
https://github.com/yo-to/html5j-entech/tree/master/001
短縮URL http://goo.gl/95bGuo
⇒ 上記の中の「b3_Fade」
ソースコードについては、こちらもご参照いただけます
実際に見てみましょう!!
明るくなったり、暗くなったり(繰り返し)
さらに試してみる~ センサを使う ~
部品をつなぐ
CdS(硫化カドミウム)セル⇒ 強い光があたるほど、抵抗の値が 小さくなる
実際にやってみましょう!!まずは、部品を接続
光量によってLEDの点滅スピードが変化const int LED = 13;
int val = 0; // センサからの値を格納する変数
void setup() {
pinMode(LED, OUTPUT); // LEDに出力
// アナログの入力は自動設定されるので、記載しない
}
void loop() {
val = analogRead(0); // センサの値を読み込む
digitalWrite(LED, HIGH); // LEDをつける
delay(val); // センサの入力値が大きいほど遅延が大きくなる
digitalWrite(LED, LOW); // LEDを消す
delay(val);
}
光が強い(=抵抗が小さい)
⇒ アナログ入力の電流が 大きくなる
⇒ 遅延が大きくなるので、 LEDがゆっくり点滅
⇒ 暗くなるとLEDの点滅が 早くなる
https://github.com/yo-to/html5j-entech/tree/master/001
短縮URL http://goo.gl/95bGuo
⇒ 上記の中の「c1_Sensor」
ソースコードについては、こちらもご参照いただけます
実際に見てみましょう!!
①ここを手で覆ったり、覆った手を離したりすると、
②点滅する速度が速くなったり、ゆっくりになったり
シリアルモニタにセンサーの値を出力
シリアルモニタにセンサーの値を出力const int LED = 13;
int val = 0; // センサからの値を格納する変数
void setup() {
pinMode(LED, OUTPUT); // LEDに出力
// アナログの入力は自動設定されるので、記載しない
Serial.begin(9600); // デバッグログ出力用
}
void loop() {
val = analogRead(0); // センサの値を読み込む
Serial.println(val); // 改行付の出力
digitalWrite(LED, HIGH); // LEDをつける
delay(val); // センサの入力値が大きいほど遅延が大きくなる
digitalWrite(LED, LOW); // LEDを消す
delay(val);
}
先ほどのソースコードの「setup()」と「loop()」に左記の2行を追加
シリアルモニタにセンサーの値を出力 ~ モニタの表示
IDEのメニュー内の「ツール」から
> シリアルモニタ
を開く
⇒ ウィンドウが開き、そこに、プログラム実行時のセンサーの値が出力される
リファレンス公式: Arduino - Reference http://arduino.cc/en/Reference/HomePage
翻訳されたもの: Arduino 日本語リファレンス http://www.musashinodenpa.com/arduino/ref/
この資料の続きは、下記(2つ目の資料)になりますhttp://www.slideshare.net/yo-to/html5j-entech0002b