3

最近我学到了一些关于奇怪吸引子的知识，并在 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);
}
body {
	background-color: black;
	color: white;
	font-family: Consolas;
	font-size: 13px;
	margin: 0;
	padding: 0;
}

#buttons{
	position: absolute;
	top: 0;
	left: 0;
}
<!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>

它采用 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;

为新点。在某些情况下，这确实会创建一个奇特的奇怪牵引器：在此处输入图像描述

但在其他情况下，我只得到一条线或几分。有没有一种简单的方法来查看参数并找出他们创建的 attrator 是否会很奇怪？

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

我希望你能帮忙:)

编辑：要查看特定值，您可以简单地使用上面 js 草图中的保存和加载按钮...

4

0 回答 0