👨‍🏫 図形の表し方

◇ 卒業研究 📖 目次 💬 Web Class Syllabus 54299 🕑 時間割 Files 2025研究計画通年・金曜日 👀 テーマ 3-3301へ入室

山形大学工学部化学・バイオ工学科 🔋 C1 伊藤智博 📛 立花和宏

頃

写真と図面

👨‍🏫 絵画＠学問の自由 👨‍🏫 写真＠学問の自由

グラファイト結晶平面図

卒業論文、修士論文、博士論文、学術論文、特許明細書などでは、図面、図表、図形の表現が併用されます。グラフ、回路図、フローチャート、写真、イラスト（ロゴ、アイコン、アバター）、地図などがあります。 3Dも図面です。数式、化学式、反応式などの式も図面として、本文とは別に扱われます。

学術的な性質を有する図面、図表、図形、音楽、講演、映画、写真、建築、プログラムは、著作権法に定められた著作物です。引用する場合は、慣例に従い、転載する場合は、転載許諾をとりましょう。法令順守は研究倫理です。

表 2 . 著作物 *

分類

文芸	小説、脚本、論文、講演その他の言語の著作物。編集の創作性がある場合、編集著作物として保護されます。新聞，雑誌，百科事典等。講演は、言語の著作物として保護され口述権が保護されます。映画の著作物は、固定されることが求められますが、講演は、口述のみで保護されます。
学術	地図又は学術的な性質を有する図面、図表、模型その他の図形の著作物
美術	絵画、版画、彫刻
写真	写真。記録された画像は、著作物です。
建築	建築
音楽	楽譜、演奏。記録された音声は、著作物です。
舞踊又は無言劇の著作物	舞踊又は無言劇の著作物
映画	映画の著作物。映画の著作物は、固定（記録）されることが求められます。動画は、映画の著作物です。
プログラム	プログラムの著作物

03.技術者倫理 01.化学英語Ⅱ 05.情報処理概論参考文献出版物

（著作物の例示）

第十条　この法律にいう著作物を例示すると、おおむね次のとおりである。

一　小説、脚本、論文、講演その他の言語の著作物

二　音楽の著作物

三　舞踊又は無言劇の著作物

四　絵画、版画、彫刻その他の美術の著作物

五　建築の著作物

六　地図又は学術的な性質を有する図面、図表、模型その他の図形の著作物

七　映画の著作物

八　写真の著作物

九　プログラムの著作物

著作権法より

思想又は感情は含まれていますか？単なるデータは、ダメです。表現したモノです。考えているだけ、感じただけ、アイデアだけ、ではダメです。創作的なので、模倣はだめです。もちろん盗用は、もってのほかです。工業製品等は、文芸、音楽、美術、学術ではないのでダメです。工業製品等の知的財産権は、特許を申請して、政府の保護を受けます。

著作権は、知的財産権です。著作権は、著作者に帰属します。著作権のうち、著作財産権を、出版社に許諾することができます。出版社が、出版権を設定した場合、出版社は、著作者を含む他の許諾に対する損害請求できます。この場合、出版社による排他的独占的著作財産権の占有となります。

表面技術協会の例

表 3 . 表現のためのファイル形式の例

表現

	◇バイナリ形式任意のビット列		◇テキスト形式文字コードのみ
	ネイティブ	圧縮テキスト	テキスト	◇ XML
文書	doc	docx	◇html,html5	xhtml
表計算	xls	xlsx	◇csv
図形	◇MWF,EMF		vml	◇ svg
チャート			UML
地図				◇G-XML,GML
数式	マセマティカ		◇TEX	◇ MathML
化学式			SMILES	CML
楽譜	MIDI		MML	MusicXML
3D			VRML	X3D
画像 (image)	jpg,png
音楽 (audio)	wav,mp3,wma
ビデオ (video)	mp4,mov
アプリ	exe,dll		vb,js,asp

色彩

カラー原稿の配色は白黒コピーされても良いようにしましょう。以下、執筆中（色度座標パレットカラーユニバーサルデザイン）

