<html>
<head>
	<script type="text/javascript">
		var $ = function (i) { return document.getElementById(i); };

		Function.prototype.repeat = 
		function (t, o) {
			var _ = this;
			return setInterval(function () { _.apply(o); }, t);
		};

		// アトラクター
		var Attractor = 
		function (a, b, c, d) {
			var _ = $('canvas');

			this.a = a;           // パラメーター
			this.b = b;
			this.c = c;
			this.d = d;

			this.h = 300;         // 高さ
			this.w = 300;         // 横幅
			this.ox = this.w / 2; // 原点
			this.oy = this.h / 2;
			this.s = (this.w > this.h) ? this.h / 4 : this.w / 4;
			this.x = 0;           //  X座標
			this.y = 0;           //  Y座標

			_.setAttribute('height', this.h); _.setAttribute('width', this.w);

			this.C = _.getContext('2d'); // 描画コンテキスト
		}

		Attractor.prototype.draw = 
		function () {
			var x = Math.sin(this.a * this.y) + this.c * Math.cos(this.a * this.x);
			var y = Math.sin(this.b * this.x) + this.d * Math.cos(this.b * this.y);

			this.C.fillRect(this.ox + x * this.s, this.oy - y * this.s, 1, 1);

			this.x = x; this.y = y;
		}

		window.onload = 
		function () {
			var A = new Attractor(-1.4, 1.6, 1.0, 0.7);
			A.draw.repeat(1, A);
		};
	</script>
</head>
<body>
	<canvas id="canvas"></canvas>
</body>
</html>