만델브로의 집합 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 로 인해서 암묵적으로 그려지는건가요?
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이 많아야 합니다.
제가 올린 소스에서 어떤 코드가 3의 배수인지 잘 모르겠습니다;;
자세히 설명 부탁드립니다:)
답변을 작성하시기 전에 로그인 해주세요.
