ブログの説明

学校に通わないで学んだことを記しています。間違っているところが何かありましたらご指摘下さると幸いです。コメントに対する返信が遅れる可能性があります。その場合は申し訳ありません。

このブログではサイドバーに広告を表示しています。このブログ内の投稿記事を検索するには右上の拡大鏡のアイコンを、アーカイブやラベル付けから投稿記事を閲覧するには左上の三重線のアイコンをクリックして下さい。

数式の表示にはMathJaxを利用させていただいています。数式の表示のためにJavaScriptが有効である必要があります。そうでない場合、訳の分からないLatexのコードが表示されます。幾何学図形やチャートの表示にはHTML5 CanvasやGoogle Chartを使用しています。その表示のためにもJavaScriptが有効である必要があります。

HTML5 Canvasで基本論理ゲート記号を描いてみた

MIL（軍事）規格の論理ゲート記号（もどき）をHTML5のcanvas要素に描いてみた。今回は、ORゲート、ANDゲート、NOTゲートの3つの基本論理ゲートだけを描いた。

ORゲートを描く

まずはORゲートを描いてみた。出来上がりは次のとおり。

あなたのブラウザはCanvas要素に対応していません。

ORゲートのためのHTMLとJavaScriptのソースコードは次のとおり。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>HTML5 Canvasで論理ゲート記号を描く</title>
</head>
<body>
<div style="text-align: center">
<canvas id="orGateSymbol" width="100" height="50">
あなたのブラウザはcanvas要素に対応していません。
</canvas>
</div>
<script>
//特定のcanvas要素を取得して変数に代入
var canvas = document.getElementById("orGateSymbol");
//2次元描画コンテキストを取得して変数に代入
var context = canvas.getContext("2d");

//translate(x,y)メソッドで図形を平行移動できる
context.translate(0, 0);
//scale()メソッドで図形を上下左右に伸縮できる
context.scale(1,1);

/*
ORゲートの本体部分の輪郭線を描く
*/
//輪郭線の太さ
context.lineWidth = 2;
//輪郭線の色
context.strokeStyle = 'black';
//パス（軌道）を初期化
context.beginPath();
//輪郭線を描き始める座標
context.moveTo(12,2);
//本体上辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(52,2,57,22);
//本体下辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(47,42,12,40);
//本体左辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(24,22,12,2);
//closePath()メソッドでパスを閉じる
context.closePath();
//stroke()メソッドで描画
context.stroke();

/*
本体に付属する3つの直線を描く
*/
//直線の太さ
context.lineWidth = 1;
//パス（軌道）を初期化
context.beginPath();
/*右端尾部の直線*/
//描き始める座標
context.moveTo(57,22);
//直線の終点座標
context.lineTo(72,22);
/*左端頭部の上側の直線*/
context.moveTo(0,10);
context.lineTo(17,10);
/*左端頭部の下側の直線*/
context.moveTo(0,32);
context.lineTo(17,32);
//パスを閉じずに描画
context.stroke();
</script>
</body>
</html>

canvas要素にはid属性と幅属性と高さ属性を指定した。幅と高さが小さすぎると描画されたオブジェクトがcanvas要素の枠内からはみ出して見えなくなってしまうので、最初は大きめに指定しておいたほうがよいかもしれない。

canvas要素に対応していないウェブ・ブラウザもしくはウェブ・ブラウザがJavaScriptを無効にしている場合は「あなたのブラウザはcanvas要素に対応していません」と表示させるようにした。

document.getElementById()メソッドでHTMLのcanvas要素を取得してcanvasという変数に代入した。同様にしてgetContext()メソッドで2Dのレンダリングコンテキストを取得してcontextという変数に代入した。この2文はHTML5 CanvasのAPIを利用する際に最初に記述するおまじないみたいなもの。

contextという変数名はハンガリー記法によってctxと略して記されていることも多い。

document.getElementById()メソッドの引数であるorGateSymbolは、HTMLソースのcanvas要素のid属性に対応付けられている。そのため、両者は同じ名前にする必要がある。

translate(x,y)メソッドはオブジェクトを平行移動させることができる。HTML5 Canvasの座標系は左上隅を原点(0,0)に置いている。左のx軸は原点から右横への直線距離、y軸は原点から下への直線距離。translate()メソッドの引数をxとy共に0としたのはここでは平行移動させないため。しかし回路図を描く際に必要になってくるメソッド。

scale(x,y)メソッドはオブジェクト全体の伸縮を行うためのもの。第1引数がx軸方向の伸縮度、第2引数がy軸方向の伸縮度。1が何も伸縮しない状態となり、1以上になると伸びて1以下になると縮まる。

