コンピューターサイエンス（スライド資料15回ほか）

演習について

以下の演習では，説明部分で学んだプログラミングの概念を各自が実践する．

演習① Scratchの開始・ブロック操作

説明パートの1-4「プログラムとは」「イベント駆動」「順次実行」「ブロック操作の基本」に対応する演習である．Scratchを起動し，イベントブロックと動きブロックを組み合わせて，キャラクタを動かす最小限のプログラムを作成する．「旗が押されたとき」というイベントに「10歩動かす」という動作を接続する操作を通じて，イベント駆動と順次実行の基本を体験する．

URL: https://scratch.mit.edu/

前提スキル：Webブラウザの操作，URLの理解．ドラッグ操作（左ボタンを押しながら移動し，左ボタンを離す）．

操作手順

1. Webブラウザを起動する．
2. Webブラウザで https://scratch.mit.edu/ を開く．
3. 「作ってみよう」をクリックする．
4. 「イベント」をクリックし，「旗が押されたとき」をドラッグする．
5. 「動き」をクリックし，「10歩動かす」をドラッグし，「旗が押されたとき」と合体する．
6. 旗ボタンをクリックする（キャラクタが少し右に動く）．旗ボタンを数回クリックしてみよう．

観察と考察

• 旗ボタンを1回クリックしたとき，キャラクタはどの方向にどれくらい動いたかを観察する．
• 旗ボタンを繰り返しクリックすると，キャラクタの位置はどう変化するかを観察する．
• 「旗が押されたとき」ブロックは，旗ボタンのクリックとプログラムの実行開始を結びつける役割を持つ．もしこのブロックがなく「10歩動かす」だけが置かれている状態で旗ボタンをクリックしても，プログラムは実行されない．このことから，イベントブロックが「いつ実行するか」を決める起点であることが分かる．
• 「10歩動かす」の数値「10」をクリックして「50」に変更し，旗ボタンをクリックして移動量がどう変わったかを観察する．ブロック内の数値がキャラクタの動作量を制御していることが分かる．確認後，数値を「10」に戻す．

演習② キャラクタ・スプライト

説明パートの1-5「キャラクタの基本」「スプライト（キャラクタ画像）」に対応する演習である．新しいスプライトを追加し，追加したキャラクタに対して個別にブロックを組み立てる．キャラクタごとに独立したプログラムを持つというスプライトの基本的な仕組みを確認する．

操作手順

1. スプライト一覧（画面右下）の猫のアイコンにカーソルを合わせ，「スプライトを選ぶ」をクリックする．
2. 好きなキャラクタを選ぶ．
3. 新しいキャラクタを選んでから，演習①と同様に「旗が押されたとき」と「10歩動かす」のブロックを組み立てる．
4. 旗ボタンをクリックするとキャラクタが動く．何度かクリックしてみよう．

観察と考察

• 旗ボタンをクリックしたとき，演習①のキャラクタと演習②で追加したキャラクタの両方が動くかどうかを観察する．
• ステージ下のスプライト一覧で，キャラクタをクリックして切り替えると，それぞれのキャラクタのためにブロックの組み合わせが表示されることを確認する．この動作から，プログラムはキャラクタごとに独立していることが分かる．

演習③ キャラクタの制御

説明パートの1-6「①繰り返し」「②もし・・・たら，・・・する（条件分岐）」「③強制停止」に対応する演習である．「ずっと」ブロックによる繰り返し，「もし端に着いたら，跳ね返る」ブロックによる条件分岐，赤ボタンによる強制停止を組み合わせて，キャラクタが自動的に動き続けるプログラムを作成する．さらに「右に15度回す」ブロックを追加し，動きの初期方向を変更する効果を確認する．

操作手順

1. 演習②で追加したキャラクタが選ばれていることを確認する．
2. 「制御」を選び「ずっと」をドラッグして，「10歩動かす」を囲むように合体する（「10歩動かす」が「ずっと」の中に入る形になる）．
3. 「動き」を選び「もし端に着いたら，跳ね返る」をドラッグして，「ずっと」の中の「10歩動かす」の下に合体する．
4. 旗ボタンをクリックするとキャラクタが動く．赤ボタンをクリックすると止まる．
5. 赤ボタンをクリックして止めてから，「動き」の「右に15度回す」を「旗が押されたとき」と「ずっと」の間に加える．
6. 旗ボタンをクリックするとキャラクタが動く．赤ボタンをクリックすると止まる．動き始めの瞬間に15度傾く．

