"프로그램으로 고사리 그리기"를 JavaScript + Canvas로 그리기

15111 단어 캔버스자바스크립트
혹시 기출일지도 모르지만‥‥.
  • 프로그램으로 고사리 그리기 - 강한 불로 진행
  • "프로그램으로 고사리 그리기"를 Dart로 그리기 - Qiita
  • "프로그램으로 고사리 그리기"를 Go로 그리기 - Qiita
  • Clojure - 프로그래밍 방식으로 고사리 그리기 - Qiita
  • ``프로그램으로 고사리 그리기''를 Python으로 그리기 - Qiita

    • 출력 결과



    シダ

    소스 코드



    index.html
    <!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>Draw leaves of the fern by a program</title>
</head>
<body>
<h1>Draw leaves of the fern by a program</h1>

<canvas id="fern"></canvas>
<input type="text" value="Data URL Here" id="data-url">
<script src="index.js"></script>
</body>
</html>

    index.js
    (function () {

// Constants
var
// size of canvas#fern
WIDTH  = 500,
HEIGHT = 500;

// Functions
var
lambda = function lambda(expr) {
  return Function(
    'x, y',
    'return ' + expr + ';');
},
W1x = lambda('0.836  * x + 0.044 * y'),
W1y = lambda('-0.044 * x + 0.836 * y + 0.169'),
W2x = lambda('-0.141 * x + 0.302 * y'),
W2y = lambda('0.302  * x + 0.141 * y + 0.127'),
W3x = lambda('0.141  * x - 0.302 * y'),
W3y = lambda('0.302  * x + 0.141 * y + 0.169'),
W4x = lambda('0'),
W4y = lambda('0.175337 * y');

function points(k, x, y, callback) {
  if (0 < k) {
    points(k - 1, W1x(x, y), W1y(x, y), callback);
    if (Math.random() < 0.3)
      points(k - 1, W2x(x, y), W2y(x, y), callback);
    if (Math.random() < 0.3)
      points(k - 1, W3x(x, y), W3y(x, y), callback);
    if (Math.random() < 0.3)
      points(k - 1, W4x(x, y), W4y(x, y), callback);
  } else {
    callback(~~(x * (WIDTH - 10) + WIDTH / 2), ~~(HEIGHT - y * (HEIGHT - 10)));
  }
}

// Main
var
N = 20,
CANVAS_ID = 'fern',
DATA_URL_ID = 'data-url',
COLOR = [0x00, 0x80, 0x00, 0xff];

function initCanvas(canvas) {
  canvas.width  = WIDTH;
  canvas.height = HEIGHT;
  return canvas;
}

var
canvas  = initCanvas(document.getElementById(CANVAS_ID)),
ctx     = canvas.getContext('2d'),
imgData = ctx.createImageData(WIDTH, HEIGHT);

points(N, 0, 0, function callback(x, y) {
  var
  idx = y * WIDTH * 4 + x * 4;
  imgData.data[idx + 0] = COLOR[0];
  imgData.data[idx + 1] = COLOR[1];
  imgData.data[idx + 2] = COLOR[2];
  imgData.data[idx + 3] = COLOR[3];
});

ctx.putImageData(imgData, 0, 0);

document.getElementById(DATA_URL_ID).value = canvas.toDataURL();

})();

    Python 버전의 소스 코드를 JavaScript로 다시 작성한 것 같은 느낌이므로 왜인가 lambda 라든지 있습니다. 뭔가 다른 것 같아요.

    그건 그렇고



    공개해 두었으므로, 여가 시간에도 열어 보세요.

    Draw leaves of the fern by a program

    난수 사용하고 있으므로, 얇은 고사리가 되거나 굵어지거나 합니다.

    그리고 DataURL로 출력할 수 있습니다.
    2개의 벡터가 이루는 각의 내적·외적의 수치의 변화를 확인
    캔버스로 이미지 처리 (네거티브 포지션 변환/그레이 스케일 변환)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage