Julia Set in Javascript

Question

Mandlebrot은 내가 제작 한 그림이 예쁘다고 생각하기 때문에 Mandlebrot을 사용하여 엉망으로 만들고 있습니다. 나는 내가 할 수있는 것을보기 위해 자바 스크립트에서 그림 그리기의 문제를 해결하려고 노력할 것 같았다. 나는 즉, 두 알고리즘을 바라 보았다 :

http://library.thinkquest.org/26242/full/progs/a2.html

내가이로 번역 어떤 : 기본적으로 하나 개의 색상 상자를 그립니다

drawGraph: function(canvas,resolution,iterations,colors,coefficent){ 

       var context = canvas.getContext('2d'); 

       for(var m = 0; m < resolution.x; m++){ 
        for(var n = 0; n < resolution.y; n++){ 
         var x = m, 
          x2 = x*x, 
          y = n, 
          y2 = y*y; 

         var i; 
         for(i = 1; i < iterations; i++){ 
          if(x2 + y2 > 4) break; 

          var new_x = x2 - y2 + coefficent.a; 
          var new_y = 2*x*y + coefficent.b; 

          x = new_x; 
          y = new_y; 
         } 

         var color = i % colors; 

         DrawUtils.drawPoint(context,m,n,color); 
        } 
       } 
      } 

합니다.

http://en.wikipedia.org/wiki/Mandelbrot_set#Escape_time_algorithm

나는이로 번역 어떤 : 블랙 박스를 생산

drawGraph: function(canvas,resolution,iterations,colors,coefficent){ 

       var context = canvas.getContext('2d'); 

       for(var m = 0; m < resolution.x; m++){ 
        for(var n = 0; n < resolution.y; n++){ 
         var x = 0, 
          y = 0, 
          x0 = ((m/resolution.x) * 3.5) - 2.5, 
          y0 = ((n/resolution.y) * 2) - 1; 

         var i = 0; 
         while(x*x + y*y < 4 && i < iterations){ 
          var x_temp = x*x - y*y + x0; 
          y = 2*x*y + y0; 
          x = x_temp; 
          i++; 
         } 

         var color = 0; 
         if(x*x + y*y >= 4){ 
          color = i % colors; 
         } 

         DrawUtils.drawPoint(context,m,n,color); 
        } 
       } 
      } 

그럼 나는이 일을 시도했다. 스케일링 된 x0와 y0은 픽셀의 요소이지만, 알고리즘 이후에는 계수 c = x0 + iy0라고 말하기 때문에 알고리즘 종류의 문구는 혼란 스럽습니다. 그렇다면 함수에 미리 지정된 계수를 전달하지 않는다는 의미입니까?

대부분의 테스트에서 필자는 0.25 + 0i 계수를 사용했지만 똑같은 결과를 산출 한 다른 테스트를 시도했습니다.

내가 뭘 잘못하고 있니?

Answer 1

첫 번째 사항 : 줄리아 세트와 만델 브로 세트의 차이점을 명확히 밝혀야합니다. 두 가지 모두 반복 과정에서 f(z) = z^2 + c의 동작에 대한 통찰력이지만 다른 관점에서 볼 수 있습니다. 줄리아 세트의

, 우리가 c를 해결하고 초기 z s는 만델 브로 세트의

을 어떻게 행동하는지 다른의 플롯을, 우리의 플롯을 어떻게 다른 c에 대해 동일한 초기 z = 0 동작합니다 에스. 그와

, 당신은 링크의 첫 번째 페이지에서 BASIC에서 번역을합니다 (줄리아가 coefficient에서 c 설정 그릴을 시도하는) 첫 번째 코드는 ...

---

를 해결 그렇지 않다.그

‘ run through every point on the screen, setting 
‘ m and n to the coordinates 
FOR m = x_minimum TO x_maximum STEP x_resolution 
      FOR n = y_minimum TO y_maximum STEP y_resolution 
          ‘ the initial z value is the current pixel, 
          ‘ so x and y have to be set to m and n 
          x = m: y = n 

을 갖는 경우 당신은 당신이 STEP x_resolution을 구현하기 위해 어떤 조치를 취하고 있지 않은 중요한 점을 제외하고, 가까운

 for(var m = 0; m < resolution.x; m++){ 
      for(var n = 0; n < resolution.y; n++){ 

이 있습니다. m은 0에서 resolution.x - 1까지 실행되는 인 의 정수이고 1 단계입니다. x은 m으로 설정됩니다.

그래서 그 대신 말에서 복소 평면에서 보는 -2-2i 설정 대부분 몇 픽셀로해야합니다 2+2i, 대신 0에서 resolution.x + resolution.y i에 복소 평면에서 찾고있다 (줄리아 설정보고를위한 괜찮은 뷰포트)에 왼쪽 아래 구석에 내가 디버깅 및 m/resolution.x 경우 볼 것이다 - 가이 올바른 범위로 확장 할 수있는 코드를 가지고, 나는 즉시 무슨 잘못이야 볼 수 없습니다 (만델 브로트 집합을 그리는 시도)

---

두 번째 코드 항상 0, @ user973572에서 제안하는 것이 문제 일 수 있습니다.

Answer 2

첫 번째 예에서는 x2와 y2가 항상 동일한 값이되도록 업데이트하는 것을 잊었다 고 생각합니다. 당신은 합이 나 자바 스크립트에 대해 아무것도 몰라 때문에 아마 잘못

for(i = 1; i < iterations; i++){ 
    x2 = x*x, 
    y2 = y*y 
    if(x2 + y2 > 4) break; 

같은 4보다 큰 뭔가가있는 경우 확인하기 전에 X2와 Y2를 업데이트해야합니다.