(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> |