babu_babu_babooのごみ箱

2016-06-07

JavaScript:マウスのドラッグ操作により、3次元の物体の回転を制御する

| 13:37

/*
 マウスのドラッグ操作で、3次元の物体の回転を制御する

*/

(function () {

  var INIT_QUATERNION = [1, 0, 0, 0];

  function RotationController (element) {
    this.target = element;
    this.mouseX = null;//マウス座標の基点
    this.mouseY = null;//マウス座標の基点
    this.touchF = false; //ドラッグ中か?
    this.Qnow = INIT_QUATERNION; //今回のマウスのドラッグ中のクォータニオン
    this.Qbef = INIT_QUATERNION; //前回のクォータニオン
    this.rots = INIT_QUATERNION; //今回と前回のクォータニオンの積(これが重要)
    this.gain = 1 / element.offsetWidth ; // mouse移動の感度
    this.dx = 0;//マウスの慣性移動量
    this.dy = 0;//マウスの慣性移動量
    this.timerId = null;//慣性移動中のタイマーID
    this.miniInertia = 1e-7;//慣性移動量の最小値
  }
  
  
  //画面の2次元移動量から3次元の回転量を求める
  function rotation (dx, dy) {
    var a, b, a0, a1, a2, a3, b0, b1, b2, b3, r, t, as;

    if (t = dx * dx + dy * dy) {
      r = Math.sqrt (t);
      as = Math.sin (r) / r;
      a = this.Qnow;
      a0 = a[0]; a1 = a[1]; a2 = a[2]; a3 = a[3];
      b0 = dy * as; b1 = dx * as; b3 = Math.cos (r);

      // クオータニオンによる回転
      a = this.Qbef;
      b = this.Qnow = [
        a0 * b3 - a3 * b0           - a2 * b1,
        a1 * b3 + a3 * b1 - a2 * b0,
        a2 * b3           + a0 * b1 + a1 * b0,
        a3 * b3 + a0 * b0 - a1 * b1
      ];

      //前回(a)と今回(b)のクォータニオンの積
      a0 = a[0]; a1 = a[1]; a2 = a[2]; a3 = a[3];
      b0 = b[0]; b1 = b[1]; b2 = b[2]; b3 = b[3];
      
      this.rots = [
        a0 * b0 - a1 * b1 - a2 * b2 - a3 * b3,
        a0 * b1 + a1 * b0 + a2 * b3 - a3 * b2,
        a0 * b2 - a1 * b3 + a2 * b0 + a3 * b1,
        a0 * b3 + a1 * b2 - a2 * b1 + a3 * b0
      ];
      this.dx = dx;
      this.dy = dy;
    }
    return t;
  }
  
  
  //慣性
  function inertia () {
    var distance = rotation.call (
      this,
      this.dx - this.dx / 40,
      this.dy - this.dy / 40
    );
    
    if (this.miniInertia < distance)
      this.timerId = setTimeout (inertia.bind (this), 33);
  }


  //クォータニオンによる座標群の回転
  function quaternionRotation (material) {
    
    var i, j, x, y, z;
    var surface, vertex;
    var q = this.rots;
    var q0 = q[0], q1 = q[1], q2 = q[2], q3 = q[3];
    var a0, a1, a2, a3;
    var s = [], rst = [];

    for (i = 0; surface = material[i]; i++) {
      for (j = 0, s = []; vertex = surface[j]; j++) {
        x = vertex[0], y = vertex[1], z = vertex[2];
        a0 =  q3 * x + q1 * z - q2 * y;
        a1 =  q3 * y + q2 * x - q0 * z;
        a2 =  q3 * z + q0 * y - q1 * x;
        a3 = -q0 * x - q1 * y - q2 * z;
        s[j] = [
          a0 * q3 - a3 * q0 - a1 * q2 + a2 * q1,
          a1 * q3 - a3 * q1 - a2 * q0 + a0 * q2,
          a2 * q3 - a3 * q2 - a0 * q1 + a1 * q0
        ];
      }
      rst[i] = s;
    }
    return rst;
  }

  
  //各イベント処理
  function handleEvent (event) {
    var e, x, y, dx, dy, a, b, c, e, r, t;
    var a0, a1, a2, a3, b0, b1, b2, b3, as;
    
    switch (event.type) {

    // 制御終了
    case 'mouseup' :
    case 'mouseout' :
    case 'touchend' :
      this.touchF = false;
      inertia.call (this);//制御を慣性にする
      break;
    
    // 制御開始
    case 'mousedown' :
    case 'touchstart' :
      if (this.timerId) {//慣性を解除
        clearTimeout (this.timerId);
        this.timerId = null;
      }
      this.touchF = true;
      this.Qnow = INIT_QUATERNION;
      this.Qbef = this.rots;
      e = event.target.getBoundingClientRect ();
      this.mouseX = event.pageX - e.left;
      this.mouseY = event.pageY - e.top;
      break;

    // 回転制御中
    case 'mousemove' :
    case 'touchmove' :
      event.preventDefault ();//ipadなどでスクロールさせないため
      e = event.target.getBoundingClientRect ();
      x = event.pageX - e.left;
      y = event.pageY - e.top;

      if (this.touchF){
        dx = (x - this.mouseX) * this.gain;
        dy = (y - this.mouseY) * this.gain;
        rotation.call (this, dx, dy);
      }

      this.mouseX = x;
      this.mouseY = y;
      break;
    }
  
  }
  
  
  // 要素にイベントを追加する
  function addEvent (event_type) {
    this.target.addEventListener (event_type, this, false);
  }
  
  
  // オブジェクトの生成
  function create (target) {
    if (1 > arguments.length)
      throw new Error ('引数がない');

    var obj = new RotationController (target);
    var event_list = window.TouchEvent //touchイベントがあるなら優先
      ? ['touchstart', 'touchend', 'touchmove']
      : ['mousedown', 'mouseup', 'mousemove', 'mouseout'];
      
    canvas = null;// メモリーリークパターンを断ち切る
    event_list.forEach (addEvent, obj);

    return obj;
  }
  
  //__
  
  RotationController.prototype.handleEvent = handleEvent;
  RotationController.prototype.quaternionRotation = quaternionRotation;
  //__
  RotationController.create = create;
  
  this.RotationController = RotationController;

}) ();

