YKpages

ロボット関連で勉強したことのまとめ

ROS でロボットを決まった距離走行させる ( Python )

目次

はじめに

ロボットを決まった距離走行させたいとき(または決まった角度の旋回)のメモです。

この記事では Python を使ってコードを書きますが、 どの言語でも同じようにできます。

方法

距離 [m] = 速度 [m/s] × 時間 [s]

この式を使います。

時刻の取得

Python では、t = time.time() である基準からの時刻を取得できます。

単位は秒 [s] 。

また、「time」ライブラリをインポートする必要があります。

ソースコード

#!/usr/bin/env python
import rospy
import time
from geometry_msgs.msg import Twist

class Test():
    def __init__(self):
        self.pub = rospy.Publisher('cmd_vel', Twist, queue_size=1)

    # 直進
    def pub_x(self):
        # 目的の距離と速度を設定
        dist = 1.0 # [m]
        speed = 0.2 # [m/s]
        target_time = dist / speed # [s]

        # Twist 型のデータ
        t = Twist()
        t.linear.x = speed
        t.angular.z = 0
            
        # 開始の時刻を保存
        start_time = time.time()
        # 経過した時刻を取得
        end_time = time.time()

        # target_time を越えるまで走行
        rate = rospy.Rate(30)
        while end_time - start_time <= target_time:
            self.pub.publish(t)
            end_time = time.time()
            rate.sleep()

    # 旋回
    def pub_z(self):
        # 目的の角度と速度を設定
        theta = 180.0 # [deg]
        speed = 90.0 # [deg/s]
        target_time = theta / speed # [s]

        # Twist 型のデータ
        t = Twist()
        t.linear.x = 0
        t.angular.z = speed * 3.1415 / 180.0 # [rad]
            
        # 開始の時刻を保存
        start_time = time.time()
        # 経過した時刻を取得
        end_time = time.time()

        # target_time を越えるまで走行
        rate = rospy.Rate(30)
        while end_time - start_time <= target_time:
            self.pub.publish(t)
            end_time = time.time()
            rate.sleep()

if __name__ == '__main__':
    rospy.init_node('tcmdvel_publisher')
    test = Test()
    # 直進
    test.pub_x()
    # 旋回
    test.pub_z()

気をつけること

Python では変数の型を宣言する必要はありませんが、

speed = 90 # int型
speed = 90.0 # float型

のような違いには気を付けなければいけません。

正確にロボットを動作させたいときは特に。

おわりに

他の方法も試しましたが、 この方法が最も簡単だと思います。

参考

dailyrobottechnology.blogspot.com

dailyrobottechnology.blogspot.com

20分で作る簡易的なウェブページ(GitHub + HTML)

はじめに

パパっと簡易的なウェブページを作りたいと思ったときのメモ。

完成度は二の次。参考程度にどうぞ。

あと、ウェブ系は完全に初心者なので 間違っている情報がある可能性が高い。

作成したウェブページはこんな感じ。 https://yusukekato.github.io/

環境

最新のブラウザで動作するような HTML と JavaScriptCSS

(特に気にしなくても大丈夫だと思いたい)

目次

ウェブページ作成の流れ

GitHub 上にディレクトリを作成してファイルを置く

GitHub のアカウントをまだ持っていない場合はすぐに新規登録

GitHub とは、 git を利用できるウェブサービスのこと

github.com

  1. 新規のディレクトリを作成
  2. 作成したディレクトリの「Setting」を開く
  3. 設定項目の中から「GitHub pages」の項目を探す
  4. 「Source」のプルダウンを「None」から「master branch」に変更

これで 『https://アカウント名.github.io/リポジトリ名/』にアクセスできる

また、リポジトリ名を『アカウント名.github.io』にすると、 『https://アカウント名.github.io/』でアクセスできる

index.html を作成(とりあえず完成)

次に作成したディレクトリに「index.html」というファイルを置く

一応書いておくと、 ウェブページにアクセスすると「index.html」が自動的に呼び出される

「index.html」の中は以下のように記述。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>TITLE</title>
</head>
<body>
    <h1>ウェブサイト</h1>
</body>
</html>

これが最低限のHTML。

おまけ

HTML でよく使うタグ(主観)

見出し

文字の大きさは CSS でいじったほうがいいと思う(後述)

<h1>見出し、一番大きい</h1>
<h2>見出し</h2>
<h3>見出し</h3>

文章を書く

<p>ここに文章を書く</p>

改行

<br>

リンク

<a href="https://sample.sample/">sampleページ</a>

線を出す

<hr>

箇条書き

<ul>
    <li>箇条書き1</li>
    <li>箇条書き2</li>
    <li>箇条書き3</li>
</ul>

グループを作る

<div>
    <h1>たいとる</h1>
    <hr>
    <p>ここに文章を書いてみる</p>
    <a href="URL">AAA</a>
</div>

スクリプトを読み込む

<script src="sample.js"></script>

スクリプトを書く

<script>
    var a = 1;
    console.log(a);
</script>

ボダンを設置

onclick="関数名" を付けると、 ボタンを押したときのイベントを設定することができる

<button onclick="button1()">ボタン</button>

CSS の導入

HTML のデザインは CSS で決める

CSS は以下のような感じ。参考程度に。本当はもっときれいに書くことが望まれる

github.com

まず、「style.css」というファイルを作成(名前は style ではなくてもいい)

そして、HTML の「head」の中に以下を記述

<link rel="stylesheet" href="style.css">

これで「index.html」のデザインを「style.css」で編集できるようになった

HTML における class と id

たとえば以下のように HTML を書く

<p class="test">文章を書いてみる</p>

こう書くと、この p タグのクラスが "test" になる

次に、style.css に以下のように書く

.test {
    font-size: 24px;
}

こう書くと、class が "test" のタグはフォントサイズが「24px」になる

また、class はグループ、id は一つひとつ、みたいな使い方だと思う

フラットデザインをめざして

今どきのウェブサイトではフラットデザイン(ゴテゴテしていないやつ)が好まれている

フラットデザインのウェブサイトを作るために必要なのは色合いや配置

あと、単純に見やすいウェブサイトを作るために文字の大きさの調整などが必要

そのために、 HTML の「div」タグの使い方、また、前述した「class」と「id」の使い方、 さらに、CSS における「margin」と「padding」の使い方、が重要になってくると思う

一例として

index.html の body を以下のように記述

<body>
    <div class="test">
        <h1>タイトル<h1>
        <p>ここに文章を書く</p>
        <p>さらに文章を書く</p>
    </div>
</body>

style.css に以下のように記述

body {
    width: 100%;
    background-color: #EEEEEE;
}

.test {
    width: 80%;
    background-color: #FFFFFF;
    margin-left: auto;
    margin-right: auto;
}

まず、背景の色を「灰色」にした

次に、「div」タグ内の色は「白色」して、 さらに横幅は画面の80%に、 そして「margin」を「auto」にすることで中央に配置した

こんな感じでできるはず

あくまで参考程度に。(以下も一例として)

github.com

その他

文字サイズがおかしいとき

文字サイズを変更しているはずなのにおかしいときは、 以下のコードを CSS ファイルの body に書く

-webkit-text-size-adjust: 100%;

文字のフォントを設定

文字のフォントを設定

以下のコードを CSS ファイルの body に書く

font-family: arial, sans-serif;

a タグの下線を消す

a {
    text-decoration: none;
}

端末の画面サイズによって CSS を変更

CSS ファイル内に記述

@media screen and (min-width: 1000px) {
    1000px以上の画面サイズを持つ端末の場合
}
@media screen and (max-width: 999px) {
    999px以下の画面サイズを持つ端末の場合
}

a タグにマウスカーソルが乗っかっているときに色が変わる

マウスカーソルがのっかっている場合は、#0000FF に色が変わる

a:hover {
    color: #0000FF;
}

おわりに

簡単なウェブページの作成方法をまとめた

さらに、HTML と CSS の簡単な説明も書いた

これからもフラットデザインをめざしてがんばりたい

発表資料用の AviUtl 使い方

はじめに

研究発表の資料作成で、動画の編集作業が必要になり「aviutl」を使った。

そのときのメモ。

目次

環境

  • Windows10 Home
  • AviUtl 1.00

*MP4形式でエクスポートできるようにプラグインを入れる。

参考

aviutl.info

いろいろな作業

タイムライン表示

まずはタイムラインを表示することから始まる。

「設定」> 「拡張編集の設定」

これでタイムラインが開く。

チェックを入れておけば勝手に開くみたい。

動画読み込み

タイムラインウィンドウへ動画をドラッグ&ドロップする。

トリミング

動画の範囲を選択できる。

