Mandelbrot, html variable to javascript

Question

I have a problem, I need to configure a code. Which makes the mandelbrot fractal on a canvas, and I need to make a variable from html form, convert it to javascript variable, but there's my problem. And i need to get the minimum and maximum of the tested number range from form too. Any ideas? Please help!

<body>
<h1>Mandelbrot fraktál</h1>
<form>
c: <input id="cid" type="text" name="firstname">
<input type="submit" value="Submit">
</form>

<!-- A vászon kijelölése, méretezése -->
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the 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 a Mandelbrot halmaznak?
  mandelcolor: function (c,b){
   // a: valós rész, b: képzetes rész
   var z=[c,b];
   var i=0;
   // A 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 a pixel színkódja
   return '#'+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++)
    // A 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++){
     // A 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>

Which bit are you battling with? – Evan Knowles Oct 06 '14 at 13:15 — Evan Knowles, Oct 06 '14 at 13:15

score 0 · Answer 1 · answered Oct 06 '14 at 16:13

Give the user 2 input type=range elements to select their min & max values.

<input type=range id=minValue min=0 max=100 value=25>
<input type=range id=maxValue min=0 max=100 value=75>

And then read the values whenever the user changes them using .change:

var minValue=document.getElementById("minValue");
var maxValue=document.getElementById("maxValue");

minValue.addEventListener('change',function(){ 
    var value=minValue.value;
    ...do stuff with the value
});


maxValue.addEventListener('change',function(){ 
    var value=maxValue.value;
    ...do stuff with the value
});

Retiarius · Accepted Answer · 2014-10-06T17:01:22.887

MarkE uses the events in JS properly, but there was an error in the code too, which hopefully I'll address below. With fractals, you were probably wanting to set the center complex number and work out the min and max from the zoom.

You have one input for the complex number, but this would require some string parsing to separate out the components so I separated them into inputs for a real and imaginary part. (I put a zoom in there too.) I'm not sure how you intend to handle the form submit - in my opinion you probably don't want a form as you do not want to submit anything every time.

Someone should probably clean this up for a more complete answer, and I would recommend using JQuery rather than getElementByID (which is case sensitive).

At least the following 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>
    <!-- A vászon kijelölése, méretezése -->
    <canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">Your browser does not support the 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 a Mandelbrot halmaznak?
    mandelcolor: function (c, b) {
        // a: valós rész, b: képzetes rész
        var z = [c, b];
        var i = 0;
        // A 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 a pixel színkódja
        return '#' + 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;

        for (var y = 0; y < context.canvas.height; y++) {
            // A 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++) {
                // A 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>

Mandelbrot, html variable to javascript

2 Answers2