/*
使い方

  var loop = function () {
    var target = document.querySelector ('canvas');
    var ctl = RotationController.create (target);
    var ps = [ [x0, y0, z0], .., [xn, yn, zn] ];//3次元座標の配列
    
    return function () {
      var ps_ = ctl.quaternionRotation (ps);
      //ps_ には、回転後の3次元座標が代入される
      draw (ps_);//ps_を利用して線や点を描く
    };
  };
  
  setInterval (loop, 1000/60); //タイマーで呼び出す
*/

2016-06-05

右目の視力がほぼゼロになる

15:08

これで3回め。車の運転もできない。大きなストレスとなる。

治療の成果がなかなか現れない。

2016-05-19

JavaScriptで選択問題作成(3)

| 19:47

それにしても、やっちまったなぁ〜

JavaScriptで選択問題作成(3)
http://okwave.jp/qa/q9174815.html

<!DOCTYPE html>
  <meta charset="utf-8">
<style>
fieldset.q ul { list-style: none; }

</style>

<body>
<h1>問題</h1>
<fieldset class="q">
  <legend>Q1. 九州の県は次のうちどれですか?</legend>
  <ul>
    <li><label><input type="checkbox" name="q1" value="true">福岡</label>
    <li><label><input type="checkbox" name="q1" value="false">岡山</label>
    <li><label><input type="checkbox" name="q1" value="false">山形</label>
    <li><label><input type="checkbox" name="q1" value="true">長崎</label>
    <li><label><input type="checkbox" name="q1" value="true">熊本</label>
    <li><label><input type="checkbox" name="q1" value="false">新潟</label>
    <li><label><input type="checkbox" name="q1" value="false">山口</label>
    <li><label><input type="checkbox" name="q1" value="true">鹿児島</label>
    <li><label><input type="checkbox" name="q1" value="true">佐賀</label>
    <li><label><input type="checkbox" name="q1" value="false">青森</label>
    <li><label><input type="checkbox" name="q1" value="true">宮崎</label>
    <li><label><input type="checkbox" name="q1" value="false">千葉</label>

  </ul>
  <input type="button" value="解答">
  <input type="hidden" name="q1" value="">
</fieldset>

<p>
  <input type="button" value="リセット">
  <input type="button" value="終了">