観察と考察

• 「ずっと」ブロックを使う前（演習①）と使った後で，旗ボタンをクリックしたときの動作の違いを観察する．演習①では1回クリックするとキャラクタは1回だけ動いて止まるが，「ずっと」を加えると動き続ける．この違いから繰り返しの効果を確認する．
• キャラクタが画面の端に到達したとき，跳ね返って反対方向に動き続けることを観察する．「もし端に着いたら，跳ね返る」ブロックが，端に到達したかどうかを判定し，到達した場合に方向を反転させている．
• 赤ボタンをクリックしたときに動きが止まることを確認する．「ずっと」で永久に繰り返すプログラムは，赤ボタン（強制停止）で外部から停止できることが分かる．
• 「右に15度回す」ブロックの配置場所（「旗が押されたとき」と「ずっと」の間）に着目する．このブロックは旗ボタンを押した直後に1回だけ実行され，「ずっと」の中の処理が始まる前にキャラクタの向きを変える．ブロックの並び順が実行順序を決めるという原則を確認する．

演習④（余裕のある人向け）

説明パートの1-4「ブロックの形状と合体ルール」，1-5「キャラクタの操作」，1-6すべてに対応する活動である．演習①～③で学んだブロック操作，スプライト管理，繰り返し，条件分岐を組み合わせ，各自の工夫により自由にプログラムを作成する．ブロックの形状による合体ルールを手がかりに，未使用のブロックにも挑戦する．

操作手順

• 各自で工夫する．
• いろいろな動きを試す．
• 複数のキャラクタを同時に動かす．
• たくさんの種類のブロックを試す．同じ形のブロックは合体できる（六角形ブロックは六角形の穴にはめ込む）．

観察と考察

• 複数のキャラクタにそれぞれ「旗が押されたとき」から始まるプログラムを作り，旗ボタンをクリックしたときに全キャラクタが同時に動き始めるかどうかを確認する．
• ブロックパレットにあるブロックの形状を観察する．上下に凸凹があるブロック，口の形に開いたブロック，六角形のブロックなど，形状の違いによって合体できる場所が決まることを確認する．
• 自分が作ったプログラムについて，どのブロックがどの動作を担当しているかを説明できるか振り返る．

演習について

以下の演習では，説明部分で学んだAIの概念を，オンラインデモを通じて体験する．各デモの結果を観察し，考察すること．

使用するサイトの都合上、習っていない言葉（例：隠れ層）などが出てくるが、続行して欲しい。今回の説明内容に合致する外部サイトを選んでいる。

演習1. TensorFlow Playground（機械学習・ニューラルネットワーク）

ニューラルネットワークの基本構造に関する演習である．ニューラルネットワークの構造やパラメータを変更しながら，学習過程の変化を観察する．

URL: https://playground.tensorflow.org

操作手順

1. ページを開く
2. 画面左上の「DATA」セクションで，データセット（円形，XOR，渦巻き等）を選択する
3. 必要に応じて、「FEATURES」セクションで入力特徴量（X1，X2等）を選択する
4. 必要に応じて、「HIDDEN LAYERS」の「+」「-」ボタンで隠れ層の数を変更する．各層のニューロン数も「+」「-」で変更できる
5. 画面上部の再生ボタン（▶）をクリックして学習を開始する
6. 学習が進む様子と，出力領域の色分けの変化を観察する
7. Learning rateやActivation関数を変更し，学習結果の違いを比較する

観察と考察

• 渦巻き型のデータを正しく分類するには，どのような構造が必要か

演習2. PathFinding.js Visual（知的なITシステム）

探索による問題解決に関する演習である．探索アルゴリズムが経路を見つける過程を可視化し，コンピュータによる探索の仕組みを理解する．

URL: https://qiao.github.io/PathFinding.js/visual/

操作手順

1. ページを開く
2. グリッド上でマウスをドラッグして壁（障害物）を配置する
3. 緑色のノード（スタート地点）と赤色のノード（ゴール地点）はドラッグで移動できる
4. 画面上部のドロップダウンからアルゴリズム（A*，BFS，DFS等）を選択する
5. 「Start Search」ボタンをクリックする
6. 探索対象のセル（水色）と最短経路（黄色）がアニメーションで表示される
7. アルゴリズムを変更して，探索の仕方の違いを比較する

