如何检查吸引子是否奇怪?

时间:2017-05-17 05:26:56

标签: javascript strange-attractor

最近我学到了一些奇怪的吸引子,我在JS中创建了以下程序:



var ctx, clock, width, height, pixSize;
var x,y,a,b,c,d;

window.onload = function(){
	start();
};

function start(random=true){
	window.cancelAnimationFrame(clock);
	if(random){
		a = 6*Math.random()-3;
		b = 6*Math.random()-3;
		c = 2*Math.random()-0.5;
		d = 2*Math.random()-0.5;
	}
	canvasSetup();
	clearCanvas();
	x = Math.random()-Math.random();
	y = Math.random()-Math.random();
	clock = requestAnimationFrame(main);
}


function save(){
	var text = JSON.stringify({
		a:a,
		b:b,
		c:c,
		d:d
	});
	window.prompt("Copy to clipboard: Ctrl+C", text);
}

function load(){
	var input = JSON.parse(window.prompt("Import Save:"));
	a = input.a;
	b = input.b;
	c = input.c;
	d = input.d;
	start(false);
}

function canvasSetup(){
	canvas = document.getElementById('canvas');
	width = window.innerWidth-5;
	height = window.innerHeight-5;
	canvas.width = width;
	canvas.height = height;
	ctx = canvas.getContext('2d');
	var min = Math.min(width,height);
	var scale = min/4;
	ctx.translate(width/2, height/2);
	ctx.scale(scale, scale);
	pixSize = 1/scale/2;
	ctx.globalCompositeOperation = "lighter";
}

function clearCanvas(){
	ctx.save();
	ctx.setTransform(1, 0, 0, 1, 0, 0);
	ctx.clearRect(0,0,width,height);
	ctx.restore();
}

function main(){
	for(var i=0;i<10000;i++){
		var xnew = Math.sin(y*b)+c*Math.sin(x*b);
		var ynew = Math.sin(x*a)+d*Math.sin(y*a);
		x = xnew;
		y = ynew;
		plot(x,y,"rgb(50,5,1)");
	}
	clock = requestAnimationFrame(main);
}

function plot(x,y,color="white"){
	ctx.fillStyle = color;
	ctx.fillRect(x,-y,pixSize,pixSize);
}
&#13;
body {
	background-color: black;
	color: white;
	font-family: Consolas;
	font-size: 13px;
	margin: 0;
	padding: 0;
}

#buttons{
	position: absolute;
	top: 0;
	left: 0;
}
&#13;
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Strange Attractor</title>
		<link rel="stylesheet" href="style.css">
		<script src="rules.js"></script>
		<script src="script.js"></script>
	</head>
	<body>
		<div align="center">
			<canvas id="canvas"></canvas>
		</div>
		<div id="buttons">
			<button onclick="start()">New Attractor</button><br>
			<button onclick="save()">Save</button><br>
			<button onclick="load()">Load</button>
		</div>
	</body>
</html>
&#13;
&#13;
&#13;

它采用4个随机参数(a,b,c,d)并使用公式

var xnew = Math.sin(y*b)+c*Math.sin(x*b);
var ynew = Math.sin(x*a)+d*Math.sin(y*a);
x = xnew;
y = ynew;

为新点。在某些情况下,这确实会产生一种奇特的奇怪的吸引子:enter image description here

但在其他情况下,我只获得一条线或几条点。有没有一种简单的方法来查看参数并找出它们,如果它们创建的吸引器会很奇怪?

我知道,我可以保存一堆价值,相互比较并以这种方式进行测试,如果图片可能有趣,但我喜欢不同的解决方案......

我希望你能帮忙:)。

编辑: 要查看特定值,您只需使用上面js草图中的保存和加载按钮...

0 个答案:

没有答案