差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
p5js:13.grove_beginner_kit [2022/07/04 23:27] – [マイクセンサー] baba | p5js:13.grove_beginner_kit [2022/07/05 14:18] (現在) – [加速度センサ] baba | ||
---|---|---|---|
行 300: | 行 300: | ||
===== 加速度センサ ===== | ===== 加速度センサ ===== | ||
- | このセクションでは加速度センサからのデータを基にp5js上での画面描画に反映してみます。具体的にはbeginner kitの傾きに応じてボールが転がるプログラムを一緒に記述していきましょう。 | + | {{ : |
+ | |||
+ | このセクションでは加速度センサからのデータを基にp5js上での画面描画に反映してみます。具体的にはbeginner kitの傾きに応じてボールが転がるプログラムを一緒に記述していきましょう。seeed studio社が提供する[[https:// | ||
+ | |||
+ | まずは以下のサンプルコードをArduinoに書き込みます。 | ||
+ | |||
+ | <file .pde arduino.pde> | ||
+ | //Gravity Acceleration | ||
+ | #include " | ||
+ | #include < | ||
+ | |||
+ | LIS3DHTR< | ||
+ | #define WIRE Wire | ||
+ | void setup() { | ||
+ | Serial.begin(9600); | ||
+ | while (!Serial) {}; | ||
+ | LIS.begin(WIRE, | ||
+ | delay(100); | ||
+ | LIS.setOutputDataRate(LIS3DHTR_DATARATE_50HZ); | ||
+ | } | ||
+ | void loop() { | ||
+ | if (!LIS) { | ||
+ | Serial.println(" | ||
+ | while (1); | ||
+ | return; | ||
+ | } | ||
+ | //3 axis | ||
+ | Serial.print(LIS.getAccelerationX()); | ||
+ | Serial.print(LIS.getAccelerationY()); | ||
+ | Serial.println(LIS.getAccelerationZ()); | ||
+ | delay(500); | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | 上記のコードは3軸加速度センサの値を読み取って、500[ms]お気にカンマ区切りの文字列としてデータをPCに送信しています。さて、ここまでの学習ではセンサデータをmap関数を利用して扱いやすい数値(1byteに収まるように)にして値のやり取りを行っていました。今回は加速度値が小数点を含む値で送信されてきています。さらには値の種類はx, | ||
+ | |||
+ | 現在のArduinoコードでは、例えばx=0.05, | ||
+ | 0.05, | ||
+ | という文字列がPCに送信されています。さらに最後のzに関してはprintln関数を利用しているため、改行コードと呼ばれる改行を示すコード(13, | ||
+ | [48, 46, 48, 53, 44, 48, 46, 48, 48, 44, 49, 46, 48, 48, 13, 10] | ||
+ | |||
+ | ここで、数字を表す文字コードでは、以下の対応となっていますので、再度下記対応表をみて、上記文字コードを文字に置き換えてみてください。 | ||
+ | * 44=',' | ||
+ | * 46=' | ||
+ | * 48=' | ||
+ | * 49=' | ||
+ | * 53=' | ||
+ | |||
+ | いかがでしょうか?ただしく 0.05, | ||
+ | - データが届くたびに順次配列に蓄える(push) | ||
+ | - 改行コードの2つめである 10 が届いたらデータが一行分届いたことになる | ||
+ | - ここまで蓄えたデータは文字コードが送られているので、文字に変換する | ||
+ | - データはカンマ区切りになっているので、splitという関数を利用してカンマで区切られた文字列を配列に分ける | ||
+ | - それぞれの文字列は順にx, | ||
+ | という手順で、p5.js上で扱えるようにします。 | ||
+ | |||
+ | 上記を踏まえて記述したコードは以下の通りです。 | ||
+ | |||
+ | <WRAP group> | ||
+ | <WRAP half column> | ||
+ | <file .js sketch.js> | ||
+ | var serial_values = [0]; | ||
+ | var serial = new Serial(); | ||
+ | var x=0; | ||
+ | var y=0 | ||
+ | var z=0; | ||
+ | function setup() { | ||
+ | createCanvas(400, | ||
+ | } | ||
+ | |||
+ | function draw() { | ||
+ | background(220); | ||
+ | textSize(18); | ||
+ | textAlign(CENTER, | ||
+ | text(`${x.toFixed(2)}, | ||
+ | } | ||
+ | |||
+ | function gotSerialValues(values) { | ||
+ | for( let i = 0; i < values.length; | ||
+ | | ||
+ | if( values[i] == 10){ | ||
+ | let result = ""; | ||
+ | for( s of serial_values){ | ||
+ | result += String.fromCharCode(s); | ||
+ | } | ||
+ | // | ||
+ | const splits = result.split(',' | ||
+ | x = parseFloat(splits[0]); | ||
+ | y = parseFloat(splits[1]); | ||
+ | z = parseFloat(splits[2]); | ||
+ | // | ||
+ | serial_values = []; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <WRAP half column> | ||
+ | <file .pde arduino.pde> | ||
+ | //Gravity Acceleration | ||
+ | #include " | ||
+ | |||
+ | #include < | ||
+ | LIS3DHTR< | ||
+ | #define WIRE Wire | ||
+ | |||
+ | |||
+ | void setup() { | ||
+ | Serial.begin(9600); | ||
+ | while (!Serial) {}; | ||
+ | LIS.begin(WIRE, | ||
+ | delay(100); | ||
+ | LIS.setOutputDataRate(LIS3DHTR_DATARATE_50HZ); | ||
+ | } | ||
+ | void loop() { | ||
+ | if (!LIS) { | ||
+ | Serial.println(" | ||
+ | while (1); | ||
+ | return; | ||
+ | } | ||
+ | //3 axis | ||
+ | Serial.print(LIS.getAccelerationX()); | ||
+ | Serial.print(LIS.getAccelerationY()); | ||
+ | Serial.println(LIS.getAccelerationZ()); | ||
+ | |||
+ | delay(30); | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Arduino側のコードはdelayを30[ms]に変更しただけです。少しむずかしいと思いますが、じっくり読んでアルゴリズムを理解しましょう。 | ||
+ | |||
+ | さあ、それではセンサデータがしっかりと取得できたのでこの値で画面上のボールを転がしてみます。400x400のキャンバス上の真ん中からスタートし、x, | ||
+ | |||
+ | <file .js sketch.js> | ||
+ | var serial_values = [0]; | ||
+ | var serial = new Serial(); | ||
+ | var x=0; | ||
+ | var y=0 | ||
+ | var z=0; | ||
+ | |||
+ | var ball = { | ||
+ | x:200, | ||
+ | y:200 | ||
+ | } | ||
+ | |||
+ | function setup() { | ||
+ | createCanvas(400, | ||
+ | } | ||
+ | |||
+ | function draw() { | ||
+ | background(220); | ||
+ | textSize(12); | ||
+ | textAlign(LEFT, | ||
+ | text(`${x.toFixed(2)}, | ||
+ | circle(ball.x, | ||
+ | } | ||
+ | |||
+ | function gotSerialValues(values) { | ||
+ | for( let i = 0; i < values.length; | ||
+ | | ||
+ | if( values[i] == 10){ | ||
+ | let result = ""; | ||
+ | for( s of serial_values){ | ||
+ | result += String.fromCharCode(s); | ||
+ | } | ||
+ | const splits = result.split(',' | ||
+ | x = parseFloat(splits[0]); | ||
+ | if( !x )x = 0; | ||
+ | y = parseFloat(splits[1]); | ||
+ | if( !y )y = 0; | ||
+ | z = parseFloat(splits[2]); | ||
+ | ball.x -= y*5; | ||
+ | ball.y -= x*5; | ||
+ | if( ball.x <= 0)ball.x = 0; | ||
+ | if( ball.x >= width)ball.x = width; | ||
+ | if( ball.y <= 0)ball.y = 0; | ||
+ | if( ball.y >= height)ball.y = height; | ||
+ | serial_values = []; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ===== おまけ(マイク入力で丸の大きさも変化させる) ===== | ||
+ | <WRAP group> | ||
+ | <WRAP half column> | ||
+ | <file .pde arduino.pde> | ||
+ | //Gravity Acceleration | ||
+ | #include " | ||
+ | #include < | ||
+ | |||
+ | LIS3DHTR< | ||
+ | #define WIRE Wire | ||
+ | void setup() { | ||
+ | Serial.begin(9600); | ||
+ | while (!Serial) {}; | ||
+ | LIS.begin(WIRE, | ||
+ | delay(100); | ||
+ | LIS.setOutputDataRate(LIS3DHTR_DATARATE_50HZ); | ||
+ | } | ||
+ | void loop() { | ||
+ | if (!LIS) { | ||
+ | Serial.println(" | ||
+ | while (1); | ||
+ | return; | ||
+ | } | ||
+ | //3 axis | ||
+ | Serial.print(LIS.getAccelerationX()); | ||
+ | Serial.print(LIS.getAccelerationY()); | ||
+ | Serial.print(LIS.getAccelerationZ()); | ||
+ | Serial.println(analogRead(2)); | ||
+ | delay(30); | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <WRAP half column> | ||
+ | <file .js sketch.js> | ||
+ | var serial_values = []; | ||
+ | var serial = new Serial(); | ||
+ | var x=0; | ||
+ | var y=0; | ||
+ | var z=0; | ||
+ | var mic = 0; | ||
+ | |||
+ | function setup() { | ||
+ | createCanvas(400, | ||
+ | } | ||
+ | |||
+ | var ball = { | ||
+ | x:0, | ||
+ | y:0, | ||
+ | r:0 | ||
+ | } | ||
+ | |||
+ | function draw() { | ||
+ | background(220); | ||
+ | textSize(18); | ||
+ | textAlign(CENTER, | ||
+ | text(`${x.toFixed(2)}, | ||
+ | |||
+ | circle(ball.x, | ||
+ | |||
+ | } | ||
+ | |||
+ | function gotSerialValues(values) { | ||
+ | for( let i = 0; i < values.length; | ||
+ | | ||
+ | if( values[i] == 10){ | ||
+ | let result = ""; | ||
+ | for( s of serial_values){ | ||
+ | result += String.fromCharCode(s); | ||
+ | } | ||
+ | const splits = result.split(',' | ||
+ | x = parseFloat(splits[0]); | ||
+ | y = parseFloat(splits[1]); | ||
+ | z = parseFloat(splits[2]); | ||
+ | mic = parseFloat(splits[3]); | ||
+ | serial_values = []; | ||
+ | |||
+ | ball.x -= y*10; | ||
+ | ball.y -= x*10; | ||
+ | ball.r = mic; | ||
+ | |||
+ | } | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||