h3mm3's blog

Stories from behind the keyboard

  • RSS
  • Twitter

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).

$("#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: