Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ロジスティック写像の分岐図 写像の可視化付き
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.