観察と考察

• アルゴリズムによって，探索するセルの数や順序はどのように異なるか
• 壁の配置を変えると，探索結果はどのように変化するか

演習3. CNN 3D Visualization（Adam Harley）（機械学習・ニューラルネットワーク）

ニューラルネットワークの基本構造に関する演習である．畳み込みニューラルネットワーク（CNN）の内部構造を3Dで可視化し，各層がどのように入力を処理しているかを観察する．

URL: https://adamharley.com/nn_vis/cnn/3d.html

操作手順

1. ページを開く（使用するWebブラウザの種類・バージョンによって動作しない場合がある）
2. 左下の描画パッドに数字（0〜9）をマウスで描く
3. 3D表示されたネットワークの各層のニューロンの活性化（色の変化）をリアルタイムに観察する
4. 各ニューロンにマウスカーソルを合わせると，そのニューロンが何を検出しているか確認できる
5. 異なる数字を描き，ネットワークの反応の違いを比較する

観察と考察

• ニューラルネットワークの入力層（画像入力）から出力層（０から９の１０通りの反応）に向かって，構造が確認できるか
• 反応の有無が、画素の有無（反応がない場合には黒）になっていることが確認できるか

演習4. AutoDraw（Google）（AIによる合成）

人間の下書きをAIが清書する演習である．手描きの下書きをAIが認識し，候補イラストを提示する仕組みを体験する．

URL: https://www.autodraw.com/

操作手順

1. ページを開く
li>最初、緑色の「Start Drawing」をクリック
2. 画面左側のツールバーから「AutoDraw」ツール（魔法の杖アイコン）を選択する
3. キャンバスに絵（例：猫，車，花等）を手描きする
4. 画面上部にAIが推測した候補イラストが表示される
5. 候補の中から適切なものをクリックすると，手描きが清書に置き換わる

観察と考察

• 下書きの丁寧さによって，候補の正確さは変わるか
• AIが正しく認識できない絵には，どのような特徴があるか

演習について

以下の演習では，説明部分で学んだデジタル画像の概念（画素，カラー画像の成分，畳み込み，空間周波数），画像制作におけるコンピュータの有用性を，Webブラウザ上で動作するサイトを通じて実践的に体験する．いずれもインストール不要で，マウス操作のみで体験できる．

演習① ペイントソフト Fluid Paint

Fluid Paint は油絵具の物理特性をシミュレートするペイントソフトであり，筆の色，サイズ，毛先の数（Bristle Count），流動性（Paint Fluidity）を設定して描画できる．画素ごとに色情報を持つカラー画像が生成される過程と，周囲の画素同士が相互作用してにじみや混色が生じる様子を観察できる．

URL: https://david.li/paint/

操作手順

1. Webブラウザを起動する．
2. Webブラウザで https://david.li/paint/ を開く．
3. 画面のメニューから色（Paint Color）を選択する．
4. キャンバス上でマウスの左ボタンを押し続けながらドラッグし，線を描く．
5. マウスホイールをスクロールして筆のサイズ（Brush Size）を変更し，再度ドラッグして線を描く．
6. 毛先の数（Bristle Count），流動性（Paint Fluidity）の各項目を変更し，それぞれ線を描いて筆跡の違いを確認する．
7. 異なる色を選択し，先に描いた線の上に重ねて描画して混色の様子を観察する．
8. 誤った操作をしたときは Undo（元に戻す）をクリックする．キャンバス全体を消去するときは Clear をクリックする．

観察と考察

• 筆のサイズを小さくした場合と大きくした場合で，1回のドラッグで影響を受ける画素の範囲がどう変わるかを観察する．
• 流動性（Paint Fluidity）を高くした場合，色が周囲ににじみ出る．これは周囲の画素の値を使って画素を更新する処理であり，畳み込み（フィルタ処理）の「ぼかし」と同じ考え方である．
• 異なる色を重ねて描いたとき，重なった部分の色がどのように合成されるかを観察する．
• 毛先の数を変更すると，1本の線が複数の細い筆跡の集合として描かれる．これにより，画像が画素の集合であることが視覚的に確認できる．

演習② アート作品制作サイト Silk

Silk は対称性を持った曲線をマウス操作で描けるジェネレーティブアートのサイトである．対称（Mirror）や螺旋（Spiral）といった機能により，少ない操作で複数の曲線からなる構造を生成できる．

