人工知能でできること，情報のコー

(1)

cs-2.

コンピュータによる画像制作，

人工知能でできること，情報のコード化，デジタル画像，画素

（コンピューターサイエンス）

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

1

金子邦彦

謝辞：この資料では「いらすとや」のイラストを使用しています

(2)

今回の内容

• コンピュータでできること

コンピュータによる画像製作体験（実演，実習）

• ICTの発展による社会の変化

「情報」が価値を持つ社会

• 「データ」とは？

• デジタル画像の仕組み

＜次回授業の予習＞

3次元コンピュータグラフィックスの「ポリゴン」，「テク スチャ」について，インターネット等で

調べ，予習しておく

2

(3)

「コンピュータについて学びたい」と思っている皆さん 今日の授業で，次のことを学べます

• コンピュータでできること

• コンピュータの本質は「コンピュータをネットワークでつ なぎ，データの共有，保存，活用が，簡単に高性能にでき ること」

コンピュータによる画像製作体験もありますので，

コンピュータとインターネットを持っている人は，ぜひ，試してみてください．

3

(4)

2-2 情報化社会の到来

4

金子邦彦

(5)

情報革命 1940年台～

• 新技術の創出

インターネット、情報通信機器、

コンピュータ

• 社会全体への波及効果

高性能，安価な情報通信機器の普及．

「情報」が価値を持つ．

• 生活、文化の変化 情報産業の誕生、

「スマホが手放せない」時代、

誰もが情報発信できる時代、

世界とつながり、交流できる時代

5

(6)

情報化社会

• コンピュータを個人が持つ

• コンピュータがネットワーク化される

6

(7)

ソフトウエアやオンラインサービスのバリエーション

• オフィスソフト

• オペレーティングシステム（Windows）などの標準機能

• プログラミング開発環境

• ライブラリその他

7

(8)

8 さまざまなソフトウエアの普及浸透

Word (ワープロ) Excel (表計算) PowerPoint (プレゼン)

• オフィスソフト

電子メール，

オンラインストレージなども

https://portal.office.com でオンライン利用

• Windows に標準添付のもの

ファイルマネージャ

（エクスプローラー）

Web ブラウザエディタ

（メモ帳）

(9)

9

• プログラミング開発環境

Google Colab

https://colab.research .google.com

ノートブックによるプログラム作成，実行，保存，

GitHub

https://github.com/

ソースコードの共同開発，

共有，配布

Spyder

※ Python 開発環境

(10)

10

• ライブラリ（プログラム制作時に部品として組み込んで使うことができるソフトウエア）

TensorFlow

※ 人工知能に便利なフレームワーク

OpenCV

※ コンピュータビジョン，画像処理のライブラリ

Dlib※顔検知，顔認識のライブラリ

(11)

11

• 3次元コンピュータグラフィックスなど，創作，設計もデジタル化

３次元グラフィックス blender

３次元メッシュ MeshLab

ゲームエンジン Unreal Engine 4

(12)

WikiPedia

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

12

(13)

OpenStreetMap

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

13

(14)

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

14

(15)

情報化社会

• 情報が，インターネットで広く流通，共有される

• 情報は蓄積され，大規模に，次世代に継承される

• あらゆる人が情報の発信者

15

(16)

情報化社会の危険

・不正確な情報，悪意のある情報

※ インターネットにある情報が必ずしも正しいものとは限らない

・プライバシの侵害

※ SNS などは，簡単に拡散でき，消すことができないことを常に意識する

16

(17)

2-3 情報のコード化

17

金子邦彦

謝辞：「いらすとや」のイラストを使用しています

(18)

ルイ１４世の暗号

• 重要文書を記録、保管したい

• わざと読みにくくしたい（暗号化）

18

action

元の文

act ion

^分割

コード化

486 102

秘密のコード ブックを使用

これを保管暗号文

(19)

車両用の信号機

19

青黄赤

直進し、左折し、又は右折することができる停止位置をこえて進行してはならない。

ただし、黄色の灯火の信号が表示された時において当該停止位置に近接しているため安全に停止することができない場合を除く。

停止位置を越えて進行してはならない

赤

青黄は分かりやすい目印（サイン）

(20)

情報のコード化

20

福山大学

720-0292

情報郵便番号

コード化コード化の逆

720-0292 と書くだけで、

「福山大学」だと分かる．

便利．

