2018-07-13

UnityでScaleの基準点を変更するメモ

Unity C#

Unityで作成したオブジェクトのScaleを変更すると，

（Y軸方向に伸縮）
f:id:memonoana:20180713112235g:plain:w300

オブジェクトの中心を基準として上下に伸縮する．
この場合，Unityで作成したCubeは基準点がオブジェクトの中心になっているから．

これを，

f:id:memonoana:20180713112921g:plain:w300

こうしたい．

方法1：オブジェクトの親子関係を利用する

参考：UnityでObjectのPivotを変更する - 脳汁portal

空のオブジェクトを作成して，その子要素にScaleを変更したいオブジェクト（今回はCube）を設定する．
EmptyのPositionが新しく基準にしたい位置（今回はCubeの底）に来るように，CubeのPositionを変更する．
Emptyを伸縮させると，Cubeが底を基準に伸縮する．

方法2：モデリングツールでオブジェクトの基準点を変更する

そもそも”Unityで”ではなくて元も子もないんだけど，モデリングツールで基準点を好きな位置に設定すればいい．

Unity側では下の画像のところを「Pivot」にしておく．

f:id:memonoana:20180713125319p:plain

方法3：

何かあれば追加

2018-06-05

ディレクトリ構成のツリー図を編集してコピペできるやつをつくった

JavaScript

概要

こういうやつ

aaa
  |--bbb
  |    |--ddd
  |    `--eee
  `--ccc

を，さくっと編集してコピペできるやつが欲しかったのでつくった．
treeコマンドでやるのが一番手っ取り早いとは思うんだけど，自分の好きな構成にいじりたい時もある気がするので．あと，ちゃんと探せばこういうことできるものは既にあるような気もするんだけど，まぁお勉強ということで．

できたもの

URL：https://dirtree.netlify.com/

f:id:memonoana:20180605113304p:plain

左側のエリアで編集したものが，右側のエリアにコピーできる形で表示される．

左側

矢印ボタンでディレクトリの開閉，プラスボタンでディレクトリの追加，マイナスボタンでディレクトリの削除，ディレクトリ名をダブルクリックでディレクトリ名の編集ができる．

閉じたディレクトリの中身は右側には表示されない．

f:id:memonoana:20180605115000p:plain

右側

マウスでテキストを選択してコピーするか，右上のコピーボタンからコピーする．

実装について

Vue.jsでツリー図を表示する際にこちらを参考にした．

jp.vuejs.org

こちらの例では，itemコンポーネントが木構造のデータをPropsで受け取り，子要素についてさらにitemコンポーネントを呼ぶことで，再帰的にツリー図を表示している．

<!-- ルート -->
<ul>
  <item :model="treeData"></item>
</ul>

<!-- itemコンポーネント -->
<li>
  {{model.name}}
  <ul>
    <item v-for="(model, index) in model.children" :key="index" :model="model"></item>
  </ul>
</li>

まとめ

ディレクトリ構成のツリー図を編集してコピペできるやつをつくった．

ローカルのディレクトリをインポートしてそれを反映させるっていうのもやりたいんだけど別にいらない気もする．ディレクトリ名を変更する時のデザインとかページの全体的なデザインはもっと考えたい．

2018-05-19

超!A&G+の番組一覧を取得するnpmモジュール

JavaScript

概要

超!A&G+で放送されている番組の一覧を取得するnpmモジュールを作成した．非公式．

URL：agqr-list - npm

使い方

getProgramListで番組一覧を取得する．

import agqr from 'agqr-list'

agqr.getProgramList()
  .then((list) => {
    console.log(list)
  })

getProgramList

全ての曜日

getProgramListに引数を与えないか，getProgramList('All')で全曜日の番組一覧を取得する．

