朱莉婭套裝查看器

我一直在試圖在我的網站http://thejamespaterson.com/scripts/julia/上製作朱莉婭套裝查看器，但我目前無法讓程序顯示正確的朱莉婭套裝。例如，當用C值0 + 0i進行測試時，我得到以下圖像： not a proper julia set 結果應該是一個圓圈。我不知道爲什麼會發生這種情況。我編寫了自己的複雜數字庫和繪圖功能，並在下面發佈。任何幫助，將不勝感激;朱莉婭套裝查看器

function complexNum(real, imaginary) { 
 
    this.real = real; 
 
    this.imaginary = imaginary; 
 
    return this; 
 
} 
 

 
function addComplex(c1, c2) { 
 
    this.real = c1.real + c2.real; 
 
    this.imaginary = c1.imaginary + c2.imaginary; 
 
    return this; 
 
} 
 

 
function multComplex(c1, c2) { 
 
    this.real = (c1.real * c2.real) - (c1.imaginary * c2.imaginary); 
 
    this.imaginary = (c1.real * c2.imaginary) + (c2.real * c1.imaginary); 
 
    return this; 
 
} 
 

 
function dispComplex(c) { 
 
    var sign = ''; 
 
    if (c.imaginary >= 0) { 
 
    sign = '+'; 
 
    } 
 
    return c.real + sign + c.imaginary + "i"; 
 
} 
 

 
function getComplexModulus(c) { 
 
    return Math.sqrt((c.real * c.real) + (c.imaginary * c.imaginary)); 
 
} 
 

 
//globals 
 
var MAXITERATION = 100; 
 
var BOUNDARY = 4; 
 
var CANVASID = "juliaDraw"; 
 
var CONTEXT = document.getElementById("juliaDraw").getContext('2d'); 
 
var HEIGHT = 750; 
 
var WIDTH = 750; 
 