<script>
function check (e) {
  var fieldset = e.parentNode;
  var hidden = fieldset.querySelector ('input[type="hidden"]');
  var seikai = fieldset.querySelectorAll ('input[type="checkbox"][value="true"]');
  var kaitou = fieldset.querySelectorAll ('input[type="checkbox"]:checked');
  var matigai = fieldset.querySelectorAll ('input[type="checkbox"][value="false"]:checked');

  if (matigai.length || kaitou.length !== seikai.length) {
    hidden.value = '';
    kotae = Array.prototype.map.call (seikai, function (e) {
      return e.parentNode.textContent;
    }).join (', ');
    alert ([
      '不正解です。',
      '答えは、'+ kotae + 'です。'
    ].join ('\n'));
  }
  else {
    hidden.value = 'true';
    alert ('正解です。');
  
  }
}

function ending () {
  var es0 = document.querySelectorAll ('fieldset.q input[type="hidden"]');
  var es1 = document.querySelectorAll ('fieldset.q input[type="hidden"][value=""]');
  alert ([
    '問題数は、'+ es0.length + 'です。',
    '間違いは、' + es1.length + '問あります。'
  ].join ('\n'));
}

function reset () {
  var es = document.querySelectorAll ('fieldset.q input[type="hidden"]');
  Array.prototype.forEach.call (es, function (e) { e.value = ''; });
}

function listener (event) {
  var e = event.target;
  
  if ('button' === e.type)
    switch (e.value) {
    case '解答' :
      check (e);
      break;
    
    case 'リセット' :
      reset ();
      break;
    
    case '終了' :
      ending ();
      break;
    }
}

reset ();
document.addEventListener ('click', listener, false);
</script> 

2016-05-17

テキストデータから文字列を取り出したい

| 21:44

http://okwave.jp/qa/q9172829.html

正規表現は関数の外に展開したほうがよかったな。

そもそも取り出すテキストの中に同じキーワードがあるならば破たんするか。

製作時間60分を目標としていたのに、超えてしまった。


5日間も休んでいた筋トレを再開した。体が心地よいだるさだ。


<!DOCTYPE html>
<meta charset="utf-8">
<title>高機能なエディタなら…</title>
<style >
</style>

<body>
<textarea rows="15" cols="90" id="A">
--------
AUTHOR: hogehoge
TITLE: 記事A
STATUS: Publish
ALLOW COMMENTS: 0
CONVERT BREAKS: __default__
ALLOW PINGS: 0
PRIMARY CATEGORY: news
CATEGORY: news

DATE: 02/08/2014 06:17:55 AM
-----
BODY:
記事一個目。
ほげほげ
-----
EXTENDED BODY:

-----
EXCERPT:

-----
KEYWORDS:

-----


--------
AUTHOR: hogehoge
TITLE: 記事B
STATUS: Publish
ALLOW COMMENTS: 0
CONVERT BREAKS: __default__
ALLOW PINGS: 0
PRIMARY CATEGORY: nikki
CATEGORY: nikki

DATE: 02/09/2014 07:45:04 PM
-----
BODY:
記事2個目。
<img src="hoge.jpg">
ほげほげ
-----
EXTENDED BODY:

-----
EXCERPT:

-----
KEYWORDS:

-----


--------
AUTHOR: hogehoge
TITLE: 記事C
STATUS: Publish
ALLOW COMMENTS: 0
CONVERT BREAKS: __default__
ALLOW PINGS: 0
PRIMARY CATEGORY: news
CATEGORY: news

DATE: 02/09/2014 07:51:34 PM
-----
BODY:
記事3個目。ほげほげ
-----
EXTENDED BODY:

-----
EXCERPT:

-----
KEYWORDS:

-----
</textarea><br>
<input type="button" value="conv" onclick="hoge();">
<hr>
<textarea rows="15" cols="90" id="B">
</textarea>

<script>
function addDQ (str) {
  return '"' + str + '"';
}