図 2 . R G B 加法混色

図 3 . C M Y K 減法混色

減法混色は ^2

) 、カラー印刷のプロセスカラーや CMOSイメージセンサの補色カラーフィルタ * に使われます。

染料でも顔料でも、キ、アカ、アイ、スミの４色を混色します。

図 4 . 色相環 (HSL色空間)
12 無機工業化学 q.097 15 工業技術概論 05 情報処理概論配色
https://www.i-ryo.com/entry/2019/02/24/211711

余色の関係は、J.Griffithsによって提案されたカラーサークルによって、よく理解できる。 ^3

) ^4

)

canvas

ベクトル図形

表 4 . SVG （ XML）の要素と属性

要素	属性

svg	viewBoxで、ワールド座標系を設定します。 width, heightで、html内のboxを設定しますが、レスポンシブデザインの場合は、省略するのがおすすめです。
g
symbol
clipPath	idを設定して、クリッピング領域を設定します。ネストすることもできます。その場合、fill-ruleを設定します。
path	dコマンドで図形を描画できます。ベジェ曲線 “M”は基点、開始点を示し、”C”は三次ベジェ曲線を描画する。二次ベジェ曲線：コーナーを丸めるとき使う。三次ベジェ曲線：先端を丸めるとき使う。
polygon	pointsでワールド座標系の座標を設定します。 fillでRGBを設定します。 styleで設定もできます。

05 情報処理概論 XML-SVG SVG 図形グラフ素材

数学の歴史

表 5 . 数学の歴史

年号	出来事

B.C.300	アラビア数字
◇ 16世紀
◇ 17世紀ニュートン力学バロック美術微分・積分座標
	デカルト、数と図形を結び付けた解析幾何学
	ニュートン、微分積分学 ^5 )
	パスカル、フェルマーが賭博に関する研究（確率論と統計学） ^6 )
◇ 18世紀熱素の否定

星型を描いてみましょう。

手書きで星型を描いて、インスタグラムでアップするのもいいでしょう。でも、それだと誤差が大きいですね。座標を指定すれば、誤差が小さくなります。

１７世紀にデカルトがまとめた座標の概念を使えば、図形はグラフとして表現できます。

星型の座標は、座標（0.1）を１４４度５回座標回転した数列ですね。表計算ソフトで計算するとあっと言う間です。座標や回転、三角関数を忘れたときは、数学を思い出してください。

100 0 158 180 4 69 195 69 41 180

これで図形をイメージできる人はそれでいいのですが、機械の助けを借りましょう。機械が読み取れる、マシンリーダブルな形式にするのです。

図星型

star.xlsx star.svg

図レスポンシブでインタラクティブに大きさを変えることのできる星形（svg）

星形の大きさ

大きさ：

図 5 . 低炭素住宅とＶ２Ｈ

LCCM住宅（ライフ・サイクル・カーボン・マイナス住宅）とは、ZEH（ネット・ゼロ・エネルギー・ハウス）よりさらに省CO2化を進めた先導的な脱炭素化住宅で、建設時、運用時、廃棄時において出来るだけ省CO2に取り組み、さらに太陽光発電などを利用した再生可能エネルギーの創出により、住宅建設時のCO2排出量も含めライフサイクルを通じてのCO2の収支をマイナスにする住宅です。 ※

V2Hとは、電気自動車の電池を、住宅の電池(ESS)にリユースすることです。電気自動車の電池容量は、 40kWh程度とすれば、住宅の電池10kWhの4世帯分に相当します。

しかし安全にリユースするには、バッテリーのインスペクションが欠かせません。

技術者倫理06.未来へ向けて－地球温暖化と人口爆発－
国土交通省、気象庁二酸化炭素濃度の経年変化 https://ds.data.jma.go.jp/ghg/kanshi/ghgp/co2_trend.html

山形大学のロゴ

図 6 . svg 形式を htmlに直接記述した山形大学のロゴ

svg 形式を htmlに直接記述した山形大学のロゴです。

