cs-2. コンピュータによる画像制作，人工知能でできること，情報のコード化，デジタル画像，画素

cs-2. コンピュータによる画像制作， 人工知能でできること，情報のコー ド化，デジタル画像，画素 （コンピューターサイエンス） URL: https://www.kkaneko.jp/cc/cs/index.html 金子邦彦 謝辞：この資料では「いらすとや」のイラストを使用しています 1

• https://www.kkaneko.jp/cc/cs/index.html

今回の内容 • コンピュータでできること コンピュータによる画像製作体験（実演，実習） • ICTの発展による社会の変化 「情報」が価値を持つ社会 • 「データ」とは？ • デジタル画像の仕組み ＜次回授業の予習＞ 3次元コンピュータグラフィックスの「ポリゴン」，「テク スチャ」について，インターネット等で 調べ，予習しておく 2

「コンピュータについて学びたい」と思っている皆さん 今日の授業で，次のことを学べます • コンピュータでできること • コンピュータの本質は「コンピュータをネットワークでつ なぎ，データの共有，保存，活用が，簡単に高性能にでき ること」 コンピュータによる画像製作体験もありますので， コンピュータとインターネットを持っている人は，ぜひ，試 してみてください． 3

2-2 情報化社会の到来 （コンピューターサイエンス） URL: https://www.kkaneko.jp/cc/cs/index.html 金子邦彦 4

情報革命 1940年台～ • 新技術の創出 インターネット、情報通信機器、 コンピュータ • 社会全体への波及効果 高性能，安価な情報通信機器の普及． 「情報」が価値を持つ． • 生活、文化の変化 情報産業の誕生、 「スマホが手放せない」時代、 誰もが情報発信できる時代、 世界とつながり、交流できる時代 5

情報化社会 • コンピュータを個人が持つ • コンピュータがネットワーク化される 6

ソフトウエアやオンラインサービス のバリエーション • オフィスソフト • オペレーティングシステム（Windows）など の標準機能 • プログラミング開発環境 • ライブラリ その他 7

さまざまなソフトウエアの普及浸透 • オフィスソフト 電子メール， オンライン ストレージ なども Word (ワープロ) Excel (表計算) PowerPoint (プレゼン) https://portal.office.com でオンライン利用 • Windows に標準添付のもの ファイルマネージャ （エクスプローラー） Web ブラウザ エディタ （メモ帳） 8

• https://portal.office.com

• プログラミング開発環境 Spyder ※ Python 開発環境 Google Colab https://colab.research .google.com ノートブックによるプロ グラム作成，実行，保存， 共有 GitHub https://github.com/ ソースコードの共同開発， 共有，配布 9

• https://colab.research.google.com/
• https://github.com/

• ライブラリ（プログラム制作時に部品として組み 込んで使うことができるソフトウエア） TensorFlow ※ 人工知能に便利な フレームワーク OpenCV ※ コンピュータビ ジョン，画像処理 のライブラリ Dlib ※顔検知，顔認識 のライブラリ 10

• 3次元コンピュータグラフィックスなど，創作，設 計もデジタル化 ３次元グラフィックス blender ３次元メッシュ MeshLab ゲームエンジン Unreal Engine 4 11

WikiPedia 世界中が編集に参加している百科事典 https://ja.wikipedia.org/ 12

• https://ja.wikipedia.org/

OpenStreetMap 世界中が編集に参加している地図 https://openstreetmap.jp/ 13

• https://openstreetmap.jp/

ルーブル美術館 バーチャルツアー https://www.louvre.fr/jp/visites-en-ligne 14

• https://www.louvre.fr/jp/visites-en-ligne

情報化社会 • 情報が，インターネットで広く流通，共有さ れる • 情報は蓄積され，大規模に，次世代に継承さ れる • あらゆる人が情報の発信者 15

情報化社会の危険 ・不正確な情報，悪意のある情報 ※ インターネットにある情報が必ずしも正し いものとは限らない ・プライバシの侵害 ※ SNS などは，簡単に拡散でき，消すことが できないことを常に意識する 16

2-3 情報のコード化 （コンピューターサイエンス） URL: https://www.kkaneko.jp/cc/cs/index.html 金子邦彦 謝辞：「いらすとや」のイラストを使用しています 17

ルイ１４世の暗号 • 重要文書を記録、保管したい • わざと読みにくくしたい（暗号化） 元の文 action act 暗号文 分割 ion 秘密のコード コード化 ブックを使用 486 102 これを保管 18

車両用の信号機 青 直進し、左折し、又は右折することができる 黄 停止位置をこえて進行してはならない。 ただし、黄色の灯火の信号が表示された時に おいて当該停止位置に近接しているため安全 に停止することができない場合を除く。 赤 停止位置を越えて進行してはならない 青 黄 赤 は分かりやすい目印（サイン） 19

情報のコード化 720-0292 と書くだけで、 「福山大学」だと分かる． 便利． 福山大学 情報 コード化 720-0292 コード化の逆 郵便番号 「720-0292」は、「福山大学」のコードだよ！ というように、コード化 のルールを、全地名について決めておく必要がある（当たり前） 20

2-3 情報のコード化 • 情報のコード化とは 情報を、所定の記号や符号で置き換える こと 「福山大学」の郵便番号は「720-0292」 21

2-4 情報とデータ （コンピューターサイエンス） URL: https://www.kkaneko.jp/cc/cs/index.html 金子邦彦 謝辞：「いらすとや」のイラストを使用しています 22

情報とデータ 昼ごはんは、次の２種類しかない か食べないと決心している） 昼定食 （この２種類し うどん 23

