シダ(HTML, canvas)
HTMLとcanvasで
回転しているように見える
シダを描画しました
Enterキーで元の位置から
再スタートします
HTMLの記事でC(C++)らしき
プログラムが書いてあるのを見ました
varがあったりdoubleなどの型宣言が
ないのでC(C++)ではない様です
まさかHTMLでプログラミング言語が
使えるのか?と思いテキストにコピペ
してWindowsのEdgeで開いてみると
動きました
という事で点の書き方などをネットで
調べてcanvasにたどり着きHTML(canvas)
で初めてのプログラムを作りました
NL-BASIC(VL-BASIC)に添付している
シダを移植してみました
ところで、このHTMLで動くプログラミング
言語は何というのでしょうか
ネットで調べてみましたが
JavaScript?
で良いのでしょうか
それともHTML?
etc21215.zip(leaf.html)は
以下のリンクからダウンロードできます
Readme.txtを読んで遊んで下さい
HTMLが動作するページです
以下をメモ帳などでコピペしてleaf.htmlで保存して
Microsoft EDGEなどのブラウザーに重ねると動くと思います
leaf.html
<!DOctxYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>シダ (ULproject)</title>
</head>
<body>
<p id="leaf"></p>
<script>
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = '640';
canvas.height = '400';
document.body.appendChild(canvas);
function cls(c)
{
ctx.fillStyle = c;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function pset(x, y, c)
{
ctx.fillStyle = c;
ctx.fillRect(x, y, 1, 1);
}
function color(c)
{
ctx.fillStyle = c;
ctx.strokeStyle = c;
}
function leaf(d)
{
var x, y, x1, y1, i, r;
cls('#000');
x = 0; y = 0;
for (i = 0; i < 10000; i++)
{
pset(320 + x * 30 * d, 320 - y * 30, '#0f0');
r = Math.random();
if (r < 0.01)
{
x1 = 0;
y1 = y * 0.16
}
else if (r < 0.01+0.07)
{
x1 = x * 0.20 - y * 0.26
y1 = x * 0.23 + y * 0.22 + 1.60
}
else if (r < 0.01+0.07+0.07)
{
x1 = y * 0.28 - x * 0.15
y1 = x * 0.26 + y * 0.24 + 0.44
}
else
{
x1 = x * 0.85 + y * 0.04
y1 = y * 0.85 - x * 0.04 + 1.60
}
x = x1; y = y1;
}
}
var rad = Math.PI * 2;
document.body.addEventListener('keydown', event =>
{
if (event.keyCode == 13)
{
rad = Math.PI * 2;
window.requestAnimationFrame(idle)
}
});
function idle()
{
if (rad < 0) return;
leaf(Math.cos(rad));
color('#fff');
ctx.font = "24px 'ＭＳ 明朝'";
ctx.fillText('シダ (Push enter key.)', 0, 24);
rad -= Math.PI / 180 * 2;
window.requestAnimationFrame(idle)
}
idle();
</script>
</body>
</html>