URL: http://weavesilk.com/

操作手順

1. Webブラウザを起動する．
2. Webブラウザで http://weavesilk.com/ を開く．
3. 「Draw Something」をクリックして開始する．
4. キャンバス上でマウスをゆっくりドラッグし，曲線を描く．初期状態では対称性が有効になっており，1本のドラッグから複数の曲線が同時に描画される．
5. 左上のメニューの「Controls」で、色（Color）を選択する．
6. 左上のメニューの「Controls」で、色の下にある対称数（symmetries）のスライダーを用いて対象数を変更，描画して，結果の違いを確認する．
7. 「Mirror across center」（中心鏡映対称）のオン／オフを切り替え，それぞれで描画する．
8. 「Spiral towards center」（中心への螺旋）のオン／オフを切り替え，それぞれで描画する．
9. 1つ前の操作を取り消すときは Z キーを押す．キャンバスを全消去するときは Space キーを押す．

観察と考察

• 1本の曲線を描いただけのときと，多数の曲線を重ねて描いたときで，画像全体の明るさがどう変わるかを観察する．曲線が重なる部分は明るくなることが分かる．
• 対称数を変更すると，同じマウス操作でも生成される画像の構造が大きく変わる．
• 異なる色の曲線を重ねた部分の色を観察し確認する．

演習③ 流体シミュレーション WebGL Fluid Simulation

WebGL Fluid Simulation は，流体の物理シミュレーションをGPU上で実行し，マウス操作で光の渦のような流体表現を生成するサイトである．流体の各時点の状態は，前時点の各画素の値とその周囲の画素の値から計算される．設定メニューでは密度の減衰（density diffusion ），速度の減衰（velocity diffusion），渦度（Vorticity），噴出半径（Splat Radius），ブルーム（Bloom），光線（Sunrays）などのパラメータを変更できる．

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

操作手順

1. Webブラウザを起動する．
2. Webブラウザで https://paveldogreat.github.io/WebGL-Fluid-Simulation/ を開く．
3. キャンバス上でマウスをドラッグし，流体の動き（splat）を生成する．
4. マウスを動かす速さを変えて，生成される渦の様子を比較する．
5. キャンバスの異なる位置で複数回ドラッグし，渦同士が干渉する様子を観察する．
6. 画面右上の歯車アイコンをクリックして設定メニューを開き，密度の減衰（density diffusion ） の値を変更してから再度ドラッグする．色がどれだけの時間で消えるかを比較する．
7. Splat Radius の値を変更し，1回のドラッグで生成される渦の大きさを比較する．

観察と考察

• マウスのドラッグを止めた後も，渦や色の広がりが時間とともに変化し続ける．
• 時間が経過すると，細かい構造（高い空間周波数）が次第に失われ，滑らかな分布（低い空間周波数）に近づく．これは画像のぼかし（高い周波数の除去）と同じである．
• 密度の減衰（density diffusion ）を小さくすると色が長く残り，大きくすると速く消える．
• 複数の色の渦が混ざるとき，カラー画像の色成分がどのように合成されるかを観察する．

演習④ Setosa.io：画像にフィルタを適用

説明パートで学んだ「画像は画素値を並べた2次元配列である」「畳み込みは画像上の各位置で近傍の画素値とカーネル（フィルタ）の値の要素ごとの積の和を計算する操作である」という概念に対応する演習である．カーネル（フィルタ）を切り替えて出力画像の変化を確認する．出力画像および入力画像の任意の画素にマウスを合わせることで，3×3近傍の画素値とフィルタの値の積和演算の過程を数値で確認する．

URL: https://setosa.io/ev/image-kernels/

操作手順

1. Webブラウザを起動する．
2. Webブラウザで https://setosa.io/ev/image-kernels/ を開く．
3. 顔画像と画素値（0〜255）の行列が表示されていることを確認する．
4. ページ下部のプレイグラウンドで，「kernel」の下のメニューから「blur」を選び，出力画像の変化を確認する．
5. 同様に「bottom sobel」「emboss」「identity(何も変化しないフィルタ)」「left sobel」「outline」「right sobel」「sharpen」「top sobel」を順に選び，それぞれの出力画像を確認する．
6. 出力画像の任意の画素にマウスを合わせる．入力画像の対応する3×3近傍が強調表示され，3×3近傍の各画素値とフィルタの各値の要素ごとの積，およびその合計が表示されることを確認する．