情報とデータ 4月13日 昼定食 赤 次のように決めたとする 4月14日 うどん 4月15日 うどん コード化 青 青 昼定食 青 肉うどん コード 4月16日 昼定食 赤 4月17日 うどん 青 情報 赤 元の情報 データ 24

クイズの答え うどん 4月27日 元に戻す 青 次のように決めたとする 4月28日 うどん 青 4月30日 昼定食 赤 赤 昼定食 青 肉うどん コード 情報 元の情報 データ 元に戻すときも、コードと元の情報の 対応情報が必要 （当たり前） 25

2-4 情報とデータ • 情報とは 世界や人間のあらゆる出来事、内容、事情など • データとは 情報をコード化したもの． （例）720-0292 コンピュータは，データを扱う 26

2-5 デジタル画像 （コンピューターサイエンス） URL: https://www.kkaneko.jp/cc/cs/index.html 金子邦彦 27

画像と画素 画像 それぞれの格子が画素 28

画素の輝度（明るさ）のコード化 画像の明るさ情報 例えば： 黒 ＝ ０， 暗い灰色 ＝ １， 明るい灰色 ＝ ２， 白 ＝ ３ のようにコード化 画素 (pixel) depth = 4 の場合： height: 8 0 width: 8 1 2 3 29

カラー画像の例 30

カラー画像の成分 • 輝度成分，色成分で考える場合 • R（赤）成分，G（緑）成分，B（青）成分で考え る場合 31

「カラー画像の成分は，輝度と色」と考える 場合 元画像 輝度 輝度は，１つの数字でコード化 可能 色 色は，２つの数字でコード化可 能 32

段階的な輝度情報の除去 除去率 ２０％ 輝度情報の 除去 ４０％ 元画像 ６０％ ８０％ 33

2-6 画像制作とコンピュータ （コンピューターサイエンス） URL: https://www.kkaneko.jp/cc/cs/index.html 金子邦彦 34

35

演習（実演） ◼ パソコンのWebブラウザを使う ◼ 外部ページへのリンク （これらの外部ページの作者に感謝 します） • Fluid Paint: https://david.li/paint/ • Silk: http://weavesilk.com/ • WebGL Fluid Simulation: https://paveldogreat.github.io/WebGL-FluidSimulation/ ◼ パソコンとインターネットを使うことができる人は， 資料を参考に，実習 できる 大学の「セレッソ」についての案内： コンテンツの中にも URL を示してい る 36

• https://david.li/paint/
• http://weavesilk.com/
• https://paveldogreat.github.io/WebGL-Fluid-Simulation/

④ ペイントソフト Fluid Paint 筆の設定は簡単にできる ・色 ・サイズ ・毛先の多さ ・毛先の流動性など 37

⑤ Fluid Paint では，筆の設定は左側のメニューで． 書き直すときは「Clear」をクリック 38

⑥ Silk は，アート作品を手書きで作ることができる サイト 39

⑦ 次の Silk のページを開いたら， http://weavesilk.com/ 「Draw Something」をクリックして開始 40

• http://weavesilk.com/

⑧ Silk では，左上のメニューで，色を選ぶことがで きる 41

⑨ WebGL Fluid Simulation は，光の渦などを作るこ とができる 42

流体シミュレーション WebGL Fluid Simulation ⑩ 次の WebGL Fluid Simulation のページを開いたら https://paveldogreat.github.io/WebGL-Fluid-Simulation/ マウス操作で描く 43

• https://paveldogreat.github.io/WebGL-Fluid-Simulation/

2-7 画像制作と人工知能 （コンピューターサイエンス） URL: https://www.kkaneko.jp/cc/cs/index.html 金子邦彦 44

演習（実演） ◼ パソコンのWebブラウザを使う ◼ 外部ページへのリンク （これらの外部ページの作者に感謝します） • AutoDraw: https://www.autodraw.com/ "Start Drawing" をクリック • Variational Auto-Encoder: https://magenta.tensorflow.org/sketch-rnn-demo • edges2cats: https://affinelayer.com/pixsrv/index.html ◼ パソコンとインターネットを使うことができる人は， 資料を参考に，実習 できる 大学の「セレッソ」についての案内： コンテンツの中にも URL を示してい る 45

• https://www.autodraw.com/
• https://magenta.tensorflow.org/sketch-rnn-demo
• https://affinelayer.com/pixsrv/index.html

人工知能を使ってイラストを描く AutoDraw 46

① ウェブブラウザで次の URL を開く https://www.autodraw.com/ ②「Start Drawing」をクリック 47

• https://www.autodraw.com/

③ 描きたいものをざっくり描く https://www.autodraw.com/ ④上のメニューに候補が出るのでクリック 48

• https://www.autodraw.com/

人工知能で，スケッチを生成するサイト https://magenta.tensorflow.org/sketch-rnn-demo ① スクロールして、 下の方の「Variational Auto-Encoder」を探す ② 「Variational AutoEncoder Demo」をクリック 49

• https://magenta.tensorflow.org/sketch-rnn-demo

start over 始めから 種類を 選べる auto-encode スケッチ生成 50

人工知能で猫を描くウエブサイト 「手書き」の絵に合うように，猫の画像を人工知 能が描く 51

① ウェブブラウザで次の URL を開く ② http://affinelayer.com/pixsrv/index.html 「edges2cats」を探す 52

• http://affinelayer.com/pixsrv/index.html

③ 「Clear」をクリックして消す ④ 猫を手書きして「process」をクリック 53