CODEWITHSUNDEEP
javascriptstrange-attractor
Anton Ballmaier
Anton Ballmaier

Reputation: 866

How can I check if an attractor is strange?

Lately I learned a bit about strange attractors, and I created the following programm 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>

It's taking 4 random Parameters (a,b,c,d) and uses the formular

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 the new point. In some cases this indeed creates a fancy strange sttractor:enter image description here

But in other cases I only get a single line or a few points. Is there a simple way to look at the parameters and find out, if the attrator they create will be strange?

I know, that I could save a bunch of values, compare them with each other and test in that way, if the picture might be intresting, but I'd love a different solution...

I hope you can help :)

EDIT: To look at speccific values you can simply use the save and load buttons in the js sketch above...

Upvotes: 3

Views: 137

Answers (0)

Related Questions