ひつじTips

技術系いろいろつまみ食います。

Shaderで囲碁を打てるようにする実装

めっちゃ前にShaderでプレイアブルな囲碁を作ったのですが、その実装の解説をしまっす。

mu-777.hatenablog.com

要は、これ↓をどう実装したか、というネタです(盤面をクリックしてみてください、石が打てます!(と思ったら、Shadertoyのiframeバグってる?動かせない場合はshadertoyへ))


だいぶ前のネタではあるのですが、久々にシェーダで遊ぼうかなと思ってて、復習がてら実装を見直してみた次第です。

時間をあけて見てみると全然シェーダっぽくない非効率的な実装になっていて参考にはならないかと思います*1が、まぁ実時間で動いてるのでいいかなと(コンパイルはちょっと長いですが。。)

実際の実装は、ShaderToyを見てください(githubにも上げてますが、ShaderToy上でしか動かないので。。)

  • 前置き・スコープ
  • 全体戦略
  • 盤状態バッファの作り方(内容)
  • 盤状態バッファの作り方(実装)
  • 盤の描画と座標系
  • 基本の座標系
    • 素の盤の描画
    • 石の描画
    • アゲハマの描画と座標系
  • 石を打つ
  • 囲みに関する処理
    • コウの判定
    • 囲みの判定
  • 終わりに

*1:誰が何の参考にするためにこのエントリを見るんでしょうかw

続きを読む

YouTubeの文字起こしUIをReactで実装してみる

タイトル通りです!

YouTubeの文字起こしUIとは下図の右のようなやつです(キングオージャーめちゃくちゃおもしろいです!!!)

YouTubeの文字起こしの例(出典: 『「王様戦隊キングオージャー」ヒメノとリタがガールズトークで素顔丸見え!? 変身ポーズ披露&一問一答でわちゃわちゃ!』(oricon))

まぁそんなに難しくはなく,ただ実装してみた,という感じです.

最終成果物は以下のリンクのようなものです.ここを見れば雰囲気わかるかと思います.

https://mu-777.github.io/videojs-transcript-sample/

mu-777.github.io

コードはここです.Reactわかる人はコード見たほうが早いと思います.

github.com

ReactもJavascriptも雰囲気でやってるので,なんかオカシイこと言ってたらすみません.

続きを読む

[Unity]CustomEditorを使わずに,同じクラスの他の変数の状態によってインスペクタ上の変数を動的に編集不可にしたり,非表示にしたりする方法

こちらの記事ではbool型変数によって,変数の編集可/不可・表示/非表示を制御していました

mu-777.hatenablog.com

が,本記事ではそれの拡張版で,int/enum,string,float型の変数によっても制御できるようにします.

(本記事だけで内容は完結してますので,前記事を事前に読む必要はありません)

つまり何ができるか,ということですが,

例えばこういう実装で

public class ConditionalDisableAttrTest : MonoBehaviour
{
    public enum FlagEnum { A, B, C }
    [Header("Enum control")]
    public FlagEnum flagEnum = FlagEnum.A;

    [ConditionalDisableInInspector("flagEnum", (int)FlagEnum.A)]
    public string editableStrIfEnumA = "AAA";

    [ConditionalDisableInInspector("flagEnum", (int)FlagEnum.B)]
    public string editableStrIfEnumB = "BBB";

    [ConditionalDisableInInspector("flagEnum", (int)FlagEnum.C)]
    public string editableStrIfEnumC = "CCC";
}


こういう感じに編集可/不可を制御できたり,

simple enum conditional control in inspector
FlagEnumの設定値によって,他の変数の編集可/不可を制御できる

こうすれば,

public class ConditionalDisableAttrTest : MonoBehaviour
{
    [System.Serializable]
    public struct TestStruct
    {
        public Vector3 p;
        public Quaternion q;
    }

    [Header("String control")]
    public string flagStr = "A";

    [ConditionalDisableInInspector("flagStr", "A", conditionalInvisible: true)]
    public TestStruct visibleStructIfA;
}


表示/非表示を制御できたりします.(自作クラス/構造体も可)

simple string conditional control in inspector
flagStrが”A”のときだけインスペクタに表示される