var juliaImageData = CONTEXT.createImageData(WIDTH, HEIGHT); 
 

 
function readInput(inputID) { 
 
    return document.getElementById(inputID).value; 
 
} 
 

 
function drawPointOnCanvas(x, y, color) { 
 
    //console.log('drawing pixel at '+x+','+y); 
 
    CONTEXT.fillStyle = color; 
 
    CONTEXT.fillRect(x, y, 1, 1); 
 
} 
 

 
function createArray(length) { 
 
    var arr = new Array(length || 0), 
 
    i = length; 
 
    if (arguments.length > 1) { 
 
    var args = Array.prototype.slice.call(arguments, 1); 
 
    while (i--) arr[length - 1 - i] = createArray.apply(this, args); 
 
    } 
 
    return arr; 
 
} 
 

 
function doesPointEscape(c, complexNum) { 
 
    var iterations = 0; 
 
    var escaped = false; 
 
    while ((!escaped) && (iterations < MAXITERATION)) { 
 
    if (getComplexModulus(complexNum) > BOUNDARY) { 
 
     escaped = true; 
 
    } 
 
    complexNum = addComplex(multComplex(complexNum, complexNum), c); 
 
    iterations++; 
 
    } 
 
    if (escaped) { 
 
    return true; 
 
    } else { 
 
    return false; 
 
    } 
 
} 
 

 
function plotJuliaSet(canvasID, width, height, c, start, stepsize) { 
 
    var complexNumberArray = createArray(width + 1, height + 1); 
 
    var doesPointEscapeArray = createArray(width + 1, height + 1); 
 
    var real = start.real; 
 
    var imaginary = start.imaginary; 
 
    console.log('====Drawing Set===='); 
 
    console.log('c = ' + dispComplex(c)); 
 
    for (var x = 0; x <= width; x++) { 
 
    imaginary = start.imaginary; 
 
    for (var y = 0; y <= height; y++) { 
 
     complexNumberArray[x][y] = new complexNum(real, imaginary); 
 
     doesPointEscapeArray[x][y] = doesPointEscape(c, complexNumberArray[x][y]); 
 
     if (doesPointEscapeArray[x][y]) { 
 
     //drawPointOnCanvas(x, y,'blue'); 
 
     } else { 
 
     drawPointOnCanvas(x, y, 'black'); 
 
     //console.log('point '+dispComplex(complexNumberArray[x][y])+' does not escape'); 
 
     } 
 
     imaginary = imaginary - stepsize; 
 
    } 
 
    real = real + stepsize; 
 
    } 
 
    //CONTEXT.putImageData(juliaImageData, 0, 0); 
 
    console.log('done'); 
 
} 
 

 
function defaultDraw() { 
 
    CONTEXT.clearRect(0, 0, WIDTH, HEIGHT); 
 
    var start = new complexNum(-2, 2); 
 
    var c = new complexNum(0, 0); 
 
    plotJuliaSet(CANVASID, WIDTH, HEIGHT, c, start, 2/350); 
 
} 
 

 
function drawJulia() { 
 
    CONTEXT.clearRect(0, 0, WIDTH, HEIGHT); 
 
    var start = new complexNum(-2, 2); 
 
    var c = new complexNum(readInput('realValue') * 1, readInput('imagValue') * 1); 
 
    plotJuliaSet(CANVASID, WIDTH, HEIGHT, c, start, 2/350); 
 
}

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <title>Julia Set Viewer</title> 
 
    <style> 
 
    .desc { 
 
     float: right; 
 
     width: 300px; 
 
    } 
 
    #juliaDraw { 
 
     border: 1px dotted; 
 
     float: left; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="desc"> 
 
    <h1>Julia Set Viewer</h1> 
 
    <p>You can view Julia sets with this simple online tool. Don't know what a Julia set is? Learn about it <a href="https://www.youtube.com/watch?v=2AZYZ-L8m9Q">here.</a> 
 
     This script uses a complex number library that I built to handle the arithmetic required to process these images. The source code is hosted on my <a href="https://github.com/jamjar919">github.</a> 
 
    </p> 
 
    </div> 
 
    <canvas id="juliaDraw" width=750 height=750 onClick="defaultDraw()"></canvas> 
 
    <div class="controls"> 
 
    <form> 
 
     <label>Real: 
 
     <input type="text" id="realValue" value="0"> 
 
     </label> 
 
     <label>Imag: 
 
     <input type="text" id="imagValue" value="0"> 
 
     </label> 
 
     <input type="button" onClick="drawJulia()"> 
 
    </form> 
 
    </div> 
 
    <script src="complex.js"></script> 
 
    <script src="juliaset.js"></script> 
 
</body> 
 

 
</html>

來源

2015-01-12 James Paterson

沒有看過你的所有代碼，但我不知道它是否是你的數學庫中的問題，因爲你推出了自己的代碼，而不是使用更像math.js建立的東西http://mathjs.org/ – chiliNUT

問題從混淆使用在Javascript中的this指針的莖。

在doesPointEscape（您朱莉婭計算）更改爲

complexNum = new addComplex(new multComplex(complexNum, complexNum), c);

和它的作品。

這將從multComplex返回一個新的複數，然後將其添加到c並從分配給complexNum的addComplex返回一個新的複數。

你multComplex和addComplex功能使用this指針，但對於this指針被提及的複數之一，你將不得不調用現有的功能，或調用new創建一個新的。

或者，你可以重寫你的multComplex（）和addComplex（）函數作爲

function multComplex(c1, c2) { 
    var real = (c1.real * c2.real) - (c1.imaginary * c2.imaginary); 
    var imaginary = (c1.real * c2.imaginary) + (c2.real * c1.imaginary); 
    return new ComplexNum(real, imaginary); 
} 

function addComplex(c1, c2) { 
    var real = c1.real + c2.real; 
    var imaginary = c1.imaginary + c2.imaginary; 
    return new ComplexNum(real, imaginary); 
}

那麼你doesPointEscape（）函數應該工作原樣。

來源

2015-01-12 01:57:25 samgak

謝謝您的幫助！你知道我的代碼之前想要計算什麼，因爲它仍然很有趣？ –

我不知道它叫什麼。帕特森套裝？ :)如果你在www.fractalforums.com上發佈它，也許有人可以識別它。 – samgak

朱莉婭套裝查看器

回答

相關問題