ソースに絡まるエスカルゴ

貧弱プログラマの外部記憶装置です。

【Blender】Blenderで鏡を作成する方法

Blender シミュレーション

　今回はBlenderで鏡を作成してみたのでその備忘録です。


１：鏡にするオブジェクトを設定する
　Blenderを起動させた時にあるデフォルトのCubeを選択した状態でScaleのYの値を0.1に変更します。これを鏡にします。
f:id:rikoubou:20181003161909p:plain

　次にCubeを選択した状態で「Materialアイコン」を左クリックし、「Mirror」にチェックを入れて「Refrectivity」の値を0.5に変更します。（Refrectivityは反射率で0〜1の値を取ります）
f:id:rikoubou:20181003162338p:plain

「Render」アイコンを左クリックし、ShadingのRay Tracingにチェックがついていることを確認します。
f:id:rikoubou:20181003162612p:plain

　これで鏡としての設定は完了です。


２：鏡になっているかを確認する
　１までできたら鏡に写すオブジェクトを追加します。
　3D View上で「Shift＋Aキー」を押して「Mesh」→「Monkey」を左クリックします。
f:id:rikoubou:20181003163019p:plain

　追加したSuzanneを適当に移動、回転させます。
f:id:rikoubou:20181003163329p:plain

「Viewport Shading」のプルダウンから「Rendered」を選択します。
f:id:rikoubou:20181003163507p:plain

　レンダリングした結果の画面を見ると以下のように鏡のようになっていることがわかります。
f:id:rikoubou:20181003163620p:plain


　以上がBlenderで鏡の設定をする方法です。結構簡単にできたので色々使っていきたいです。


・参考資料

【Blender】ブーリアン(Boolean)モディファイアについて

Blender モデリング

　今回はブーリアン(Boolean)モディファイアの使い方を説明していきます。
　参考資料のところに書いてあることまんまですが、自分の中で情報を整理するためにも残しておきます。


１：Booleanモディファイアを追加する
　なんでもよいのですが、以下のようにオブジェクト同士が重なりあった状態のものを用意します。
f:id:rikoubou:20181002142244p:plain

「くり抜かれたいオブジェクト（ここではCubeの方）」を選択した状態で「Modifiersボタン」を選択して「Add Modifier」のプルダウンを左クリックします。
f:id:rikoubou:20181002142506p:plain

「Boolean」を選択して左クリックします。
f:id:rikoubou:20181002142638p:plain

　すると以下のモディファイアが追加されるので、ここでBooleanの設定をしていきます。
f:id:rikoubou:20181002142744p:plain


２：Booleanモディファイアでできること
　Booleanモディファイアでできるのは「交差」、「差分」、「統合」の3つです。

  • 交差

　2つのオブジェクトが重なっている部分のみを切り出します。
　Operationを「Intersect」、Objectを「Sphere」を選択すると、以下のようにSphereと重なったCubeの部分のみを切り出したオブジェクトのみになります。
f:id:rikoubou:20181002143304p:plain
　

  • 差分

　2つのオブジェクトが重なっている部分を削除します。
　Operationを「Difference」、Objectを「Sphere」を選択すると、以下のようにSphereと重なったCubeの部分のみを削除したオブジェクトになります。
f:id:rikoubou:20181002143537p:plain

  • 統合

　2つのオブジェクトを結合します。
　Operationを「Union」、Objectを「Sphere」を選択すると、以下のようにSphereとCubeが結合されたオブジェクトになります。
f:id:rikoubou:20181002143854p:plain

「Z」キーを押してワイヤーフレームの表示にすると、以下のように表面だけの頂点で構成されたものになっているのがわかります。
f:id:rikoubou:20181002144025p:plain

　ちなみに2つのオブジェクトを1つにする「Ctrl＋Pキー」から「Object」を選択という方法との違いは「オブジェクトの重なっている部分に頂点があるかないか」という違いがあります。
「Ctrl＋Pキー」からの結合方法だと単純に2つのオブジェクトを1つとしているだけで、以下のように重なっている部分の頂点はそのまま残っています。
f:id:rikoubou:20181002141844p:plain

