5x6=30本の棒が互いに対称に交差する立体
5x6=30本の棒が互いに対称に交差する立体、をストローで作成しました。
自分の中では5x6と呼んでいます。
最初は細い竹串で作って、次に竹箸で作って、少しわかってきたのでカラフルなストローで作ってみました。
ストローは、曲がっちゃうので、輪ゴムの強さを調整するのが大変でした。最終的には各5角形に1つの輪ゴムではなく、各5角形の辺毎にNo.16の輪ゴムを使って、ゆるめに固定しました。
写真で見せるだけだと理解しにくいと思ったので、コンピューター上で再現してみました。
See the Pen babylon 5x6 v2 by mizukoshi akiya (@akiyah) on CodePen.
これが、5x6の設計図ですね。作成手順は、、、表現するのが難しいので、また後日にします。
ついでですが、2x3と3x4もコンピューター上に作ったので貼っておきます。これをみた方が、5x6が何者かを理解できるのかも。
2x3
See the Pen babylon 2x3 by mizukoshi akiya (@akiyah) on CodePen.
3x4
See the Pen babylon 3x4 by mizukoshi akiya (@akiyah) on CodePen.
Babylon.jsで簡単に3D空間のドラッグ＆ドロップ（改善版）
前回の記事の改善版です。
前回、『このPointerDragBehaviorを使ったドラッグ＆ドロップは、ちょっと甘いところがあるんですよね。物理エンジンとあわせて使うことをあんまり意識していないのだと思うのですが、変な動きすることがあります。』と書いたのですが、この点を改良してみました。
ベースはPointerDragBehaviorに乗っかりますが、
pointerDragBehavior.moveAttached = false;
として、PointerDragBehaviorの振る舞いは止めています。その上でpointerDragBehaviorのonDragStartObservable、onDragObservable、onDragEndObservableに動作を加えています。
ドラッグスタート時にマウス（とカメラを結んだ光線）と対象オブジェクトの交点を計算して、そこにmarkオブジェクトを置きます。そのmarkオブジェクトと対象オブジェクトをjointで繋ぎます。
ドラッグしたら、markオブジェクトをマウスの動きに応じて移動します。（この辺りにコツがあるのですが、、、細かい点はソースをみて欲しいです。）そうすると、markオブジェクトに引きずられて対象オブジェクトが移動するのです。
点と点をjointでつないでいるので、対象オブジェクトをマウスでつかんだ点を持っているような感覚が表現できます。PointerDragBehaviorを素朴に使うと、その辺り、動きが変なのですよね。
See the Pen babylon drag test v7 by mizukoshi akiya (@akiyah) on CodePen.
jointを作る時に、BABYLON.PhysicsJoint.PointToPointJointを使ったのですが、この時のパラメーターとしてmaxForceを小さめにして指定しています。こうしないとマウスでドラッグした瞬間に対象オブジェクトがブルっと震えて隣り合ったオブジェクトを弾き飛ばすと言う振る舞いをしてしまったんですよね。詳細な振る舞いはわかっていないのですが、今のところmaxForceを小さめにしておけば良いので、保留にしています。（maxForceを小さめにすることで動きがちょっと悪くなるのですが、それはトレードオフとして今は目をつぶっています。）
ひとまずここまででBabylon.jsのドラッグ&ドロップは一区切りにしようと思っていましたが、テンセグリティに応用する時に二つのポインターを扱うという欲望も出てきてしまったので、もうちょっとやってみます。
Babylon.jsで簡単に3D空間のドラッグ＆ドロップ
Babylon.js をちょっと触ってみました。
テンセグリティをコンピューター上でシミュレートするという私の要望があるのですが、なかなか進められていないので、それを進めるための調査でもあります。 やりたいこととしては、物理エンジンでゴムorバネを使うこと、カメラの移動、マウスでドラッグすることなどですが、とりあえずドラッグ&ドロップができればいいなと思ってやってみました。
やってみると、 Babylon.js ではドラッグ＆ドロップはかなり簡単でした！
See the Pen babylon drag test v3 by mizukoshi akiya (@akiyah) on CodePen.
scene.enablePhysics とすれば cannon.js を使った物理エンジンが使えるようになるし、
ArcRotateCamera を使えばマウスで視点移動ができるカメラが使えるし、
PointerDragBehavior を使えばドラッグ＆ドロップも使えるようになりました。
cannon.js とthree.js を組み合わせてドラッグ＆ドロップを作っていた時はいろいろ苦労したのに、こんな簡単にできるなんて。。。
↑苦労していた頃。
ただ、、、
この PointerDragBehavior を使ったドラッグ＆ドロップは、ちょっと甘いところがあるんですよね。
物理エンジンとあわせて使うことをあんまり意識していないのだと思うのですが、変な動きすることがあります。
簡単に直せるかな、と思って研究中ですが、全然簡単ではなさそうなので、長期戦を覚悟しています。
スライム方程式
ブログ書くのが久しぶりになっちゃったので、リハビリ的な内容です
スライム方程式をついに発見した pic.twitter.com/eLijri0j9o
— Akiya Mizukoshi (@Akiyah) 2019年10月20日
こんな事をしていました。スライム方程式です。
作る過程を動画にしてみました。伝わるかな。。数字を使ってお絵かきしているんですよ。https://t.co/TQeyR147qo
— Akiya Mizukoshi (@Akiyah) 2019年10月24日
作り方の動画も作ってみました。
アイス棒で12本のテンセグリティを作る。ダブルクリップによる改善編
の続きです。
このときは苦労したけど、ゼムクリップを使う方法を思いついてだいぶ楽になりました。
step1
step2
前回はダンボールの欠片と輪ゴムをジグにしたのですが、ダブルクリップで止めることで固定しました。最終的な形にならない状態から少しづつ組み上げられるので、だいぶ楽になります。
アイス棒で12本のテンセグリティを作る
の続きです。アイス棒6本のテンセグリティはだいぶ慣れたので前のエントリーのように作れるのですが、アイス棒12本のテンセグリティはまだ自分の中で作り方が定まっていないし、手探りで苦労しながら作っています。
下のように作っています。写真が何枚かあって、最後が動画です。
アイス棒6本のときと、流れは同じです。まずアイス棒の両端をハトメパンチで穴を開けます。その後、（ここが大変なのですが）ダンボールの欠片と輪ゴムをジグとして使って、なんとかがんばって12本を出来上がりに近い形に固定します。固定したらモビロンバンドをつけて、輪ゴムを切ってダンボールの欠片を外して完成です。
ジグを使ってアイス棒12本を形にするのがすごく大変で、もっといいジグがあれば楽できるのになーと思っていますが、まだいいアイデアはありません。