次にORゲートの本体の輪郭線を描く。

lineWidthプロパティに線の太さを表わす値を代入。

strokeStyleプロパティには図形の輪郭線の色やグラデーションやパターンを指定できるが、ここでは輪郭線の色を表わす"black"という色名だけを代入した。色の指定方法としてこの他にカラー・コードがある。

次にbeginPath()メソッドを使ってパスの初期化を行った。パスとは、通り道、進路、軌道のこと。パスの初期化によってこれまでのパスの指定が真まっ新さらになる。

そしてmoveTo(x,y)メソッドによって輪郭線の描き始めの点となる座標をxとyの順に指定。

ORゲート本体の輪郭線である3辺の曲線は、quadraticCurveTo(x,y,x,y)メソッドを利用して2次ベジェ曲線でもって描いた。このメソッドは4つの引数を持っている。第1引数と第2引数で1辺の曲線を引っ張る制御点の座標位置をxとyの順に指定し、第3引数と第4引数でベジェ曲線の終点となる座標位置を指定するようになっている。第1引数と第2引数による制御点に向かって引っ張られる程度に応じてベジェ曲線の曲がり具合が決まる仕組み。

closePath()メソッドによってパスをここで一端閉じた。そしてstroke()メソッドを使って描画した。storoke()メソッドによってレンダリングしないかぎり、描いたものは表示されないことに要注意。

次にORゲートの本体のまわりにくっついている3つの直線を指定した。この直線の太さは本体の輪郭線の太さよりも細くしたいため、lineWidthプロパティに改めて値を代入しておいた。

beginPath()メソッドでパスを初期化し、moveTo(x,y)メソッドで描き始めの座標を決め、lineTo(x,y)メソッドで直線の終点を指定。3つの直線を描いてパスを閉じずにstroke()メソッドでレンダリング。

これでORゲートは描き終わった。

ANDゲートを描く

次にANDゲートのシンボルを描いてみた。出来上がりは次のとおり。

あなたのブラウザはCanvas要素に対応していません。

ANDゲートのためのHTMLとJavaScriptのソースコードは次のとおり。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>HTML5 Canvasで論理ゲート記号を描く</title>
</head>
<body>
<div style="text-align: center">
<canvas id="andGateSymbol" width="100" height="50">
あなたのブラウザはcanvas要素に対応していません。
</canvas>
</div>
<script>
var canvas = document.getElementById("andGateSymbol");
var context = canvas.getContext("2d");

//translate(x,y)メソッドで図形を平行移動できる
context.translate(0, 0);
//図形を上下左右に伸縮
context.scale(1,1);

/*
ANDゲート本体部分の輪郭線を描く
*/
context.lineWidth = 2;
context.strokeStyle = 'black';
context.beginPath();
//輪郭線の描き始めの座標
context.moveTo(17,3);
//上の直線部分の終点座標
context.lineTo(38,3);
//bezierCurveTo()メソッドで右横の曲線部分を
context.bezierCurveTo(62,3,62,43,38,43);
//下の直線部分の終点座標
context.lineTo(17,43);
//左の直線部分の終点座標
context.lineTo(17,3);
context.closePath();
context.stroke();

/*
付属する3つの直線を描く
*/
context.lineWidth = 1;
context.beginPath();
//尾部の直線
context.moveTo(57,23);
context.lineTo(72,23);
//頭部の上側の直線
context.moveTo(0,11);
context.lineTo(17,11);
//頭部の下側の直線
context.moveTo(0,35);
context.lineTo(17,35);
//パスを閉じずに描画
context.stroke();
</script>
</body>
</html>

ANDゲートのためのHTMLソースはcanvas要素のid属性の名前だけがORゲートと異なるだけ。大事なのは、canvas要素のid属性とJavaScriptコード内のdocument.getElementById()メソッドの引数とが一致していること。canvas要素を同じHTMLソース内に複数置く場合、canvas要素のid属性が重複しないようにする必要もある。

ANDゲート本体の輪郭線は4つの辺からなる。その内の一辺では3次ベジェ曲線を使った。

3次ベジェ曲線はbezierCurveTo(x,y,x,y,x,y)メソッドによって描くことができる。その引数は6つある。最初のx,yが第1制御点、次のx,yが第2制御点、3番目のx,yがベジェ曲線の終点の座標となる。

ベジェ曲線についての幾何学的理論のことはよく分からないので、数値をいろいろと変えて試す作業を手探りで繰り返した。

その他の描き方についてはORゲートと同じ要領。ただし形が異なるので座標もいくらか異なる。

NOTゲートを描く

NOTゲートの出来上がりは次のとおり。

あなたのブラウザはCanvas要素に対応していません。