　見た目としては同じになりますが、ボーンを入れて動かす時などはBooleanを使った方が良いかと思われます。

　オブジェクトとして確定させたい時は「Apply」ボタンを押すと確定されます。
f:id:rikoubou:20181002144622p:plain


　以上がブーリアン(Boolean)モディファイアについてです。

　Blender上でちゃんとモデリングしたことがないのでまだまだよくわかっていませんが、割とよく使う機能になりそうです。


・参考資料

【映画鑑賞】若おかみは小学生！の感想（ネタバレあり）

映画 若おかみは小学生！ ネタバレ

www.youtube.com

　映画の鑑賞記事が3つ目になるとは思っていませんでしたが、今話題の「若おかみは小学生！」を鑑賞（記事執筆時点で2回）したのでその感想を残しておこうと思った次第です。
　各所で絶賛されている通り傑作であることには間違いありませんので、少しでも気になるなら観に行っておいた方が良いです。ただしこの作品の核となるテーマが人によっては好き嫌いが分かれるかもしれません。

　感想や見所などを書き連ねつつ、その辺りにも触れていこうと思います。

　基本的に「ネタバレを気にしない」方向でいくので注意してください。

　また記事中に出てくる画像は全て予告からキャプチャしたものです。

　では始めます。


１：脚本の見所
f:id:rikoubou:20180930173826p:plain
　本編94分という時間の中で1年の流れをとても丁寧に描いていました。その中に旅館に泊まりにくる人や友人の関係性、主人公であるおっこの成長もしっかりと描かれていて素晴らしかったです。駆け足気味なところはいくつかあるけれど、感情の流れや変化はちゃんと捉えられているので短いなかでもしっかりと感動させてくれます。あれだけの内容をうまくまとめた吉田玲子さんは本当にすごいですね。
　欲を言えば、120分ぐらいの尺があれば駆け足だったところもより丁寧に拾えていたかもしれないとも思いました。しかし子供向けという前提を考えれば2時間耐えるのは大変なので現在の尺が最適なのではないかとも思います。ちなみに2回目の鑑賞では初回ほどの駆け足の印象はなかったので、改めてよくまとまっていると感じました。


２：映像面の見所
f:id:rikoubou:20180930173857p:plain
　高坂希太郎さん監督ということで全編に渡って非常に画面のクオリティが高いです。作画的にも非常に丁寧で自然な演技で「うまい！」と何度も思いました。メガネのレンズの歪みを表現していたり、料理シーンも本当に丁寧に美味しそうに描かれています。特に印象深かったのが「おばあちゃんの回想シーン」です。屋根の上に登って瓦が崩れて落ちるあたりは本当にうまかったです。どうやらここは本田師匠の作画シーンだそうです。
　美術も旅館にある机とかがちょっと傷ついたりしているのも詳細に書き込まれていました。四季もしっかりと感じ取れるような背景ばかりで本当に素晴らしかったです。
　また撮影もすごかったです。全体的にキャラと背景が馴染んでいる印象で、劇場で見た時にはそんなに感じなかったのですがテレビの特番で見た時には画面全体をちょっと汚してセルっぽく見せている処理が入っていました。特に印象に残ったのは前半の方でおっこが布団に倒れこむところです。手前の腕をかなりぼかして顔の部分にピントを合わせているという被写界深度の強調しているところがとても印象的でよかったです。


３：若おかみは小学生！はどういう話なのか
f:id:rikoubou:20180930173916p:plain
　予告にあるように素直に受け止めると「主人公おっこの成長物語」です。確かにそのようにストーリーとしても描かれているのですが、その裏というかより作品の核となる部分はもう少し踏み込んだところにあると自分は考えています。

