星の軌跡のような描画をCanvasで実装してみた。 #JavaScript

続編。変更点は
・描画開始位置をランダムに
・線の太さをランダムに
・スタート、ストップ、リセット機能を追加 pic.twitter.com/f4lCrw9uLN
— らいと (@moshi1121) 2018年4月4日

訳があって、ゆるキャンΔOPのパロディ動画を作成することになりまして。OPチェックしていたところ、サビ前に富士山と星の軌跡が描かれている部分がありました。
これを作らなければいけないと考えたところ、めんどくさいなパラメータがみるみる上昇してきまして。
だったら、JavaScriptでコード書いてCanvasに描いたほうがよくない！？となったのがきっかけです。

rotation_stars.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>rotating_stars</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
    <div>
        <canvas id="canvas_area" width="1280" height="720"></canvas>
    </div>
    <input type="button" value="開始" onclick="drawStart();"/>
    <input type="button" value="停止" onclick="drawStop();"/>
    <input type="button" value="リセット" onclick="drawReset();"/>

    <style type="text/css">
        #canvas_area{
            background-color: #313CA3;
        }
    </style>
    <script>

        var c = $("#canvas_area")[0];
        var ctx = c.getContext("2d");

        var stars = [];
        var speed = 0.5;

        var CENTRAL_AXIS = { X:950, Y:230 }
        var MIN_RADIUS = 10;
        var MAX_RADIUS = 1100;
        var MIN_LINE_WIDTH = 0.1;
        var MAX_LINE_WIDTH = 2;

        function randRange(min, max){
            return Math.floor(Math.random() * (max - min + 1) + min);
        }

        function generateStar(){
            stars.length = 0;
            var Stars = function(){
                this.radius = randRange(MIN_RADIUS , MAX_RADIUS);
                this.lineWidth = randRange(MIN_LINE_WIDTH , MAX_LINE_WIDTH);
                this.startAngle = randRange(0, 360) * Math.PI / 180;
                this.endAngle = this.startAngle;
            }
            for(var i = 0; i < 300; i++){
                stars.push(new Stars());
            }
        }

        function drawStar(){
                $.each(stars, function( i, val){
                    ctx.beginPath();
                    ctx.arc(CENTRAL_AXIS.X , CENTRAL_AXIS.Y , val.radius, val.startAngle, val.endAngle, false);
                    ctx.strokeStyle = "#C2E9FF";
                    ctx.lineWidth = val.lineWidth;
                    ctx.stroke();
                    ctx.closePath();
                    val.endAngle += speed * Math.PI / 180
                });
        }

        function draw(){
            ctx.clearRect(0,0,1280,720);
            drawStar();
        }

        function drawStart(){
                clearInterval(loop_draw);
                loop_draw = setInterval(draw, 10);
            }

        function drawStop(){
            clearInterval(loop_draw);
        }

        function drawReset(){
            drawStop()
            ctx.clearRect(0,0,1280,720);
            generateStar();
            x = 0;
        }

        generateStar();

        var loop_draw = setInterval(draw, 10);
    </script>
</body>
</html>