Mandelbrot，html變量爲javascript

我有一個問題，我需要配置一個代碼。這使得在畫布上的mandelbrot分形，我需要從HTML形式的變量，將其轉換爲JavaScript變量，但這是我的問題。而且我需要從表格中獲得最小和最大的測試數字範圍。有任何想法嗎？請幫忙！Mandelbrot，html變量爲javascript

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

來源

2014-10-06 Balázs Hasprai

哪一位是你作戰？ – 2014-10-06 13:15:45

坊間使用在JS事件正常，但在代碼中的錯誤太多，它希望我地址如下。對於分形，您可能想要設置中心複數，然後計算縮放中的最小值和最大值。

你有一個輸入的複數，但這需要一些字符串解析來分離出組件，所以我把它們分離成實部和虛部的輸入。（我也放大了一些。）我不確定你打算如何處理表單提交 - 在我看來，你可能不想要一個表單，因爲你不想每次都提交任何內容。

有人應該清理這個更完整的答案，我會建議使用JQuery而不是getElementByID（區分大小寫）。

至少下面的代碼工作：

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

來源

2014-10-06 16:54:17 Retiarius

給用戶2輸入類型=範圍元素選擇其最小值&最大值。

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

，然後閱讀值，每當用戶使用.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 
});

來源

2014-10-06 16:13:43 markE

Mandelbrot，html變量爲javascript

回答

相關問題