　というのも、最初のおっこは能動的なことは一切していません。旅館春の屋に来たのも両親が亡くなったからですし、そこで「若おかみになる」と言ったのもユーレイのウリ坊に言われたからです。転校した小学校でライバルとなるピンフリと初めて話した時も、クラスメイトが話しかけたことがきっかけです。神田親子を春の屋へ招き入れたのもウリ坊がきっかけです。このように序盤はおっこは言われるがまま動いているだけで終わっています。春の屋で神田あかねと口喧嘩するシーンでは自分の気持ちを優先させており、神田あかねをお客として扱っていない（まだ若おかみとしての自覚がない）幼さが描写されています。とはいえお辞儀の仕方などの所作はちゃんとできているので、気持ちの方がついていっていない状況なのだと思います。

f:id:rikoubou:20180930174111p:plain
　しかし「ケーキが食べたい」と言ったあかねに対して、おっこは劇中で初めて自分の意志で「ケーキを探す」という行動に出ます。探し回ったが見つからず、でも自作の温泉プリンを食べてもらって感謝されることでおっこは喜びを感じます。
　以降「お客様のために」と自ら行動を起こしたり自分の意志で決めることが多くなります。水領とのドライブでPTSDを起こしながらも「行きます」と強く答えるところもそうです。

f:id:rikoubou:20180930173808p:plain
　神楽の練習を始める頃になるとピンフリとは口喧嘩までやるような仲になっています。ピンフリと喧嘩になるということは、おっこが春の屋を居場所として自覚し、また若おかみとしての誇りややりがいを見出しているとも言えます。木瀬の「味の濃いものが食べたい」という注文に対して「若おかみであることを優先」させたからこそ、自分の感情よりもピンフリの協力を得るために走ったのだと思います。

　おそらくおっこ自身はここまでで「若おかみとしての自覚がでてきている」ことに気づいてなかったのだと思います。また両親が死んだという事実から気を紛らわせるために若おかみの仕事を一生懸命にやっていただけなのだとも思います。

f:id:rikoubou:20180930174224p:plain
　そしてクライマックスで木瀬家族の真相が明かされるわけですが、ここでようやくおっこは両親の死が現実だったと認識します。「あの頃に戻りたい」と泣きわめいて春の屋を飛び出します。偶然通りかかった水領に抱きしめられ、全てを打ち明けたあと「春の屋の若おかみです」と木瀬に告げます。

　このシーンは「自分が若おかみであることの自覚とそのような人生を歩む覚悟」をした瞬間だと自分は思います。両親の死を受け入れるのと同時に若おかみとして歩んでいく、つまりは「おっこの生き方」が決まった瞬間でもあります。それはまさに子どもから大人へとなった瞬間であるともいえます。最後の神楽は成人式のようなものでもあり、おっこが大人になったからこそユーレイであるウリ坊と美陽が成仏したのだろうと思います。

　何が言いたいかというと「若おかみは小学生！」という作品は「人は周囲（環境）によって作られる」というのを核のテーマにしているのではないかということです。パンフレットや公式ページの監督コメントにも似たようなことが書いてありますし、おそらくテーマの一つにはなっていると思います。


４：テーマが故の危うさ
f:id:rikoubou:20180930174000p:plain
「人は周囲（環境）によって作られる」のがテーマだと書きましたが、これには一種の危うさも含んでいます。というのも、これはある意味滅私奉公でもあり自分を押し殺すという風にもとれます。
　小学六年生で両親を失くしながらも「春の屋の若おかみです」と本人が言わざるを得ない環境というのも、一歩引いてみると恐ろしい印象にもなります。
まだまだ小さい子どもが重い覚悟をしなければならない状態に周囲はもっと優しくしてやれなかったのか、子どもが子どもらしくできないのは大人のせいではないのか、など色々思うところはあります。言葉だけを取り上げれば労働賛美とも受け取れるかもしれません。

　一見すると素晴らしい作品ではありますが、その裏には説教めいたものも含んでいます。それが良い悪いではなく、観た人の考え方や信念に依存するところのように思えます。意志があまり強くない人から見ると、おっこがあまりに超人じみた感じに見えることもあるでしょう。
　鑑賞後に色々考えさせられるというのもこの作品の狙いなのかもしれません。


　以上が自分の「若おかみは小学生！」の感想になります。

