折り紙で正多面体を作る

(1)図のような折り紙を用意する。
ここでは、表側を金色、裏側を白とする。

(2)実線に従って谷折りして（中表に折って）、折り目を付けておく。

(3)図の様に上下の頂点のみを、先程付けた折り目の交点
（要するに、折り紙の中心）に向かって中表に折る。
さらに、図のように実践に従って山折りし、折り目を付けておく。

(4-a)赤→ 緑、青→ 紫の順に直角を三等分するように山折りして、「右ユニット」を作る。
その際、上底や下底をはみ出した部分は内部に折りたたむ。

(4-b)赤→ 緑、青→ 紫の順に直角を三等分するように山折りして、「左ユニット」を作る。
その際、上底や下底をはみ出した部分は内部に折りたたむ。

(5-a)「右ユニット」の裏面図において、実線部分を谷折りする。

(5-b)「左ユニット」の裏面図において、実線部分を谷折りする。

(6)各ユニットを以下の指定枚数作成し、組み合わせることによって、正多面体が作成できる。
・「正四面体」＝「右ユニット」×1＋「左ユニット」×1
・「正八面体」＝「右ユニット」×4　or　「左ユニット」×4
・「正二十面体」＝「右ユニット」×5＋「左ユニット」×5

お持ち帰りコーナー

ソースコード

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>折り紙で正多面体を作る</title>
<script>
var cvs0, cvs1, cvs2, cvs3, cvs4, cvs5, cvs6; // canvas要素のオブジェクトを取得
var cnt0, cnt1, cnt2, cnt3, cnt4, cnt5, cnt6; // コンテキストを取得

window.onload = function(){
  origami0();
  origami1();
  origami2();
  origami3();
  origami4();
  origami5();
  origami6();
}

var origami0 = function(){
  cvs0 = document.getElementById("cvs0");
  cnt0 = cvs0.getContext("2d");

  cnt0.fillStyle = "#808080";
  cnt0.fillRect(0, 0, 400, 200);

  cnt0.beginPath();
  cnt0.moveTo(200,100);
  cnt0.lineTo(100,0);
  cnt0.lineTo(0,100);
  cnt0.lineTo(100,200);
  cnt0.closePath();
  cnt0.fillStyle = "#ffd700";
  cnt0.fill();

  cnt0.beginPath();
  cnt0.moveTo(400,100);
  cnt0.lineTo(300,0);
  cnt0.lineTo(200,100);
  cnt0.lineTo(300,200);
  cnt0.closePath();
  cnt0.fillStyle = "#ffffff";
  cnt0.fill();
}

var origami1 = function(){
  cvs1 = document.getElementById("cvs1");
  cnt1 = cvs1.getContext("2d");

  cnt1.fillStyle = "#808080";
  cnt1.fillRect(0, 0, 400, 400);

  cnt1.beginPath();
  cnt1.moveTo(400,200);
  cnt1.lineTo(200,0);
  cnt1.lineTo(0,200);
  cnt1.lineTo(200,400);
  cnt1.closePath();
  cnt1.fillStyle = "#ffd700";
  cnt1.fill();

  cnt1.beginPath();
  cnt1.moveTo(300,100);
  cnt1.lineTo(100,300);
  cnt1.strokeWidth = 5;
  cnt1.strokeStyle = "#000000";
  cnt1.stroke();

  cnt1.beginPath();
  cnt1.moveTo(100,100);
  cnt1.lineTo(300,300);
  cnt1.strokeWidth = 5;
  cnt1.strokeStyle = "#000000";
  cnt1.stroke();
}

var origami2 = function(){
  cvs2 = document.getElementById("cvs2");
  cnt2 = cvs2.getContext("2d");

  cnt2.fillStyle = "#808080";
  cnt2.fillRect(0, 0, 400, 400);

  cnt2.beginPath();
  cnt2.moveTo(400,200);
  cnt2.lineTo(300,100);
  cnt2.lineTo(100,100);
  cnt2.lineTo(0,200);
  cnt2.lineTo(100,300);
  cnt2.lineTo(300,300);
  cnt2.closePath();
  cnt2.fillStyle = "#ffd700";
  cnt2.fill();

  cnt2.beginPath();
  cnt2.moveTo(300,100);
  cnt2.lineTo(100,100);
  cnt2.lineTo(200,200);
  cnt2.closePath();
  cnt2.fillStyle = "#ffffff";
  cnt2.fill();

  cnt2.beginPath();
  cnt2.moveTo(200,200);
  cnt2.lineTo(100,300);
  cnt2.lineTo(300,300);
  cnt2.closePath();
  cnt2.fillStyle = "#ffffff";
  cnt2.fill();

  cnt2.beginPath();
  cnt2.moveTo(200,100);
  cnt2.lineTo(200,300);
  cnt2.strokeWidth = 5;
  cnt2.strokeStyle = "#000000";
  cnt2.stroke();
}

