p5js:13.grove_beginner_kit

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
最新のリビジョン両方とも次のリビジョン
p5js:13.grove_beginner_kit [2022/07/05 00:35] – [加速度センサ] babap5js:13.grove_beginner_kit [2022/07/05 13:11] – [加速度センサ] baba
行 300: 行 300:
  
 ===== 加速度センサ ===== ===== 加速度センサ =====
 +{{ :p5js:jul-05-2022_00-51-08.gif?nolink |}}
 +
 このセクションでは加速度センサからのデータを基にp5js上での画面描画に反映してみます。具体的にはbeginner kitの傾きに応じてボールが転がるプログラムを一緒に記述していきましょう。seeed studio社が提供する[[https://wiki.seeedstudio.com/Grove-Beginner-Kit-For-Arduino/|Grove Beginner Kit for Arduino]]にある加速度センサ用のサンプルコードを参考にコードを記述していきます。 このセクションでは加速度センサからのデータを基にp5js上での画面描画に反映してみます。具体的にはbeginner kitの傾きに応じてボールが転がるプログラムを一緒に記述していきましょう。seeed studio社が提供する[[https://wiki.seeedstudio.com/Grove-Beginner-Kit-For-Arduino/|Grove Beginner Kit for Arduino]]にある加速度センサ用のサンプルコードを参考にコードを記述していきます。
  
行 307: 行 309:
 //Gravity Acceleration //Gravity Acceleration
 #include "LIS3DHTR.h" #include "LIS3DHTR.h"
 +#include <Wire.h>
  
-#include <Wire.h> 
 LIS3DHTR<TwoWire> LIS;           //Hardware I2C LIS3DHTR<TwoWire> LIS;           //Hardware I2C
 #define WIRE Wire #define WIRE Wire
- 
- 
 void setup() { void setup() {
   Serial.begin(9600);   Serial.begin(9600);
行 330: 行 330:
   Serial.print(LIS.getAccelerationY()); Serial.print(",");   Serial.print(LIS.getAccelerationY()); Serial.print(",");
   Serial.println(LIS.getAccelerationZ());   Serial.println(LIS.getAccelerationZ());
- 
   delay(500);   delay(500);
 } }
行 427: 行 426:
   Serial.println(LIS.getAccelerationZ());   Serial.println(LIS.getAccelerationZ());
  
-  delay(50);+  delay(30);
 } }
  
行 434: 行 433:
 </WRAP> </WRAP>
  
-Arduino側のコードはdelayを50[ms]に変更しただけです。 +Arduino側のコードはdelayを30[ms]に変更しただけです。少しむずかしいと思いますが、じっくり読んでアルゴリズムを理解しましょう。 
-  + 
 +さあ、それではセンサデータがしっかりと取得できたのでこの値で画面上のボールを転がしてみます。400x400のキャンバス上の真ん中からスタートし、x,y軸の傾きに応じてボールの位置を移動させてみます。注意しておきたいのは、変数x,yに誤って浮動小数点にならないものが入力された場合はキャンセル処理をすること。もう一つは画面からはみ出さないように最大値、最小値の制約をつけておくことです。以下が動作するプログラムとなります。 
 + 
 +<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, 400); 
 +} 
 + 
 +function draw() { 
 +  background(220); 
 +  textSize(12); 
 +  textAlign(LEFT, TOP); 
 +  text(`${x.toFixed(2)}, ${y.toFixed(2)}, ${z.toFixed(2)}`, 10,10); 
 +  circle(ball.x, ball.y,20); 
 +} 
 + 
 +function gotSerialValues(values) { 
 +  for( let i = 0; i < values.length; i++ ){ 
 +     serial_values.push(values[i]); 
 +    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 = []; 
 +    } 
 +  }  
 +} 
 +</file>
  • /home/users/2/lolipop.jp-4404d470cd64c603/web/ws/data/pages/p5js/13.grove_beginner_kit.txt
  • 最終更新: 2022/07/05 14:18
  • by baba