　素晴らしい作品だけれど手放しには褒められない、というのが自分の正直なところですが、アニメ史に残る傑作であることは間違いないのでみなさん是非劇場で何度も観ましょう。


・参考資料

【Blender】海洋(Ocean)モディファイアを使った模様の作成

Blender シミュレーション

　今回は海洋(Ocean)モディファイアを使った模様が変化する動画を作っていきます。
　参考資料にあるページのやり方そのままですが備忘録として残しておきます。


１：海洋(Ocean)モディファイアで海のシミュレーションを作成する
　Blenderを起動したらデフォルトのCubeがあるので、そのCubeを選択した状態で「Modifier」アイコンの「Add Modifier」から「Ocean」を左クリックで選択します。
f:id:rikoubou:20180927150811p:plain

　Oceanモディファイアが追加されるので、以下のように「Resolution(解像度)を22」、「Smallest Wave(最小の波)を0.8」、「Generate Foam(泡の生成)にチェック」というように変更します。
f:id:rikoubou:20180927151227p:plain

　設定が終わったら「現在のキーフレームが1」になっていることと「OceanモディファイアのTimeが1」になっていることを確認して、Timeのところにマウスカーソルを持って来て「i」キーを押してキーフレームに登録します。
f:id:rikoubou:20180927151712p:plain

　次に現在のキーフレームを最終フレームである250に変更し、OceanモディファイアのTimeを25に変更します。そして同様にTimeのところにマウスカーソルを持って来て「i」キーを押してキーフレームに登録します。
f:id:rikoubou:20180927152121p:plain

　ここまでできたら「Alt＋Aキー」でアニメーションをさせてみましょう。計算に時間がかかりますが、以下のように波のシミュレーションができているのがわかると思います。
f:id:rikoubou:20180927152718g:plain


２：海洋(Ocean)モディファイアの結果を素材にする
　海のアニメーションができましたが今回はこの計算結果を素材として使います。

　Oceanモディファイアの「Cache path」を「//ocean1」に変更して「Bake Ocean」ボタンを左クリックします。
f:id:rikoubou:20180927153437p:plain

　すると開いているblendファイルと同じ階層に「oceanフォルダ」が作成され、その中に計算結果の模様が連番画像として保存されます。
f:id:rikoubou:20180927153643p:plain

　次に「Ramdom Seed」を1に変更し、「Cache Path」も「//ocean2」に変更して「Bake Ocean」ボタンを左クリックします。
f:id:rikoubou:20180927153913p:plain

　それが終わったら同様に「Ramdom Seed」を2に変更し、「Cache Path」も「//ocean3」に変更して「Bake Ocean」ボタンを左クリックします。

　これで以下のように3つのパターンの連番画像が作成できました。
f:id:rikoubou:20180927154300p:plain


３：素材を組み合わせて動画にする
　素材ができたので今度はこれを組み合わせて動画にしていきます。

　上部にある画面のブルダウンから「Compositing」を選択してコンポジット画面に切り替えます。
f:id:rikoubou:20180927154703p:plain

　コンポジット画面に切り替えたら「Use Nodes」にチェックを入れます。
f:id:rikoubou:20180927154714p:plain

　チェックを入れると出てくる「Render Layers」を左クリックで選択して「X」キーを押して削除します。
f:id:rikoubou:20180927154918p:plain

　ノードが表示されているノードエディタ上で「Shift＋Aキー」を押し、「Input」→「Image」を選択します。
f:id:rikoubou:20180927155130p:plain

「Image」ノードが追加されるので「Open」ボタンを左クリックします。
f:id:rikoubou:20180927155308p:plain

「Ocean1」フォルダにある一番最初の連番画像を選択して「Open Image」ボタンを左クリックします。
f:id:rikoubou:20180927155438p:plain

　画像が読み込まれるのでプルダウンを「Image Sequence(連番画像)」に変更します。
f:id:rikoubou:20180927155630p:plain

　次にファイル名の横にある「F」ボタンを左クリックし、「Frames」の値を250に変更します。
f:id:rikoubou:20180927155804p:plain

