자바스크립트로 만델브로트 집합을 구현해 보았다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mandelbrot</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<style>
canvas {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div align='center'>
<canvas id="canvas"></canvas>
</div>
<script language="JavaScript">
// Start: 2022.02.02
// Update: 2022.02.02
let cvs;
let canvas;
let bufCanvas;
let bufCtx;
function InitCanvas() {
height = window.innerHeight;
width = window.innerWidth;
canvas = document.getElementById("canvas");
canvas.width = width;
canvas.height = height;
cvs = canvas.getContext("2d");
bufCanvas = document.createElement("canvas");
bufCanvas.width = canvas.width;
bufCanvas.height = canvas.height;
bufCtx = bufCanvas.getContext("2d");
}
function _draw() {
let imageData = bufCtx.createImageData(canvas.width, canvas.height);
const MAX_COUNT = 255;
// X = -3.0 ~ 3.0
// Y = -2.0 ~ 2.0
// Z = X + Yi
let mx = -3.0;
let my = -2.0;
let mw = 6.0;
let mh = 4.0;
let scaleX = mw / imageData.width;
let scaleY = mh / imageData.height;
for (let i = 0; i < imageData.height; i++) {
for (let j = 0; j < imageData.width; j++) {
let c = 0;
let x = mx + j * scaleX;
let y = my + i * scaleY;
let sx = x;
let sy = y;
for (c = 0; c < MAX_COUNT; c++) {
if (x**2 + y**2 > 4) {
break;
}
let nx = x**2 - y**2;
let ny = 2 * x * y;
x = nx + sx;
y = ny + sy;
}
let pos = 4 * (i * imageData.width + j);
imageData.data[pos+0] = c;
imageData.data[pos+1] = c;
imageData.data[pos+2] = c;
imageData.data[pos+3] = 255;
}
}
bufCtx.putImageData(imageData, 0, 0);
}
function OnDraw() {
_draw();
cvs.beginPath();
cvs.clearRect(0, 0, canvas.width, canvas.height);
cvs.drawImage(bufCanvas, 0, 0);
}
function onLoadPage() {
InitCanvas();
OnDraw();
}
window.onload = onLoadPage();
</script>
</body>
</html>'Coding > JavsScript 삽질기' 카테고리의 다른 글
| 만델브로트 집합 그리기2 (0) | 2022.02.03 |
|---|---|
| 만델브로트 집합 그리기 (0) | 2022.02.02 |
| [JavaScript] 회전하는 도넛과 구 그리기 (0) | 2022.01.20 |
| [JavaScript] 회전하는 도넛 그리기 (0) | 2022.01.19 |
댓글을 달아 주세요