観察と考察

• 「blur」と「sharpen」を切り替え，出力画像の違いを観察する．「blur」では隣接画素値の差が小さくなり，「sharpen」では隣接画素値の差が大きくなることを確認する．
• 「outline」を選んだとき，出力画像のどの位置で大きな値が現れるかを観察する．画像中の輪郭部分に対応していることを確認する．
• 「identity」フィルタを選ぶと，出力画像が入力画像と同一になることを確認する．フィルタの中心が1，他が0であるためにこの結果になることを，計算過程の表示から確認する．

演習⑤ deeplizard：畳み込みを1ステップずつ確認する

演習④で確認した「フィルタを適用すると画像がどう変わるか」を踏まえ，本演習では「そのとき何が計算されているか」を確認する．フィルタが入力行列上を1マスずつスライドする過程を可視化し，出力行列の各要素がどの入力領域から計算されたかを追跡する．出力値の正（赤）と負（青）の色分けにより，畳み込みニューラルネットワーク（CNN：Convolutional Neural Network）が画像から特徴を抽出する原理を確認する．

URL: https://deeplizard.com/resource/pavq7noze2

操作手順

1. Webブラウザを起動する．
2. Webブラウザで https://deeplizard.com/resource/pavq7noze2 を開く．
3. 入力行列，3×3のフィルタ，出力行列の表示欄の3つが表示されていることを確認する．フィルタサイズは3×3であることを確認する．
4. 「Play（再生）」をクリックし，フィルタが入力行列上を1マスずつスライドし，出力行列の各要素が順次計算されていく過程を確認する．
5. 出力行列の任意の画素にマウスを合わせる．対応する入力の3×3領域とフィルタの要素ごとの積，およびその合計が表示されることを確認する．
6. 出力行列全体を見渡し，正の値（赤）と負の値（青）の分布を確認する．

観察と考察

• フィルタが入力行列上を左から右へ，上から下へとスライドし，各位置で1つの出力値が計算される過程を確認する．
• 出力値が正に大きい位置（赤）に対応する入力の3×3領域を確認する．その領域の画素値の並びとフィルタの値の並びを見比べ，両者のパターンが一致していることを確認する．
• 出力値が負に大きい位置（青）に対応する入力領域を確認する．フィルタのパターンと符号が反対のパターンになっていることを確認する．
• 出力値が0に近い位置に対応する入力領域を確認する．入力に変化が少ない領域や，フィルタのパターンとの相関が小さい領域であることを確認する．
• 本演習で確認された「入力のパターンとフィルタのパターンが一致する位置で大きな出力値が得られる」という性質が，特徴抽出の基本原理であることを確認する．

演習⑥ 2D Inverse Fourier Transform Playground：空間周波数を操作

本演習では，画像を周波数領域で表現したスペクトル上で編集を行い，その逆フーリエ変換(周波数を画像に戻す処理)結果を確認することで，空間周波数成分と画像の対応関係を確認する．スペクトル中心の低周波成分が画像の大局的な明暗に対応し，周辺の高周波成分が輪郭や細部に対応することを，スペクトルを削る操作を通じて確認する．

URL: https://monman53.github.io/2dfft/

操作手順

1. Webブラウザを起動する．
2. Webブラウザで https://monman53.github.io/2dfft/ を開く．
3. 「Original image（原画像）」「Result（マスク適用後の逆フーリエ変換結果）」「Masked spectrum（編集可能なマスク付きスペクトル）」「Spectrum（スペクトル）」の4つが表示されていることを確認する．
4. 右下の「白」のボタンをクリックする。このとき Result に原画像が表示されることを確認する．これは全ての周波数成分が通過している状態に対応する．
5. Masked spectrum の周辺部（高周波成分）を左ドラッグで削る．削るための大きさは、マウスホイールで調整できる。マウスホイールで，削る範囲を調整して，様々な削り方を試す．結果として、Result の画像から輪郭や細部が失われていく過程を確認する．
6. 次に，Masked spectrum の中心部（低周波成分）を左ドラッグで削る．Result の画像から大局的な明暗が失われ，輪郭成分が残ることを確認する．
7. 途中で、右下の「白」のボタンをクリックして、もとに戻しながら、色々と試してみる。

観察と考察