タイムライン上の時間目盛を見て、「赤い線」を選択したい範囲の最初に持ってくる。

そこから「Shift」を押しながらクリックして選択したい範囲の最後までスライド。

カット

使う場面はないかもしれないけど書いておく。

カットしたい範囲の最初と最後で右クリックして「分割」。

その後、右クリックして「削除」。

クリッピング

動画の画面内で指定した範囲を切り抜く。

「設定」 > 「サイズの変更」で「なし」を選択(クリッピングしないときは「指定サイズ」などを選択しないとおかしくなる)。

「設定」 > 「クリッピング&リサイズの設定」でウィンドウが開く。

右上のボックスにチェックを入れた状態で上下左右を調整。

再生速度を倍速にする

タイムラインウィンドウで動画をダブルクリックすると、動画設定ウィンドウが開く。

そこで「再生速度」の項目で変更。最大8倍速。

テキスト作成

タイムラインウィンドウの新しいレイヤーで右クリック。

「メディアオブジェクトの追加」 > 「テキスト」。

テキスト用の設定ウィンドウが開くからそこで色々編集。

デフォルトだと「標準文字」になっているけど、「縁取り文字」にしたほうが見やすい。

あとテキストが表示されないときは、テキストが「OFF」になっている可能性あり。

absg.hatenablog.com

時間目盛の分解能を変更

長い動画や短すぎる動画などで時間目盛が合わないとき。

「Ctrl」を押しながら、マウスのホイールなどでスクロールを行うと時間目盛の分解能を調整できる。

または、時間目盛の左横にある「青い長方形のやつ」をクリックすると調整できる。

再生ウィンドウの表示

編集した後など、動画を再生したいとき。

本体ウィンドウで、「表示」 > 「再生ウィンドウの表示」で開く。

動画出力

本体ウィンドウの「ファイル」 > 「プラグイン出力」 > 「拡張x264」にするとMP4形式で出力できる。

ファイル名を入力するとき、「ファイルの種類」で「.mp4」などを選択。

おわりに

AviUtl はシンプルなのかどうかは分からないけど、便利であることは確かだと思う。ありがたい。

ロボットの並進と回転について

はじめに

対向二輪型の移動ロボットにおける並進運動と回転運動についてなんとなくイメージをまとめておきます。

座標系におけるロボットの情報は(x, y, theta)の三つです。

また、位置(x, y)と姿勢(theta)としておきます。

並進運動

ロボットの位置(x, y)が変化する運動

回転運動

ロボットの姿勢(theta)が変化する運動

対向二輪型ロボットの運動の種類

  • 直進する運動:並進運動だけ
  • 旋回する運動:回転運動だけ
  • 円弧を描く運動:直進する運動+旋回する運動(並進運動+回転運動)

円弧運動

円弧を描く運動は、位置(x, y)と姿勢(theta)が両方とも変化しているため、並進運動と回転運動を組み合わせた運動と考えられます。

また、円弧運動から直進と旋回について考えると、

  • 直進する運動:半径が無限の円の円弧運動
  • 旋回する運動:半径がゼロの円の円弧運動

というようになります。

おわりに

対向二輪型ロボットの運動はすべて円弧運動と言えるかもしれないし、 直進と旋回だけとも言えるかもしれない。

(なぜ、この記事を書いたのかは分からない)

Unity ゲーム開発日記:タイトル画とBGM

はじめに

ゲームのシステムは完成しつつあります

システム以外でゲームに必要なものと言えばタイトル画とBGMですね

イラストを描く

何かしらイラストを描くソフトを用意します

私の場合

  • PC : Clip Studio
  • iPad : Procreate

サイズや解像度を気にしてイラストを描きます (最適なサイズや解像度は各々が選択)

また、背景を透過させる場合のファイル形式は、PNGが良いらしいです

f:id:kato_robotics:20181113024602p:plain

画像を挿入する場合、 UIのCanvasの子としてImageを作成します

このとき、Canvasの表示サイズの設定を「Scale With Screen Size」とすると スクリーンのサイズ(スマホの画面サイズなど)に合わせてUIの大きさを自動で調節してくれます

dojican-lab.blogspot.com

BGMの作成

曲が作れるソフトを用意します

PCの場合は「StudioOne」などがあります

今回は、iOSMacOSに標準で入っているGarageBandを使用します

簡単に曲が作成できるので暇つぶしにもちょうどよいです