「720-0292」は、「福山大学」のコードだよ！というように、コード化のルールを、全地名について決めておく必要がある（当たり前）

(21)

2-3

情報のコード化

• 情報のコード化とは

情報を、所定の記号や符号で置き換えること

「福山大学」の郵便番号は「720-0292」

21 ノートページ

(22)

2-4 情報とデータ

22

金子邦彦

謝辞：「いらすとや」のイラストを使用しています

(23)

情報とデータ

昼ごはんは、次の２種類しかない（この２種類しか食べないと決心している）

23

昼定食うどん

(24)

情報とデータ

24

次のように決めたとする

コード元の情報昼定食

うどん赤

青肉うどん昼定食

情報データ

うどん

昼定食うどん 4月13日

4月14日 4月15日

4月16日 4月17日

赤青青赤青

コード化

(25)

クイズの答え

25

次のように決めたとする

コード元の情報うどん

赤

青肉うどん昼定食

情報データ

4月27日

4月28日 4月30日

青

昼定食

元に戻す

赤

元に戻すときも、コードと元の情報の対応情報が必要（当たり前）

うどん青

(26)

2-4

情報とデータ

• 情報とは

世界や人間のあらゆる出来事、内容、事情など

• データとは

情報をコード化したもの．

（例）720-0292

コンピュータは，データを扱う

26

(27)

2-5 デジタル画像

27

金子邦彦

(28)

画像と画素

28

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

(29)

画素の輝度（明るさ）のコード化

29 画像の明るさ情報

例えば：黒＝０，

暗い灰色＝１，

明るい灰色＝２，

白＝３のようにコード化

画素 (pixel)

width: 8 height: 8

depth = 4 の場合：

0 1 2 3

(30)

カラー画像の例

30

(31)

カラー画像の成分

• 輝度成分，色成分で考える場合

• R（赤）成分，G（緑）成分，B（青）成分で考える場合

31

(32)

元画像

輝度色

「カラー画像の成分は，輝度と色」と考える場合

32

輝度は，１つの数字でコード化 可能

色は，２つの数字でコード化可 能

(33)

段階的な輝度情報の除去

除去率２０％

４０％

６０％

８０％

元画像

輝度情報の除去

33

(34)

2-6 画像制作とコンピュータ

34

金子邦彦

(35)

35

(36)

演習（実演）

◼ パソコンのWebブラウザを使う

◼ 外部ページへのリンク（これらの外部ページの作者に感謝します）

• Fluid Paint: https://david.li/paint/

• Silk: http://weavesilk.com/

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

◼ パソコンとインターネットを使うことができる人は，資料を参考に，実習できる

大学の「セレッソ」についての案内：コンテンツの中にも URL を示している

36

(37)

37

④ ペイントソフト Fluid Paint

筆の設定は簡単にできる

・色

・サイズ

・毛先の多さ

・毛先の流動性など

(38)

⑤ Fluid Paint では，筆の設定は左側のメニューで．

書き直すときは「Clear」をクリック

38

(39)

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

39

(40)

⑦ 次の Silk のページを開いたら，

http://weavesilk.com/

「Draw Something」をクリックして開始

40

(41)

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

41

(42)

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

42

(43)

⑩ 次の WebGL Fluid Simulation のページを開いたら

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

マウス操作で描く

43 流体シミュレーション WebGL Fluid Simulation

(44)

2-7 画像制作と人工知能

44

金子邦彦

(45)

演習（実演）

◼ パソコンの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

(46)

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

46

(47)

① ウェブブラウザで次の URL を開く

https://www.autodraw.com/

②「Start Drawing」をクリック

47

(48)

③ 描きたいものをざっくり描く

https://www.autodraw.com/

④上のメニューに候補が出るのでクリック

48

(49)

人工知能で，スケッチを生成するサイト

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

49

① スクロールして、

下の方の「Variational Auto-Encoder」を探す

② 「Variational AutoEncoder Demo」をクリック

(50)

start over 始めから

auto-encode スケッチ生成種類を

選べる

50

(51)

人工知能で猫を描くウエブサイト

「手書き」の絵に合うように，猫の画像を人工知能が描く

51

(52)

① ウェブブラウザで次の URL を開く

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

② 「edges2cats」を探す

52

(53)

③ 「Clear」をクリックして消す

④ 猫を手書きして「process」をクリック

53