function hoge () {
  var t = document.querySelector ('#A').value;
  var b = document.querySelector ('#B');
  var rst = [];
  var rec = [];
  
  var cr = '\\r|\\n|\\r\\n';
  var CR = '(?:' + cr + ')*';
  
  var sp = '\\s?';
  var splt8 = '\\-{8}' + CR;
  var splt5 = '\\-{5}' + CR;
  var typeA = sp + '.*?' + CR;
  var typeB = sp + '(.*?)' + CR;
  var typeC = sp + '((?:.|' + cr + ')*?)' + CR;
  var typeE = sp + '(?:.|' + cr + ')*?' + CR;
  
  var pattern = [
    splt8,
    'AUTHOR:' + typeA,
    'TITLE:' + typeB,
    'STATUS:' + typeA,
    'ALLOW COMMENTS:' + typeA,
    'CONVERT BREAKS:' + typeA,
    'ALLOW PINGS:' + typeA,
    'PRIMARY CATEGORY:' + typeA,
    'CATEGORY:' + typeB,
    'DATE:' + typeB + splt5,
    'BODY:' + CR + typeC + splt5,
    'EXTENDED BODY:' + CR + typeE + splt5,
    'EXCERPT:' + CR + typeE + splt5,
    'KEYWORDS:' + CR + typeE + splt5,
    typeE
  ].join ('');

  var reg = new RegExp (pattern, 'g');
  
  for (rec = []; rec = reg.exec (t); ) {
    rec.shift ();
    rst.push (rec);
  }
  
  b.value = rst.map (function (a) {
    a[3] = a[3].replace (/(\r|\n|\r\n)/g, '<br>');
    return a.map (addDQ).join(', ');
  }).join ('\n');
  
}

</script>

think49think49 2016/05/20 23:27 DOMよりも文字列処理のほうが面白そうに感じます。
https://jsfiddle.net/67byzuho/
最近、CSVパーサを書いたので使うか迷いましたが、文字列to文字列だったので配列変換する処理は不要かなと思い、独自処理にしてみました。
https://gist.github.com/think49/009a8744c147a7013f14ea8913bd9027

To: babu_babu_baboo さん
CSVレコードをダブルクォートで括る場合はダブルクォート自身をエスケープする処理を入れると更に良いと思います。
http://www.kasai.fm/wiki/rfc4180jp

babu_babu_baboobabu_babu_baboo 2016/05/21 12:58 think49 さん、 こんにちは。

ダブルクォートのエスケープね。反省です。
私は、DOM よりそして文字列より 動くもの(コンピュータ・グラフィックス) みたいなのが面白いです

負け惜しみでもないし敗北感があるわけでもない(笑)のですが一言。
「後出しジャンケンみたいもんだから、プログラムが洗練されているように見えてずるい」
そして直感的ではない。(だから負け惜しみではないからね)
読み解くのに時間を必要とする正規表現の文字列を個々の変数に代入し、それを組み上げていく表記方法に感動した記憶があります。
今回はその応用(劣化コピーだともいえる)でした。
しばらくプログラミングから離れていたので、ミスの連発です。

私はプロのプログラマーではありません。
なのでコストを考えるのは意味のないことなのですが、切り出す文字列の形式が3種類以上になれば、そのたびに switch 〜 case が増えて
その度にコードを書く。なので手間が増える。みたいに思いました。
(負け惜しみでもないし敗北感があるわけでもないからね)

ちなみにthink49 さんは、そのプログラムをコーディング(完成)するのに要した時間はどれくらいでした?
私は、構想1分、コーディング30分、デバッグに40分かかりました。

think49think49 2016/05/22 08:46 babu_babu_baboo さん
おはようございます。私もプロのプログラマーではありませんので、プロから見れば至らない部分はあると思います。
大体の記憶ですが、「構想: 2時間、コーディング: 1時間30分、デバッグ: 1時間」ですね(実際はもっと時間をかけているかも)。
私は作業時間が長い方なので制限時間付きでプログラミングの課題を与えられたら最遅で完成させる確信があります。
私の場合は全体的に構想(設計)に時間をかける傾向がありますね。

今回、時間がかかった理由。
初めは1行の正規表現リテラルでサクッと書いてしまおうとしたのですが、期待通りに動かない。少しずつ正規表現を変えてデバッグするも面倒になってくる。
⇒一から作り直し。exec と replace どちらを使う?
⇒String to String なのせ replace で。どうせなら拡張性を持たせる設計にしよう。

私は過去にgtltさんにcsvパーサに感銘を受けたので、reolace の書き方にはかなり影響が出ていると思います。
http://www.tagindex.com/kakolog/q4bbs/2001/2437.html

babu_babu_baboobabu_babu_baboo 2016/05/22 21:49 think49 さん

