xaoc: canvas_client.html@fdf52cc6952f

     1 <html>

     2 	<head>

     3     	<title>Canvas Xaoc Client</title>

     4     	<script type="text/javascript">

     5     		function Complex(real, imag)

     6     		{

     7 				this.real = real;

     8 				this.imag = imag;

     9     		}

    11     		var MIN_C = new Complex(-2.2, -1.4);

    12     		var MAX_C = new Complex(1.0, 1.4);

    13     		var min_c = MIN_C;

    14     		var max_c = MAX_C;

    15     		var max_iter = 100;

    16     		var zoom = 0.1;

    18     		function Result(z, iter)

    19     		{

    20     			this.z = z;

    21     			this.iter = iter;

    22     		}

    24 			function complex_quad(c)

    25 			{

    26 				return new Complex(Math.pow(c.real, 2) - Math.pow(c.imag, 2),

    27 					2.0 * c.real * c.imag);

    28 			}

    30 			function complex_quad_value(c)

    31 			{

    32 				return Math.pow(c.real, 2) + Math.pow(c.imag, 2);

    33 			}

    35 			function complex_add(c1, c2)

    36 			{

    37 				return new Complex(c1.real + c2.real, c1.imag + c2.imag);

    38 			}

    40     		function iterate(z, c)

    41     		{

    42     			z_quad = complex_quad(z);

    43 				return new Complex(z_quad.real + c.real, z_quad.imag + c.imag);

    44     		}

    46     		function test(c, max_iter)

    47     		{

    48     			var iter = 0;

    49     			var z = new Complex(0.0, 0.0);

    50 				while (complex_quad_value(z) <= 4.0

    51 					&& iter < max_iter)

    52 				{

    53 					z = iterate(z, c);

    54 					iter++;

    55 				}

    56 				return new Result(z, iter);

    57     		}

    59     		function draw(iter, x, y, z)

    60     		{

    61         		var canvas = document.getElementById('mandelbrot');

    62         		if (canvas.getContext){

    63           			var ctx = canvas.getContext('2d');

    64           			zoom += z / 10.0;

    65           			x = x / 30.0 / zoom;

    66           			y = y / 30.0 / zoom;

    67           			var min_inc = new Complex(x + zoom, y + zoom);

    68           			var max_inc = new Complex(x - zoom, y - zoom);

    69           			min_c = complex_add(min_c, min_inc);

    70           			max_c = complex_add(max_c, max_inc);

    71           			max_iter += iter;

    72           			var diff_c = new Complex(max_c.real - min_c.real,

    73           				max_c.imag - min_c.imag);

    74           			var width = canvas.width;

    75           			var height = canvas.height;

    76           			var dim = Math.max(width, height);

    77           			ctx.clearRect(0, 0, width, height);

    79           			for (var y = 0; y < height; y++)

    80           			{

    81           				for (var x = 0; x < width; x++)

    82           				{

    83           					if (true)

    84           					{

    85           						var c = new Complex(min_c.real + diff_c.real

    86           							/ dim * x,

    87           							min_c.imag + diff_c.imag / dim * y);

    88           					 	var result = test(c, max_iter);

    90           					 	if (result.iter < max_iter)

    91           					 	{

    92           					 		var r = result.iter * 3;

    93           					 		var g = result.iter * 3;

    94           					 		var b = result.iter * 3;

    95           					 		var colour = r + "," + g + "," + b;

    96           					 		ctx.fillStyle = "rgb(" + colour + ")";

    97           							ctx.fillRect(x, y, 1, 1);

    98           						}

    99           					}

   100 						}

   101 			  		}

   102         		}

   103       		}

   104     	</script>

   105     	<style type="text/css">

   106       		canvas { border: 0px solid black; }

   107       		body { background: black; }

   108     	</style>

   109   	</head>

   110   	<body onload="draw(0, 0, 0, 0);">

   111     	<canvas id="mandelbrot" width="800" height="400"></canvas>

   112     	<form action="canvas_client.html" method="post">

   113     			<input type="button" value="left"

   114 					onclick="draw(0, -1, 0, 0);">

   115   				<input type="button" value="right"

   116 					onclick="draw(0, 1, 0, 0);">

   117 				<input type="button" value="up"

   118 					onclick="draw(0, 0, -1, 0);">

   119 				<input type="button" value="down"

   120 					onclick="draw(0, 0, 1, 0);">

   121 				<input type="button" value="in"

   122 					onclick="draw(10, 0, 0, 1);">

   123 				<input type="button" value="out"

   124 					onclick="draw(-10, 0, 0, -1);">

   125 		</form>

   127   	</body>

   128 </html>

author	Eugen Sawin <sawine@me73.com>
	Sat, 03 Jul 2010 22:36:34 +0200
changeset 7	fdf52cc6952f
permissions	-rwxr-xr-x