// getProgramList(), getProgramList('All')
{ Mon: 
   [ { start: '06:00', time: '60', title: 'A&G ARTIST ZONE Mia REGINAのTHE CATCH' },
     { start: '07:00', time: '30', title: 'ガールズジョッキー ラジオステークス' },
     ... ],
  Tue: 
   [ ... ],
  Wed:
   [ ... ],
  Thu:
   [ ... ],
  Fri:
   [ ... ],
  Sat:
   [ ... ],
  Sun:
   [ ... ] }

それぞれの番組については，開始時間と放送時間(分)，タイトルを取得する．

曜日の指定

getProgramList('曜日')でその曜日の番組一覧を取得する．引数として与えられるのは'Mon'，'Tue'，'Wed'，'Thu'，'Fri'，'Sat'，'Sun'のいずれか．

// getProgramList('Mon')
[ { start: '06:00', time: '60', title: 'A&G ARTIST ZONE Mia REGINAのTHE CATCH' },
  { start: '07:00', time: '30', title: 'ガールズジョッキー ラジオステークス' },
  ... ]

まとめ

超!A&G+で放送されている番組の一覧を取得するnpmモジュールを作成した．コードについては触れてないけど，公式サイトから力技でデータを取得してるので，公式サイトの仕様が変わると使えなくなる可能性あり．

2018-05-14

GitHubのContributionsをthree.jsで表示

JavaScript

概要

isometric-contributionsというChrome拡張が面白かったので，three.jsの練習に，GitHubのユーザ名を入力すると，Contributionsをthree.jsで描画するものをつくった．

Contributions？

GitHubのユーザページに表示されるこれ．草や芝とも呼ばれたりする．

f:id:memonoana:20180514143648p:plain

デモ

URL：https://ghgrass-three.azurewebsites.net/

検索欄にGitHubのユーザ名を入力して検索ボタンを押すとContributionsが表示される．

検索欄の下にあるラジオボタンで表示方法を切り替えられて，

単純に立体的にしたBoxと，

f:id:memonoana:20180514144854p:plain

ちょっと草っぽくしたPyramidがある．

f:id:memonoana:20180514144912p:plain

Pyramidは自分のようなContributionsだと荒れ地みたいになるけど，濃い緑が密集するとけっこう草っぽく見える．

実装

実装に関してContributionsの取得とthree.jsでの表示について簡単に説明する．

Contributionsの取得

GitHubのContributionsは

https://github.com/users/{ユーザ名}/contributions

から取得できる．「各日のContribution数」と「マス目の色」を取得できるのでこれらを使用する．

参考：GitHubのcontributionsをターミナルに表示してみた - Qiita

GitHubのデータを取得するのならGitHub APIからいけるのかと思ったけど，サッと見た感じすんなりとは取れなさそうだったので上記のURLから取得することに．

three.jsでの表示

three.jsはr92を使用している．

基本的には「各日のContribution数」をもとに高さ，「マス目の色」をもとに色を決定してオブジェクトを生成する．Contribution数をそのままオブジェクトの高さに反映させると，人によって画面に収まりきらない場合が出てくると考えたので，取得したContribution数の最大値を基準にして相対的に高さを決定するようにした．

Box

単純にTHREE.BoxGeometry()で作成．

Pyramid

最初は草の3Dモデルをつくって風で揺らして～ということも考えてたんだけど，そんなモデリング技術は無いしめんどくさいのでTHREE.BufferGeometry()で作成．9個の頂点でピラミッドっぽい形状をつくっている．また，ある程度揺らぎを表現するために1番上の1点の位置はランダムに決定している．ただランダムの範囲をけっこう狭くしてるのであまり違いが見られないような気もする．

まとめ

GitHubのContributionsを取得し，three.jsで描画した．そもそもデスクトップマスコットみたいなものを作成しようと飛び出したらこんなところに着地した．カメラやライトの使い方が不慣れなのでもっと学習していきたい．あと今回初めてBufferGeometryを触ったけど，ちゃんとWebGLも勉強しないといけないなと感じた．