黄金角を使ったひまわりの種の配置その2|HTML5

黄金角(222.5°)を使ったひまわりの種の配置をHTML5でプログラミングした。配置の際に、n番目の座標と中心の座標との距離をc√nとすると、点の密度分布が均等になる。詳しくはプログラムコードを参照のこと。黄金比の辺の比率/1:(1+√5)/2。(1+√5)/2を黄金角に変換するとθ=222.5°

HTML5

<!DOCTYPE html>
<html lang="jp">
	<head>
		<meta charset="UTF-8" />
		<title>ひまわり | Sunflower</title>
		<link href="css/base.css" rel="stylesheet" type="text/css">
		<script src="js/base.js"></script>
	</head>
	<body>
		<div id="contents">
			<canvas id="canvas" width="300" height="300">
			</canvas>
		</div>
	</body>
</html>

CSS

@charset "utf-8";

body
{
	margin:0;
	padding:0;
	background-color: #fff;
	font-family:Helvetica, HiraKakuProN-W3, sans-serif; 
	font-size:25px;
	color:#fff;
}

#contents
{
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height:300px;
	border: 1px solid #000;
	overflow:hidden;
}

#canvas
{
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height:300px;
}

JavaScript

window.addEventListener("load", init, false);

function init()
{
	var deg;
	var radius = 130;
	var numbers = 300;
	
	var theCanvas = document.getElementById("canvas");
	var centerX = (theCanvas.currentStyle || document.defaultView.getComputedStyle(theCanvas,'')).width;
	centerX = Number(centerX.replace('px',''));
	centerX =  centerX / 2;
	var centerY = (theCanvas.currentStyle || document.defaultView.getComputedStyle(theCanvas,'')).height;
	centerY = Number(centerY.replace('px',''));
	centerY =  centerY / 2;
	var ctx = theCanvas.getContext("2d");
	
	deg = ((1 + Math.sqrt(5)) / 2) * 360 - 360;
	for (var i = 0; i < numbers; i++)
	{
		setCircle(i);
	}
	
	function setCircle(n)
	{
		
		
		var x = Math.cos(deg  * Math.PI / 180 * n)  * 7 * Math.sqrt(n) + centerX;
		var y = Math.sin(deg  * Math.PI / 180 * n)  * 7 * Math.sqrt(n) + centerY;
		
		ctx.strokeStyle="#000000";
		ctx.lineWidth=1;
		ctx.beginPath();
		
		ctx.arc(x,y,6.2,0,2*Math.PI,false);
			
		ctx.stroke();
	}	
}