　同様のやり方でocean2、ocean3の連番画像も読み込ませます。
f:id:rikoubou:20180927160248p:plain

　それぞれの素材を読み込めたら「Shift＋Aキー」を押して「Color」→「RGB Curves」を左クリックします。
f:id:rikoubou:20180927160355p:plain

「RGB Curves」のノードが追加されるので、それを選択した状態で「Shift＋Dキー」を押してコピーします。
f:id:rikoubou:20180927160719p:plain

「RGB Curves」のノードが全部で3つになるようにします。
f:id:rikoubou:20180927161747p:plain

　RGB Curvesの「R」を左クリックして曲線を調節し、ocean1ノードのImageとRGB CurvesのImageを左ドラッグで繋ぎます。
f:id:rikoubou:20180927161938p:plain

　次にRGB Curvesの「G」を左クリックして曲線を調節し、ocean2ノードのImageとRGB CurvesのImageを左ドラッグで繋ぎます。
f:id:rikoubou:20180927162245p:plain

　続いてRGB Curvesの「B」を左クリックして曲線を調節し、ocean3ノードのImageとRGB CurvesのImageを左ドラッグで繋ぎます。
f:id:rikoubou:20180927162402p:plain

　これで以下のようなノードになります。
f:id:rikoubou:20180927162446p:plain

　ここまでできたら「Shift＋Aキー」から「Color」→「Mix」を左クリックします。
f:id:rikoubou:20180927162557p:plain

「Mix」ノードが追加されるのでプルダウンから「Add」を選択します。
f:id:rikoubou:20180927162748p:plain

　2つのRGB CurvesのImageを左ドラッグで繋ぎ合わせます。
f:id:rikoubou:20180927162845p:plain

　同様の方法でもう一つのRGB Curvesも繋ぎ合わせます。
f:id:rikoubou:20180927163118p:plain

　次に「Shift＋Aキー」を押して「Filter」→「Glare」を選択します。
f:id:rikoubou:20180927163623p:plain

　追加された「Glare」ノードのGlare Typeのプルダウンから「Fog Glow」を選択します。
f:id:rikoubou:20180927180510p:plain

「Threshold」の値を0、「Size」を6、「Quality」のプルダウンを「High」に設定します。
f:id:rikoubou:20180927180751p:plain

　Glareのノードを選択した状態で「Shift＋Dキー」を押してコピーします。
f:id:rikoubou:20180927181050p:plain

　最後に以下のようにノードを左ドラッグで繋ぎます。
f:id:rikoubou:20180927181340p:plain

　最終的には以下のようになります。
f:id:rikoubou:20180927181443p:plain

　ここまでできたら「Render」ボタンを左クリックすると現在のフレームのレンダリング時間が表示されます。
f:id:rikoubou:20180927181614p:plain

　あとは動画出力の設定を行い、アニメーションとして出力すると以下のようになります。


　以上が海洋(Ocean)モディファイアを使った模様動画の作成方法です。
　自分はノードについてよくわかってないのですが、色々応用できると思います。

　今回作成したblendファイルは以下に公開しています。


・参考資料

【Trello】タスク管理ツールTrelloの紹介

便利サイト タスク管理 Trello

　今回はちょっといつもと違う感じで便利な無料タスク管理ツールであるTrelloというものを見つけて少しだけ触ってみたのでその紹介についての記事になります。


１：Trelloとは
trello.com

　上記の公式ページに飛ぶと「みんなで、どんなことでも整理できる無料タスク管理ツール」と書かれています。

「ボード」と呼ばれる大きなくくりの中に「リスト」という縦の列を並べ、そのリストの中に「カード」と呼ばれる個別のタスクを追加して管理していきます。
　Trelloの使用想定としては「リスト＝ステータス」で「カード＝タスク」としてカードをリストへ次々移動させることで、タスクの進捗管理をするという形のようです。
（後述しますが自分が使ってみた感じとしては別の方法で管理した方が良いのではとも思っています）


２：Trelloの登録方法
　先ほどの公式ページの右上にある「アカウントの作成」をクリックします。
f:id:rikoubou:20180925164422p:plain