こういうことをしたくて「Unity インスペクタ 変数 動的」とかでググると,CustomEditorを使う方法が出てきます.

が,これだとCustomEditorで対応したクラスでしか使えない = 他のクラスの変数に使い回しができなくて,ちょろっと使いたいときに不便な感じです.

(プロダクトレベルとかで,しっかり作り込む場合はこちらの方がいいと思いますが)

ということで,今回はCustomEditorは使わずに,任意のクラスの変数に適用できるAttributeを使って実装しています.

正直Unityのエディタ拡張は全然詳しくないので,バグってたらすみません.
一通りの型で使えることは確認しましたが,漏れもあるだろうし,基本正常系しか確認できてません.他のAttributeとの組合せ時とかも未検証です(免責事項)


あまり複雑な実装はいらない,以下のようにシンプルにbool変数で制御するだけでよい,という方は,前記事をご覧ください

編集可/不可 表示/非表示
flag conditional control in inspector
flagがfalseのときは編集不可になる
flagがfalseのときはインスペクタから見えなくなる
続きを読む

[Unity]CustomEditorを使わずに,bool変数の状態によってインスペクタ上の変数を動的に編集不可にしたり,非表示にしたりする方法

こういう実装で,

public class ConditionalDisableAttrTest : MonoBehaviour
{
    public bool flag = false;

    [FlagConditionalDisableInInspector("flag")]
    public string editableStrIfTrue = "a";
}


こういう感じに編集可/不可を制御でき,

flagがfalseのときは編集不可になる

こうすれば,

public class ConditionalDisableAttrTest : MonoBehaviour
{
    [System.Serializable]
    public class TestClass
    {
        public Vector3 p;
        public Quaternion q;
    }

    [Header("Flag control")]
    public bool flag = false;

    [FlagConditionalDisableInInspector("flag", conditionalInvisible: true)]
    public TestClass invisibleClsIfFalse;
}


表示/非表示も制御できる(自作クラス/構造体でもOK)

flagがfalseのときはインスペクタから見えなくなる

というのを実現するネタです.


こういうことをしたくて「Unity インスペクタ 変数 動的」とかでググると,CustomEditorを使う方法が出てきます.

が,これだとCustomEditorで対応したクラスでしか使えない = 他のクラスの変数に使い回しができなくて,ちょろっと使いたいときに不便な感じです.

(プロダクトレベルとかで,しっかり作り込む場合はこちらの方がいいと思いますが)

ということで,今回はCustomEditorは使わずに,任意のクラスの変数に適用できるAttributeを使って実装しています.

正直Unityのエディタ拡張は全然詳しくないので,バグってたらすみません.
一通りの型で使えることは確認しましたが,漏れもあるだろうし,基本正常系しか確認できてません.他のAttributeとの組合せ時とかも未検証です(免責事項)


この記事ではbool型変数での制御だけなのですが,boolに加えて,intやenum,string,float変数などでも制御したい方は,こちらの記事に解説がありますので,ご覧ください

mu-777.hatenablog.com

続きを読む

Shaderで囲碁を打てるようにしたよ

何言ってるか自分もよくわかりませんが,囲碁を打てるShaderを作ってみましたよ 💪💪

自分の忘備録のためにおいおい解説記事を書くぞ,という気持ちと,iframe埋め込みでブログ上でもPlayできるの草,という気持ちで,技術解説はない単なる紹介エントリを書きます.

作ったのはこれです↓(コンパイルに十数秒かかります)

盤上をクリックすると石を置けるのでやってみてください~~
スマホは非対応ですごめんなさい…(shadertoyさんスマホでドラッグを取れるようにしてくれ~~))

www.shadertoy.com

実際に打ってる様子はこんな感じです

  • 何ができるか(何ができないか)
  • 何で作ったか
  • 感想
    • こぼれ話
続きを読む

WSL2とDockerでWindowsにROS2環境を作る+vscodeで開発できるようにする+VNCなしでGUI(rqt, rviz2)を使う

Windows10環境で,ROS2のパッケージ開発をDocker上で行うための手順をまとめます.