Unityにおいて音を鳴らす方法は以下を参考にします

unity3d.com

他にも調べればたくさん出てくるのでここでは何もかかないでおきます

おわりに

ゲームにおけるタイトル画とBGMの作成と導入方法をまとめました

ゲーム完成に向けて作りこんでいきましょう

Unity + Vuforia マーカトラッキングメモ

はじめに

Unity + Vuforia でマーカトラッキングをするための自分用メモ

対象は iPad (iOS12)

環境

  • MacOS
  • Unity 2018.2.8f1
  • Vuforia 7.2.23
  • iPad6 (iOS12)

マーカトラッキング

Vuforia は Unity に統合されたので初めから入っている

「MainCamera」を削除して GameObject > Vuforia > ARCamera を選択

このとき、Vuforia のパッケージがインポートされる

  • Assets
    • Editor
    • Vuforia

次に、GameObject > Vuforia > Image を選択して「ImageTarget」を作成

このとき、Vuforia のパッケージがさらにインポートされる

  • Assets
    • StreamingAssets
    • Resources

最後に、BuildSttings > PlayerSettings > XR Settings > VuforiaAugmentedReality にチェックを入れる

これでマーカ(デフォルトではAstronaut)が認識できる

VuforiaConfiguration

Assets > Resources > VuforiaConfiguration で Vuforia の設定とかできる

またここで Vuforia のバージョンも確認できる

「Device Tracker」にチェックを入れる

「Tracking mode」は「POSITIONAL」

kato-robotics.hatenablog.com

「ARCamera」の「World Center Mode」が「DEVICE」になっている

kato-robotics.hatenablog.com

おまけ1

マーカを認識して何かするスクリプトは、Assets > Vuforia > Scritps > DefaultTrackableEventHandler

このスクリプトをいじるといろいろできる

おまけ2

Blender で作成した fbsファイル(例:Arrows.fbs)のオブジェクト

Unity にインポートすると

  • Assets
    • Camera
    • Cone
    • Cylinder
    • Lamp

となっている

オブジェクト一つひとつに「Camera」と「Lamp」が付いていると処理がとても重くなるので 削除するか無効にしておく

おわりに

Unity + Vuforia でマーカをトラッキングする方法をまとめた

Unity ゲーム開発日記:実機デバッグ

はじめに

これまでシューティングゲーム「オシャレなロケット:Oshare-Na-Rocket」のシステムを作ってきました

このゲームはスマートフォン向けに作っているので実機でちゃんと動作するか確認する必要があります

よって今回は実機デバッグを行っていきます(本当はもっと早くやるべきだった)

環境

  • Windows10
  • Unity 2018.2.14f1
  • Android 7

参考

uni.gas.mixh.jp

Android SDK の入手

まだAndroid SDKを持っていない人はAndroid Studioをインストールします

また、すでにAndroid Studioをインストールしている場合でもアップデートが必要かもしれません

SDKのアップデートはAndroid StudioのConfigから行えます

developer.android.com

Android SDK & JDK のパス設定

Edit > Preferences > External Tools に「Android SDK」と「JDK」のパスを設定するところがあります

Android SDKのパスはAndroid StudioのConfig画面を開くとパスが書いてあります

JDKは「C:/Program Files/Android/Android Studio/jre」としました(要確認)

Android 実機デバッグ

File > Build Setting を選択してビルド設定画面を開きます

そして以下の図のように設定します

f:id:kato_robotics:20181104150526p:plain

まず、「Add Open Scene」ボタンを押してシーンを登録します

次に"Platform"で"Android"をクリックして「Switch Platform」ボタンを押します

その後、「Player Setting」ボタンを押すとインスペクタウインドウに設定項目が出てきます

一番上の「Company Name」と「Product Name」を入力(ハイフンは使えない?)

f:id:kato_robotics:20181104151924p:plain

「Other Setting」の「Package Name」に「com.CompanyName.ProductName」となるように入力します

f:id:kato_robotics:20181104151942p:plain

ビルド

これで最低限の設定が終わりました

Android端末のUSBデバッグを有効にします

これを忘れるとUnityがAndroid端末を認識できません

「Build and Run」ボタンを押して、ビルドが成功するとAndroid端末でアプリが開きます

f:id:kato_robotics:20181104153159p:plain

おわりに

無事、実機でもちゃんと動作することが確認できました

次はシステムを遊べるように作っていきます