• スペクトル周辺部（高周波）を削ったときの Result の変化を観察する．高周波成分の除去が空間領域でのぼかし処理に対応していることを確認する．
• スペクトル中心部（低周波）を削ったときの Result の変化を観察する．低周波成分の除去が空間領域でのエッジ検出処理に対応していることを確認する．

演習① Google Mapのストリートビューを用いた探索

ストリートビューは，地図上の地点における道路からの画像を閲覧する機能である．Google Mapではストリートビューのモードへ切り替えて利用する．本演習では，Google Mapで地名等を検索し，ストリートビューでの表示と移動を行う．

URL: https://www.google.co.jp/maps

操作手順

1. Webブラウザを起動する．
2. Webブラウザで https://www.google.co.jp/maps を開く．
3. 検索欄に地名，施設名,住所などのキーワードを入力して検索する．



4. 右下の「人型のボタン」をクリックして，ストリートビューのモードへ切り替える．

   

   道路沿い等に多数の青色の表示が付くことを確認する．



5. 青色の表示をクリックして，その場所のストリートビューを表示する．



6. マウスの左ボタンを押しながらマウスを動かして，見ている向き（注視方向）を変える．
7. マウスを道路の上に置くと，「＾」の記号が入った白丸が表示される．

   

   白丸をクリックして移動する．

8. 別の場所のストリートビューを見るときは，左上の「←」をクリックして元の地図に戻る．

ヒント

• 検索のキーワード例として，「富士山」「エッフェル塔」「クフ王」がある．
• 青色の表示は，ストリートビューが表示可能な場所を示す．
• ストリートビューに利用される画像は，広い範囲を撮影した１枚の画像であるパノラマ画像である．

考察ポイント

• 同一地点で注視方向を変えたときの，見える景観の変化を観察する．
• 白丸をクリックして連続的に移動したときの，視点の動き方を確認する．
• 地名，施設名，住所など異なる種類のキーワードで検索したときの，検索結果の違いを比較する．
• 身近な場所、行ったことはないが興味のある場所を探索してみよう．

エベレスト

富士山

演習② Google Earthを用いた探索

Google Earthは，無料で利用可能なオンラインの地球儀である．Google Earthには，写真，3次元コンピュータグラフィックス，写真＋標高，地球儀，ストリートビューの機能がある．本演習では，Google Earthで地名等を検索し，自由な視点移動を行いながら，ストリートビューとの違いを確認する．

URL: https://earth.google.com

操作手順

1. Webブラウザを起動する．
2. Webブラウザで https://earth.google.com を開く．
3. もし、プロジェクト一覧の画面が表示された場合は，「新規」をクリックして「新しい地図」を選ぶ．



4. 検索欄に地名，施設名，住所などのキーワードを入力して検索する．



5. 検索結果から場所を選ぶ．



6. マウス操作により視点を移動する．



7. 右下の「2D」「3D」ボタンをクリックして，2次元表示と3次元表示を切り替え，両方の表示を確認する．



8. 別のキーワードで再度検索し，異なる場所を同様に確認する．

ヒント

• Google Earthでは，街全体を3次元データとして表現できる．例として3次元の福山市の再現がある．
• 地形，海，空なども再現されている．
• 3次元のシーンはポリゴン（平らな多角形）の集合であるポリゴンメッシュとして表現されている．

考察ポイント

• 2D表示と3D表示で同じ地点を比較し，表現の違いを観察する．
• 演習①のストリートビューと比較し，視点移動の自由度の違いを確認する．ストリートビューは道路上からの視点に限定される．
• 3D表示において，3次元コンピュータグラフィックスで再現されている範囲と，写真として表示されている範囲を観察する．
• 地形や海や空の表示を確認する

演習③ Blenderの体験

Blenderは，3次元コンピュータグラフィックス（3DCG）の作成・編集ソフトウェアであり，無料で利用可能である．3次元モデル制作，アニメーション，レンダリング（画像生成）などの機能を提供する．本演習では，Blenderの起動，立方体の確認，球と円柱の追加と移動，色の設定とレンダリングを行う．

Blender ダウンロードページ:https://www.blender.org/download/

Blender のインストールの説明: https://www.kkaneko.jp/db/cg/blenderinst.html

事前準備：上記ダウンロードページから Blender を入手し，インストールしておくこと．

注意：オブジェクトはカメラから見える範囲に配置すること．カメラの移動については本演習では扱わないので，興味のある人は各自で調べてほしい．

操作手順

