インタラクションデザイン最終発表

インタラクションデザインの最終発表では「お絵かきセッションカフェ」をつくった。

カフェのマスターがお題（もととなるデッサン）を出し、それにお客さんがお絵かきして、１つの作品を作るというもの。



ムービー←とても重い

↓実装はテクササイズで学んだ技術を使ってこんな感じ。


ペン立てからペンをとるとお絵かきができるようになるけど、
客①が描いてるときは客②は描けない、客②が描いてるときは客①は描けないっていうように、
順番に描いていけるようにした。


マスターがお題を出すっていうところはボタンを押すと下絵が表示される感じ。
ペン立ての中にＣｄｓを入れ、光の量でペンが置いてあるかどうかを判別。
誰かが描いてるときだとランプ（LED）が光る。

　
パソコン２台をFlashMediaServer2でつなぎ、描いた絵がお互いの画面にも反映される。


絵はカフェの壁にも反映される。

↓参考にしたのは以下のページ
s.h.log
テクササイズ第６回　FlashMediaServer2
テクササイズ第９回　インタラクションのためのプロトタイプ入門
インタラクションデザイン第７回
noughts（おまけ）

↓メモ
■複数のパソコンを使ったSharedObjectの使い方

サーバーが入ってる方のＰＣのIP Addressを確認する
　「スタート」
　→「ファイル名を指定して実行」
　→”cmd”と入力
　→黒い画面が出てきたら”ipconfig”と入力
　→IP Addressを確認

”localhost”を確認したIP Addressに書き換える。
（localhostだと自分のＰＣ内でしか共有されない）

Special thanks　はたやんさん、すがのさん、いつきさん

id第７回課題

■ArduinoとFlashを連携する

【ブレッドボードへの接続】

まず、下の図のように、
抵抗を挟んで、LEDのアノード（＋）を１２番へ、LEDのカソード（－）をGNDへつなぎます。


【プログラム】

Arduinoを起動して、プログラムを書きます。

//FFLASH_MOTOR_ON_OFF

int motorPin = 12;//モーターを接続するピン
int val = 0;//シリアルで受信した値を記憶しておく変数

void setup() {
pinMode(motorPin,OUTPUT); //モーターを接続するピンを出力モードに設定する。
Serial.begin(9600); // シリアルポートに接続する。
}

void loop () {
/* シリアルポートを読む*/
val = Serial.read();

/*-1がきた場合は何も受信していない*/
/*何か来ていた場合で'H'だったときはモーターを回す。'L'だった場合はモーターを止める。*/
if (val != -1) {
if (val == 'H') {
digitalWrite(motorPin, HIGH);
Serial.println("MOTOR_ON");
}
else if(val =='L'){
digitalWrite(motorPin, LOW);
Serial.println("MOTOR_OFF");
}
}
}

※ここでは、LEDでやっているので、
　モーターを回す→LEDを光らせる、モーターを止める→LEDを消す　になります。

【FlashNetComportConnector（FNCC）の設定】

FlashNetComportConnector（FNCC）を起動します。

IP Addressが127.0.0.1になっていることを確認し、read modeをLineにします。
ArduinoのSerialPortとFNCCのPortNumberを同じにします。
（ArduinoのSerialPortはTools→SerialPortで確認することができます）

【アップロード】

Arduinoのプログラムをコンパイルし、アップロードします。（第５回参照）


プログラムのアップロードが終わったらFNCCのStartボタンを押します。

【Flashとの連携】

フラッシュ（xmlsocket_dcMotor_on_off_20061106_02.swf）を起動ます。（flaファイル）
ONを押すとLEDが光り、OFFを押すとLEDが消えます。


FNCCのView Logにチェックをつけとくと、
ちゃんと信号が送られているか確認することができます。


LEDではなく、モーターをつけるとこんな感じになります。

id第６回課題

■Arduinoでセンサーを使う

【ブレッドボードへの接続】

まず、下の図のように、Arduinoをブレッドボードに接続します。

①POWERの５VとＧＮＤをそれぞれブレッドボードにつなぐ。
②Analog０番ピンとＣｄＳをつなぐ。
③Analog０番ピンとつないだ足は抵抗を通して5Vにつなぐ。
③ＣｄＳのもう片方の足をGNDはGndにつなぐ。

【プログラム】

プログラムを書きます。

/***
0.1秒毎に ADC0 の値をシリアル通信で送る
4で割って、10bitを8bitにする

CPU: ATMEGA8 16MHz
Compiler: Arduino 0005 Alpha
Date: 2006/10/12
Author: Sho Hashimoto
WebSite: http://web.sfc.keio.ac.jp/~t03792sh/
***/

