sasekazu/gist:37a4a522b4ef9e7b0fcd

## gistfile1.html
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<title>logistic</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function () {

				var ctx = document.getElementById('bunkizu').getContext('2d');
				var mapCtx = document.getElementById('map').getContext('2d');
				var h = document.getElementById('bunkizu').height;
				var a0 = 2.5;
				var x0 = 0.9;
				var a = a0;

				function loop(){

					var x = x0;
					var s = [[x0,0]];
					var buf;

					// wait during transition
					for(var i=0; i<100; ++i){
						buf = x;
						x = a*x*(1-x);
						s.push([buf,x]);
						s.push([x,x]);
					}

					// plot bunkizu
					ctx.fillStyle = 'seagreen';
					for(var i=0; i<100; ++i){
						x = a*x*(1-x);
						ctx.fillRect((a-a0)*h, h-x*h,1,1);
					}

					// map
					// clear
					mapCtx.clearRect(0,0,h,h);

					// y = x
					mapCtx.strokeStyle = 'black';
					mapCtx.beginPath();
					mapCtx.moveTo(0,h);
					mapCtx.lineTo(h,0);
					mapCtx.stroke();

					// y = a*x*(1-x)
					mapCtx.beginPath();
					var v;
					for(var i=0; i<h; ++i){
						v = i/h;
						mapCtx.lineTo(v*h, h-a*v*(1-v)*h);
					}
					mapCtx.stroke();

					// path
					var half = (s.length/2).toFixed(0);
					mapCtx.strokeStyle = 'lightseagreen';
					mapCtx.beginPath();
					mapCtx.moveTo(s[0][0]*h,h-s[0][1]*h);
					for(var i=1; i<half; ++i){
						mapCtx.lineTo(s[i][0]*h, h-s[i][1]*h);
					}
					mapCtx.stroke();

					mapCtx.strokeStyle = 'seagreen';
					mapCtx.beginPath();
					mapCtx.moveTo(s[half][0]*h,h-s[half][1]*h);
					for(var i=half; i<s.length; ++i){
						mapCtx.lineTo(s[i][0]*h, h-s[i][1]*h);
					}
					mapCtx.stroke();

					a += 0.001;
					if(a<4.0){
						setTimeout(loop, 20);
					}
				};

				loop();

			} );
		</script>
	</head>
	<body>
		<div style="margin: 0 auto; width: 1510px;">
			<canvas id="map" width="600" height="600" style="background-color: whitesmoke;"></canvas>
			<canvas id="bunkizu" width="900" height="600" style="background-color: whitesmoke;"></canvas><br />
			<a href="https://gist.github.com/sasekazu/37a4a522b4ef9e7b0fcd">ソースコード</a>
			<a href="https://gist.github.com/sasekazu/1c1acd437b7a4466d50c#file-gistfile1-js">（分岐図のみ）</a>
		</div>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<title>logistic</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function () {

	var ctx = document.getElementById('bunkizu').getContext('2d');
	var mapCtx = document.getElementById('map').getContext('2d');
	var h = document.getElementById('bunkizu').height;
	var a0 = 2.5;
	var x0 = 0.9;
	var a = a0;

	function loop(){

	var x = x0;
	var s = [[x0,0]];
	var buf;

	// wait during transition
	for(var i=0; i<100; ++i){
	buf = x;
	x = ax(1-x);
	s.push([buf,x]);
	s.push([x,x]);
	}

	// plot bunkizu
	ctx.fillStyle = 'seagreen';
	for(var i=0; i<100; ++i){
	x = ax(1-x);
	ctx.fillRect((a-a0)h, h-xh,1,1);
	}

	// map
	// clear
	mapCtx.clearRect(0,0,h,h);

	// y = x
	mapCtx.strokeStyle = 'black';
	mapCtx.beginPath();
	mapCtx.moveTo(0,h);
	mapCtx.lineTo(h,0);
	mapCtx.stroke();

	// y = ax(1-x)
	mapCtx.beginPath();
	var v;
	for(var i=0; i<h; ++i){
	v = i/h;
	mapCtx.lineTo(vh, h-av(1-v)h);
	}
	mapCtx.stroke();

	// path
	var half = (s.length/2).toFixed(0);
	mapCtx.strokeStyle = 'lightseagreen';
	mapCtx.beginPath();
	mapCtx.moveTo(s[0][0]h,h-s[0][1]h);
	for(var i=1; i<half; ++i){
	mapCtx.lineTo(s[i][0]h, h-s[i][1]h);
	}
	mapCtx.stroke();

	mapCtx.strokeStyle = 'seagreen';
	mapCtx.beginPath();
	mapCtx.moveTo(s[half][0]h,h-s[half][1]h);
	for(var i=half; i<s.length; ++i){
	mapCtx.lineTo(s[i][0]h, h-s[i][1]h);
	}
	mapCtx.stroke();

	a += 0.001;
	if(a<4.0){
	setTimeout(loop, 20);
	}
	};

	loop();

	} );
	</script>
	</head>
	<body>
	<div style="margin: 0 auto; width: 1510px;">
	<canvas id="map" width="600" height="600" style="background-color: whitesmoke;"></canvas>
	<canvas id="bunkizu" width="900" height="600" style="background-color: whitesmoke;"></canvas><br />
	<a href="https://gist.github.com/sasekazu/37a4a522b4ef9e7b0fcd">ソースコード</a>
	<a href="https://gist.github.com/sasekazu/1c1acd437b7a4466d50c#file-gistfile1-js">（分岐図のみ）</a>
	</div>
	</body>
	</html>