1. Blenderを起動する．
2. 3Dビューポート内に表示されている立方体（Cube）を確認する．カメラとライトもあわせて配置されている．



3. 立方体を左クリックして選択する．右上のアウトライナー（オブジェクト一覧）から選択することもできる．



4. 選択した立方体に対して，移動の操作を行う．キーボードの G キーを押した後にマウスを動かして位置を決め，左クリックで確定する．軸を固定したい場合は，G キーの後に X／Y／Z のいずれかを押す．3Dビューポート上のギズモ（矢印）をドラッグして移動することもできる．





5. 余裕があれば，選択した立方体に対して，回転（R キー），拡大・縮小（S キー）の操作も試してみる．いずれもキーを押した後にマウスを動かして変形量を決め，左クリックで確定する．









6. 球を追加する．3Dビューポートのヘッダの「追加（Add）」→「メッシュ（Mesh）」→「UV球（UV Sphere）」を選ぶ(キーボードの SHIFT + A でも同じメニューが開く)．



7. 追加した球を選択し，移動する．

   左クリックして選択する．右上のアウトライナー（オブジェクト一覧）から選択することもできる．





8. 同じ手順で円柱を追加する．「追加（Add）」→「メッシュ（Mesh）」→「円柱（Cylinder）」を選ぶ．



9. 追加した円柱を選択し，移動する．

   左クリックして選択する．右上のアウトライナー（オブジェクト一覧）から選択することもできる．





10. 色を設定するオブジェクトを選択する（立方体・球・円柱のいずれでもよい．時間に余裕があれば，3つそれぞれに異なる色を設定してもよい）．

    左クリックして選択する．右上のアウトライナー（オブジェクト一覧）から選択することもできる．



11. プロパティから「マテリアル」を開く．

    「マテリアル」が見えないときはスクロール．



12. 「新規（New）」をクリックする．

    「新規（New）」が表示されない場合は，問題ない．次へ進む（表示されないのは，マテリアルがすでに作成済みであるため．問題ない）．



13. 「ベースカラー（Base Color）」をクリックする．カラーピッカーが開くので，色を設定する．





14. F12キーを押してレンダリングを行う．新しくレンダリングの結果の画像の画面が開く．この画面で，設定した色を確認する．F12キーが効かない，または無い場合は，メニューの「レンダー（Render）」→「画像をレンダリング（Render Image）」を実行する．確認したら，レンダリングの画面を閉じる．

ヒント

• Blenderの画面構成は，メニュー，3Dビューポート（オブジェクトの表示・操作），アウトライナー（オブジェクト一覧），プロパティ（詳細設定），タイムラインから成る．
• 3Dビューポートでの視点操作は，テンキー，マウスホイール（ズーム），マウスによる移動，ナビゲーションコントロール，インタラクティブナビゲーションのいずれの方法でも行うことができる．
• 3Dビューポート右上のシェーディング切替アイコン（球状のアイコン群）から，ワイヤーフレーム（メッシュ表示），ソリッド（平面表示），マテリアルプレビューまたはレンダー（シェーディング表示）を切り替えることができる．
• レンダリングは，3次元のシーンを画像として計算する機能である．

考察ポイント

• ポリゴンは平らな多角形（三角形，四角形，五角形など）である．追加した球や円柱の形状を，3Dビューポートのシェーディング切替でワイヤーフレーム表示に変えると，多数のポリゴンの集合がポリゴンメッシュとなっていることを確認できる．
• マテリアルで色を設定し，レンダリング後の表示で確認できる．
• 追加した立方体，球，円柱の組み合わせで，現実世界のどのような物体が表現できるかを考える．試してみる（例：机，椅子，人物，その他）．

演習①：文字コードを観察する

• ASCII：1文字を7ビットで表現する文字コード。128種類の文字（英数字・記号・制御文字）を表す。
• 16進数：0〜9 と A〜F を使う表記。A〜F は 10〜15 に対応する。
• 0x：先頭に付けると、その数値が16進数であることを示す目印。
• ord 関数：文字を文字コード（整数）に変換する。
• hex 関数：整数を16進数表記の文字列に変換する。

手順

ステップ 1：1文字の文字コードを表示する

1. ブラウザで次のページを開く。https://trinket.io/python/595c091dd9
2. 表示されているプログラムを確認する。

   c = 'A'
   print(hex(ord(c)))

3. 実行ボタン（▶）を押す。
4. 結果欄に 0x41 と表示されることを確認する。