へぇっ!? プロじゃないの? ちょっと驚きです。
デバッグって、私も時間を要する時があります。長くなるとイラッとしますね。
でも最近は長いプログラムでも一発で動くことがあるんですよ。
あっけにとらられ逆に疑って長々と弄って見てしまう。しかもあの手この手で…
それでもちゃんと動くとき、私は、ニヤッとしているそうです。
奥さんに自慢したいのですが、すでにその時は「気持ち悪いわよ!」と言われてます。
価値をわかってくれそうにないのですが、自慢げに説明していると、うなずかれるたびにテンションは下がりだします。
目もかなり悪くなり目がしょぼしょぼな毎日です。モニターにへばりついて見ています。

--
exec より replace は、速いんだろうな〜。
でも暇になったら勉強しようと思っている構文解析(LR法)は、 exec なんだろうな〜とも思っています。

--
http://okwave.jp/qa/q9163064.html
球体と円柱のワイヤーフレームの質問者、WEBデザインのところで、ピラミッドを質問しています。
なんでJSで質問しなかったかが疑問です。
私に「講演の依頼があるかもしれません」と言われ、思わず爆笑!
あれは遥か昔、高校時代にBASIC言語で書いたリメーク版。
何も調べない人なのね。
レイ・トレーシングがリアルタイムで動く時代なのに。

--
読み直してみて、俺何書いてんだ?と。ごめん。

2016-05-12

Canvasで網目模様を描く方法を教えてください。その6

| 07:47

f:id:babu_babu_baboo:20160512075803p:image

球体をマウスドラッグにより回転させる。しかも慣性によりマウスアウトしたあとも少し回る。

