月別アーカイブ: 2012年9月

 とは-文字参照あれこれ

テキスト入力


とても基本的なことがどういうわけか分からなくなり、焦る･･･ということが最近多い。

今日、焦ったのは文字参照。
これはHTML中に不等記号なんかのHTMLを崩してしまう特殊な文字を安全に表示させる方法で、これを利用してブログ記事やコメント欄なんかで♥と入力すれば表示では♥に変換できる昔からのテクニックです。指「☞」とかだせますよ。
&heats;は文字なので文字実体参照、これを文字コードにすると♥(16進数) または &#9829(10進数) で、こっちを数値文字参照といいます。

自分は興味のある地元情報をWEBスクレイピングの技術を使って自動で集めており、集めたデータはおもっさまミカメジャーナルのウィジェットに表示させたりしてます。
クローリングした内容に が含まれていて、これが何かちょっと調べて問題なければ除去しようかと。

なんとなく、スペースか改行なんだろうと思うけど。

とりあえずPHPで数値参照、文字参照を変換するにはmb_convert_encodingが使えて
[php]

echo mb_convert_encoding(" ", "UTF-8", "HTML-ENTITIES");
[/php]
でいい。

コマンドラインPHPでやってみたので
[shell]

php -r ‘echo mb_convert_encoding(" ", "UTF-8", "HTML-ENTITIES");’ | less
[/shell]
すると<C2><A0>と表示されました。

分かる人には分かるのかもしれないけど自分にはよく分からない。

数値参照の数値はASCIIテーブルに格納されている番地だった気がするのでその表をみれば分かるかもしれないと思い、記憶を頼りに探そうとするのだけどどこにあったか思い出せない。
たしかすごくいいマッピングテーブルを8年位前にどっかでみた。それがみつからず。こういうことに時間使ってちゃあだめですね、自分。

Wikipediaで分かったのだけど数値参照の数値はUNICODEを基にした国際規格ISO/IEC 10646（UCS）の文字番号で指定するのだとか。

同じくWikipediaのISO/IEC 8859-1（Latin-1）のページでみつけたマッピングテーブル。

