ikr7/index.html

## index.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
    <title>Play with Hata-map / 畑政義写像で遊ぼう</title>
		<style media="screen">

#container {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

canvas {
	background: black;
}

input[type=range] {
	width: 450px;
}

input#zoom {
	width: 900px;
}

		</style>
	</head>
	<body>
		<div id="container">
			<h1>Play with Hata-map / 畑政義写像で遊ぼう</h1>
			<canvas></canvas>
			<div>
				a: <input type="range" min="-1" max="1" id="a_r" step="0.05" value="0.7"> + <input type="range" min="-1" max="1" id="a_i" step="0.05" value="0.2"> i
			</div>
			<div>
				b: <input type="range" min="-1" max="1" id="b_r" step="0.05" value="0"> + <input type="range" min="-1" max="1" id="b_i" step="0.05" value="0"> i
			</div>
			<div>
				c: <input type="range" min="-1" max="1" id="c_r" step="0.05" value="0"> + <input type="range" min="-1" max="1" id="c_i" step="0.05" value="0"> i
			</div>
			<div>
				d: <input type="range" min="-1" max="1" id="d_r" step="0.05" value="0.65"> + <input type="range" min="-1" max="1" id="d_i" step="0.05" value="0"> i
			</div>
			<div>
				z<sub>0</sub> <input type="range" min="-1" max="1" id="z_r" step="0.05" value="1"> + <input type="range" min="-1" max="1" id="z_i" step="0.05" value="0"> i
			</div>
			<div>
				Zoom: <input type="range" value="3.5" min="1" max="10" step="0.1" id="zoom">
			</div>
		<div>
		<script type="text/javascript">

const im_w = 950
const im_h = 550

const parameters = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');

const f1 = function (zr, zi) {
	return [
		parameters[0] * zr - parameters[1] * zi + parameters[2] * zr + parameters[3] * zi,
		parameters[0] * zi + parameters[1] * zr - parameters[2] * zi + parameters[3] * zr
	];
};

const f2 = function (zr, zi) {
	return [
		parameters[4] * zr - parameters[4] - parameters[5] * zi + parameters[6] * zr - parameters[6] + parameters[7] * zi + 1,
		parameters[4] * zi + parameters[5] * zr - parameters[5] - parameters[6] * zi + parameters[7] * zr - parameters[7]
	];
};

const plot_r = function (x, y) {
	context.fillStyle = '#FF0000';
	context.fillRect(x, y, 1, 1);
};

const plot_g = function (x, y) {
	context.fillStyle = '#00FF00';
	context.fillRect(x, y, 1, 1);
};

const clear = function () {
	context.clearRect(0, 0, im_w, im_h)
};

const text = function () {
	context.fillStyle = 'white';
	context.fillText(` a=${parameters[0]}${parameters[1] < 0 ? '' : '+'}${parameters[1]}i`, 5, 11);
	context.fillText(` b=${parameters[2]}${parameters[3] < 0 ? '' : '+'}${parameters[3]}i`, 5, 22);
	context.fillText(` c=${parameters[4]}${parameters[5] < 0 ? '' : '+'}${parameters[5]}i`, 5, 33);
	context.fillText(` d=${parameters[6]}${parameters[7] < 0 ? '' : '+'}${parameters[7]}i`, 5, 44);
	context.fillText(`z0=${parameters[8]}${parameters[9] < 0 ? '' : '+'}${parameters[9]}i`, 5, 55);
	context.fillStyle = 'red';
};

const draw = function (zr, zi, depth) {

	if (depth > 13) {
		return;
	}

	const z1 = f1(zr, zi);
	const z2 = f2(zr, zi);

	const vi_w = parameters[10];
	const vi_h = vi_w / im_w * im_h

	const x1 = Math.floor((z1[0] + (vi_w / 2)) / (vi_w / im_w));
	const y1 = Math.floor((z1[1] + (vi_h / 2)) / (vi_h / im_h));
	const x2 = Math.floor((z2[0] + (vi_w / 2)) / (vi_w / im_w));
	const y2 = Math.floor((z2[1] + (vi_h / 2)) / (vi_h / im_h));

	plot_r(x1, y1);
	plot_g(x2, y2);

	draw(z1[0], z1[1], depth + 1);
	draw(z2[0], z2[1], depth + 1);

};

canvas.width = im_w;
canvas.height = im_h;

context.fillStyle = 'red';

Array.prototype.forEach.call(document.querySelectorAll('input'), (node, i) => {

	parameters[i] = parseFloat(node.value);

	node.addEventListener('input', (e) => {

		parameters[i] = parseFloat(e.target.value);

		clear();

		draw(
			parameters[8],
			parameters[9],
			0
		);

		text();

	});

});

draw(
	parameters[8],
	parameters[9],
	0
);