int ad;

void setup()
{
Serial.begin(9600);
}


void loop()
{
ad = analogRead(0); //AD値を取る
Serial.println(ad/8); //シリアルを通してパソコンに値を渡す
delay(100);
}

【アップロードと実行】

コンパイルし、アップロードします。（第５回参照）
センサーの値はSerial Monitorで見ることができます。



■Arduinoでデジタルインプットを使う

【ブレッドボードへの接続】

まず、下の図のようにArduinoをブレッドボードに接続します。

①POWERの５VとGndをそれぞれブレッドボードにつなぐ。
②12番ピンとLEDのアノード（＋）、LEDのカソード（－）とＧＮＤをつなぐ。
③Digital７番ピンとスイッチをつなぐ。
④７番ピンとつないだ足は抵抗を通して5Vにつなぐ。
⑤スイッチのもう片方の足はＧＮＤとつなぐ。

【プログラム】

プログラムを書きます。

//スイッチ押された回数をカウントする

int ledPin = 12; // choose the pin for the LED
int inPin = 7; // choose the input pin (for a pushbutton) インプットピンの番号を指定
int val = 0; // variable for reading the pin status
int count=0;//スイッチの押された回数
boolean check=true;//押されっぱなしはカウントしない

void setup() {
Serial.begin(9600);
pinMode(ledPin, OUTPUT); // declare LED as output
pinMode(inPin, INPUT); // declare pushbutton as input
}

void loop(){
val = digitalRead(inPin); // read input value インプットピンからのデジタル値を取得（HIGH」か「LOW」で値が返ってくる）
if (val == HIGH) { //スイッチオフ（スイッチを押していない状態でDigital７番ピンが５Vにつながっている）
digitalWrite(ledPin, HIGH); // turn LED OFF
check=false;
} else { //スイッチオン（スイッチを押すとDigital7番ピンはGndにつながる）
if(check==false){
check=true;
count++;
Serial.println(count);
digitalWrite(ledPin, LOW); // turn LED ON
}
}
}

【アップロードと実行】

コンパイルし、アップロードします。
スイッチを押した回数はSerial Monitorで見ることができます。

id第５回課題（Arduino）

■ArduinoについているLEDを光らせる


（↑Arduino）

まず、Arduinoを立ち上げ、
File→Sketchbook→Examples→led_blink　を開きます。


「Verify」ボタンを押し、コンパイルします。


「Done Compiling」と表示されたらコンパイル成功です。


「Upload to I/O Board」ボタンを押し、
その後すばやくArduino基盤上の「リセットボタン」を押します。
（リセットボタンの位置は上の写真を参照）


Arduino基盤にプログラムが書き込まれます。
成功すると「Done Uploading」と表示されます。
LEDが点滅します。


　void loop()
　{
　digitalWrite(ledPin, HIGH); // sets the LED on
　delay(1000); // waits for a second
　digitalWrite(ledPin, LOW); // sets the LED off
　delay(1000); // waits for a second
　}

delay(1000)は「１秒待つ」という意味なので、
（）内の数字を変えると点滅のタイミングを変えることが出来ます。


■LEDを交互に光らせる


ブレッドボードとArduinoをつなぎます。
LEDを２個用意し、
LEDのプラスをそれぞれArduinoの１１番と１２番に、
LEDのマイナスをArduinoのGNDにつなぎます。

さっき使ったプログラムを次のように変えます。
（青くなっているところが変えたところです）

　int ledPin1 = 11; // LED connected to digital pin 11 　
　int ledPin2 = 12; // LED connected to digital pin 12
　void setup()
　{
　pinMode(ledPin1, OUTPUT); // sets the digital pin as output
　pinMode(ledPin2, OUTPUT); // sets the digital pin as output
　}

　void loop()
　{
　digitalWrite(ledPin1, LOW); // sets the LED on
　digitalWrite(ledPin2, HIGH); // sets the LED off
　delay(1000); // waits for a second
　digitalWrite(ledPin1, HIGH); // sets the LED on
　digitalWrite(ledPin2, LOW); // sets the LED off
　delay(1000); // waits for a second
　}

これを実行するとLEDが交互に点滅します。

id第５回課題（Flash）

Flashの課題。
復習も兼ねて、一からルーレット作ってみました。
テクササイズのときより、すごくスムーズに作れたかも

課題１：Flash8 Professionalでフレーム、フレームレート、レイヤー、トゥィーンを使って、独自のルーレットアニメーションを作る

ルーレット
flaファイル

課題２：課題1を改造して、Startボタン、Stopボタンなどがついたちゃんとしたルーレットを作る


flaファイル