NOTゲートのためのHTMLとJavaScriptのソースコードは次のとおり。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>HTML5 Canvasで論理ゲート記号を描く</title>
</head>
<body>
<div style="text-align: center">
<canvas id="notGateSymbol" width="100" height="50">
あなたのブラウザはcanvas要素に対応していません。
</canvas>
</div>
<script>
var canvas = document.getElementById("notGateSymbol");
var context = canvas.getContext("2d");

//translate(x,y)メソッドで図形を平行移動できる
context.translate(0, 0);
//図形を上下左右に伸縮
context.scale(1,1);

/*
NOTゲート本体の三角形の輪郭線を描く
*/
context.lineWidth = 2;
context.strokeStyle = 'black';
context.beginPath();
//三角形を描く
context.moveTo(15,3);
context.lineTo(15,27);
context.lineTo(35,15);
context.lineTo(15,3);
context.closePath();
context.stroke();

/*
尾部にくっついている円の輪郭線を描く
*/
context.beginPath();
//円を描くためのarc(x,y,)メソッドを使う
context.arc(38,15,3,(Math.PI/180)*0, (Math.PI/180)*360);
context.closePath();
context.stroke();

/*
本体に付属している3つの直線を描く
*/
context.lineWidth = 1;
context.beginPath();
context.moveTo(42,15);
context.lineTo(57,15);
context.moveTo(0,15);
context.lineTo(15,15);
//パスを閉じずに描画
context.stroke();
</script>
</body>
</html>

NOTゲートの形とORゲートの形やANDゲートの形との違いは、円が加わっているところ。

円弧を描くためにarc()メソッドを使ってみた。その第1引数とその第2引数とで円の中心位置となる座標をxとyの順に指定する。第3引数には円の半径を指定する。第4引数には描き始める点を弧度法（ラジアン）でもって指定する。第5引数には描き終わる点を弧度法でもって指定する。

度数法の値から弧度法の値へ変換する公式は次のとおり。x度、yラジアンの場合。

\[ y = \dfrac{\pi}{180} x = \dfrac{\pi}{180} \times x \]

この計算結果を浮動小数点数で指定する必要はなく、この公式をarc()メソッドの引数としてそのまま指定してやればいいので、始点のラジアンは(Math.PI/180)*0とし、終点のラジアンは(Math.PI/180)*360として完全な円を描くようにした。JavaScriptでは円周率をMath.PIと記す。

arc()メソッドの第6引数はオプションになっている。円弧を描く方向を反時計回りのときにはtrueと指定する必要があるが、省略したときにはデフォルト値のfalseとなり、円弧が時計回りに描かれる。

以上、3つの基本論理ゲートのシンボルをHTML5 CanvasのAPIを利用して描いてみた。その他の論理ゲートや論理回路図の描き方についてはまたの機会に。

関連記事

コメント

コメントを投稿

このブログの人気の投稿

Visual Studio 2019にはC++のためのフォームデザイナーがない件

イメージ
Visual Studio 2019を利用してC++でWindowsフォームアプリを作成しようと「新しいプロジェクトの作成」で「Windowsデスクトップアプリケーション」を選んでみたものの、フォーム・デザイナーが見当たらないことに気が付いた。ユーザー・インターフェイスはソースコードを直接いじれということか。これは厳しい。 C++を諦めてC#でフォームをデザインしろというのが常識的な対処法になるのかもしれないが、それでもC++で作る必要があるという隙間需要を考慮し、今回はこの問題に対処する二通りの対処法をインターネット上で見つけることができたので紹介したいと思う。 Visual Studio Installerでは、「.NETデスクトップ開発」と「C++によるデスクトップ開発」にチェックを入れてインストールしておいたのだけれど、これだけではデフォルトで「ビルドツールC++/CLIサポート」がインストールされないようだ。これを追加インストールする必要がまずあった。その手順は次のとおり。 対処法１ コードを追加する方法 Visual Studio Installerをまず起動した。 「インストール済み」のVisual Studio **** 2019に対して「変更」を選んだ。 「ワークロード」タブで「.NETデスクトップ環境」と「C++によるデスクトップ環境」の両方にチェックが入っていることを確認した。 「個別のコンポーネント」タブを選び、「C++/CLI」として検索した。そうするとビルドツールのC++/CLIサポートの一覧が表示された。 この執筆時点では「v142ビルドツール(14.27)のC++/CLIサポート」がどうやら最新版のように見えたのでこれにチェックを入れた。 そうしておいてからそのダイアログ・ボックス右下の「変更」ボタンを押した。 これでダウンロードとインストールが自動的に行われるので、しばらくの間待つ。 インストールが完了したが、「警告あり」と表示されてしまった。「問題の表示」によればMicrosoft.VisualStudio.AspNetDiagnosticPack.Msiのインストールに失敗したらしい。ここではこの問題には対処せず、無視して次の手順に進んだ。 Visual Studio Installerを終了
続きを読む

10の補数と9の補数と2の補数と1の補数

10進数と10の補数 10進法の四則演算に慣れている人なら算術的な直感で分かるのが10の補数。 算盤 そろばん を使っている人は10の補数と5の補数を出力する函数を会得しているかもしれない。 例えば、2に対して10の補数はいくつかと問われればそれは8だと分かるし、6に対して10の補数はいくつかと問われればそれは4だと分かるし、5に対して10の補数はいくつかと問われれば5だと直感的に分かる。 また、3に対して5の補数はいくつかと問われればそれは2だと分かるし、2に対して5の補数はいくつかと問われれば3だと分かる。 10の補数とは、ある自然数に対してそれにいくつの自然数を加えれば10になるのかという問いに答えたもの。自然数とは、ここでは0, 1, 2, 3, 4, 5, 6, 7, 8, 9のこと。 ある自然数xに対する10の補数yは次のように計算することによって答えることができる。 \[ y = 10 - x \] 10進法の位取り記数法では、桁上がり（位上がり）が起こる数が10であるので、ある数にあといくつ足すと桁上がりが起こるかを理解していることは、その四則演算においてとても重要な暗記事項になっている。 10進法の四則演算に慣れた人の頭の中には次のような函数または対応表があるのかもしれない。 \[ f(x) = 10 - x \] xは引数。「xに対する10の補数」を出力してくれる函数f(x)。 10の補数の対応表 10進数 10の補数 0 10 1 9 2 8 3 7 4 6 5 5 6 4 7 3 8 2 9 1 10 0 補数のこの対応表を見ると、数値を小さい順から並べた昇順と数値を大きい順から並べた降順との写像（マッピング）関係に見える。 10の補数と桁上がり 例えば、\( 6 + 7 = \)を計算するとき、人は6または7の補数を瞬時に思い浮かべ、加える数がそれを上回っている場合に桁上がりが起こると即座に認識するはず。つまり、6に対する10の補数である4を思い浮かべ、その4より大きい7から4を引いた数である3と10を足し合わせて答えを計算するかもしれない。 \[ \begin{align*} 6 + 7 &=
続きを読む

LibreOffice 6 Calcでフォーム（ダイアログ）を作成してマクロで表示

イメージ
ここで用いたLibreOfficeのバージョンと設定 LibreOffice 6.1 LibreOfficeの「ツール」-「オプション」-「LibreOffice」の「詳細」で「Java実行環境を使用」にチェックが入っていること。「インストール済みのJava実行環境(JRE)」が表示されていること。 LibreOffice 6.1 Calcにはデータを入力したり表示したりするのに使うことができるフォームが用意されている。そしてそのフォームはダイアログと呼ばれている。今回はそのダイアログを作成し、それを表示させたり閉じたりするマクロをLibreOffice Basicを使って実装してみる。 フォームコントロールの作成 LibreOffice Calcを起動。 トップメニューで「表示」-「ツールバー」-「フォームコントロール」という順に選び、フォームコントロールのツールバーを表示させる。 フォームコントロールのツールバーの中から「ボタン」（プッシュ・ボタン）を選び、スプレッドシートの適当な場所にプッシュ・ボタンを作成して配置する。 作成されたプッシュ・ボタンの上でマウスの右クリックメニューを表示させ、その中から「コントロール」を選ぶ。 「属性 プッシュボタン」というダイアログが表示されるので、「全般」タブ内にある「タイトル」の項目を「ダイアログ表示」に変える。 トップメニューで「ファイル」-「保存」を選んで変更内容を保存する。 スプレッドシート上でのプッシュ・ボタンの作成とその属性の設定はこれで終わり。 ダイアログを作成 「閉じる」というコマンド・ボタンだけを持つ単純なダイアログを作成する。 LibreOffice Calcのトップメニューで「ツール」-「マクロ」-「ダイアログの管理」を選ぶ。 そうすると「LibreOffice Basicマクロの管理」というダイアログが開く。「ダイアログ」というタブを選び、ダイアログに表示されている.odsファイル（今開いているスプレッドシート名）を選ぶ。 「新規作成」ボタンを押して「Dialog1」を作成し、「編集」ボタンを押す。 そうすると統合開発環境(IDE)が起動し、ダイアログの雛形が表示されるはず。 ツールバーの中から「ボタン」（コマンド・ボタン）を選び、ダイアログの雛
続きを読む