【JS】オイラーの公式を色々な方法で描画する！

Javascriptを使ってオイラーの公式を

2次元、3次元ともに描画していきます。

CanvasとSVGの各々に描画しました。

一応オイラーの公式を確認しておこう。

e^{ix} = con(x) + i sin(x)

複素数です。

２次元の場合は

実部と虚部をそれぞれ描画します。

３次元の場合は、

xの変化に応じて実部と虚部の値を

空間上でプロットすることで描けます。

ちなみにオイラーの公式は、

３次元空間で表現すると螺旋になります。

それでは実際に描いてみましょう！

３パターンの描画を用意しましたので、

それぞれソースを紹介していきます。

まずhtmlの方は以下になります。




		
		
			
			

			
			<!DOCTYPE html>
<html lang = "js">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Euler</title>
    </head>
    <body>
        <div>
            <canvas id="cnv"></canvas>
        </div>
        <div>
            <canvas id="cnv2"></canvas>
        </div>
        <div>
            <svg id="svg2">
                <path id="re"></path>
                <path id="im"></path>
            </svg>
        </div>
    </body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
</html>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
				
						<!DOCTYPE html>
<html lang = "js">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Euler</title>
    </head>
    <body>
        <div>
            <canvas id="cnv"></canvas>
        </div>
        <div>
            <canvas id="cnv2"></canvas>
        </div>
        <div>
            <svg id="svg2">
                <path id="re"></path>
                <path id="im"></path>
            </svg>
        </div>
    </body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
</html>

これから紹介するJavascriptのコードは、

</body>と</html>の間に挿入してください。

1 Javascriptを使ってオイラーを描画する -Canvas編①-
2 Javascriiptでオイラーを描画する -Canvas編②-
3 Javascriptでオイラーを描画する -SVG編-

Javascriptを使ってオイラーを描画する -Canvas編①-

canvasにオイラーの公式を２次元で描画します。

chart.jsを使用してます。

ソースは以下になります。




		
		
			
			

			
			<script> 
    function drawEuler2D(T, N){
        var ctx = document.querySelector('#cnv').getContext('2d')
        var re = [];
        var im = [];
        var dt = T/N;
        var t = [];
        for (var i=0; i<N; i++){
            t[i] = i*(dt);
            re[i] = Math.cos(t[i]);
            im[i] = Math.sin(t[i]);
        };

        var chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: t,
                datasets: [{
                    data: re,
                    fill: false,
                    label: '実部',
                    backgroundColor: "red",
                    borderColor: "red",
                },{
                    data: im,
                    fill: false,
                    label: "虚部",
                    backgroundColor: "blue",
                    borderColor: "blue",
                }
                ],
            },
            options: {
                elements: {
                    point:{
                        radius: 0
                    }
                },
                scales: {
                    xAxes:[{
                        ticks: {
                            maxRotation: 0,
                            minRotation: 0,
                            autoSkip: true,
                            maxTicksLimit: 7
                        }
                    }]
                },
                maintainAspectRatio: false
            }
        });
        //chart.canvas.style.width = '50vw'
        chart.canvas.style.height = '50vh'
    };
    drawEuler2D(10, 100);
</script>
			
				
					
				
					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
				
						<script> 
    function drawEuler2D(T, N){
        var ctx = document.querySelector('#cnv').getContext('2d')
        var re = [];
        var im = [];
        var dt = T/N;
        var t = [];
        for (var i=0; i<N; i++){
            t[i] = i*(dt);
            re[i] = Math.cos(t[i]);
            im[i] = Math.sin(t[i]);
        };
 
        var chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: t,
                datasets: [{
                    data: re,
                    fill: false,
                    label: '実部',
                    backgroundColor: "red",
                    borderColor: "red",
                },{
                    data: im,
                    fill: false,
                    label: "虚部",
                    backgroundColor: "blue",
                    borderColor: "blue",
                }
                ],
            },
            options: {
                elements: {
                    point:{
                        radius: 0
                    }
                },
                scales: {
                    xAxes:[{
                        ticks: {
                            maxRotation: 0,
                            minRotation: 0,
                            autoSkip: true,
                            maxTicksLimit: 7
                        }
                    }]
                },
                maintainAspectRatio: false
            }
        });
        //chart.canvas.style.width = '50vw'
        chart.canvas.style.height = '50vh'
    };
    drawEuler2D(10, 100);
</script>

構造自体はとてもシンプルで、

drawEuler2D()関数を定義して、

それをコールしているだけです。

やっていることは、

conとsinのそれぞれを取得して、

その値を線で結合しているだけです。

conとsin関数のサンプリングは、

drawEuler2D()の引数の値によって決まります。

それでは次いってみましょう！

Javascriiptでオイラーを描画する -Canvas編②-

Canvasにオイラーを３次元で描画します。

three.jsを使用しています。

ソースはこちらです。




		
		
			
			

			
			<script>
    function drawEuler3D(T, N, scale){
        var t=0, re, im;
        var dt = T / N;
        const w = window.innerWidth;
        const h = window.innerHeight*0.5;

        const renderer = new THREE.WebGLRenderer({
            canvas: document.querySelector('#cnv2')
        });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(w, h);
        renderer.setClearColor(0xFFFFFF, 1);
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(45, w / h);
        camera.position.set(0, 0, +200);

        const geometry = new THREE.Geometry();
        const material = new THREE.LineBasicMaterial({
            color: 0x0BC9C7,
        });
        var lines = new THREE.Group()

        while (N--) {
            re = Math.cos(t);
            im = Math.sin(t);
            t += dt;
            //geometry.vertices.push(new THREE.Vector3(t, re*scale, im*scale));
            geometry.vertices.push(new THREE.Vector3(5*t, re*scale, im*scale)); //係数掛けてサイズ調整
            const line = new THREE.Line(geometry, material);
            lines.add(line);
        };

        scene.add(lines);
        renderer.render(scene, camera);

        function loop(){
            requestAnimationFrame(loop);
            //camera.rotation.z += 0.2;
            lines.rotation.x -= 0.01;	// x軸方向に回転
            lines.rotation.y -= 0.01;	// y軸方向に回転
            lines.rotation.z -= 0.01;	
            // 画面に表示
            renderer.render(scene, camera);
        };
        loop();
    }
    drawEuler3D(50, 500, 50);
