me73: factory/v2011/canvas_client.html@c71f2cae755f

     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 = 1.0;

    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         		{

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

    65           			z = z / 10.0;

    66           			zoom += z;

    67           			if (zoom < 1)

    68           				zoom = 1;

    69           			x = x / 10.0 / zoom;

    70           			y = y / 10.0 / zoom;

    71           			var min_inc = new Complex(x + z, y + z);

    72           			var max_inc = new Complex(x - z, y - z);

    73           			min_c = complex_add(min_c, min_inc);

    74           			max_c = complex_add(max_c, max_inc);

    75           			max_iter += iter;

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

    77           				max_c.imag - min_c.imag);

    78           			var width = canvas.width;

    79           			var height = canvas.height;

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

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

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

    84           			{

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

    86           				{

    87           					if (true)

    88           					{

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

    90           							/ dim * x,

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

    92           					 	var result = test(c, max_iter);

    94           					 	if (result.iter < max_iter)

    95           					 	{

    96           					 		var r = result.iter * 3;

    97           					 		var g = result.iter * 3;

    98           					 		var b = result.iter * 3;

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

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

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

   102           						}

   103           					}

   104 						}

   105 			  		}

   106         		}

   107       		}

   108     	</script>

   109     	<style type="text/css">

   110       		canvas { border: 0px solid black; }

   111       		body { background: black; }

   112     	</style>

   113   	</head>

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

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

   116     	<p>

   117 <button onclick="draw(0, -1, 0, 0);">Left</button>

   118 <button onclick="draw(0, 1, 0, 0);">Right</button>

   119 <button onclick="draw(0, 0, -1, 0)">Up</button>

   120 <button onclick="draw(0, 0, 1, 0);">Down</button>

   121 <button onclick="draw(0, 0, 0, 1);">In</button>

   122 <button onclick="draw(0, 0, 0, -1);">Out</button>

   123 <button onclick="draw(10, 0, 0, 0);">Inc Quality</button>

   124 <button onclick="draw(-10, 0, 0, 0);">Dec Quality</button>

   125 		</p>

   127   	</body>

   128 </html>

author	Eugen Sawin <sawine@me73.com>
	Sun, 15 Jul 2012 00:12:46 +0200
changeset 117	c71f2cae755f
permissions	-rwxr-xr-x