Sony toio™ アプリケーションのクリエイティブ開発エッセイ | 理想的なペイント アシスタント

導入

toio™ ロボットは、ソニーが発売したクリエイティブトイで、小型でプログラム可能なため、お絵かきアシスタントとして最適です。ロボットの動きや絵を描くツールをプログラミングすることで、子どもたちに面白い絵を描く体験を提供できます。

クリエイティブの説明

toio™ ロボットの動作や描画ツールを JavaScript プログラミングで制御できます。まず、toio™ アプリケーションを携帯電話またはコンピューターにインストールし、ロボットに接続する必要があります。その後、簡単な指示でロボットを制御して、キャンバス上にパターンを描画できます。たとえば、forward コマンドを使用してロボットを一定の距離だけ前進するように制御したり、turn コマンドを使用してロボットの方向を変更したり、smear コマンドを使用してペイント ツールを制御してキャンバス上に色を塗り付けることができます。これらの指示を組み合わせて繰り返すことで、あらゆる種類の興味深いパターンや芸術作品を作成できます。

ユーザー体験

toio™ ロボットを描画アシスタントとして使用する場合、子供たちがロボットと描画ツールを簡単に制御できるように、直感的で興味深いユーザー インターフェイスを提供できます。

ユーザーはクリックしてドラッグしてロボットの移動パスを指定し、さまざまなペイント ツールや色を選択できます。絵を描くプロセス中に、子供たちはロボットの動きや絵を描くツールの操作を観察することができ、それによって絵の原理と技術をよりよく理解できます。

さらに、ユーザーのクリエイティブな体験を向上させるために、いくつかの追加機能や機能を提供することもできます。たとえば、ロボットがあらかじめ設定されたパスと指示に従ってペイントを完了できる自動ペイント モードを追加すると、子どもたちの手が解放され、観察や創作にもっと集中できるようになります。自分の描いた絵を他の人にシェアして楽しんだり、コミュニケーションを図ることができるシェア機能も提供できます。

// 创建一个toio™机器人对象
const robot = new ToioRobot();

// 连接到机器人
robot.connect();

// 设置绘画工具
const brush = new Brush();

// 设置画布
const canvas = new Canvas();

// 绘画指令
robot.moveForward(100); // 向前移动100个单位
brush.setColor('red'); // 设置颜色为红色
brush.stroke(canvas, 50); // 在画布上涂抹50个单位

// 绘制直线
brush.drawLine(canvas, 100, 200, 300, 200); // 在画布上绘制一条从 (100, 200) 到 (300, 200) 的直线

// 绘制曲线
brush.drawCurve(canvas, 100, 100, 200, 200, 300, 100); // 在画布上绘制一条曲线，起点为 (100, 100)，控制点为 (200, 200)，终点为 (300, 100)

// 绘制矩形
brush.drawRect(canvas, 100, 100, 200, 200); // 在画布上绘制一个矩形，左上角坐标为 (100, 100)，宽度为 200，高度为 200

// 绘制圆形
brush.drawCircle(canvas, 200, 200, 100); // 在画布上绘制一个圆形，圆心坐标为 (200, 200)，半径为 100

// 绘制文本
brush.drawText(canvas, "Hello, toio™!", 100, 100); // 在画布上绘制文本，起始坐标为 (100, 100)

// 断开连接
robot.disconnect();

同様のコードを記述することで、直線、曲線、グラフィックスなどの描画など、より複雑な描画機能を実装できます。

ソニー toio ビジュアルプログラミングロボット

同時に、ジェスチャー認識や音声制御を通じてロボットの動きやペイントを制御するなど、いくつかのインタラクティブな機能を追加することもできます。

初期化関数 initToio では、スキャナーを通じて最も近い toio ロボットを見つけて、ライトの色を青に設定します。次に、ジェスチャ認識イベントとサウンド制御イベントをリッスンし、ジェスチャまたはサウンドのタイプに基づいて対応する操作機能を実行します。

// 引入toio.js库
import {
    
     Cube, NearestScanner } from 'toio.js';

// 初始化toio机器人
const initToio = async () => {
    
    
  // 扫描并连接到最近的toio机器人
  const scanner = new NearestScanner();
  const cube = await scanner.start();
  
  // 连接成功后，设置灯光颜色为蓝色
  cube.turnOnLight({
    
     red: 0, green: 0, blue: 255 });
  
  // 监听手势识别事件
  cube.on('id:0x01:gesture', (data) => {
    
    
    // 根据手势类型执行相应的操作
    switch (data.gestureId) {
    
    
      case 0: // 向上滑动手势
        moveForward();
        break;
      case 1: // 向下滑动手势
        moveBackward();
        break;
      case 2: // 向左滑动手势
        turnLeft();
        break;
      case 3: // 向右滑动手势
        turnRight();
        break;
      default:
        break;
    }
  });
  
  // 监听声音控制事件
  cube.on('id:0x01:sound', (data) => {
    
    
    // 根据声音类型执行相应的操作
    switch (data.soundId) {
    
    
      case 0: // 声音1
        moveForward();
        break;
      case 1: // 声音2
        moveBackward();
        break;
      case 2: // 声音3
        turnLeft();
        break;
      case 3: // 声音4
        turnRight();
        break;
      default:
        break;
    }
  });
};

// 向前移动
const moveForward = () => {
    
    
  // 执行向前移动的代码
};

// 向后移动
const moveBackward = () => {
    
    
  // 执行向后移动的代码
};

// 向左转向
const turnLeft = () => {
    
    
  // 执行向左转向的代码
};

// 向右转向
const turnRight = () => {
    
    
  // 执行向右转向的代码
};

// 启动程序
initToio();

要約する

この記事では、toio™ ロボットをお絵描きアシスタントとして使用し、JavaScript プログラミングを使用してその動作と描画ツールを制御することで、子供たちに興味深く創造的なお絵描き体験を提供します。

toio™ のモジュール設計と可塑性は無限の創造性を可能にし、ユーザーとのインタラクションとパーソナライズされたデザインはユーザーにより豊かで興味深い体験をもたらします。toio™ プログラミング ロボットは、テクノロジー、創造性、楽しさを完璧に組み合わせ、開発者とユーザーに新しいプログラミングとエンターテイメントの体験をもたらします。

これは、子供の創造性と想像力を刺激するだけでなく、大人にも、より創造的な可能性を提供する興味深い技術的追加を提供します。