　アカウント新規作成画面に遷移するので、名前、メールアドレス、パスワードを入力して「アカウント作成」ボタンをクリックします。
f:id:rikoubou:20180925164614p:plain

　すると登録したメールアドレスに以下のようなメールが送られてくるので「メールアドレスを確認」ボタンをクリックします。
f:id:rikoubou:20180925164848p:plain

　これでアカウント作成は終了です。


３：Trelloの基本的な使い方
　Trelloにログインすると以下のような画面になっていると思います。

　まずは「新しいボードの作成」のボタンをクリックしてボードを作成します。
f:id:rikoubou:20180925165752p:plain

　ボード名を入力して「ボードを作成」ボタンをクリックします。
f:id:rikoubou:20180925165930p:plain

　すると空のボードが作成されます。
f:id:rikoubou:20180925170230p:plain

　次にこのボードに「リスト」を作成していきます。
「リストを追加」ボタンをクリックします。
f:id:rikoubou:20180925170323p:plain

　リスト名を入力して「リストを追加」ボタンをクリックします。
f:id:rikoubou:20180925170419p:plain

　これでリストが作成されます。
f:id:rikoubou:20180925170512p:plain

　次にこのリストに「カード」を追加します。
　リストの「カードを追加」ボタンをクリックします。
f:id:rikoubou:20180925170552p:plain

　カード名を入力して「カードを追加」ボタンをクリックします。
f:id:rikoubou:20180925170656p:plain

　これでリストにカードが追加されました。
f:id:rikoubou:20180925170739p:plain

　同じリストにカードは複数追加することができます。
f:id:rikoubou:20180925170825p:plain

　このカードを「１つのタスク」として管理していくことになります。


４：カードの設定について
　設定したいカードをクリックします。
f:id:rikoubou:20180925171045p:plain

　すると以下のようにカードの詳細設定ができる画面になります。
f:id:rikoubou:20180925171207p:plain

　以下それぞれのボタンについての大まかな機能の説明です。

  • メンバー

　カードにメンバーを追加する機能。複数追加可能。担当者などを追加するとよい。

  • ラベル

　カードに色を追加する機能。複数追加可能。色で分類するなどするときに便利。

  • チェックリスト

　カードにチェックリストを追加する機能。複数追加可能。
　チェックリストを追加した後、項目を複数追加可能。そのチェックに応じて以下のように進捗率の表示をさせることもできる。
f:id:rikoubou:20180925172220p:plain

  • 期限

　カードに期限を追加する機能。期限をすぎると赤色になり、チェックを入れると緑色になる。
f:id:rikoubou:20180925172457p:plain
f:id:rikoubou:20180925172504p:plain

  • 添付ファイル

　カードにファイルを添付する機能。必要なファイルや素材などを添付しておくと便利。

  • 移動

　カードを移動させる機能。リストを移動させたりする時に使う。

  • コピー

　カードをコピーさせる機能。同じリスト内にもコピー可能。

  • フォローする

　カードに変更があった時に通知がくるようにする機能。

　カードを一時的に削除する機能。アーカイブされるとリスト上から消えるが、アーカイブに残っているので復元可能。アーカイブから消すと復元ができなくなる。

　以上がカードの設定です。
　色々ありますが、カードの名前をタスク名にしてチェックリストなどで詳細項目を出して進捗管理するというのが良さそうです。
　またリストをステータスとみなして「未着手」「実施中」「完了」などのリストを作って、各カードを移動させて進捗管理をしていくという方法があります。


５：個人的に良さそうな使い方
　個人的な使い方としては以下のように縦で管理していくのが良いのかなと思っています。
f:id:rikoubou:20180925173808p:plain

　というのも、リストをステータスとしてしまうと一つのカードを移動する度にチェックリストと期限を再設定しないといけなくなるため縦毎に管理した方がスッキリして見やすいような気がします。


　以上がTrelloというタスク管理ツールの紹介でした。

　調べてみるとSlackとの連携もできるようなので無料のツールなので試してみるのもよいかもしれません。
　自分も何かやるときにはTrelloを使ってみたいと思います。

