Optics/tutorial2_1slit.html at master · phys-ken/Optics · GitHub

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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>光線の考え方　スリット１つ</title>
    <link rel="stylesheet" href="common.css">
    <script src="common.js"></script>
</head>

<body onLoad="loopd()">
    <h2>光線の考え方　スリット１つ</h2>

    光線の本数
    <input type="range" value="20" min="10" max="300" step="1"
        oninput="document.getElementById('output1').value=this.value * 2">
    <output id="output1">40</output>

    <br>下の図形上でクリックすると全光線を描画します<br>
    <canvas id="cv" style="background-color:rgb(163, 166, 167);">
        図形を表示するには、canvasタグをサポートしたブラウザが必要です。
    </canvas>

    <script>
        //領域
        var cvs = document.getElementById("cv");
        var ctx = cvs.getContext("2d");
        cvs.width = document.documentElement.clientWidth - 10;
        cvs.height = cvs.width * 9 / 16;
        w = cvs.width;
        h = cvs.height
        //光源
        var X = (1 / 6) * w; //初期座標 X
        var Y = (1 / 2) * h; //初期座標ｙ
        var L = Math.sqrt(h * h + w * w); //対角線の長さ
        //var honsu = 70; //光線の本数
        var r = h / 20; //光源の半径
        //スリット
        slithole = h / 3; //スリットの穴の高さdef120
        slitw = w / 50; //幅
        slitx = w * 3 / 5; //スリットの位置
        var state; //全光線のstate

        function loopd() {
            cvs.addEventListener('click', function(e) {
                if (state == 0) { state = 1; } else { state = 0; }
            });
            cvs.addEventListener("mousemove", function(e) {
                var rect = e.target.getBoundingClientRect();
                if (e.clientX - rect.left <= slitx) {
                    X = e.clientX - rect.left;
                    Y = e.clientY - rect.top;
                }
            });
            function loop() { draw(); requestAnimationFrame(loop); }
            requestAnimationFrame(loop);
        }


        function draw() {
            var ho = document.getElementById('output1');
            var honsu = ho.value;

            ctx.clearRect(0, 0, w, h);
            ///////////////////////////////////////////////////////////////////////放射状に線を引く/////////////////////////////////////////////////////////////////
            //まずは、縦線だけ引く
            if (state == 0) {//stateが0だったら全体の光線、そうじゃなかったら代表線のみ
                var L = Math.sqrt(h * h + w * w); //全体の光線を表示する場合
            } else {
                var L = 0; //代表線のみを表示する場合
            }
            X2 = X + L * Math.sin(Math.PI * 0);
            Y2 = Y - L * Math.cos(Math.PI * 0);
            ctx.beginPath();     // 1.Pathで描画を開始する
            ctx.moveTo(X, Y); // 2.描画する位置を指定する
            ctx.lineTo(X2, Y2);
            ctx.strokeStyle = C.ray;
            ctx.lineWidth = 3;
            ctx.stroke();
            //放射状に引く
            for (var i = 1; i < 2 * (honsu); i++) {
                if (state == 0) {//stateが0だったら全体の光線、そうじゃなかったら代表線のみ
                    var L = Math.sqrt(h * h + w * w); //全体の光線を表示する場合
                } else {
                    var L = 0; //代表線のみを表示する場合
                }
                if (i < (honsu)) {
                    takasa = (slitx - X) * Math.tan((Math.PI * i / honsu) + Math.PI / 2);
                    yoko = slitx - X;

                    if (state == 0) {//stateが0だったら全体の光線、そうじゃなかったら代表線のみ
                        L = Math.sqrt(takasa * takasa + yoko * yoko);//全体の光線を表示する場合
                    } else {
                        var L = 0; //代表線のみを表示する場合
                    }

                    if (Y + takasa < h / 2 + slithole / 2 && Y + takasa > h / 2 - slithole / 2) {
                        var L = Math.sqrt(h * h + w * w);
                    }
                }
                X2 = X + L * Math.sin(Math.PI * i / honsu);
                Y2 = Y - L * Math.cos(Math.PI * i / honsu);
                ctx.beginPath();     // 1.Pathで描画を開始する
                ctx.moveTo(X, Y); // 2.描画する位置を指定する
                ctx.lineTo(X2, Y2);
                ctx.strokeStyle = C.ray;
                ctx.lineWidth = 3;
                ctx.stroke();        // 4.Canvas上に描画する
                var L = Math.sqrt(h * h + w * w);
            }
            ///////////////////////////////////////////////////////////////////////放射状に線を引いた/////////////////////////////////////////////////////////////////

            ///////////////////////////////////////////////////////////////////////光源/////////////////////////////////////////////////////////////////
            drawSource(X, Y, r, C.source);
            ///////////////////////////////////////////////////////////////////////光源/////////////////////////////////////////////////////////////////


            //////////////////////////////////////////////////////////////スクリーン/////////////////////////////////////////////////////////////
            // パスをリセット
            ctx.beginPath();
            //色を指定する
            ctx.fillStyle = "black"; //塗りつぶしの色は黒
            //左から,上から,の位置に、幅,高さ,の四角形を描く
            ctx.fillRect(w - (w / 80), 0, w / 80, h);
            // 線を描画を実行
            ctx.stroke();
            //////////////////////////////////////////////////////////////スクリーン/////////////////////////////////////////////////////////////


            /////////////////////////////////////////////////////////////スリット/////////////////////////////////////////////////////////////
            // パスをリセット
            ctx.beginPath();
            //色を指定する
            ctx.fillStyle = "black"; //塗りつぶしの色は黒
            //左から,上から,の位置に、幅,高さ,の四角形を描く
            ctx.fillRect(slitx, 0, slitw, h / 2 - slithole / 2); //スリット上部
            ctx.fillRect(slitx, h / 2 + slithole / 2, slitw, h / 2 - slithole / 2); //スリット下部
            // 線を描画を実行
            ctx.stroke();
            /////////////////////////////////////////////////////////////スリット/////////////////////////////////////////////////////////////
        }

    </script>


</body>

</html>