How can I check if an attractor is strange?

Question

How can I check if an attractor is strange?

I learned a little about strange attractors lately and I created the following program in 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>

Run code Hide result

It takes 4 random parameters (a, b, c, d) and uses the form

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;

for a new point. In some cases this does create a weird weird sttractor:

But other times, I only get one line or multiple points. Is there an easy way to take a look at the parameters and find out if the creator they create is going to be weird?

I know I could save a bunch of values, compare them against each other and test that way if the picture might be interesting, but I would have liked a different solution ...

Hope you can help :)

EDIT: To look at specific values, you can simply use the save and load buttons in the js thumbnail above ...

+3

javascript strange-attractor

Anton Ballmaier May 17 '17 at 5:26

source to share