続編。変更点は
— らいと (@moshi1121) 2018年4月4日
・描画開始位置をランダムに
・線の太さをランダムに
・スタート、ストップ、リセット機能を追加 pic.twitter.com/f4lCrw9uLN
訳があって、ゆるキャンΔ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>