頻繁にROSを使わないので直接環境にROSを入れるのは抵抗感があり...... でもROS2を使ってみたい!ということで,ローカルにROS2環境を入れずに開発を行う,dockerでの開発フローを整えてみました.

具体的には,以下のようにして実現します.

  • ROS2の開発用のDockerイメージを作成
  • 開発用Dockerコンテナに,ホスト(Win)上にあるROS nodeのソースコードをマウント
  • vscodeで開発用Dockerコンテナ内のROS nodeのソースコードを編集
    • WinにROS環境が入っていなくてもコンテナ内には環境があるので,IntelliSenseなどは有効です
  • 開発用Dockerコンテナ内でビルド・動作確認
  • 開発したROS nodeの実行に必要最低限の環境が入ったリリース用Dockerイメージの作成

また,一応 rqt, rviz2 のGUIも開発用コンテナで出せるようにしています(あると開発中は便利なので).

GUIありROSのdocker環境の構築については,以下の記事などVNCでやってる人は見つけられたのですが,開発用のエディタまでVNC上で動かすことになるならちょっと微妙だなぁと...

ROSではない開発と同様に,ホスト上で動くvscodeを使ったリモート開発でやりたかった,というモチベーションがありました.

memoteki.net

qiita.com

  • 前提
  • 開発用ディレクトリの作成
  • ROS2開発用Dockerイメージの準備
    • ROS2実行用イメージの用意
    • ROS2パッケージ開発用イメージの作成
  • ROS2開発用コンテナ上での開発
    • 開発用コンテナの起動
    • vscodeでの開発設定
    • 開発用コンテナに接続されたvscodeを開く
    • コンテナ上でのROSパッケージの開発とビルド
    • GUI(rqt, rviz2)の使用
  • リリース用Dockerイメージの作成と実行
    • リリース用イメージの作成
    • リリース用イメージの実行
  • おわりに
続きを読む

Shellの変数に文字列を連結すると,先頭から上書きされてしまう問題

小ネタですが,ハマったので......

f:id:mu-777:20220205184429p:plain
$ABは「aaaaabbb」になるはずでは......?😟

問題

タイトルの通りです.Shellの変数に文字列を連結すると,先頭から上書きされてしまいました.

上のスクショ通りですが,具体的には以下のようになります.

$ echo $A
aaaaa

$ AB=${A}bbb

$ echo $AB
bbbaa    # aaaaabbbになってほしいが,先頭から上書きされてしまう


原因

改行文字が原因でした.

実はA=aaaaaではなく,A=aaaaa\rとなっていたことでカーソルが先頭に戻ってしまい,先頭から上書きになっていました.

ということで,例えば以下のようにして”\r”を消してやると問題は解決します.

$  echo $A
aaaaa

# sedで'\r'を消す
$ A=`echo $A | sed 's/\r//g'`

$ echo $A
aaaaa    # echo した結果の見た目は変わらない

$ AB=${A}bbb

$ echo $AB
aaaaabbb    # aaaaabbbになった!


CRLFのCRの意味を知らなかった自分はだいぶダメっすね......

しょぼい話ではあるのですが,問題の現象(Shell変数に連結すると先頭から上書きされる)で調べて見つけられなかったので,ここに納めます🙏🙏

おまけ

この問題ですが,WSLでWindowsのコマンドで取得した文字列を加工しようとして踏みました.

具体的には,ホスト(Windows)にXサーバを立ててWSL2でX11アプリケーションを使う際,WSL上のDISPLAY変数にはホストのIPアドレスを指定してやる必要があります.

手動で設定するのがめんどいなぁと思ってたのですが,WSLならipconfig使える!と気づき, 以下のようにWindowsipconfig.exeを呼び出してDISPLAY変数に入れちゃえ,としたらハマりました.

# snip

HOST_IP=`ipconfig.exe | grep IPv4 | grep -v 172 | cut -d: -f2 | awk '{ print $1}'`
export DISPLAY=${HOST_IP}:0.0

# snip


$ source ~/.bashrc

$ echo $DISPLAY
:0.0168.0.2    # 192.168.0.2:0.0になってくれない😫


WSLはLinuxWindowsのハイブリッド感あって便利ですが,やっぱりWSLでWindowsの機能を使う場合は気をつけないとな......というお話でした