もしかしたら既出かもしれないけど‥‥。
- プログラムでシダを描画する - 強火で進め
- 「プログラムでシダを描画する」を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で出力できます。