下記はリサジュー曲線を描くプログラムで、一応、表示してくれるものを書けたのですが
自分の理想としては、angle(角度)360でパッと表示されるのではなく、
0.5度設定刻みでダラ~というかビロ~ンというか、
ラインが描画されていく様子を楽しみたいのです。
そこでsetTimeoutかなと思い、いろいろ試したのですが
どうしても上手く動いてくれませんでした。
どのように改造すれば良いでしょうか。
ご教授よろしくお願いいたします。
(余談ですが
やっぱり「a=2,b=5」または「a=3,b=8」が面白いと思います。)
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Lissajous curve</title> 6</head> 7<body> 8 値a<input id="data1" type="number"> 9 値b<input id="data2" type="number"> 10 <input id="drawBtn" type="button" value="描画する"><br> 11 <canvas id="xyPlane" width="640" height="580"></canvas> 12 <script src="js/main1.js"></script> 13</body> 14</html> 15
javascript
1document.addEventListener("DOMContentLoaded", () => { 2 "use strict"; 3 4 let graph; 5 const xWidth = 640; 6 const xHalf = xWidth / 2; 7 const yHeight = 580; 8 const yHalf = yHeight / 2; 9 10 function axis2d() { 11 graph.strokeStyle = "black"; 12 graph.beginPath(); 13 graph.moveTo(0, yHalf); 14 graph.lineTo(xWidth, yHalf); 15 graph.moveTo(xHalf, 0); 16 graph.lineTo(xHalf, yHeight); 17 graph.stroke(); 18 } 19 function draw() { 20 let angle = 0; 21 const a = document.getElementById("data1").value; 22 const b = document.getElementById("data2").value; 23 graph.beginPath(); 24 while (angle <= 360) { 25 const x = 150 * Math.sin(a * angle * Math.PI / 180); 26 const y = 150 * Math.sin(b * angle * Math.PI / 180); 27 if (angle === 0) { 28 graph.moveTo(xHalf + x, yHalf - y); 29 } else { 30 graph.lineTo(xHalf + x, yHalf - y); 31 } 32 graph.strokeStyle = "blue"; 33 graph.stroke(); 34 angle += 0.5; 35 } 36 } 37 38 const xyPlane = document.getElementById("xyPlane"); 39 if (xyPlane.getContext) { 40 graph = xyPlane.getContext("2d"); 41 axis2d(); 42 } 43 44 const drawBtn = document.getElementById("drawBtn"); 45 drawBtn.addEventListener("click", draw); 46 47}); 48
(追記)2017-09-04-0:08
分かり難い質問になってしまい、すみません。追記します。
以下の部分で、
angle0.5度でいったん表示、angle1度でまた表示、1.5度で表示、2度で表示・・・
と繰り返せばラインが伸びていく様子が描画されるかな、と思っています。
javascript
1while (angle <= 360) { 2 const x = 150 * Math.sin(a * angle * Math.PI / 180); 3 const y = 150 * Math.sin(b * angle * Math.PI / 180); 4 if (angle === 0) { 5 graph.moveTo(xHalf + x, yHalf - y); 6 } else { 7 graph.lineTo(xHalf + x, yHalf - y); 8 } 9 graph.strokeStyle = "blue"; 10 graph.stroke(); 11 angle += 0.5; 12} 13
イメージとしては下から3行目を
setTimeout(graph.stroke(), 300); とか setInterval(graph.stroke(), 300);
のようにする感じです。
(あくまでイメージです。これでは動きません。)
それをangle360度まで繰り返せば、
じわじわ伸びるラインが表示されるのではないかと。
もしくは、
while (angle <= 360) {
の360の部分を100にしたり180にしたりすると途中経過が表示されることは分かっているので、ここが引数で渡される関数を作る方法にもチャレンジしましたがダメでした。
いずれにせよ処理を遅延させるメソッドの理解が乏しいようで、
ネット検索で出てくる例文は理解出来たつもりでも、それを真似して組み込むと失敗します。
変更前同様、グラフが一瞬で表示されてしまうか、まったく表示されなくなってしまうか。
この作業中、ESLintには
Don't make functions within a loop. (no-loop-func)
(ループ内で関数を作成しないでください)
と、よく怒られているところです。
グラフの『完成図形』が目的ではなく、
グラフのドットが伸びていく『過程』を見られるようにしたいです。
回答1件
あなたの回答
tips
プレビュー