ISO/IEC 8859-1
x0 x1 x2 x3 x4 x5 x6 x7 x8 x9 xA xB xC xD xE xF
0x 未使用
1x
2x SP ! “ # $ % & ‘ ( ) * + , – . /
3x 0 1 2 3 4 5 6 7 8 9 : ; < = > ?
4x @ A B C D E F G H I J K L M N O
5x P Q R S T U V W X Y Z [ \ ] ^ _
6x ` a b c d e f g h i j k l m n o
7x p q r s t u v w x y z { | } ~
8x 未使用
9x
Ax NBSP ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ SHY ® ¯
Bx ° ± ² ³ ´ µ · ¸ ¹ º » ¼ ½ ¾ ¿
Cx À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï
Dx Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß
Ex à á â ã ä å æ ç è é ê ë ì í î ï
Fx ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ

UCSのマッピングテーブルをみたかったのだけど、これでもいいや。latin-1の横16列、縦16列の256文字（割り当てられてない領域も含む）はどの文字コードでも互換性のある基本中の基本で、この中に&#160;も含まれています。
160を16進数になおすとA0、ということで縦がAで横が0の列、「NBSP」が&#160;の正体でした。

NBSPとはNonBreakSpaceのことで文字参照の&nbsp;と書きます。
こちらのほうがHTMLコーディングしている人にとってはよく使いますよね。

&#160が&nbsp;の単なる別の表記だと分かったので、どちらも空白に変換するよう修正。
あぁ、ついでに16進数数値文字参照の&#xA0;も同じ処理にしとこう。
mb_convert_encodingで文字参照をすべて実体化する処理がすんなりいけば、それを最初にするだけでいいです。

ちなみにコマンドラインでみえた<C2><A0>はUTF-8でのNBSPらしい。C2A0で検索かけるといろいろでてきた。lessはそういう表示の仕方なんですね。

別の疑問が沸いてきます、空白にはSP（&#20;）が登録されているのに、なぜNBSP（&#160;）があるのでしょう。

これには欧文と和文の違い、そしてHTML上での表現の仕方が関係してそうなのですが、それについて調べてると長くなるのでまた今度！

【blender】ちょっとした小技

blender

プロパティの小技

  • スライドバーでドラッグしている時にShitボタンを押すと微妙な調整ができます。Ctrlを押すと小数点のつかないステップ入力になります。
  • スライドバーをクリックして数字を入れるときに5/10+3や、pi数式も入れられます。PythonのMath関数が使えるようです。

モデリングの小技

  • Ctrlを押しながら左クリックで連続的に頂点の引き伸ばしや面を張れます。

Macの小技

  • パネルや3Dウィンドウ内のプロパティシェルフでピンチイン・ピンチアウトの操作を行うとパネル内の文字やボタンの大きさが変わります。
  • MacでF12レンダリングを有効にするにはOSのシステム環境設定でキーボードの標準のファンクションキーと使用するようチェックマークをつけ、キーボードショートカットでMissionControlのF12Dashboardを表示を無効にしておきます。

【Unity】ドラッグで回転盤を回転させるスクリプト1

Unity

Unityで回転盤のようなものをドラッグで回転させる方法を考えていたのですが、UnityのCommunityでまさにこれだ！という回答をみつけました。

How to rotate a GameObject?

[javascript]
// 他のオブジェクトとのリンク:
var dummyPointer : Transform; // 空のゲームオブジェクトだけでいい (見えないけどね)
var disc : Transform; // メインの回転盤

// Variables:
private var dummyOffset : float;
private var discOffset : float;

// A Flag:
private var mouseIsUp : boolean = true;

// Raycast SetUp:
var hit : RaycastHit;

function Update () {

// マウス押したか:
if (Input.GetMouseButton(0)){

// 判定のRaycast発射:
var ray = Camera.main.ScreenPointToRay (Input.mousePosition);

// 光線が特定の名前のオブジェクトにあたった:
if (Physics.Raycast (ray, hit) && (hit.transform.name == "hayami_base")){

// 常にダミーはあたった箇所を向く:
dummyPointer.LookAt(hit.point);

// マウスを押したときの初期処理:
if(mouseIsUp){

// ダミーとメイン回転盤の角度を覚えておく:
dummyOffset = dummyPointer.eulerAngles.y;
discOffset = disc.eulerAngles.y;

// 最初のクリックでなくなる:
mouseIsUp = false;

}else{

// 最初のクリックでない (押し続け)
// ダミーから回転盤の回転をセットすることができる:
disc.eulerAngles.y = discOffset + (dummyPointer.eulerAngles.y – dummyOffset);
}

}

}else if (!mouseIsUp){
// クリックが終わったらからフラグも戻す:
mouseIsUp = true;
}
}
[/javascript]

このスクリプトをMainCameraにアタッチして、dummyPointerに空のGameObjectを、discに回転させたい物体をいれ、hit.transform.name == “hayami_base”と判定しているところにはクリックして回転させるオブジェクトの名前を入れればすぐ使えるようになります。

ダミーのオブジェクトをLookAtでクリックしてる点の方向に向かせ、その角度を使用するというのはまさに目から鱗でした。LookAtという便利関数を使うために、間にオブジェクトをかませることでややこしい数学とか使わなくてもいけるもんなんですね！
あとはこれをタッチポインタ向けに書き換えればいいだけ。

続きの記事書きました。

【blender】UV Layoutの出力

blender

blenderでUV Layoutを出力する方法を忘れてしばらく探してたのでメモ。

UV/Image EditorパネルのUVsから「Export UV Layout」でいけます。
Image＞SaveAsImageの近くで探してしまうので、ちょっとした盲点。

さらにデスクトップに保存しようとするとファイルサイズ0byteのpngファイルが保存されてしまう罠。
日本語がパスに入っているとだめなのかもしれません。
保存先を変えてうまくいきました。

フラクタル図形が作れるApophysis

未分類

フラクタル図形を作れるApophysisというソフトを知りました。

最初2.09を使ってたんですがチュートリアルなどをみてると7xを使っている人が多いようです。機能的にあまり差はなさそうですが7ｘのほうが最初にでてくるフラクタルがきれいなんでおすすめです。

Apophysisのサイト。DownloadからSourceForgeで2.09ダウンロードできます。
http://apophysis.org/

独自進化してるぽい7x
http://sourceforge.net/projects/apophysis7x/

ダウンロードして使ってみると、これはすごい、いろんな図形が作れます。

すごく奥が深そうですが、使いこなせるんだろうかと思っていると、pixivで使われているらしくけっこう日本語ドキュメントが充実していたので、なんか作れそうな気がします。

ピクシブ百科事典「Apophysis」
http://dic.pixiv.net/a/Apophysis

これでミュージックビデオみたいなの作るとかっこいいかもしれませんね。

【blender】cylinderを細分化する方法

blender

MeshのCylinderを追加した直後ならTを押してでてくるパネルからポリゴンの細かさをVerticesで変えられます。


しかしそれが出来るのはCylinderを追加した直後だけです。

Smoothで滑らかにする

途中でポリゴンを分割する方法は後にして、とりあえず表面の見た目を滑らかにするためにSmoothをかけます。
blenderで作成した面は最初Flatになっています。なのでSmoothにしたい部分を選択してSmoothをかける必要があります。とりあえず全頂点を選択してSmoothをかけてみました。

全部が滑らかになって丸っこくなってしまいましたね。この形では側面だけ選択してSmoothかければよかったのですがこの方法では隣接したポリゴンの間にエッジをたてることができない問題があります。どうしてそうなるかというと、共通したVertex（頂点）ではNormal（法線）がひとつだけだからです。この説明で分からなくてもとりあえず困りはしないです。

特定の辺にエッジをきかせる

側面との上面の境にここにエッジをつけるにはいくつか方法があります。
・Auto Smoothを使う
・EdgeSplitを使う
・面をYで切り離す
Auto SmoothはPropertiesのObject DataのNormalsの中という分かりにくい場所にチェックボックスがありますがレンダリング時のみしか反映されません。使う必要はないと思います。

ModifiersのEdgeSplitではEdgeAngleにチェックをつけると、その下のスライダでシャープにする角度を決められます。
SharpEdgesにチェックをつけると、Ctrl+EでMarkSharpした辺をシャープにします。
エッジをたてたい辺を選択して（Altを押しながら辺を選ぶとやりやすい）、Ctrl+EででてくるダイアログからMark Sharpを選びます。

曲面でわざとエッジをたてることもできます。

元のポリゴンは残したまま、柔軟にエッジをたてられるのがEdgeSplitです。

ポリゴンを分割する

EdgeSplitで見た目は解決しましたが、スカルプトで形を変えたいなどポリゴンを細分化するにはSubdivideを使う方法とModifiersからSubdivision Surfaceを使う方法、同じくModifiersからMultiresolutionを使う方法があります。

EditModeの状態でTパネルの中にあるSubdivideを使えば選択した面を細分化できますが、円柱のカーブが表現できていないようです。

Subdivideした直後に出現するSubdividsパネルからSmoothnessを使うと、なんだかたる型に膨らんでしまいましたね。

スカルプトモデリングといえばblenderにはそのためにMultiresolutionがあります。
Subdivision SurfaceとMultiresolutionはよく似た機能ですがMultiresolutionのほうがスカルプト用に分割できるのでスカルプト向きの機能かな、という気がします。
Modifiersの中にあるMultiresolutionを使ってみます。
Modifiersで変形させるときにはEditModeから抜けてObjectModeで変形させたいオブジェクトを選択しておく必要があります。この辺がなんだかviみたいに分かるまでつかいづらいblenderですね。

全体の形が変わってしまいました。

最後にYで面を切り離すやり方を試します。分かりやすいようにNででてくるパネルからMeshDisplayのNormals:VertexをONにしてます。

Yを押すと切り離され、Vertexが2つ重なった状態になっているのでNormal(法線)も2つでています。この2つの法線がまったく違う方向を向いているので、この差によってエッジがたつように見えます。

この切り離されたオブジェクトにMultiresolutionをかけると、エッジのたったままいい感じに曲面を滑らかに補完しながら分割してくれます。
これでCylinderにスカルプトで形状を変える事ができるようになりました。

実のところ、Yで切り離せばEdgeSplitを使う必要はありません。というか、元のポリゴンを変えずに動的に切り離すのがEdgeSplitの機能なのでしょう。
EdgeSplitによって切り離したのと同じようにいい感じに細分化されるかと思ったのですが、うまくいかず。結局、昔ながらの手動切り離しをつかった方法が一番確かかもしれません。

参考：
blender公式ドキュメントの中でも数少ない日本語訳されてるページMesh smoothing

海川メノウさんのCG制作Blenderモディファイア（EdgeSplit）