In a previous post I told how I implemented a simple Mandelbrot fractal generator by using WebMatrix. At last the page is accessible to everyone at http://www.hemme.somee.com/MandelPage.cshtml.
The fractal image is computed server-side by a razor C# script. The computation is fired directly by a standard HTTP request (no JSON, just an old- plain-GET-url) like the following one
(you can read more about the interior of Get.cshtml in my previous post):
domain/Mandelbrot/Get.cshtml/Mandelbrot/Get.cshtml ?w=470&h=350&maxiter=1000&minr=-2.2&maxr=1&mini=-1.15
After the image returns to the client, the user can zoom it with her mouse. The zoom works just like the HTML5+Javascript implementation that I described in this post. What's different here is that now the page must load a new image from the server, GETting a new URL (instead of computing the image client-side using javascript code). This task is easily accomplished with the help of a JQuery instruction. Actually, the following code registers an handler for the mouse click on the image; the mouse coordinates are then converted in the complex plane and the vertices of the zoomed region are written in the querystring of the new HREF of the image [1]. At this point the HREF attribute is rewritten and the browser reloads the image (that will be computed by the razor server script).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | $("#mandel").click(function (e) { var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; $("#spinwheel").css("visibility","visible"); var halfdeltare = (Mr - mr)/(zoom * 2.0); var halfdeltaim = (Mi - mi)/(zoom * 2.0); var refac = (Mr - mr) / (w - 1); var imfac = (Mi - mi) / (h - 1); minre = mr + x * refac - halfdeltare; minim = mi + (@h - y) * imfac - halfdeltaim; maxre = minre + 2*halfdeltare; maxim = minim + 2*halfdeltaim; $("#mandel img").attr("src","@(Html.Raw(Href("~/Mandelbrot/Get.cshtml")+"?w="+w+"&h="+h))&maxiter="+(maxiter *= 1.5)+"&minr="+minre+"&maxr="+maxre+"&mini="+minim); mr = minre; Mr = maxre; mi = minim; Mi = maxim; }) |
The code contains some razor syntax (basically, every identifier starting with '@') since I cut'n'pasted it from the CSHTML source file.
Happy programming!
[1] Note how the region is described by only three numbers, minr, mini and maxr, since the fourth (maxi) can be deduced by the former.
No comments:
Post a Comment