HTML5・シェルピンスキーのガスケット

背景色: 描画色: 繰り返し回数:



お持ち帰りコーナー

「PNG画像を保存する」ボタンを押すと、以下に画像が生成される。



ソースコード

gasket.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>HTML5・シェルピンスキーのガスケット</title>
<script language="JavaScript" type="text/javascript">
// グローバル変数
var cvs, cnt;
var num = 0;
var bgcolor = "#ffffff";
var color = "#000000";

window.onload = function(){
  cvs = document.getElementById("gasket"); // canvas要素のオブジェクトを取得
  cnt = cvs.getContext("2d"); // コンテキストを取得

  cnt.fillStyle = bgcolor;
  cnt.fillRect(0, 0, 500, 500);

  cnt.fillStyle = color;
  fillTriangle(250, 50, 50, 450, 450, 450);

  gasket(250, 50, 50, 450, 450, 450, 0);
};

// 三角形を塗りつぶす関数
var fillTriangle = function(x0, y0, x1, y1, x2, y2){
  cvs = document.getElementById("gasket"); // canvas要素のオブジェクトを取得
  cnt = cvs.getContext("2d"); // コンテキストを取得

  cnt.beginPath();
  cnt.moveTo(x0,y0);
  cnt.lineTo(x1,y1);
  cnt.lineTo(x2,y2);
  cnt.closePath();
  cnt.fill();
};

var gasket = function(ax, ay, bx, by, cx, cy, n){
  if(n > 0){
    cnt.fillStyle = bgcolor;
    fillTriangle((ax+bx)/2, (ay+by)/2, (ax+cx)/2, (ay+cy)/2, (bx+cx)/2, (by+cy)/2);
    gasket(ax, ay, (ax+bx)/2, (ay+by)/2, (ax+cx)/2, (ay+cy)/2, n-1);
    gasket((ax+bx)/2, (ay+by)/2, bx, by, (bx+cx)/2, (by+cy)/2, n-1);
    gasket((ax+cx)/2, (ay+cy)/2, (bx+cx)/2, (by+cy)/2, cx, cy, n-1);
  }
};

var repaint = function(){
  cvs = document.getElementById("gasket"); // canvas要素のオブジェクトを取得
  cnt = cvs.getContext("2d"); // コンテキストを取得

  bgcolor = document.getElementById("bgcolor").value;
  color = document.getElementById("color").value;
  num = document.getElementById("number").value;

  cnt.fillStyle = bgcolor;
  cnt.fillRect(0, 0, 500, 500);

  cnt.fillStyle = color;
  fillTriangle(250, 50, 50, 450, 450, 450);

  gasket(250, 50, 50, 450, 450, 450, num);
}

// PNG画像として保存
var saveasPNG = function(){
  var png = cvs.toDataURL("image/png");
  document.getElementById("newImg").src = png;
}
</script>
</head>
<body bgcolor="#c0c0c0">
<div style="text-align:center;">
<h1>HTML5・シェルピンスキーのガスケット</h1>
<form>
背景色:
  <select id="bgcolor">
    <option value="#00ffff" style="background-color:#00ffff;">aqua(cyan)</option>
    <option value="#000000" style="background-color:#000000;color:#ffffff;">black</option>
    <option value="#0000ff" style="background-color:#0000ff;color:#ffffff;">blue</option>
    <option value="#9400d3" style="background-color:#9400d3;">darkviolet</option>
    <option value="#ff00ff" style="background-color:#ff00ff;">fuchsia(magenta)</option>
    <option value="#ffd700" style="background-color:#ffd700;">gold</option>
    <option value="#808080" style="background-color:#808080;">gray</option>
    <option value="#008000" style="background-color:#008000;color:#ffffff;">green</option>
    <option value="#00ff00" style="background-color:#00ff00;">lime</option>
    <option value="#800000" style="background-color:#800000;color:#ffffff;">maroon</option>
    <option value="#000080" style="background-color:#000080;color:#ffffff;">navy</option>
    <option value="#808000" style="background-color:#808000;">olive</option>
    <option value="#ffa500" style="background-color:#ffa500;">orange</option>
    <option value="#800080" style="background-color:#800080;color:#ffffff;">purple</option>
    <option value="#ff0000" style="background-color:#ff0000;">red</option>
    <option value="#c0c0c0" style="background-color:#c0c0c0;">silver</option>
    <option value="#008080" style="background-color:#008080;color:#ffffff;">teal</option>
    <option value="#ffffff" style="background-color:#ffffff;" selected>white</option>
    <option value="#ffff00" style="background-color:#ffff00;">yellow</option>
    <option value="#9acd32" style="background-color:#9acd32;">yellowgreen</option>
  </select>

描画色:
  <select id="color">
    <option value="#00ffff" style="background-color:#00ffff;">aqua(cyan)</option>
    <option value="#000000" style="background-color:#000000;color:#ffffff;" selected>black</option>
    <option value="#0000ff" style="background-color:#0000ff;color:#ffffff;">blue</option>
    <option value="#9400d3" style="background-color:#9400d3;">darkviolet</option>
    <option value="#ff00ff" style="background-color:#ff00ff;">fuchsia(magenta)</option>
    <option value="#ffd700" style="background-color:#ffd700;">gold</option>
    <option value="#808080" style="background-color:#808080;">gray</option>
    <option value="#008000" style="background-color:#008000;color:#ffffff;">green</option>
    <option value="#00ff00" style="background-color:#00ff00;">lime</option>
    <option value="#800000" style="background-color:#800000;color:#ffffff;">maroon</option>
    <option value="#000080" style="background-color:#000080;color:#ffffff;">navy</option>
    <option value="#808000" style="background-color:#808000;">olive</option>
    <option value="#ffa500" style="background-color:#ffa500;">orange</option>
    <option value="#800080" style="background-color:#800080;color:#ffffff;">purple</option>
    <option value="#ff0000" style="background-color:#ff0000;">red</option>
    <option value="#c0c0c0" style="background-color:#c0c0c0;">silver</option>
    <option value="#008080" style="background-color:#008080;color:#ffffff;">teal</option>
    <option value="#ffffff" style="background-color:#ffffff;">white</option>
    <option value="#ffff00" style="background-color:#ffff00;">yellow</option>
    <option value="#9acd32" style="background-color:#9acd32;">yellowgreen</option>
  </select>

繰り返し回数:
  <select id="number">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
  </select>
<input type="button" value="生成する" onclick="repaint()">
<input type="button" value="PNG画像として保存" onclick="saveasPNG()">
</form>
<canvas id="gasket" width="500" height="500"></canvas>

<br><hr><br>

<h2>お持ち帰りコーナー</h2>
「PNG画像を保存する」ボタンを押すと、以下に画像が生成される。<br>
<img id="newImg">

</div>

<br><hr><br>

</body>
</html>



参考文献

  1. 「Javaによる図形処理入門」(工学図書、1998年)
  2. 「Javaによる複雑系入門」(工学社、2008年)



Shadow Academy トップへ戻る

inserted by FC2 system