</script>

			
				
					
				
					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
				
						<script>
    function drawEuler3D(T, N, scale){
        var t=0, re, im;
        var dt = T / N;
        const w = window.innerWidth;
        const h = window.innerHeight*0.5;
 
        const renderer = new THREE.WebGLRenderer({
            canvas: document.querySelector('#cnv2')
        });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(w, h);
        renderer.setClearColor(0xFFFFFF, 1);
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(45, w / h);
        camera.position.set(0, 0, +200);
 
        const geometry = new THREE.Geometry();
        const material = new THREE.LineBasicMaterial({
            color: 0x0BC9C7,
        });
        var lines = new THREE.Group()
 
        while (N--) {
            re = Math.cos(t);
            im = Math.sin(t);
            t += dt;
            //geometry.vertices.push(new THREE.Vector3(t, re*scale, im*scale));
            geometry.vertices.push(new THREE.Vector3(5*t, re*scale, im*scale)); //係数掛けてサイズ調整
            const line = new THREE.Line(geometry, material);
            lines.add(line);
        };
 
        scene.add(lines);
        renderer.render(scene, camera);
 
        function loop(){
            requestAnimationFrame(loop);
            //camera.rotation.z += 0.2;
            lines.rotation.x -= 0.01;	// x軸方向に回転
            lines.rotation.y -= 0.01;	// y軸方向に回転
            lines.rotation.z -= 0.01;	
            // 画面に表示
            renderer.render(scene, camera);
        };
        loop();
    }
    drawEuler3D(50, 500, 50);
</script>
 
					
				
			
		







drawEuler3D()関数は、

drawEuler2D()関数の引数に加えて、

３つ目にscale成分も指定します。

描画した際に小さくなるので、それの調整用です。






それでは次に行ってみましょう！






    
	
	Javascriptでオイラーを描画する -SVG編-




SVGタグを使用してオイラーの２次元を描画します。

ライブラリは使用してません。








		
		
			
			

			
			<script>
    function drawSVG2(T, N, scale){
        var svg = document.querySelector('#svg2')
        const w = window.innerWidth;
        const h = window.innerHeight*0.5;
        svg.setAttribute('width', w)
        svg.setAttribute('height', h)

        var re = document.querySelector('#re')
        var im = document.querySelector('#im')

        var t=0, x, y;
        var dt = T / N;
        var prev = {x:1, y:0}, current;

        var dRe = "M0 " + String(h/2-prev.x*scale) + " ";
        var dIm = "M0 " + String(h/2) + " ";
        while (N--) {
            t += dt;
            x = Math.cos(t);
            y = Math.sin(t);
            current = {
                x: x,
                y: y
            };
            var dx = current.x - prev.x //re
            var dy = current.y - prev.y //im
            dRe += "l" + String(scale*dt) + " " + String(-scale*dx) + " ";
            dIm += "l" + String(scale*dt) + " " + String(-scale*dy) + " ";
            prev = current
        }
        re.setAttribute("d", dRe)
        re.setAttribute("stroke", "red")
        re.setAttribute("fill", "none")
        im.setAttribute("d", dIm)
        im.setAttribute("stroke", "blue")
        im.setAttribute("fill", "none")
    };
    drawSVG2(50, 500, 50);
</script>
			
				
					
				
					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
				
						<script>
    function drawSVG2(T, N, scale){
        var svg = document.querySelector('#svg2')
        const w = window.innerWidth;
        const h = window.innerHeight*0.5;
        svg.setAttribute('width', w)
        svg.setAttribute('height', h)
 
        var re = document.querySelector('#re')
        var im = document.querySelector('#im')
 
        var t=0, x, y;
        var dt = T / N;
        var prev = {x:1, y:0}, current;
 
        var dRe = "M0 " + String(h/2-prev.x*scale) + " ";
        var dIm = "M0 " + String(h/2) + " ";
        while (N--) {
            t += dt;
            x = Math.cos(t);
            y = Math.sin(t);
            current = {
                x: x,
                y: y
            };
            var dx = current.x - prev.x //re
            var dy = current.y - prev.y //im
            dRe += "l" + String(scale*dt) + " " + String(-scale*dx) + " ";
            dIm += "l" + String(scale*dt) + " " + String(-scale*dy) + " ";
            prev = current
        }
        re.setAttribute("d", dRe)
        re.setAttribute("stroke", "red")
        re.setAttribute("fill", "none")
        im.setAttribute("d", dIm)
        im.setAttribute("stroke", "blue")
        im.setAttribute("fill", "none")
    };
    drawSVG2(50, 500, 50);
</script>
					
				
			
		







pathのd属性によってグラフを描画します。

" M " で初期位置をセットして、

" l " で点と点を結んでいきます。


M0となっているのは、

M (スペース) 0と記入するところを、

スペースを省略したためです。





３つのパターンを紹介しましたが、

どれもやらんとしていることは同じです。

点を取得してそれを結ぶだけです。




最後まで読んでいただきありがとうございました。