var origami3 = function(){
  cvs3 = document.getElementById("cvs3");
  cnt3 = cvs3.getContext("2d");

  cnt3.fillStyle = "#808080";
  cnt3.fillRect(0, 0, 400, 400);

  cnt3.beginPath();
  cnt3.moveTo(400,200);
  cnt3.lineTo(300,100);
  cnt3.lineTo(100,100);
  cnt3.lineTo(0,200);
  cnt3.lineTo(100,300);
  cnt3.lineTo(300,300);
  cnt3.closePath();
  cnt3.fillStyle = "#ffd700";
  cnt3.fill();

  cnt3.beginPath();
  cnt3.moveTo(300,100);
  cnt3.lineTo(100,100);
  cnt3.lineTo(200,200);
  cnt3.closePath();
  cnt3.fillStyle = "#ffffff";
  cnt3.fill();

  cnt3.beginPath();
  cnt3.moveTo(200,200);
  cnt3.lineTo(100,300);
  cnt3.lineTo(300,300);
  cnt3.closePath();
  cnt3.fillStyle = "#ffffff";
  cnt3.fill();

  cnt3.beginPath();
  cnt3.moveTo(200,100);
  cnt3.lineTo(200,300);
  cnt3.strokeWidth = 5;
  cnt3.strokeStyle = "#000000";
  cnt3.stroke();

  cnt3.beginPath();
  cnt3.moveTo(200,300);
  cnt3.lineTo(400,185);
  cnt3.strokeWidth = 5;
  cnt3.strokeStyle = "#ff0000";
  cnt3.stroke();

  cnt3.beginPath();
  cnt3.moveTo(200,300);
  cnt3.lineTo(373,0);
  cnt3.strokeWidth = 5;
  cnt3.strokeStyle = "#008000";
  cnt3.stroke();

  cnt3.beginPath();
  cnt3.moveTo(200,100);
  cnt3.lineTo(0,215);
  cnt3.strokeWidth = 5;
  cnt3.strokeStyle = "#0000ff";
  cnt3.stroke();

  cnt3.beginPath();
  cnt3.moveTo(200,100);
  cnt3.lineTo(27,400);
  cnt3.strokeWidth = 5;
  cnt3.strokeStyle = "#800080";
  cnt3.stroke();
}

var origami4 = function(){
  cvs4 = document.getElementById("cvs4");
  cnt4 = cvs4.getContext("2d");

  cnt4.fillStyle = "#808080";
  cnt4.fillRect(0, 0, 400, 400);

  cnt4.beginPath();
  cnt4.moveTo(400,200);
  cnt4.lineTo(300,100);
  cnt4.lineTo(100,100);
  cnt4.lineTo(0,200);
  cnt4.lineTo(100,300);
  cnt4.lineTo(300,300);
  cnt4.closePath();
  cnt4.fillStyle = "#ffd700";
  cnt4.fill();

  cnt4.beginPath();
  cnt4.moveTo(300,100);
  cnt4.lineTo(100,100);
  cnt4.lineTo(200,200);
  cnt4.closePath();
  cnt4.fillStyle = "#ffffff";
  cnt4.fill();

  cnt4.beginPath();
  cnt4.moveTo(200,200);
  cnt4.lineTo(100,300);
  cnt4.lineTo(300,300);
  cnt4.closePath();
  cnt4.fillStyle = "#ffffff";
  cnt4.fill();

  cnt4.beginPath();
  cnt4.moveTo(200,100);
  cnt4.lineTo(200,300);
  cnt4.strokeWidth = 5;
  cnt4.strokeStyle = "#000000";
  cnt4.stroke();

  cnt4.beginPath();
  cnt4.moveTo(200,100);
  cnt4.lineTo(400,215);
  cnt4.strokeWidth = 5;
  cnt4.strokeStyle = "#ff0000";
  cnt4.stroke();

  cnt4.beginPath();
  cnt4.moveTo(200,100);
  cnt4.lineTo(373,400);
  cnt4.strokeWidth = 5;
  cnt4.strokeStyle = "#008000";
  cnt4.stroke();

  cnt4.beginPath();
  cnt4.moveTo(200,300);
  cnt4.lineTo(0,185);
  cnt4.strokeWidth = 5;
  cnt4.strokeStyle = "#0000ff";
  cnt4.stroke();

  cnt4.beginPath();
  cnt4.moveTo(200,300);
  cnt4.lineTo(27,0);
  cnt4.strokeWidth = 5;
  cnt4.strokeStyle = "#800080";
  cnt4.stroke();
}

var origami5 = function(){
  cvs5 = document.getElementById("cvs5");
  cnt5 = cvs5.getContext("2d");

  cnt5.fillStyle = "#808080";
  cnt5.fillRect(0, 0, 400, 400);

  cnt5.beginPath();
  cnt5.moveTo(400,200);
  cnt5.lineTo(300,100);
  cnt5.lineTo(100,100);
  cnt5.lineTo(0,200);
  cnt5.lineTo(100,300);
  cnt5.lineTo(300,300);
  cnt5.closePath();
  cnt5.fillStyle = "#ffd700";
  cnt5.fill();

  cnt5.beginPath();
  cnt5.moveTo(300,100);
  cnt5.lineTo(100,100);
  cnt5.lineTo(200,200);
  cnt5.closePath();
  cnt5.fillStyle = "#ffffff";
  cnt5.fill();

  cnt5.beginPath();
  cnt5.moveTo(200,200);
  cnt5.lineTo(100,300);
  cnt5.lineTo(300,300);
  cnt5.closePath();
  cnt5.fillStyle = "#ffffff";
  cnt5.fill();

  cnt5.beginPath();
  cnt5.moveTo(200,100);
  cnt5.lineTo(373,400);
  cnt5.strokeWidth = 5;
  cnt5.strokeStyle = "#000000";
  cnt5.stroke();

  cnt5.beginPath();
  cnt5.moveTo(0,200);
  cnt5.lineTo(400,200);
  cnt5.strokeWidth = 5;
  cnt5.strokeStyle = "#000000";
  cnt5.stroke();

  cnt5.beginPath();
  cnt5.moveTo(200,300);
  cnt5.lineTo(27,0);
  cnt5.strokeWidth = 5;
  cnt5.strokeStyle = "#000000";
  cnt5.stroke();

  cnt5.beginPath();
  cnt5.moveTo(400,0);
  cnt5.lineTo(373,0);
  cnt5.lineTo(200,300);
  cnt5.lineTo(400,300);
  cnt5.closePath();
  cnt5.fillStyle = "#808080";
  cnt5.fill();

  cnt5.beginPath();
  cnt5.moveTo(0,400);
  cnt5.lineTo(27,400);
  cnt5.lineTo(200,100);
  cnt5.lineTo(0,100);
  cnt5.closePath();
  cnt5.fillStyle = "#808080";
  cnt5.fill();

  cnt5.fillRect(0, 0, 400, 100);
  cnt5.fillRect(0, 300, 400, 400);
}

var origami6 = function(){
  cvs6 = document.getElementById("cvs6");
  cnt6 = cvs6.getContext("2d");

  cnt6.fillStyle = "#808080";
  cnt6.fillRect(0, 0, 400, 400);

  cnt6.beginPath();
  cnt6.moveTo(400,200);
  cnt6.lineTo(300,100);
  cnt6.lineTo(100,100);
  cnt6.lineTo(0,200);
  cnt6.lineTo(100,300);
  cnt6.lineTo(300,300);
  cnt6.closePath();
  cnt6.fillStyle = "#ffd700";
  cnt6.fill();

  cnt6.beginPath();
  cnt6.moveTo(300,100);
  cnt6.lineTo(100,100);
  cnt6.lineTo(200,200);
  cnt6.closePath();
  cnt6.fillStyle = "#ffffff";
  cnt6.fill();

  cnt6.beginPath();
  cnt6.moveTo(200,200);
  cnt6.lineTo(100,300);
  cnt6.lineTo(300,300);
  cnt6.closePath();
  cnt6.fillStyle = "#ffffff";
  cnt6.fill();

  cnt6.beginPath();
  cnt6.moveTo(200,100);
  cnt6.lineTo(27,400);
  cnt6.strokeWidth = 5;
  cnt6.strokeStyle = "#000000";
  cnt6.stroke();

  cnt6.beginPath();
  cnt6.moveTo(0,200);
  cnt6.lineTo(400,200);
  cnt6.strokeWidth = 5;
  cnt6.strokeStyle = "#000000";
  cnt6.stroke();

  cnt6.beginPath();
  cnt6.moveTo(200,300);
  cnt6.lineTo(373,0);
  cnt6.strokeWidth = 5;
  cnt6.strokeStyle = "#000000";
  cnt6.stroke();

  cnt6.beginPath();
  cnt6.moveTo(0,0);
  cnt6.lineTo(27,0);
  cnt6.lineTo(200,300);
  cnt6.lineTo(0,300);
  cnt6.closePath();
  cnt6.fillStyle = "#808080";
  cnt6.fill();

  cnt6.beginPath();
  cnt6.moveTo(400,400);
  cnt6.lineTo(373,400);
  cnt6.lineTo(200,100);
  cnt6.lineTo(400,100);
  cnt6.closePath();
  cnt6.fillStyle = "#808080";
  cnt6.fill();

  cnt6.fillRect(0, 0, 400, 100);
  cnt6.fillRect(0, 300, 400, 400);
}

