DouKaku?beta

challenge ポリゴンを表示するプログラム 

適当なポリゴンを表示させて、描画するプログラムを書いてください。
ポリゴンは回転させてください。

2D処理だけなら、標準ライブラリで大体いけますが、
3D処理は追加でライブラリを利用すると思うので、
何のライブラリを利用したのか書いてください。
post comment

Posted feedbacks - JavaScript

ありふれた環境でもできないものかと、 ECMA Script + SVGで書きました。

 tetrahedron.svgなどの名前でファイルを保存し、ブラウザにドラッグアンドドロップす
ることで、回転する四面体が表示されます。

Adobe SVG Viewerでは動作しません。 Firefox 2.0.0.8, Opera 9.26, Safari 3.1で動作
を確認しました。
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" onload="new Tetrahedron(100).rotate(1, 1)">
    <script type="text/ecmascript">
    <![CDATA[
        var NS = document.documentElement.getAttribute('xmlns'); // 名前空間

        Function.prototype._setInterval = 
        function (t, o, v) {
            var _ = this;
            return setInterval(function () { _.apply(o, v); }, t);
        };

        var Tetrahedron = 
        function (n /* 一辺の長さ */) {
            this._ = null;
            this.u = null; // 上面
            this.l = null; // 下面
            this.s = [  ]; // 側面
            this.x = 0;
            this.y = 0;
            this.R = (Math.PI / 180).toFixed(2); // ラジアン角
            this.S = n;
            this.X = [ 0, n, n, 0 ];
            this.Z = [ 0, 0, n, n ];

            // 正四面体
            this._ = document.createElementNS(NS, 'g');
            this._.setAttribute('transform', 'translate(250, 250)');
            document.rootElement.appendChild(this._);
            // 上面
            this.u = document.createElementNS(NS, 'path');
            this.u.setAttribute('stroke', 'none');
            this.u.setAttribute('fill', '#000000');
            this.u.setAttribute('opacity', 0.4);
            this._.appendChild(this.u);
            // 下面
            this.l = document.createElementNS(NS, 'path');
            this.l.setAttribute('stroke', 'none');
            this.l.setAttribute('fill', '#000000');
            this.l.setAttribute('opacity', 0.4);
            this._.appendChild(this.l);
            // 側面
            for (i = 0; i < 4; i++) {
                this.s[i] = document.createElementNS(NS, 'path');
                this.s[i].setAttribute('stroke', 'none');
                this.s[i].setAttribute('fill', '#000000');
                this.s[i].setAttribute('opacity', 0.5);
                this._.appendChild(this.s[i]);
            }
            // ビューポート
            document.rootElement.setAttribute('width' , 500);
            document.rootElement.setAttribute('height', 500);
            // ビューボックス
            document.rootElement.setAttribute('viewBox', '0 0 500 500');
            document.rootElement.setAttribute('preserveAspectRatio', 'xMinYMin slice');
        };

        Tetrahedron.prototype.move = 
        function (v /* 垂直方向の増分 */, h /* 水平方向の増分 */) {
            var U = [], L = [];
            var l = '', u = '', s = '';
            var i, j;

            this.x += v; this.y += h;

            // 上面, 下面
            for (i = 0; i < 4; i++) {
                U[i] = this.transform(this.x * this.R, this.y * this.R, 0, this.X[i], this.S, this.Z[i]);
                L[i] = this.transform(this.x * this.R, this.y * this.R, 0, this.X[i],      0, this.Z[i]);
                u += ((i == 0) ? 'M' : 'L') + ' ' + U[i].x + ' ' + U[i].y + ' ';
                l += ((i == 0) ? 'M' : 'L') + ' ' + L[i].x + ' ' + L[i].y + ' ';
            }
            this.u.setAttribute('d', u + 'Z');
            this.l.setAttribute('d', l + 'Z');
            // 側面
            for (i = 0, j = 1; i < 4; i++, j++) {
                if (j == 4) j = 0;
                s = 'M ' + L[i].x + ' ' + L[i].y + ' '
                  + 'L ' + U[i].x + ' ' + U[i].y + ' '
                  + 'L ' + U[j].x + ' ' + U[j].y + ' '
                  + 'L ' + L[j].x + ' ' + L[j].y + ' ';
                this.s[i].setAttribute('d', s + 'Z');
            }
        };

        Tetrahedron.prototype.transform = 
        function (_x, _y, _z, x, y, z) {
            var __x, __y, __z;

            __x = x * Math.cos(_y) +   z * Math.sin(_y);
            __z = z * Math.cos(_y) -   x * Math.sin(_y);
            __y = y * Math.cos(_x) - __z * Math.sin(_x);

            return { 'x' : __x * Math.cos(_z) - __y * Math.sin(_z)
                   , 'y' : __x * Math.sin(_z) + __y * Math.cos(_z)
                   }; // アフィン変換
        };

        Tetrahedron.prototype.rotate = 
        function (h, v) {
            this.move._setInterval(50, this, [ h, v ]);
        };
    ]]>
    </script>
</svg>

Index

Feed

Other

Link

Pathtraq

loading...
Creative Commons License このサイトの内容は、 クリエイティブ・コモンズ・ライセンスの下でライセンスされています。 [詳細]