山形大学のスクールカラーときわ色（プロセスカラー3色を使用し，C(シアン)＝100％，M(マゼンタ)＝60％及びY(イエロー)＝70％を割合とする色）です。#00664dになります。 http://www.colordic.org/ #00664d

この場合、svg の中でimgをロードすることもできます。 htmlが長くなって、メンテナンス性が悪くなるので、aspならサーバーサイドでincにまとめる方がいいかもしれません。

図数直線

ベクトルとビットマップの合成

図15 米沢キャンパス桜マップ

３次元グラフィックス

コンピュータが使われることが多いので、コンピュータグラフィックス（CG）とスリーディメンショナル（3D）でスリーディーシージー（3DCG）と言われることもあります。

図面としては透視図、等角投影、斜投影があります。一般に3DCGと言われるときは、三点透視図法を指すことが多いです。建築などではパースペククティブ、略してパース図などと言われます。外観パース、内観パースなどのように使います。

図形

表 7 . 図形

名称	形式	グラフ

星形（多角形）	👨‍🏫 svg	<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0, 0, 200, 200'> <polygon points='100,0 158,180 4,69 195, 69 41,180' stroke='black' stroke-width='1' fill='none' /> </svg>
星形（多角形）	python + matplotlib patches. Polygon import numpy as np import matplotlib.pyplot as plt import matplotlib.patches as patches import math xy = [ (math.sin(p), math.cos(p)) for p in \ np.arange(start = 0, stop = 4 * math.pi, step = 4 * math.pi/5)] fig, ax = plt.subplots(figsize=(5.8, 4.2)) plt.axis("off") ax.set_aspect('equal');ax.set_xlim([-1,1]);ax.set_ylim([-1,1]) ax.add_patch(patches.Polygon(xy, \ closed=True,facecolor="b",edgecolor="none")) plt.show()
円
線分
👨‍🏫 svg <line x1="10" y1="30" x2="180" y2="130"/>
直線

👨‍🏫

化学プラント配管図面記号

表 8 . 化学プラント配管図面記号

名称	図記号

バルブ ^7 )	^8 )
垂直容器（塔）
水平容器（槽、タンク）
サイクロン
熱交換器
加熱炉（ furnance ）
液量調節計		F:液量、 L:液位、 P:圧力、 T:温度、 A:成分 C:調節、R:記録計

化学工場では、機械や装置が使われます。それらは、プラント記号として表現されます。プロセスを流れ図の形式で図面にしたものをプロセスフローシートプロセスフロー図（ PFD：プロセスフローダイアグラム）と言います。プロセスのフロー、制御、計装、設備、配管などをプラント記号で書き込んで図面にしたものを配管計装図（P＆ID：Piping＆Instrument Diagram）と言います。

pid-legend * * *

表 9 . 色の表現

種類	RGB	HSB /HSL	CMYK

概念	加法混色光源色	色相環通信	減法混色物体色（表面色、透過色）蛍光色、金属光沢を除く
表現	Red ff0000 green 00ff00 blue 0000ff		cyan 00ffff magenta ff00ff yellow ffff00 black 00000
用途	ディスプレイ HTML、CSS、 SVG	通信	印刷プリンター、カメラ
ジャンル	エネルギー	情報	材料

図形配色 12 無機工業化学 05 情報処理概論色度座標スペクトル

項目	写真	図面

特徴	光と陰、ボケ、明暗や色彩の表現	カタチ、寸法、角度の表現
例
		透視図（パース）
ファイル形式	ラスター形式 JPGなど	ベクター形式 SVGなど

名称	グラフ	説明

指数関数		python + matplotlib import numpy as np import math import matplotlib.pyplot as plt xy = [(p, math.exp(p)) for p in \ np.arange(start = - 2, stop = 2, step = 0.1)] z = [list(t) for t in zip(*xy)]; x = z[0]; y = z[1] fig, ax = plt.subplots() ax.plot(x, y) plt.show()
逆ネルンスト		電池の充放電曲線で現れます。
確率曲線
正規分布関数		確率統計で多用されます。品質管理でも大切です。