ブログの説明

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

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

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

HTML5 Canvasでその他の論理ゲート記号を描く

今回は、HTML5 CanvasのAPIを利用してMIL（軍事）規格のXNORゲート記号を描いてみた。

XNORゲートのシンボルの完成図は次のとおり。

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

XNORゲートのシンボルは、XORゲートのソースコードとNORゲートのソースコードとを合成するだけなので簡単。XORゲートの本体部分の末尾に小さな円をくっつけ、さらにそこに接尾する直線の位置をそれに合わせてやや調節してやればよい。

まず前回の実用論理ゲート記号を描いたときのXORゲートのソースコード全体をコピー＆ペーストし、NORゲートのソースコードにある小さな円を描く部分のソースコードを挿入した。さらに、本体部分に付属する三つの直線を描く部分のソースコードをNORゲートのソースコードのそれに置き換えた。

これだけでXNORゲートのシンボル図のソースコードは完成。それは次のようになる。

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

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

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

/*
頭部の皿を描く
*/
//パス（軌道）を初期化
context.beginPath();
//描き始めの座標
context.moveTo(10,2);
//2次ベジェ曲線
context.quadraticCurveTo(24,22,10,40);
//パスを閉じずに描画
context.stroke();

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

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

IMPLYゲート記号を描く

IMPLYゲートは、論理和のブール変数の一方を論理否定したものと等しい。

\[ x_1 \rightarrow x_2 = \overline{x_1} + x_2 \]

従って論理和の2つの入力側のブール変数（独立変数）の内の1つを論理否定するゲートを作ることでIMPLYゲートを実現することができる。

IMPLYゲートのシンボルの完成図は次のとおり。

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

IMPLYゲート記号を描くためのHTMLとJavaScriptのソースコードは次のとおり。

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

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

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

/*
頭部の片側にくっついている円の輪郭線を描く
*/
context.beginPath();
//円を描くためにarc(x,y,radius,startPoint,endPoint)メソッドを使う
context.arc(13,10,4,(Math.PI/180)*0, (Math.PI/180)*360);
context.closePath();
context.stroke();

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

ド・モルガンの定理を描く

ド・モルガンの定理を表わすときに使われている、2つの入力変数（独立変数）を共に論理否定するORゲートとANDゲートを描いてみた。

ORゲート記号のほうはIMPLYゲート記号の頭部の片側にくっついている円を両側に増やせばよいだけ。その完成図は次のようになる。

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

このHTMLおよびJavaScriptのソースコードは次のとおり。

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

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

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

/*
頭部の片側にくっついている円の輪郭線を描く
*/
context.beginPath();
//円を描くためにarc(x,y,radius,startPoint,endPoint)メソッドを使う
context.arc(13,10,4,(Math.PI/180)*0, (Math.PI/180)*360);
context.closePath();
context.stroke();
context.beginPath();
context.arc(13,32,4,(Math.PI/180)*0, (Math.PI/180)*360);
context.closePath();
context.stroke();

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

論理否定の入力変数（独立変数）を2つ伴ったANDゲート記号の完成図は次のとおり。

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

このHTMLおよびJavaScriptのソースコードは次のとおり。

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

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

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

/*
頭部の片側にくっついている円の輪郭線を描く
*/
context.beginPath();
//円を描くためにarc(x,y,radius,startPoint,endPoint)メソッドを使う
context.arc(15,11,4,(Math.PI/180)*0, (Math.PI/180)*360);
context.closePath();
context.stroke();
context.beginPath();
context.arc(15,35,4,(Math.PI/180)*0, (Math.PI/180)*360);
context.closePath();
context.stroke();

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

ド・モルガンの定理を描いてみた。

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

各々のシンボルを平行移動させるためにtranslate(x,y)メソッドを用いた。この方法だと少しややこしい。translate(x,y)メソッドはキャンバスの座標系ごと移動させてしまうので平行移動に合わせて原点も移動してしまう。それ以降のtranslate(x,y)メソッドではその引数として相対的座標を指定しなければならない。