text();

		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Play with Hata-map / 畑政義写像で遊ぼう</title>
	<style media="screen">

	#container {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	}

	canvas {
	background: black;
	}

	input[type=range] {
	width: 450px;
	}

	input#zoom {
	width: 900px;
	}

	</style>
	</head>
	<body>
	<div id="container">
	<h1>Play with Hata-map / 畑政義写像で遊ぼう</h1>
	<canvas></canvas>
	<div>
	a: <input type="range" min="-1" max="1" id="a_r" step="0.05" value="0.7"> + <input type="range" min="-1" max="1" id="a_i" step="0.05" value="0.2"> i
	</div>
	<div>
	b: <input type="range" min="-1" max="1" id="b_r" step="0.05" value="0"> + <input type="range" min="-1" max="1" id="b_i" step="0.05" value="0"> i
	</div>
	<div>
	c: <input type="range" min="-1" max="1" id="c_r" step="0.05" value="0"> + <input type="range" min="-1" max="1" id="c_i" step="0.05" value="0"> i
	</div>
	<div>
	d: <input type="range" min="-1" max="1" id="d_r" step="0.05" value="0.65"> + <input type="range" min="-1" max="1" id="d_i" step="0.05" value="0"> i
	</div>
	<div>
	z<sub>0</sub> <input type="range" min="-1" max="1" id="z_r" step="0.05" value="1"> + <input type="range" min="-1" max="1" id="z_i" step="0.05" value="0"> i
	</div>
	<div>
	Zoom: <input type="range" value="3.5" min="1" max="10" step="0.1" id="zoom">
	</div>
	<div>
	<script type="text/javascript">

	const im_w = 950
	const im_h = 550

	const parameters = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

	const canvas = document.querySelector('canvas');
	const context = canvas.getContext('2d');

	const f1 = function (zr, zi) {
	return [
	parameters[0] * zr - parameters[1] * zi + parameters[2] * zr + parameters[3] * zi,
	parameters[0] * zi + parameters[1] * zr - parameters[2] * zi + parameters[3] * zr
	];
	};

	const f2 = function (zr, zi) {
	return [
	parameters[4] * zr - parameters[4] - parameters[5] * zi + parameters[6] * zr - parameters[6] + parameters[7] * zi + 1,
	parameters[4] * zi + parameters[5] * zr - parameters[5] - parameters[6] * zi + parameters[7] * zr - parameters[7]
	];
	};

	const plot_r = function (x, y) {
	context.fillStyle = '#FF0000';
	context.fillRect(x, y, 1, 1);
	};

	const plot_g = function (x, y) {
	context.fillStyle = '#00FF00';
	context.fillRect(x, y, 1, 1);
	};

	const clear = function () {
	context.clearRect(0, 0, im_w, im_h)
	};

	const text = function () {
	context.fillStyle = 'white';
	context.fillText(` a=${parameters[0]}${parameters[1] < 0 ? '' : '+'}${parameters[1]}i`, 5, 11);
	context.fillText(` b=${parameters[2]}${parameters[3] < 0 ? '' : '+'}${parameters[3]}i`, 5, 22);
	context.fillText(` c=${parameters[4]}${parameters[5] < 0 ? '' : '+'}${parameters[5]}i`, 5, 33);
	context.fillText(` d=${parameters[6]}${parameters[7] < 0 ? '' : '+'}${parameters[7]}i`, 5, 44);
	context.fillText(`z0=${parameters[8]}${parameters[9] < 0 ? '' : '+'}${parameters[9]}i`, 5, 55);
	context.fillStyle = 'red';
	};

	const draw = function (zr, zi, depth) {

	if (depth > 13) {
	return;
	}

	const z1 = f1(zr, zi);
	const z2 = f2(zr, zi);

	const vi_w = parameters[10];
	const vi_h = vi_w / im_w * im_h

	const x1 = Math.floor((z1[0] + (vi_w / 2)) / (vi_w / im_w));
	const y1 = Math.floor((z1[1] + (vi_h / 2)) / (vi_h / im_h));
	const x2 = Math.floor((z2[0] + (vi_w / 2)) / (vi_w / im_w));
	const y2 = Math.floor((z2[1] + (vi_h / 2)) / (vi_h / im_h));

	plot_r(x1, y1);
	plot_g(x2, y2);

	draw(z1[0], z1[1], depth + 1);
	draw(z2[0], z2[1], depth + 1);

	};

	canvas.width = im_w;
	canvas.height = im_h;

	context.fillStyle = 'red';

	Array.prototype.forEach.call(document.querySelectorAll('input'), (node, i) => {

	parameters[i] = parseFloat(node.value);

	node.addEventListener('input', (e) => {

	parameters[i] = parseFloat(e.target.value);

	clear();

	draw(
	parameters[8],
	parameters[9],
	0
	);

	text();

	});

	});

	draw(
	parameters[8],
	parameters[9],
	0
	);

	text();

	</script>
	</body>
	</html>