ブログの説明

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

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

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

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

今回はMIL（軍事）規格の論理ゲート記号を描いてみたその2。前回は基本論理ゲートであるORゲートとANDゲートとNOTゲートを描いた。今回は実用論理ゲートであるNORゲートとNANDゲートと、そしてXORゲートをHTML5 CanvasのAPIを利用して描いてみることにした。

NORゲート記号を描く

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

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

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

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

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

/*
NORゲートの本体部分の輪郭線を描く
*/
//輪郭線の太さ
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();

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

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

HTMLのcanvas要素のid属性の名前がJavaScriptのdocument.getElementById()メソッドの引数と一致している必要がある。上述のコードではcanvas id="notOrGateSymbol"とdocument.getElementById("notOrGateSymbol");のところ。

translate(x,y)メソッドは描く対象（オブジェクト）を平行移動させることができる。ここではその引数を(0,0)とした。これは平行移動ゼロを意味している。

scale(x,y)メソッドは描く対象（オブジェクト）をx軸方向またはy軸方向に伸縮させることができる。つまり、オブジェクトの拡大縮小のためのメソッド。ここではその引数を(1,1)とした。つまり何も伸縮させない状態。

描く線の太さの数値をlineWidthプロパティに代入して決めることができる。

strokeStyleプロパティでは、線の色やグラデーション、またはパターンというものを定義してそれを指定することができる。ここでは"black"という色名だけを指定した。色はカラーコードによっても"#000000"や"rgb(0,0,0)"のように指定することができる。

beginPath()メソッドでパスの初期化を行った後、NORゲート本体部分の輪郭線を描き始める座標をmoveTo(x,y)メソッドの引数に指定した。

パスとは、通り道、進路、軌道のこと。パスの初期化によってこれまでのパスの指定が真まっ新さらになる。

ここでは本体部分の3辺の輪郭曲線を2次ベジェ曲線でもって描くように指定した。そのためにquadraticCurveTo(x,y,x,y)メソッドを利用した。

quadraticCurveTo(x,y,x,y)メソッドの第1引数とその第2引数のx座標とy座標では、2次ベジェ曲線の曲がり具合と曲がる方向を制御するベクトルの終点になる座標を指定。その第3引数とその第4引数のx座標とy座標では、曲線の終点となる座標を指定した。

closePath()メソッドによってパスを閉じ、stroke()メソッドによって描画した。stroke()メソッドを記さないかぎり、描いた図形のレンダリングは行われないので要注意。

次に、NORゲートの本体部分の尾部にくっついている円を描く指定をした。これには円弧を描くためのarc(x,y,radius,startPoint,endPoint)メソッドを利用した。

arc(x,y,radius,startPoint,endPoint)メソッドの第1引数と第2引数のx座標とy座標では、円の中心点を指定。第3引数では円の半径を指定。第4引数と第5引数では円弧を描き始める位置と描き終わる位置とをいずれも弧度法（つまりラジアンという単位）で指定する必要がある。

x度をyラジアンに変換する公式は次のとおり。

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

この式をarc()メソッドの第4引数と第5引数にそのまま指定して利用した。JavaScriptでは円周率をMath.PIというふうに記す。

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

最後に、本体部分に付属する3つの直線を描く指定をした。moveTo(x,y)メソッドで描き始めの座標を指定し、lineTo(x,y)メソッドで直線の終点の座標を指定。

以上でNORゲートのシンボルは描き終わった。

NANDゲート記号を描く

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

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

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

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

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

/*
NANDゲート本体部分の輪郭線を描く
*/
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();

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

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

NANDゲート記号の本体部分の輪郭線は4つの辺によって成り立っている。その内の1つの辺に3次ベジェ曲線を使った。そして3次ベジェ曲線を描くためにbezierCurveTo(x,y,x,y,x,y)メソッドを利用した。

bezierCurveTo(x,y,x,y,x,y)メソッドでは、その第1引数と第2引数、そしてその第3引数と第4引数に、3次ベジェ曲線の曲がり具合を操作する2つのベクトルの終点座標をそれぞれ指定する。第5引数と第6引数は3次ベジェ曲線の終点となる座標を指定する。

3次ベジェ曲線についての幾何学的理論に精通していないので、引数の値は手探りでいろいろと試してみながら行った。

XORゲート記号を描く

今回の最後では、排他的論理和を意味するXORゲートのシンボルを描いてみた。その完成図は次のとおり。

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

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

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

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

/*
XORゲートの本体部分の輪郭線を描く
*/
//輪郭線の太さ
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();

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

排他的論理和を意味するXORゲートのシンボルでは、NORゲートの尾部の円の代わりに頭部のお皿のようなものが付属している。その部分を描くために2次ベジェ曲線を描くためのquadraticCurveTo()メソッドを用いた。

以上でHTML5 CanvasのAPIを利用して実用論理ゲートのシンボルを描き終わった。

関連記事

コメント

コメントを投稿

このブログの人気の投稿

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