描くものを平行移動させるもう一つの方法は、xとyの変数を用いること。予約語varでxとyという変数を宣言し、各種メソッドの引数にぞれぞれ加算しておくと、変数に代入する値を変えるだけでキャンバスの上に描くオブジェクトが移動してくれるので便利。

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

/*
xとyの座標を入れる変数2つを宣言して0で初期化
変数の値を変えることでオブジェクトを平行移動
*/
var x = 0;
var y = 0;

//scale()メソッドで図形を上下左右に伸縮できる
context.scale(1,1);

/*
ORゲートの本体部分の輪郭線を描く
*/
context.lineWidth = 2;
context.strokeStyle = 'black';
context.beginPath();
//輪郭線を描き始める座標
context.moveTo(x+12,y+2);
//本体上辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(x+52,y+2,x+57,y+22);
//本体下辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(x+47,y+42,x+12,y+40);
//本体左辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(x+24,y+22,x+12,y+2);
context.closePath();
context.stroke();

/*
本体に付属する3つの直線を描く
*/
context.lineWidth = 1;
context.beginPath();
/*右端尾部の直線*/
context.moveTo(x+57,y+22);
context.lineTo(x+72,y+22);
/*左端頭部の上側の直線*/
context.moveTo(x+0,y+10);
context.lineTo(x+17,y+10);
/*左端頭部の下側の直線*/
context.moveTo(x+0,y+32);
context.lineTo(x+17,y+32);
//パスを閉じずに描画
context.stroke();
</script>
</body>
</html>

関連記事

コメント

コメントを投稿

このブログの人気の投稿

LATEXで数式：指数と順列などで使う添数・添字

累乗（べき乗）で使われる指数（べき）など、右上に添えられる数や文字や記号はキャレット記号を用いて次のように表記することができる。添えられる数や文字や記号が複数に及んだり数式になる場合はそれらを{}で囲う必要がある。ちなみに、・は\cdotを、÷は\divを、≠は\neqをそれぞれ用い、分数は\frac{}{}で乗根は\sqrt[]{}で表すことができる。スペースを有効にするには\をスペースの前に付ける。 aのn乗 \( a^n \) a^n \( a^3 = a \cdot a \cdot a \) a^3 = a \cdot a \cdot a \( a^{m+n} \) a^{m+n} 指数法則 \( a^0 = 1 \ (a \neq 0) \) a^0 = 1 \ (a \neq 0) 指数法則 \( a^{\frac{1}{n}} = \sqrt[n]{a} \) a^{\frac{1}{n}} = \sqrt[n]{a} 指数法則 \( a^{\frac{m}{n}} = \sqrt[n]{a^m} \) a^{\frac{m}{n}} = \sqrt[n]{a^m} 指数法則 \( a^{-\frac{m}{n}} = \frac{1}{\sqrt[n]{a^m}} \) a^{-\frac{m}{n}} = \frac{1}{\sqrt[n]{a^m}} 指数法則 \( a^m a^n = a^{m+n} \) a^m a^n = a^{m+n} 指数法則 \( \frac{a^m}{a^n} = \frac{1}{a^{n-m}} \ (m < n) \) \frac{a^m}{a^n} = \frac{1}{a^{n-m}} \ (m < n) 指数法則 \( (a^m)^n = a^{mn} \) (a^m)^n = a^{mn} 指数法則 \( (ab)^n = a^n b^n \) (ab)^n = a^n b^n 指数法則 \( \left(\frac{a}{b}\right)^n = \frac{a^n}{b^n} \) \left(\frac{a}{b}\right)^n = \frac{a^n}{b^n} 指数法則 \( \frac{a^m}{a^n}
続きを読む

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 &=
続きを読む

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を終了
続きを読む