Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CANVASを用いた正多面体のステレオ表示

 CANVASを用いた正多面体のステレオ表示

ゆるはちITでのLT発表内容を一部修正したものです。 HTML5ではCanvas使えば、このようなお絵描きもできるというサンプルです。 実装してみて、正20面体では黄金比、正12面体では黄金比の2乗が関係してくることを初めて知りました。

00d4d99393cedb95802a7f2c2024a555?s=128

iriyama

June 26, 2019
Tweet

Transcript

  1. CANVASを用いた正多面体のス テレオ表示について 入山徳夫

  2. 自己紹介 出身 : 新潟市南区 (旧 白根市) 新潟大学工学部 情報工学科 第一種情報処理技術者試験合格 各種言語でのプログラミング経験有

    (C#, Python, C++, JavaScript, Perl, PHP CUDA, VerilogHDL, FORTRAN) 2020年には八王子で ゆるく仕事をしていたいです。 入山のアルゴリズムというのがあります。この場を借りて紹介しておきます。 (共立出版:bit 1983年4月 ナノピコ教室解答編において 大駒誠一教授より、これに入山のアルゴリズムと名前を つけたいと好評いただきました)
  3. 入山のアルゴリズム 例: 100個中から30個を選ぶ 組み合わせ の計算 100C30 = (順番を考慮)100個から30個を選ぶ順列 ÷(順番相違で同じになる組み合わせ)30個の順列 100*99*98*....*72*71

    30*29*28*.... * 2 * 1 これを約分する手間を想像してみてください。。。。 どれとどれが割り切れるか? 最大公約数は? 左右を入れ替えて、小さい数から考えた事が、いわばコロンブスの卵 ⇒次頁
  4. 入山のアルゴリズム 例: 100個中から30個を選ぶ 組み合わせ の計算 100C30 = (順番を考慮)100個から30個を選ぶ順列 ÷(順番相違で同じになる組み合わせ)30個の順列 100*99*98*....*72*71

    30*29*28*.... * 2 * 1 71*72*73*・・・・ *99*100 1*2*3* ・・・ *29*30 次ページに示すように 逐次計算で左から右へ飛び飛びに機械的に約分ができる
  5. 入山のアルゴリズム 1から昇順の整数の並びにおいて (k=2から順にk=3, k=4,…と反復して) k番目の数で kの倍数番目の数は 必ず割り切れる。 1, 2, 3,

    4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15,・・・・・ ↓ ↓ ↓ ↓ ↓ ↓ ↓ 2番目の数2で、偶数番目の数字が割りきれる 1, 1, 3, 2, 5, 3, 7, 4, 9, 5, 11, 6, 13, 7, 15,・・・・・ ↓ ↓ ↓ ↓ ↓3番目の数字3で、3n番目の数字が割りきれる 1, 1, 1, 2, 5, 1, 7, 4, 3, 5, 11, 2, 13, 7, 5,・・・・・ ↓ ↓ ↓ 4番目の数(4でなくて2)で、4n番目の数字が割りきれる 1, 1, 1, 1, 5, 1, 7, 2, 3, 5, 11, 1, 13, 7, 5,・・・・・ ↓ ↓ ↓ 5番目の数5で、5n番目の数字が割りきれる 1, 1, 1, 1, 1, 1, 7, 2, 3, 1, 11, 1, 13, 7, 1,・・・・・ 6番目の数字は1だから、実際に割り算するまでもなく12,18番目は割り切れる <分子の数は(n-r)をkで割った余りだけ分母より左側の位置の数を除算すればよい> K番目の数でkの倍数番目の数を 順にいつでも割っていくことができることは nCr (n個からr個選ぶ組み合わせ)を求める分数計算での約分に好適 (約分してから積算することで答がオーバーフローしないなら計算の途中でも オーバーフローしない。 約分する相手を探したり、最大公約数の算出する手間が不要)
  6. CANVASについて 参考文献: canvasでググるとみつかります。 • http://www.html5.jp/canvas/how.html • マウス座標の取得と再描画についてはこちらを参考にしました。 http://archiva.jp/web/javascript/get_mouse-position.html • JavaScriptのプログラムサンプルはこちら:

    http://np38.web.fc2.com/3d-demosample.html IE以外のブラウザで、広告の表示を閉じて御覧下さい。 マウスドラッグで図形が回転します。 正四面体は、面を塗りつぶして、より小さく表示して 後に示すように焦点合わせの目印に御利用下さい。
  7. 正20面体の頂点座標について • 正20面体の頂点位置 3枚の直交する長方形(縦横比=黄金比)の頂点位置

  8. 正12面体の頂点座標について • 正12面体の頂点位置 立方体の頂点+3枚の直交する長方形(縦横比=黄金比2)の頂点

  9. 投影図法について • Z座標:奥行方向の距離の比で X座標値 Y座標値をスケーリングする 相似につき縦横の矢印 どうしの 比は等しい

  10. ステレオ表示の見方: 交差法: わざと寄り目にして 右の眼で左の画像を 左の眼で右の画像を見てください。

  11. 手前の指が2つにボケて 概ね 左右両方の目印に合う位置で: 指の方に焦点をあわせつつ ブレた背景の画像どうしを 重ねてみてください 指 指 指 指

    2つの画像が 一つになること