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

>100 Views

December 17, 21

スライド概要

コンピューターサイエンス
URL: https://www.kkaneko.jp/cc/cs/index.html

profile-image

金子邦彦(かねこくにひこ) 福山大学・工学部・教授 ホームページ: https://www.kkaneko.jp/index.html 金子邦彦 YouTube チャンネル: https://youtube.com/user/kunihikokaneko

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

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 情報のコード化 (コンピューターサイエンス) URL: https://www.kkaneko.jp/cc/cs/index.html 金子邦彦 謝辞:「いらすとや」のイラストを使用しています 17

18.

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

19.

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

20.

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

21.

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

22.

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

23.

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

24.

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

25.

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

26.

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

27.

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

28.

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

29.

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

30.

カラー画像の例 30

31.

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

32.

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

33.

段階的な輝度情報の除去 除去率 20% 輝度情報の 除去 40% 元画像 60% 80% 33

34.

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

36.

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

37.

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

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 ⑩ 次の WebGL Fluid Simulation のページを開いたら https://paveldogreat.github.io/WebGL-Fluid-Simulation/ マウス操作で描く 43

44.

2-7 画像制作と人工知能 (コンピューターサイエンス) URL: https://www.kkaneko.jp/cc/cs/index.html 金子邦彦 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 ① スクロールして、 下の方の「Variational Auto-Encoder」を探す ② 「Variational AutoEncoder Demo」をクリック 49

50.

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

51.

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

52.

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

53.

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