테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

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

nickname123 6년 전 조회 3,781
답변 1
목록
먼저
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변수가 들어가는데요 나눗셈으로 들어갑니다.
배율을 확대하는건데 왜 나누는거죠 곱해야하는게 아닌가요?
 
</div>

<div style="color: rgb(64, 64, 64); font-family: 굴림,Gulim; font-size: 13px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">

  <script type="text/javascript" src="<a href="https://code.jquery.com/jquery-3.1.0.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-3.1.0.js"></script></a></div>

<div style="color: rgb(64, 64, 64); font-family: 굴림,Gulim; font-size: 13px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">  <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);

  }

}</div>

<div style="color: rgb(64, 64, 64); font-family: 굴림,Gulim; font-size: 13px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">function displayCenter(xc, yc){

  document.getElementById("xc").innerHTML = xc.toFixed(3);

  document.getElementById("yc").innerHTML = yc.toFixed(3);</div>

<div style="color: rgb(64, 64, 64); font-family: 굴림,Gulim; font-size: 13px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">}</div>

<div style="color: rgb(64, 64, 64); font-family: 굴림,Gulim; font-size: 13px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">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);

    }

  }</div>

<div style="color: rgb(64, 64, 64); font-family: 굴림,Gulim; font-size: 13px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">}

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

<div style="color: rgb(64, 64, 64); font-family: 굴림,Gulim; font-size: 13px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;"></script>

< body>

  </body>
#javascript #js #mandelbrot #망델브로 #만델브로
댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
애

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

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

n
nickname123
6년 전
제가 올린 소스에서 어떤 코드가 3의 배수인지 잘 모르겠습니다;;
자세히 설명 부탁드립니다:)

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인