【Blender】写真に合わせたシミュレーション方法

Blender アニメーション シミュレーション

rikoubou.hatenablog.com

　以前の記事でBlamアドオンの紹介をしました。
　今回はその続きとしてBlamで写真に合わせたシミュレーションを作成していこうと思います。

　前回作成したblendファイルを使っていくので必要な場合はダウンロードしてください。


１：レンダリング時の背景に写真を設定する
　前回背景として使用した写真をダウンロードリンクから保存しておきます。

　blamTest.blendを開いたら、右側にある「テクスチャアイコン」を左クリックして選択し「ワールドテクスチャアイコン」を左クリックで選択した後に「New」ボタンを左クリックします。
f:id:rikoubou:20180919174737p:plain

　追加したら「Image」の「Open」ボタンを左クリックして背景にしたい対象画像を読み込みます。
f:id:rikoubou:20180919174850p:plain
f:id:rikoubou:20180919175156p:plain

　画像を読み込んだらスクロールさせた先にある「Influence」の「Horizon」にチェックを入れます。
f:id:rikoubou:20180919175223p:plain

　次に「ワールドアイコン」を左クリックして「Paper Sky」にチェックを入れます。
f:id:rikoubou:20180919175346p:plain

　この状態で「Rendered」画面に切り替えます。
f:id:rikoubou:20180919175605p:plain

　すると、レンダリング時に読み込んだ画像が背景として表示されるようになります。
f:id:rikoubou:20180919175657p:plain

「テクスチャアイコン」からワールドのテクスチャに戻り「Image Mapping」の「Extension」を「Clip」に変更します。
f:id:rikoubou:20180919180211p:plain

　これでレンダリング時にも背景がそのまま使用できます。


２：シミュレーション用に透明なオブジェクトを配置する
　写真に合わせてボールを跳ねさせたいので、壁とベンチに透明なオブジェクトを作成します。

「Rendered」画面から「Material」画面に切り替えます。
f:id:rikoubou:20180919180953p:plain

　次に3D View上で「Shift＋Aキー」を押して「Cube」を選択します。
f:id:rikoubou:20180919180856p:plain

　これを変形させてカメラから見て背景のベンチと同じような位置になるよう配置します。
　この時3D View上で「Z」キーを押しすと線だけの表示になるので、それを使うと位置を合わせやすいです。
f:id:rikoubou:20180919181745p:plain

　次に実際にレンダリングする時にこのベンチに見立てたCubeが見えてしまうと困るので、以下の記事にしたがってオブジェクトを透明にします。

　透明にしたら「Physicsアイコン」の「Rigid Body」ボタンを押します。
f:id:rikoubou:20180919182738p:plain

　そして「Rigid Body」の「Type」を「Passive」に変更します。
f:id:rikoubou:20180919182918p:plain

　同じように壁のオブジェクトも追加して以下のようにします。
f:id:rikoubou:20180919183024p:plain

　これで透明なオブジェクトの準備が完了です。


３：シミュレーション用を行う
　「Sphere」を選択した状態で「Physicsアイコン」の「Rigid Body」ボタンを押します。
f:id:rikoubou:20180919183159p:plain

　Rigid BodyをSphereに追加したら下画面を「Dope Sheet」に切り替えます。
f:id:rikoubou:20180919183414p:plain

　3D View上で「i」キーを押して「Location」を選択してSphereの現在位置を1フレーム目に登録します。
f:id:rikoubou:20180919184122p:plain

　次に3フレーム目に移動させ、Sphereを壁に少しだけ近づける位置に移動させて同様に3フレーム目に位置を登録します。
f:id:rikoubou:20180919184548p:plain

　そこまでできたらSphereの「Physicsアイコン」を選択して「Rigid Body」の「Animated」にチェックを入れて「i」キーを押して登録します。
f:id:rikoubou:20180919184840p:plain

　次に4フレーム目にして「Rigid Body」の「Animated」にチェックを外して「i」キーを押して登録します。
f:id:rikoubou:20180919185030p:plain

　これで初速を設定できたのでアニメーションで再生してみると以下のようになります。
f:id:rikoubou:20180919185243g:plain

　地面に透明なオブジェクトを置いてないので落ちていますが、ちゃんと写真の壁とベンチにSphereが当たっているように見えます。

　照明と色を調節してレンダリングすると以下のようになります。

　あとは反発係数を調節したり色や照明を調節すればよりリアルになります。


　以上が写真に合わせたシミュレーション方法です。我流なのでもう少し良い方法があれば教えていただきたいです。

　今回作成したblendファイルも公開しておきます。


・参考資料

【M5Stack】M5Stackの環境構築方法

Arduino ESP32 環境構築 M5Stack

　最近Blenderばかりだったのでかなり久々のマイコン関係の記事です。
　今年に入ってぐらいからM5Stackというマイコンをネット上で目にするようになりました。

　気になって購入してはいたのですが、なかなか触れずにいたので今回触ってみた次第です。

　私が購入したのは以下の「M5Stack Fire」というモデルです。
www.switch-science.com

　この他にもBasicやGrayといった別のモデルも存在します。
　今回はこのM5Stackの環境構築方法を説明していきます。
　※MacOSでの環境構築になります。

　基本的には以前紹介したESP32の環境構築方法にライブラリを加えるだけです。

　また詳細な手順は以下の公式のGithubのページを参照してください。

　では始めます。


１：Arduino IDEをインストールする
　以下のページからOSに合ったArduino IDEをダウンロードしてインストールします。


２：Pythonをインストールする（Windows以外のOSの場合に必要）
　途中でpythonのファイルを実行する場面があるので、以下のページからダウンロードしてPythonをインストールします。
www.python.org


３：必要なファイルをダウンロードして適切な場所に配置する
　すでに記述した手順のArduino IDE、pythonに加えてgitもインストールされている場合は、ターミナルを開いて以下のコマンドを1行ずつコピペして実行するだけでOKです。

mkdir -p ~/Documents/Arduino/hardware/espressif
cd ~/Documents/Arduino/hardware/espressif
git clone https://github.com/espressif/arduino-esp32.git esp32
cd esp32
git submodule update --init --recursive
cd tools
python get.py


４：M5Stackのライブラリをインストールし書き込める状態にする
　３までできたらArduino IDEを起動させメニューの「スケッチ」→「ライブラリをインクルード」→「ライブラリを管理」を選択します。
f:id:rikoubou:20180910142120p:plain

　ライブラリマネージャが開くので検索ボックスに「m5stack」と入力して出てきた中の「M5Stack by M5Stack」と書かれているライブラリのインストールボタンをクリックしてインストールします。
f:id:rikoubou:20180910142418p:plain

　インストールが完了したらメニューの「ツール」→「ボード」→「M5Stack-Fire」を選択します。（今回はM5Stack Fireを使用しているのでこちらを選択しています。BasicやGrayの場合は「M5Stack-Core-ESP32」を選択してください）
f:id:rikoubou:20180910143440p:plain

　Upload Speedを「115200」にします。
f:id:rikoubou:20180910144624p:plain

　この状態でM5Stack FireとPCをUSBケーブルで接続しM5Stack Fireのポートを選択します。
f:id:rikoubou:20180910144815p:plain

　これでスケッチを書き込む準備ができました。


５：M5Stackにサンプルスケッチを書き込んでみる
　今回はDisplayというサンプルを書き込んでみます。
　メニューの「ファイル」→「スケッチ例」→「M5Stack」→「Basics」→「Display」を選択してスケッチを開きます。
f:id:rikoubou:20180910145016p:plain

　スケッチが開くので矢印のボタンをクリックしてスケッチを書き込みます。
f:id:rikoubou:20180910145424p:plain

　書き込みが終了すると以下のようにサンプルが起動して様々な色の三角形が画面に表示されます。


　以上がM5Stackの環境構築方法です。
　とりあえずサンプルが動いたのでM5Stackを使って何か作ってみたいです。


・参考資料