<!DOCTYPE html>
  <meta charset="UTF-8">
  <title>3D</title>
  <style>
    canvas { background : #000; }
  </style>
<body>
<canvas width="1024" height="768"></canvas>


<script>
//http://jsdo.it/totetero/without_polygon
//http://stardustcrown.com/reading/rotate3d.html
//http://d.hatena.ne.jp/gyuque/20090211
(function () {

  var INIT_QUATERNION = [1, 0, 0, 0];

  function CanvasController (canvas) {
    this.canvas = canvas;
    this.mouseX = null;
    this.mouseY = null;
    this.touchF = false; //ドラッグ中か?
    this.Qnow = INIT_QUATERNION; //今回のマウスのドラッグ中のクォータニオン
    this.Qbef = INIT_QUATERNION; //前回のクォータニオン
    this.rots = INIT_QUATERNION; //今回と前回のクォータニオンの積(これが重要)
    this.gain = canvas.width / 2; // mouse移動の感度
    this.dx = 0;
    this.dy = 0;
    this.timerId = null;
    this.miniInertia = 1e-7;
  }
  
  //回転
  function rotation (dx, dy) {
    var a, b, a0, a1, a2, a3, b0, b1, b2, b3, r, t, as;
    if (t = dx * dx + dy * dy) {
      r = Math.sqrt (t);
      as = Math.sin (r) / r;
      a = this.Qnow;
      a0 = a[0]; a1 = a[1]; a2 = a[2]; a3 = a[3];
      b0 = dy * as; b1 = dx * as; b3 = Math.cos (r);

      // クオータニオンによる回転
      a = this.Qbef;
      b = this.Qnow = [
        a0 * b3 - a3 * b0           - a2 * b1,
        a1 * b3 + a3 * b1 - a2 * b0,
        a2 * b3           + a0 * b1 + a1 * b0,
        a3 * b3 + a0 * b0 - a1 * b1
      ];

      //前回(a)と今回(b)のクォータニオンの積
      a0 = a[0]; a1 = a[1]; a2 = a[2]; a3 = a[3];
      b0 = b[0]; b1 = b[1]; b2 = b[2]; b3 = b[3];
      
      this.rots = [
        a0 * b0 - a1 * b1 - a2 * b2 - a3 * b3,
        a0 * b1 + a1 * b0 + a2 * b3 - a3 * b2,
        a0 * b2 - a1 * b3 + a2 * b0 + a3 * b1,
        a0 * b3 + a1 * b2 - a2 * b1 + a3 * b0
      ];
      this.dx = dx;
      this.dy = dy;
    }
    return t;
  }
  
  //慣性
  function inertia () {
    var distance = rotation.call (
      this,
      this.dx - this.dx / 40,
      this.dy - this.dy / 40
    );
    
    if (this.miniInertia < distance)
      this.timerId = setTimeout (inertia.bind (this), 33);
  }


  //クォータニオンによる座標軍の回転
  function quaternionRotation (material) {
    
    var i, j, x, y, z;
    var surface, vertex;
    var q = this.rots;
    var q0 = q[0], q1 = q[1], q2 = q[2], q3 = q[3];
    var a0, a1, a2, a3;
    var s = [], rst = [];

    for (i = 0; surface = material[i]; i++) {
      for (j = 0, s = []; vertex = surface[j]; j++) {
        x = vertex[0], y = vertex[1], z = vertex[2];
        a0 =  q3 * x + q1 * z - q2 * y;
        a1 =  q3 * y + q2 * x - q0 * z;
        a2 =  q3 * z + q0 * y - q1 * x;
        a3 = -q0 * x - q1 * y - q2 * z;
        s[j] = [
          a0 * q3 - a3 * q0 - a1 * q2 + a2 * q1,
          a1 * q3 - a3 * q1 - a2 * q0 + a0 * q2,
          a2 * q3 - a3 * q2 - a0 * q1 + a1 * q0
        ];
      }
      rst[i] = s;
    }
    return rst;
  }

  
  
  function handleEvent (event) {
    var e, x, y, dx, dy, a, b, c, e, r, t;
    var a0, a1, a2, a3, b0, b1, b2, b3, as;
    
    switch (event.type) {

    case 'mouseup' :
    case 'touchend' :
      this.touchF = false;
      inertia.call (this);
      break;
    
    case 'mousedown' :
    case 'touchstart' :
      if (this.timerId) {
        clearTimeout (this.timerId);
        this.timerId = null;
      }
      this.touchF = true;
      this.Qnow = INIT_QUATERNION;
      this.Qbef = this.rots;
      e = event.target.getBoundingClientRect ();
      this.mouseX = event.pageX - e.left;
      this.mouseY = event.pageY - e.top;
      break;

    case 'mousemove' :
    case 'touchmove' :
      e = event.target.getBoundingClientRect ();
      x = event.pageX - e.left;
      y = event.pageY - e.top;

      if (this.touchF){
        dx = (x - this.mouseX) / this.gain;
        dy = (y - this.mouseY) / this.gain;
        rotation.call (this, dx, dy);
      }

      this.mouseX = x;
      this.mouseY = y;
      event.preventDefault();//ipadなどでスクロールさせないため

      break;
    }
  
  }
  
  
  // canvas にイベントを追加する
  function addCanvasEvent (event_type) {
    this.canvas.addEventListener (event_type, this, false);
  }
  
  
  function create (canvas) {
    
    if (1 > arguments.length)
      throw new Error ('引数がない');
    if ('CANVAS' !== canvas.tagName)
      throw new Error ('Canvas 要素ではない');

    var obj = new CanvasController (canvas);
    
    ['mousedown', 'mouseup', 'mousemove','touchstart', 'touchend', 'touchmove']
      .forEach (addCanvasEvent, obj);

    canvas = null;// メモリーリークパターン

    return obj;
  }
  
  //__
  
  CanvasController.prototype.handleEvent = handleEvent;
  CanvasController.prototype.quaternionRotation = quaternionRotation;
  //__
  CanvasController.create = create;
  
  this.CanvasController = CanvasController;

}) ();


function ball (r, n, n1) {
  var rst = [], a = [], b = [], c = [];
  var pi = Math.PI, sin = Math.sin, cos = Math.cos;
  var k = 2 * pi / n1, k2 = pi / n;
  var i, i_, j, s, r2, yb;
  var r2 = sin (k2) * r, h2 = cos (k2) * r, yr = r2, yt = h2;
  
  for (i = 0; i <= n1; i++) {
    s = k * i;
    a[i] = sin (s);
    b[i] = cos (s);
  }
  
  for (i = 0; i < n1; i++) {
    rst[i] = [
      [0, r, 0],
      [a[i] * r2, h2, b[i] * r2],
      [a[i_= i +1 ] * r2, h2, b[i_] * r2]
    ];
    c[i] = [
      [a[i_ = i + 1] * r2, -h2, b[i_] * r2],
      [a[i] * r2, -h2, b[i] * r2],
      [0, -r, 0]
    ];
  }
  
  for (i = 2; i < n; i++) {
    s = k2 * i;
    yr2 = sin (s) * r;
    yb = cos (s) * r;
    
    for (j = 0; j < n1; j++) {
      rst.push ([
        [a[j] * yr, yt, b[j] * yr],
        [a[j] * yr2, yb, b[j] * yr2],
        [a[j+1] * yr2, yb, b[j+1] * yr2],
        [a[j+1] *yr, yt, b[j+1] * yr]
      ]);
    }
    yt = yb;
    yr = yr2;
  }

  return rst.concat (c);
}




//面の法線ベクトルを求める
function crossProduct (ary) {
  var rst = [];
  var i, s;
  var p0, p1, p2;
  var x0, x1, x2, y0, y1, y2, z0, z1, z2;
  var px, py, pz, qx, qy, qz;
  
  for (i = 0; s = ary[i]; i += 1) {
    p0 = s[0]; p1 = s[1]; p2 = s[2];
    x0 = p0[0]; x1 = p1[0]; x2 = p2[0];
    y0 = p0[1]; y1 = p1[1]; y2 = p2[1];
    z0 = p0[2]; z1 = p1[2]; z2 = p2[2];
    px = x1 - x0; py = y1 - y0; pz = z1 - z0; //p
    qx = x2 - x1; qy = y2 - y1; qz = z2 - z1; //q
    rst[i] = [
      py * qz - pz * qy,
      pz * qx - px * qz,
      px * qy - py * qx
    ];
  }
  return rst;
}


//明るさを求める
function brightness (ary, v, el) {
  var lx = v[0], ly = v[1], lz = v[2];
  var lv = Math.sqrt (lx * lx + ly * ly + lz * lz);
  var i, a, x, y, z, rst = [];
  var c, b = 1 - el;

  for (i = 0; a = ary[i]; i++) {
    x = a[0]; y = a[1]; z = a[2];
    tv = Math.sqrt (x * x + y * y + z * z);
    inp = x * lx + y * ly + z * lz;
    len = inp / (lv * tv);
    rst[i] = el + Math.cos (Math.acos (len)) * b;
  }
  return rst;
}

//3Dの物体を2Dの座標へと変換する
function cov3to2 (m, zz, sc) {
  var rst = [], a, b, c, d, s, i, j, t;
  for (i = 0; d = m[i]; i++) {
    a = d[0];
    for (c = [], j = 0; b = a[j]; j++) {
      c[j] = [
        b[0] / (t = (zz + b[2]) / sc),
        b[1] / t
      ];
    }
    rst[i] = [c, d[1]];
  }
  return rst;
}


function canvas_draw_create (c, o) {
  var ctx = c.getContext ('2d');
  var x = c.width / 2 + o[0];
  var y = c.height / 2 + o[1];
  var rgb = [0, 100,250];
  var int = Math.floor;

  ctx.lineWidth = 1;

  return {
    draw:
      function (a, b) {//面を描く
        ctx.beginPath ();
        ctx.fillStyle = 
          'rgb(' +
          int (rgb[0] * b) + ',' +
          int (rgb[1] * b) + ',' +
          int (rgb[2] * b) +
          ')';
        ctx.moveTo (x + a[0][0], y - a[0][1]);

        for (i = 1; b = a[i++]; )
          ctx.lineTo (x + b[0], y - b[1]);

        ctx.fill ();
        ctx.closePath ();
      },
    cls:
      function () {
        ctx.clearRect(0, 0, c.width, c.height);
      }
    };
}


function draw (a, dw) {
  var i, b, c;
  dw.cls ();
  for (i = 0; c = a[i++]; ) {//面の3点だけでベクトルの外積の向きで判断
    b = c[0];
    if (0 >= ((b[2][0] - b[1][0]) * (b[0][1] - b[1][1]) -
      (b[2][1] - b[1][1]) * (b[0][0] - b[1][0]))
    )
      dw.draw (b, c[1]);
  }
}

/* Model {
  vertex : array //頂点の集合
  surface : array // 頂点の3つを取り、辺の描画の有無、色、模様

*/

function rendering_wireFrame (canvas, model) {
  
}


var hoge = (function _ () {
  var z = ball (20, 18, 36);
  var v = canvas_draw_create (document.querySelector ('canvas'), [0,0]);
  var h = [1, 1, -1];
  var ctrl = CanvasController.create (document.querySelector ('canvas'));

  return function () {
    var zz = ctrl.quaternionRotation (z);

    var bb = brightness (crossProduct (zz), h, .3);
    for (var i = 0, I = zz.length, d = []; i < I; i++) {
      d[i] = [zz[i], bb[i]];
    }

    draw (cov3to2 (d, 40, 600), v);
  };
}) ();

setInterval (hoge, 1000/60);
</script>