Mandelbrot, html variable to javascript -
Mandelbrot, html variable to javascript -
i have problem, need configure code. makes mandelbrot fractal on canvas, , need create variable html form, convert javascript variable, there's problem. , need minimum , maximum of tested number range form too. ideas? please help!
<body> <h1>mandelbrot fraktál</h1> <form> c: <input id="cid" type="text" name="firstname"> <input type="submit" value="submit"> </form> <!-- vászon kijelölése, méretezése --> <canvas id="mycanvas" width="500" height="500" style="border:1px solid #d3d3d3;"> browser not back upwards html5 canvas tag.</canvas> <script> // === mandelbrot objektum létrehozása var mandelbrot = { // === osztályváltozók maxiter : 32, // iterációk száma ////xmin : -2.0, xmax : 1.0, // valós rész ////ymin : -1.5, ymax : 1.5, // képzetes rész // === komplex szám eleme-e mandelbrot halmaznak? mandelcolor: function (c,b){ // a: valós rész, b: képzetes rész var z=[c,b]; var i=0; // következő sorozatelem kiszámítása while(i<this.maxiter && z[0]*z[0]+z[1]*z[1]<=4.0 ){ // Új elem = z négyzete + kiinduló érték var aa=z[0]*z[0]-z[1]*z[1]+c; var bb=2*z[0]*z[1]+b; z[0]=aa; z[1]=bb; i++; } // visszatérési érték pixel színkódja homecoming '#'+i.tostring(16)+i.tostring(16)+i.tostring(16); }, // === mandelbrot fraktál rajzolása soronként fraktal: function(){ for(var y=0;y<context.canvas.height;y++) // vizsgált komplex szám képzetes részének // leképezése az y koordináta alapján var zy = this.ymin + (this.ymax - this.ymin) * y / context.canvas.height; for(var x=0;x<context.canvas.width;x++){ // vizsgált komplex szám valós részének leképezése // az x koordináta alapján var zx = this.xmin + (this.xmax - this.xmin) * x / context.canvas.width; context.fillstyle=this.mandelcolor(document.getelementbyid("cid"),zy); context.fillrect(x,y,1,1); } } } } // === globális változók deklarálása var canvas=document.getelementbyid('mycanvas'); var context=canvas.getcontext('2d'); mandelbrot.fraktal(); </script>
marke uses events in js properly, there error in code too, i'll address below. fractals, wanting set center complex number , work out min , max zoom.
you have 1 input complex number, require string parsing separate out components separated them inputs real , imaginary part. (i set zoom in there too.) i'm not sure how intend handle form submit - in sentiment don't want form not want submit every time.
someone should clean more finish answer, , recommend using jquery rather getelementbyid (which case sensitive).
at to the lowest degree next code works:
<h1>mandelbrot fraktál</h1> <form>c: <input id="recid" type="text" name="re(c)" value=-0.5> <input id="imcid" type="text" name="im(c)" value=0.0> <input id="zoom" type="text" name="zoom" value=1.5> <input type="submit" value="submit"> </form> <!-- vászon kijelölése, méretezése --> <canvas id="mycanvas" width="500" height="500" style="border:1px solid #d3d3d3;">your browser not back upwards html5 canvas tag.</canvas> <script> // === mandelbrot objektum létrehozása var mandelbrot = { // === osztályváltozók ///document.getelementbyid("cid"); maxiter: 32, // iterációk száma xmin: -2.0, xmax: 1.0, // valós rész ymin: -1.5, ymax: 1.5, // képzetes rész zoom: 1.5, // === komplex szám eleme-e mandelbrot halmaznak? mandelcolor: function (c, b) { // a: valós rész, b: képzetes rész var z = [c, b]; var = 0; // következő sorozatelem kiszámítása while (i < this.maxiter && z[0] * z[0] + z[1] * z[1] <= 4.0) { // Új elem = z négyzete + kiinduló érték var aa = z[0] * z[0] - z[1] * z[1] + c; var bb = 2 * z[0] * z[1] + b; z[0] = aa; z[1] = bb; i++; } // visszatérési érték pixel színkódja homecoming '#' + i.tostring(16) + i.tostring(16) + i.tostring(16); }, // === mandelbrot fraktál rajzolása soronként fraktal: function () { //console.log(document.getelementbyid("recid").innerhtml); this.zoom = parsefloat(document.getelementbyid("zoom").value); this.xmin = parsefloat(document.getelementbyid("recid").value) - this.zoom; this.ymin = parsefloat(document.getelementbyid("imcid").value) - this.zoom; this.xmax = parsefloat(document.getelementbyid("recid").value) + this.zoom; this.ymax = parsefloat(document.getelementbyid("imcid").value) + this.zoom; (var y = 0; y < context.canvas.height; y++) { // vizsgált komplex szám képzetes részének // leképezése az y koordináta alapján var zy = this.ymin + (this.ymax - this.ymin) * y / context.canvas.height; (var x = 0; x < context.canvas.width; x++) { // vizsgált komplex szám valós részének leképezése // az x koordináta alapján var zx = this.xmin + (this.xmax - this.xmin) * x / context.canvas.width; context.fillstyle = this.mandelcolor(zx, zy); context.fillrect(x, y, 1, 1); } } } }; // === globális változók deklarálása var canvas = document.getelementbyid('mycanvas'); var context = canvas.getcontext('2d'); mandelbrot.fraktal(); </script> javascript html html5 canvas mandelbrot
Comments
Post a Comment