// PNG画像として保存する関数
var saveasPNG0 = function(){
  var png = cvs0.toDataURL("image/png");
  document.getElementById("newImg").src = png;
};

// PNG画像として保存する関数
var saveasPNG1 = function(){
  var png = cvs1.toDataURL("image/png");
  document.getElementById("newImg").src = png;
};

// PNG画像として保存する関数
var saveasPNG2 = function(){
  var png = cvs2.toDataURL("image/png");
  document.getElementById("newImg").src = png;
};

// PNG画像として保存する関数
var saveasPNG3 = function(){
  var png = cvs3.toDataURL("image/png");
  document.getElementById("newImg").src = png;
};

// PNG画像として保存する関数
var saveasPNG4 = function(){
  var png = cvs4.toDataURL("image/png");
  document.getElementById("newImg").src = png;
};

// PNG画像として保存する関数
var saveasPNG5 = function(){
  var png = cvs5.toDataURL("image/png");
  document.getElementById("newImg").src = png;
};

// PNG画像として保存する関数
var saveasPNG6 = function(){
  var png = cvs6.toDataURL("image/png");
  document.getElementById("newImg").src = png;
};
</script>
</head>
<body bgcolor="#c0c0c0">
<div style="text-align:center;">
<h1>折り紙で正多面体を作る</h1>
<p>
(1)図のような折り紙を用意する。<br>
ここでは、表側を金色、裏側を白とする。<br>
<canvas id="cvs0" width="400" height="200"></canvas>
<br>
<input type="button" value="PNG画像として保存する" onclick="saveasPNG0()">
<br>
</p>
<p>
(2)実線に従って谷折りして（中表に折って）、折り目を付けておく。<br>
<canvas id="cvs1" width="400" height="400"></canvas>
<br>
<input type="button" value="PNG画像として保存する" onclick="saveasPNG1()">
<br>
</p>
<p>
(3)図の様に上下の頂点のみを、先程付けた折り目の交点<br>
（要するに、折り紙の中心）に向かって中表に折る。<br>
さらに、図のように実践に従って山折りし、折り目を付けておく。<br>
<canvas id="cvs2" width="400" height="400"></canvas>
<br>
<input type="button" value="PNG画像として保存する" onclick="saveasPNG2()">
<br>
</p>
<p>
(4-a)<span style="background-color:#ffffff;color:#ff0000;">赤</span>→
<span style="background-color:#ffffff;color:#008000;">緑</span>、
<span style="background-color:#ffffff;color:#0000ff;">青</span>→
<span style="background-color:#ffffff;color:#800080;">紫</span>の順に
直角を三等分するように山折りして、「右ユニット」を作る。<br>
その際、上底や下底をはみ出した部分は内部に折りたたむ。<br>
<canvas id="cvs3" width="400" height="400"></canvas>
<br>
<input type="button" value="PNG画像として保存する" onclick="saveasPNG3()">
<br>
</p>
<p>
(4-b)<span style="background-color:#ffffff;color:#ff0000;">赤</span>→
<span style="background-color:#ffffff;color:#008000;">緑</span>、
<span style="background-color:#ffffff;color:#0000ff;">青</span>→
<span style="background-color:#ffffff;color:#800080;">紫</span>の順に
直角を三等分するように山折りして、「左ユニット」を作る。<br>
その際、上底や下底をはみ出した部分は内部に折りたたむ。<br>
<canvas id="cvs4" width="400" height="400"></canvas>
<br>
<input type="button" value="PNG画像として保存する" onclick="saveasPNG4()">
<br>
</p>
<p>
(5-a)「右ユニット」の裏面図において、実線部分を谷折りする。<br>
<canvas id="cvs5" width="400" height="400"></canvas>
<br>
<input type="button" value="PNG画像として保存する" onclick="saveasPNG5()">
<br>
</p>
<p>
(5-b)「左ユニット」の裏面図において、実線部分を谷折りする。<br>
<canvas id="cvs6" width="400" height="400"></canvas>
<br>
<input type="button" value="PNG画像として保存する" onclick="saveasPNG6()">
<br>
</p>
<p>
(6)各ユニットを以下の指定枚数作成し、組み合わせることによって、正多面体が作成できる。<br>
・「正四面体」＝「右ユニット」×1＋「左ユニット」×1<br>
・「正八面体」＝「右ユニット」×4　or　「左ユニット」×4<br>
・「正二十面体」＝「右ユニット」×5＋「左ユニット」×5
</p>

<br><hr><br>

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

</div>

<br><hr><br>

</body>
</html>

折り紙で正多面体を作る

お持ち帰りコーナー

ソースコード

Shadow Academy トップへ戻る