風船ポンポン １.入力装置作成

風船ポンポン　１.入力装置作成

  3月 03, 2017    dekapoppo

---

ずっとやりたかった、風船を使ったインタラクティブな作品にとりかかります！
目標は、１ヶ月間でこどもに遊んでもらえるようなカタチまで作る

・・・頑張ります！汗

これ、本当は昨年末のクリスマスに大々的に実践したかったんですが、
当時は公私でバタバタしてて自主制作どころじゃなかったです。。
海外から極小Arduinoとか面白アイテムとか大量に買い込んでたんだけどなぁ、トホホ。
結局、風船にレインボーLED入れて床に置いただけでした。
それはそれで、子供もはしゃいで楽しんでくれたのでよかったですけどね！

　やっぱり「触れる」のって楽しい！

　2016.クリスマス



さて、とりあえず今回は、風船タッチテストに便利なように入力装置作ってみた。
風船の中にショックセンサー入ってます。
空気抜けないように、ホットボンド多用しました。

データの流れは
風船の中のショックセンサー　→　Arduino　→　Mac (Processing)

とりあえず今日はここまで笑。



以下は、昨年末のショックセンサー初テストメモ（書きなぐりですが）を転載。
yoppaさんのサイトにはいつもお世話になってます。

---------------------
2016.10.15 memo
---------------------

初のアナログデータのグラフ（プロット）視覚化！！！！たのしい。

ショックセンサーからArduinoにアナログ入力（0～1024）、
それをProcessingでグラフ化！！

今回のミソ

※複数個のデータが１つにまとまったデータ群（時系列データ）のシリアル通信　★★

→要は、Arduinoで , で区切ってひとまとめにして送信。Processingで , で区切って分解。

http://yoppa.org/tau_bmaw13/4790.html

【テスト】

目的：
ショックセンサーの入力をProcessingに送信してビジュアル化

手順：

①ショックセンサーから値入力 (アナログ 0～512）
　それをArduinoで 0～255にリマップ

②シリアルでProcessingに通信。　<ここまでArduino処理>

　・・・例：　0,0 \n 512,255 \n 200,100　

③Processingでグラフにプロット , を読み取り値を分解。

   シリアル通信を読み取る。読み取ったデータをyの値としてsensors[]に一旦格納。

　それをx方向に追加していく。端までいったら新しいページに描画。

以下スケッチ

===========Code: Arduino ===============

	// to the pins used:
	const int analogInPin = 3; // Analog input pin that the potentiometer is attached to
	int sensorValue = 0; // value read from the pot
	int reMapValue = 0; // range remap to 255steps
	void setup() {
	// initialize serial communications at 9600 bps:
	Serial.begin(9600);
	}
	void loop() {
	// センサーの値を読む
	sensorValue = analogRead(analogInPin);
	// センサーからのアナログ値（電圧）を256SETPに変換
	reMapValue = map(sensorValue, 0, 512, 0, 255);
	// コンマ区切りで2個の値をシリアル送信
	Serial.print(sensorValue);
	Serial.print(",");
	Serial.println(reMapValue);
	// wait 2 milliseconds before the next loop
	delay(1);
	}

view raw shockSensor.ino hosted with ❤ by GitHub

===========Code: Processing=============

	/*
	* Arduino - Processingシリアル通信
	* センサーの値をグラフにプロット
	* Processing側サンプル
	*/
	import processing.serial.*;
	int NUM = 2; //センサーの数
	Serial myPort; // シリアルポート
	int[] sensors = new int[NUM]; //センサーの値を格納する配列
	int cnt; //カウンター
	// グラフの線の色を格納
	color[] col = new color[6];
	int pSize[] = {4,2}; //異なる２つのプロットサイズで
	void setup() {
	//画面設定
	size(800, 400);
	frameRate(60);
	// シリアルポートのリスト取得
	//println(Serial.list());
	// ポート番号とスピードを指定してシリアルポートをオープン
	String portName = Serial.list()[1];
	myPort = new Serial(this, portName, 9600);
	// 改行コード(\n)が受信されるまで、シリアルメッセージを受けつづける
	myPort.bufferUntil('\n');
	//グラフ初期化
	initGraph();
	}
	void draw() {
	// センサーの数だけ、グラフをプロット
	for (int i = 0; i < NUM; i++) {
	fill(col[i]);
	float tx = map(cnt, 0, width, 10, width); //左に余白10
	float ty = map(sensors[i], 0, 512,height-100,100); //上端がy=0のため、下端をベースに描画するにはこのリマップ←　※上下余白 100
	ellipse(tx, ty, pSize[i], pSize[i]);
	}
	// 画面の右端まで描画したら再初期化
	if (cnt > width) {
	initGraph();
	}
	//カウンタアップ
	cnt++;
	}
	//グラフの初期化
	void initGraph() {
	background(47);
	noStroke();
	cnt = 0;
	// グラフ描画の線の色を定義
	col[0] = color(255, 127, 31);
	col[1] = color(31, 255, 127);
	col[2] = color(127, 31, 255);
	col[3] = color(31, 127, 255);
	col[4] = color(127, 255, 31);
	col[5] = color(127);
	}
	void serialEvent(Serial myPort) {
	// シリアルバッファーを読込み
	String myString = myPort.readStringUntil('\n');
	// 空白文字など余計な情報を消去
	myString = trim(myString);
	// コンマ区切りで複数の情報を読み込む
	sensors = int(split(myString, ','));
	}

view raw shockSensor.pde hosted with ❤ by GitHub

スケッチと実行結果
横が時間軸、センサーが反応したところで点が上下している。