「デジタル回路[Java Applet版]」は、最初は2006年頃に書いたものである。 その後、Java Appletはセキュリティ対策から、大変扱いづらくなった。
そのため、2013年に JavaScript に移植した。それから、10年近くたって いるので、動作しないものもあるだろう。
問題があれば、可能な限り、修正したい。
Java Applet版のソースプログラムはたしか 3,000行前後になると思う。 ７年もたてばすっかり忘れているので、最初の段階に特に時間がかかろう。 機械的に置き換えられる部分が多いと思うが、急がず、月日をかけたい。
まず、JavaScript-Canvasにより、AND, OR, NOT などの基本ゲートを描いてみよう。 Javaでは ANDゲートは次のメソッドで描画している。
void drawAND(Graphics2D g2, int x, int y) {
g2.draw(new Line2D.Double(x+10, y+5, x+35, y+5));
g2.draw(new Line2D.Double(x+10, y+45, x+35, y+45));
g2.draw(new Line2D.Double(x+10, y+5, x+10, y+45));
g2.draw(new Arc2D.Double(x+17, y+5, 40, 40, -90, 180, Arc2D.OPEN));
}
これを Canvasに置き換えると、次のようになる。 位置、サイズ、細かい形状については、まだ合わせていない。 形状は前システムに合わせるか、変更する場合には、なるべく MIL規格に合わせる。
<canvas id="cvs1" width="300" height="140"></canvas>
<script type="text/javascript">
function drawAND1(cvs) {
var canvas = document.getElementById(cvs);
if (!canvas || !canvas.getContext) return false
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(40, 120);
ctx.lineTo(100, 120); // 下辺
ctx.arc(100, 70, 50, 90*Math.PI/180, 270*Math.PI/180, true); // )
ctx.lineTo(40, 20); // 上辺
ctx.closePath(); // 左辺
ctx.stroke();
}
//onload = function () { drawAND1("cvs1"); };
</script>
上のプログラムの実行結果は次の通りである。 描画の順序は左下隅を始点として、下辺、半円、上辺、左辺である。 円弧はリファレンス[1]にあるように、右回りに90°から270°まで描くが、右回りではなく、左回りに描かれる。 このため、図のような半円となる。最初の二つの引数は中心座標、次は半径である。
ANDゲート固有の処理は４行だけである。
サイズを Java Applet版に合わせると次のようになる。実行が二つの関数となったため、 実行命令は bodyタグに置いた。
<body onload="drawAND1('cvs1');drawAND2('cvs2', 0, 0);">
このプログラムでは、左上隅の座標は (10,5) で、図形のサイズは縦40、横45 である。 arcメソッドの第１引数の25は、多少変更すべきかもしれない。
ORやXORを含めて、サイズを統一すれば、プログラム全体としてシンプルとなる。
function drawAND2(cvs, x, y) {
var canvas = document.getElementById(cvs);
if (!canvas || !canvas.getContext) return false
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(x+10, y+45);
ctx.lineTo(x+25, y+45); // 下辺
ctx.arc(x+25, y+25, 20, 90*Math.PI/180, 270*Math.PI/180, true); // )
ctx.lineTo(x+10, y+5); // 上辺
ctx.closePath(); // 左辺
ctx.stroke();
}
実行結果を下に示す。