ステップ 2：入力した文字列を文字コードへ変換する

1. ブラウザで次のページを開く。https://trinket.io/python/17fb2ed2d5
2. 実行ボタンを押す。
3. 結果欄を一度クリックしてから、文字列（例：abcde）を入力し、Enter キーを押す。
4. 各文字の文字コードが1行ずつ16進数で表示されることを確認する。

ヒント

• 0x41 のうち 0x は16進数を示す目印。値そのものは 41（16進数）。
• 資料 5-5 の ASCII 文字コード表で A を探すと、列が 4、行が 1 の位置にある。これが 16進数 41 に対応し、プログラムの出力 0x41 と一致する。
• 入力時に文字が入らないときは、結果欄を一度クリックしてから入力する。
• 大文字の A と小文字の a は別の文字コードになる。

考察ポイント

1. 'B' を入力したときの出力を表から予想し、実行して確かめる。資料 （'A' → 01000001 → 16進数 41、'B' → 01000010 → 16進数 42）と対応がとれるはず。
2. 大文字と小文字を続けて入力（例：Aa）し、文字コードの違いを観察する。
3. 文字列 abcde を入力すると、5行の文字コードが出力される。これは 文字列が1文字ずつ文字コードに変換されること を示している。

演習②：論理演算（AND、OR）を観察する

前提

• 論理積 AND：両方が1のときのみ結果が1となる演算。
• 論理和 OR：少なくとも片方が1のとき結果が1となる演算。
• 真偽値：Python では True（真）と False（偽）の2つの値を扱う。ここでは、1 が True、0 が False に対応する。

手順

ステップ 1：プログラムを実行する

1. ブラウザで次のページを開く。https://trinket.io/python/7f31113af9
2. 表示されているプログラムを確認する。

   a = True
   b = False
   
   print("a and b =", a and b)
   print("a or b =", a or b)

3. 実行ボタン（▶）を押す。
4. 結果欄に次のように表示されることを確認する。

   ('a and b =', False)
   ('a or b =', True)

ステップ 2：4通りの組み合わせを確かめる

a と b の値を次の4通りに書き換え、それぞれ実行ボタンを押して結果を確認する。

• a = True、b = True のとき
• a = True、b = False のとき
• a = False、b = True のとき
• a = False、b = False のとき

ヒント

• Python の真偽値は 先頭が大文字 で True / False と書く（true や TRUE ではエラーになる）。
• a = ... の右辺を書き換えたあとは、必ず実行ボタンを押し直す。
• 資料 の AND と OR の表（2行2列）と比べる。

考察ポイント

1. a = True、b = True のときの a or b の結果について、資料 「論理和と『選択』の違い」（焼き芋大会の例）と関係づけて、両方が True のときも OR の結果が True になることを確認する。

演習③：論理演算で1桁の足し算を作る

前提

• 1桁の二進数同士の足し算の結果は2ビット（上位ビットと下位ビット）になる。
• 上位ビット ＝ x AND y
• 下位ビット ＝ (x OR y) AND NOT (x AND y)
• Python の論理演算子に not（否定 NOT に対応）が加わる。not は値を反転する。

手順

ステップ 1：プログラムを書き換えて実行する

1. ブラウザで演習②と同じページを開く。https://trinket.io/python/7f31113af9
2. プログラムを次のコードに書き換える。

   a = True
   b = True
   
   upper = a and b
   lower = (a or b) and not (a and b)
   
   print("a =", a, ", b =", b)
   print("上位ビット =", upper)
   print("下位ビット =", lower)

3. 実行ボタン（▶）を押す。
4. 結果欄に次のように表示されることを確認する。

   a = True , b = True
   上位ビット = True
   下位ビット = False

ステップ 2：4通りの組み合わせを確かめる

a と b の値を次の4通りに書き換え、それぞれ実行ボタンを押して結果を確認する。

• a = False、b = False のとき
• a = False、b = True のとき
• a = True、b = False のとき
• a = True、b = True のとき

ヒント

• not は True を False に、False を True に変えるもの。
• True を 1、False を 0 と読み替えると、4通りの結果は資料「1桁足し算の2ビット表現と、論理演算との関係」の表の各行と対応する。

考察ポイント

1. a = True、b = True のときの結果（上位ビット True、下位ビット False）が、二進数の足し算 1 + 1 = 10 に対応していることを確認する。