Skip to content

Instantly share code, notes, and snippets.

@shikarunochi

shikarunochi/MZ-700GRAPH.html

Last active June 26, 2024 02:03
Show Gist options
  • Save shikarunochi/10ef8f3bc08b5710576c188f0ce2edfb to your computer and use it in GitHub Desktop.
Save shikarunochi/10ef8f3bc08b5710576c188f0ce2edfb to your computer and use it in GitHub Desktop.
Download ZIP
MZ-700ジョイフルパック掲載のグラフプログラムをJavaScript Canvasで描画
Raw
MZ-700GRAPH.html
<!DOCTYPE html>
<html lang="ja">
<!--
国立図書館デジタルコレクション MZ-700ジョイフルパック のプログラムをベースにしています。
https://dl.ndl.go.jp/pid/12631887/1/75
-->
<head>
<meta charset="UTF-8">
<title>MZ-700 GRAPH</title>
<script type="text/javascript">
<!--
function drawTest() {
var cv= document.getElementById('cvs'); //id 名の要素を取得
var ctx= cv.getContext('2d'); //2D(平面) Contextを取得
if(!cv||!cv.getContext){return false;}
ctx.fillStyle = "#FF00FF"; // 描画の塗り色を決める
ctx.fillRect(0, 0, 800, 800); // 位置とサイズを決めて描画
}
function drawGraph() {
var xOffset = 100;
var yOffset = 400;
var cv= document.getElementById('cvs'); //id 名の要素を取得
var ctx= cv.getContext('2d'); //2D(平面) Contextを取得
if(!cv||!cv.getContext){return false;}
ctx.fillStyle = "#FFFFFF"; // 描画の塗り色を決める
ctx.fillRect(0, 0, 800, 800); // 位置とサイズを決めて描画
var color=["#000000","#0000ff","#00ff00","#ff0000"]
var xPos = 0;
var yPos = -100;
var r = 300;
var n = 19;
var k = 2 * Math.PI / n;
var a = new Array(n);
var b = new Array(n);
var z = [];
for(var i = 0;i < n;i++){
z.push(Array(n))
a[i] = r * Math.cos(i*k) + 240;
b[i] = r * Math.sin(i*k);
};
var c = 0;
var l = 0;
var ll = 1;
var x = 0;
var y =0;
while(true){
xPos = a[l];
yPos = b[l];
x = y;
ctx.strokeStyle=color[c];
while(true){
l = l + ll;
if(l > n-1){
l = l-n;
}
if (l==0){
break;
}
ctx.beginPath();
ctx.moveTo(xOffset + xPos, yOffset + yPos); //始点に移動
ctx.lineTo(xOffset + a[l], yOffset + b[l]);
ctx.stroke();
xPos = a[l];
yPos = b[l];
x = y;
y = l;
if(x>y){
z[y][x]=1;
}else{
z[x][y]=1;
}
}
ctx.beginPath();
ctx.moveTo(xOffset + xPos,yOffset + yPos); //始点に移動
ctx.lineTo(xOffset + a[l], yOffset + b[l]);
ctx.stroke();
xPos = a[l];
yPos = b[l];
x = y;
y = l;
if(x>y){
z[y][x]=1;
}else{
z[x][y]=1;
}
c = c + 1;
if(c == 4){c = 0;}
ll = ll + 1;
if(ll > parseInt(n/2)){
break;
}
}
for(var i = 0;i <= parseInt(n/2);i++){
for(var j=i+1;j<n;j++){
if(z[i,j]==1){
continue;
}
x=i;
y=j;
c=j-i-1;
if(c>3){
c=c-4;
}
xPos = a[i];
yPos = b[i];
ctx.strokeStyle=color[c];
while(true){
ctx.beginPath();
ctx.moveTo(xOffset + xPos,yOffset + yPos); //始点に移動
ctx.lineTo(xOffset + a[y], yOffset + b[y]);
ctx.stroke();
xPos = a[y];
yPos = b[y];
if(x > y){
z[y,x]=1;
}else{
z[x,y]=1;
}
y = y + j - 1;
if(y > n-1){
y = y - n;
}
x = x + j - 1;
if(x > n-1){
x = x - n;
}
if(x == i){
break;
}
}
}
}
}
async function drawHatGraph(waitMills) {
const my_sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
var xOffset = 100;
var yOffset = 100;
var cv= document.getElementById('cvs'); //id 名の要素を取得
var ctx= cv.getContext('2d'); //2D(平面) Contextを取得
if(!cv||!cv.getContext){return false;}
//ctx.fillStyle = "#FFFFFF"; // 描画の塗り色を決める
ctx.fillStyle = "#000000"; // 描画の塗り色を決める
ctx.fillRect(0, 0, 800, 800); // 位置とサイズを決めて描画
var color=["#000000","#0000ff","#00ff00","#ff0000"]
ctx.strokeStyle=color[2];
var d = [];
for(var i=0; i < 1; i++) {
d.push(Array(800).fill(0));
}
for(var l = 0;l < 800;l++){
d[0,l] = -1;
d[1,l] = -1;
}
var sw = 0;
var ss = 0;
for(var y = -180;y < 180;y=y+4){
ss=1;
for(var x = -180;x < 180;x=x+4){
if(waitMills > 0){
await my_sleep(waitMills);
}
r = Math.PI / 180 * Math.sqrt(x*x+y*y);
z= 100 * Math.cos(r) - 30 * Math.cos(3*r);
dx= parseInt((120 + x / 2 + (16 - y /2 ) / 2) * 2.5);
dy= parseInt(((130 - y / 2 - z) / 2) * 2.5);
if(ss == 1){
xPos = dx;
yPos = -dy;
ss = 0;
}
if(dx < 0 || dx > 800){continue;}
if(d[0,dx] == -1){
//270:
if(dx == 0 || d[0,dx-1]== -1||d[0,dx+1]==-1){
//330:
d[0,dx]=dy;
d[1,dx]=dy;
drawHatLine(sw,xPos,yPos,dx,dy,ctx,xOffset,yOffset);
xPos =dx;
yPos =-dy;
sw = 0;
continue;
}
//300:
d[0,dx] = parseInt((d[0,dx-1]+d[0,dx+1])/2);
d[1,dx] = parseInt((d[1,dx-1]+d[1,dx+1])/2);
drawHatLine(sw,xPos,yPos,dx,dy,ctx,xOffset,yOffset);
xPos =dx;
yPos =-dy;
sw = 0;
continue;
}
if(dy <= d[0,dx]){
//340:
drawHatLine(sw,xPos,yPos,dx,dy,ctx,xOffset,yOffset);
xPos =dx;
yPos =-dy;
sw = 0;
d[0,dx] = dy;
if(d[1,dx]==-1){
d[1,dx]=dy;
}
continue;
}
if(dy >=d[1,dx]){
//360:
drawHatLine(sw,xPos,yPos,dx,dy,ctx,xOffset,yOffset);
xPos =dx;
yPos =-dy;
sw = 0;
d[1,dx]=dy;
if(d[0,dx]==-1){
d[1,dx]=dy;
}
continue;
}
//240:
xPos = dx;
yPos = -dy;
sw = 1;
}
}
}
function drawHatLine(sw,xPos,yPos,dx,dy,ctx,xOffset,yOffset){
if(sw == 0){
ctx.beginPath();
ctx.moveTo(xOffset + xPos ,yOffset - yPos);
ctx.lineTo(xOffset + dx, yOffset + dy);
ctx.stroke();
}
return;
}
// -->
</script>
</head>
<body style="background-color: #ffffff;">
<canvas id="cvs" width="800" height="800">
ここに HTML-5 対応の図形を表示
</canvas>
<br>
<input type="button" value="drawGraph" onclick="drawGraph();">
<input type="button" value="drawHatGraph(FullSpeed)" onclick="drawHatGraph(0);">
<input type="button" value="drawHatGraph" onclick="drawHatGraph(10);">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment