만델브로의 집합 JS코드 질문입니다.

만델브로의 집합 JS코드 질문입니다.

QA

만델브로의 집합 JS코드 질문입니다.

본문

먼저
xc += (2*ix/width - 1)/mag;
에서 width를 나눈 후 1을 빼주는 이유가 궁금합니다. 여기서 1은 현재클릭한 픽셀 값을 빼주기 위한 것인가요?
ix는    var ix = event.offsetX; 입니다.
 
 
그리고
      c.fillRect(i,j,1,1);
c는 canvas입니다.
i,j 위치에 가로1px 세로1px크기를 그리는건데요
 
i,j,1,1만 봐서는 망델브로 집합이 어떻게 그려졌는지 모르겠습니다.
a2와 b2에 대입되는 for문이 있지만 c.fillrect 1,1인걸 봐서 [a2와 b2에 그려라] 라는 명령은 없는 것 같습니다.
그러면
mandelbrot 함수 맨위에   var w = c.canvas.width;
  var h = c.canvas.height; 이 두줄에 들어간 프로퍼티 c 로 인해서 암묵적으로 그려지는건가요? 
      c.fillStyle = color[count];은 색상만 결정하는 것이기 때문에 관련 없어보이구요..
 
그리고
소스 전반적으로 mag변수가 들어가는데요 나눗셈으로 들어갑니다.
배율을 확대하는건데 왜 나누는거죠 곱해야하는게 아닌가요?
 


  <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <html>
  <head>
      <meta charset="utf-8">
      <script>
window.onload = function(){
  var canvas = document.getElementById("mycanvas");
  var ctx = canvas.getContext("2d");
  var width = canvas.width;
  var height = canvas.height;
  var xc = -0.6, yc = 0;
  draw();
  document.getElementById("button").onclick = draw;
  document.getElementById("mycanvas").onclick = function(event){
    var ix = event.offsetX;
    var iy = event.offsetY;
    var mag = parseFloat(document.getElementById("magnification").value);
    xc += (2*ix/width - 1)/mag;
    yc += (2*iy-height)/mag/width;
    draw();
  };
function draw(){
  var mag = document.getElementById("magnification").value;
  var maxit = document.getElementById("maxit").value;
  displayCenter(xc, yc);
  mandelbrot(ctx,xc,yc,mag,maxit);
  }
}
function displayCenter(xc, yc){
  document.getElementById("xc").innerHTML = xc.toFixed(3);
  document.getElementById("yc").innerHTML = yc.toFixed(3);
}
function mandelbrot(c,xc,yc,mag,maxit){
  var w = c.canvas.width;
  var h = c.canvas.height;
  var xmin = xc - 1 /mag;
  var xmax = xc + 1 /mag;
  var ymin = yc - (xmax-xmin)*h/w/2;
  var ymax = yc + (xmax-xmin)*h/w/2;
  var dx = (xmax-xmin)/w;
  var dy = (ymax-ymin)/h;
  var color = [];
  color[0] = "black";
  var L=255, dL = 255/maxit;
  for(var i=maxit; i>0; i--){
    color[i] = "rgb(255,"+Math.floor(L)+", 255)"; L-=dL;
  }
  for(var i=0; i<w; i++){
    var x = xmin + i*dx;
    for(var j=0; j<h; j++){
      var y = ymin + j*dy;
      var a = x, b = y;
      var a2 = a*a, b2 = b*b;
      for(var count=maxit; a2+b2<=4 && count; count--){
        b = 2*a*b + y; a = a2 - b2 + x;
        a2 = a*a; b2 = b*b;
      }
      c.fillStyle = color[count];
      c.fillRect(i,j,1,1);
    }
  }
}
      </script>
      <style>
#mycanvas { border: 1px solid gray;}
input {margin: 0 10px; width:60px; text-align:center;}
div{font-size:small; margin-bottom: 5px;}
      </style>
  </head>
  <body>
    <canvas id="mycanvas" width="800" height="640"></canvas>
    <div>
      중심좌표(<span id="xc"></span>,<span id="yc"></span>) ← 마우스로 클릭하면 바뀝니다
      </div>
      <div>
      <label>확대 배율 : <input id="magnification" type="number" value="0.65" /></label>
      <label>최대 반복 횟수 : <input id="maxit" type="number" value="60" /></label>
      <input id="button" type="button" value="그리기" />
< /div>
  </body>
  </html>
</script>
< body>
  </body>

이 질문에 댓글 쓰기 :

답변 1

아마도 3의 배수 때문에 그런것 같습니다.

3으로 나누면 33.3333% 인데 픽셀처리시 어느 한 픽셀은 1이 많아야 합니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 2,629
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT