Javascriptでひたすら円を生成し続けるプログラムを書いてみる

More than 3 years have passed since last update.

Javascriptの勉強中にちょっと動きのある見てて楽しいものが作りたくなったので作ってみたやつです。所要時間20分くらい。

WS000001.JPG

HTML, CSS, Javascriptを使ってひたすら円を生成し続けるっていうプログラムです。




WS000000.JPG

最初はほぼ真っ白


HTMLにはCanvasと生成した図形の数のみを記述


randomgraphics.html

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>ランダムな図形生成</title>
<link rel="stylesheet" type="text/css" href="randomgraphics.css">
</head>
<body>
<canvas id="cv" width="1000" height="600"></canvas>
<p id="text"></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="randomgraphics.js"></script>
</body>
</html>


CSSではcanvasを中央に表示する処理くらいしかやってません。


randomgraphics.css

body {

width: 100%;
height: 100%;
margin: 0;
padding 0;
}

#cv {
position: absolute;
top: 50%;
left: 50%;
margin-top: -300px;
margin-left: -500px;
background: #eeeeee;
border: solid 1px #000;
}

#text {
font-size: 18px;
font-family: Arial sans-serif;
text-align: center;
margin: 15px auto;
}


まずbody要素の表示域を100%にし、余計な空白を入れないようにします。

そして中央に持っていきたい要素のpositionをabsoluteにして、topとleftに50%を指定してあげればその要素の左上が画面中央に来ることになります。

最後にその要素の幅と高さの半分の値をネガティブマージンとしてかけてやれば、要素の半分が左上に寄ることになり、要素の中央が画面中央に来るという感じです。


描画処理を担うJavascript


randomgraphics.js

$(function() {

var cv = $('#cv')[0].getContext('2d');

var timerId;
var counter = 0;
const INTERVAL = 20;

function generateGraph() {
cv.beginPath();
// 円の中心のx座標
var cx = Math.floor(Math.random() * 999) + 1;
// 円の中心のy座標
var cy = Math.floor(Math.random() * 599) + 1;
// 半径の大きさ
var r = Math.floor(Math.random() * 15) + 1;
// ランダム色を生成
var col = generateRandomColor();
cv.arc(cx, cy, r, 0, 2 * Math.PI, false);

// 図形の塗りつぶしを枠線には同じ色を設定しています
cv.strokeStyle = col;
cv.fillStyle = col;
cv.globalAlpha = '1.0';
cv.fill();
cv.stroke();
$('#text').text("生成した図形の数:" + ++counter);
}

// ランダムなカラーコードを生成
function generateRandomColor() {
return '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16);
}

function start() {
timerId = setTimeout(function() {
generateGraph();
start();
} , INTERVAL);
}

start();
});


ランダムなカラーコードを生成する方法なんですが、0~9までならMath.raddom()で乱数を生成できるんですが、a~fの文字も織り交ぜるとなるとちょっと厄介で。。。

お決まりのこういうやり方があるみたいです。16進数を10進数に戻してまた16進数に戻すってやつですね。"#"をつけてあげるのを忘れないでください。

Math.floor(Math.random() * 0xFFFFFF).toString(16)


円を生成するとき引数は(中心点のx座標, 中心点のy座標, 半径, 始点, 終点, 反時計回りにするか)の順番です

cv.arc(cx, cy, r, 0, 2 * Math.PI, false)

始点と終点はいわば角度で、2 * Math.PI は360°を表しています。始点は時計の3時の位置から始まるので、例えば終点をMath.PIにすると0 ~ 180℃の完全な円にはならない弧が描かれます。 時計の3時から9時の位置までですね。


大きさや形を変えて好きに遊んでみてください。

では。