コンピュータプログラミングI(1)
図形を描く

June 8, 2017

Nakajima, Yajima
Iwai, Tatsuta
Kakizaki, Ikeda

このスライドの使い方

テキスト等がはみ出した場合は、フォントサイズを小さくして調整する。 「S」 キーで小さく、「B」 キーで大きくなる。また、 下記のキーボード操作が使用できる。(一部キー操作は IE のみ対応)

マウスクリック or スペースキー 次のスライドに進む
「←」 or 「Page Up」 前のスライドに戻る
「→」 or 「Page Down」 次のスライドに進む
「Home」 and 「End」 先頭(Home)または最後(End)のスライドへ移動
「C」 or 「contents?」 をクリック スライド一覧の表示
「F11」 or 「Ctrl+Shift+F (Win)」, 「Cmd+Shift+F (Mac)」 フルスクリーン表示と通常表示の切り替え
「F」 フッタの表示と非表示の切り替え
「A」 全スライド表示に切替 (印刷時に使う)
「S」「-」/「B」「+」 フォントサイズの大(B) 小(S)

Introduction: 「プログラミング入門」の目標

Introduction: Processingを用いた作品例

Introduction: 教科書と成績評価

Introduction: 開発環境の整備

本日のゴール

最初のプログラム

size(480, 120);               ← 絵を書くウィンドウのサイズを決める
ellipse(50, 50, 80, 80);      ← 円を書く命令

基本図形を描く - 座標系 (教科書p.18)


画像を構成する点を「画素」と呼ぶ   画素の単位は「ピクセル(pixel)

座標(60, 60)の位置に点を描く

size(120, 120);
point(60, 60); 

座標(20, 100)と座標(100, 20)を結ぶ線を描く

size(120, 120);
line(20, 100, 100, 20); 

基本図形を描く - 様々な図形 (教科書pp.19-23)

Processingでは、点や線の他に様々な図形を描く命令がある
教科書pp.19-23を参照し、どのような命令があるか調べてみよう

練習(1-1):おでん?

次のような画像を表示するプログラムを書いてみよう

描く順序,滑らかさ,線の太さ (教科書pp.24-27)

教科書のサンプルを実行し、実際に確かめてみよう

色 (教科書pp.27-32)

色(実際には目に届く光)の成分を構成する3つのパラメータを指定する
それぞれを 0-255 の数値で、各色の強さを256段階に設定する

透明度 (教科書p.31)

これらのfill, strokeの2つの命令では、

fill(赤の強さ, 緑の強さ, 青の強さ, 透明度);
stroke(赤の強さ, 緑の強さ, 青の強さ, 透明度);

のように4つめのパラメータとして透明度を指定することもできる
透明度は0から255までの数値:0は完全な透明、255は完全な不透明
透明度を省略した場合は255 (不透明) になる

(backgroundでも透明度を指定できるが,無視され必ず255になる)

練習(1-2)

次のような画像を表示するプログラムを書いてみよう

色や図形の位置は大まかに同じであれば良い

ヒント:座標には負の値も設定できる

size(480, 120);
noStroke();
background(204, 226, 225);
....
....

コメント (教科書p.35)

プログラム中にコメントを書くことができる   コメントは実行時には無視される
コメントにはどのようなプログラムなのか等のメモを記すと良い

その他の描画命令

演習問題

問題1

次のような画像を表示するプログラムをそれぞれ書きなさい。 それぞれスケッチ名は、順に quiz1_1, quiz1_2 とする。 保存したスケッチフォルダの.pdeファイルのみを提出すること。

演習問題

問題2

「太陽」をテーマとした絵画作品風の画像を表示するプログラムを書きなさい。 絵画の例として次のような作品があるが、独自の表現に基づきオリジナルなものを考えること。 スケッチ名は sun とする。保存したスケッチフォルダの.pdeファイルのみを提出すること。