Mais conteúdo relacionado
Semelhante a 岡山県立大学オープンキャンパス資料 (20)
Mais de Takeo Kunishima (20)
岡山県立大学オープンキャンパス資料
- 6. 最初のプログラム
課題1. 次のプログラムを書いて実行してみましょう。
ellipse(50, 50, 80, 80);
課題2. 課題1のプログラムをわざと次のように間違えて書いて
実行してみましょう。
(1)Ellipse(50, 50, 80, 80);
(2)ellipse(50. 50, 80, 80);
(3)ellipse(50, 50, 80, 80)
[プログラムを書く時の注意点]
• かな漢字変換がオフになっていることを確認しましょう(特に空白文字に注
意!)
• 大文字と小文字を間違えないように(間違うとプログラムは動きません)
• セミコロンをつけ忘れないように
- 8. プログラムを書くときの注意
• カッコ (), {} の対応に注意し
ましょう。
• 全角スペースが混じらない
ように気をつけましょう。
• カッコの前や後、コンマの後
などの空白はなくても動き
ますが、空白を入れることで
プログラムが見やすくなりま
す。入れるように心がけま
しょう。
• 行頭の字下げ(インデント)
も、プログラムを見やすくす
るために入れています。
void setup() {
size(480, 120);
smooth();
}
void draw() {
if (mousePressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}
- 9. プログラムで絵を描く
課題4. 次のプログラムを実行してみましょう。
size(800, 600);
point(240, 60);
line(20, 50, 420, 110);
[ポイント]
• Processingでは、描画の命令(関数)を次々と実行していくことで絵を描きま
す。
• 前に書いた図形は後に書いた図形に上書きされていきます。
• 関数の書式: 関数名(引数1, 引数2, …)
• 引数の個数や順番には意味があります。勝手に変えてはいけません。
• Processingでは、描画ウインドウの左上隅が原点となっており、x軸は右方向、
y軸は下方向が正になります。(y軸の正方向が数学とは逆です)
[関数]
• size(横方向のピクセル数, 縦方向のピクセル数)
• 描画ウインドウの大きさを決めます。
- 10. 図形を描く関数(1)
• point(x, y)
• 点(x, y)を描く
• line(x1, y1, x2, y2)
• (x1, y1) から (x2, y2) に線を引く
• rect(x1, y1, width, height)
• 左上隅が(x1, y1), 幅 width, 高さ height の長方形を描く
• triangle(x1, y1, x2, y2, x3, y3)
• (x1, y1), (x2, y2), (x3, y3) を頂点とする三角形を描く
• quad(x1, y1, x2, y2, x3, y3, x4, y4)
• (x1, y1), (x2, y2), (x3, y3), (x4, y4) を頂点とする四角形を描く
- 11. 図形を描く関数(2)
• ellipse(x1, y1, width, height)
• 中心が(x1, y1), 横方向の幅がwidth, 縦方向の幅がheightである楕円
を描く
• 円を描く場合は width と height を同じ値にします
• arc(x1, y1, width, height, start, end)
• 中心が(x1, y1), 横方向の幅がwidth, 縦方向の幅がheight, 描き始めの
角度が start, 描き終わりの角度が end である円弧を描く
• 角度は弧度法で指定します
• 便利な関数
• radians(a)…角度a(0°≦a≦360°)を弧度法の値に変換する
• 例: arc(90, 60, 80, 80, 0, radians(90))
- 14. 描画色の指定(1)
• colorMode(mode, max)
• 色の指定方法をmode (RGB またはHSB)に決める。maxは色指定の
上限値である。
• background(グレイスケール値), background(R, G, B),
background(H, S, B)
• 背景色の指定
[例]
colorMode(HSB, 100); // HSBモード、H, S, Bはそれぞれ0〜99で指定
background(99); // 背景をグレイスケール値99(=色指定の上限値=白)に指定
- 15. 描画色の指定(2)
• stroke(グレイスケール値), stroke(R, G, B), stroke(H, S, B)
• 線の色を指定
• strokeWeight(線の太さのピクセル数)
• 線の太さを指定
• noStroke()
• 縁取り線を消す
• fill(グレイスケール値), fill(R, G, B), fill(H, S, B)
• 図形の塗りつぶし色を指定
• noFill()
• 図形の塗りつぶしをしない(=輪郭線だけを描く)
- 17. 同じような描画の繰り返し
fill(45, 80, 99);
rect(0, 0, 200, 200);
fill(45, 60, 99);
rect(0, 0, 150, 150);
fill(45, 40, 99);
rect(0, 0, 100, 100);
fill(45, 20, 99);
rect(0, 0, 50, 50);
[0回目]
彩度80 = 80–20×0, 大きさ200 = 200−50×0
[1回目]
彩度60 = 80–20×1, 大きさ150 = 200−50×1
[2回目]
彩度40 = 80–20×2, 大きさ100 = 200−50×2
[3回目]
彩度20 = 80–20×3, 大きさ50 = 200−50×3
- 19. 変数と繰り返しでまとめる
int i; // 繰り返し回数を保存する変数
for (i = 0; i <= 3; i = i + 1) {
fill(45, 80 – 20 * i, 99);
rect(0, 0, 200 - 50 * i, 200 – 50 * i);
}
[プログラムにおける変数]
何らかの値を保存しておくときに使います。数学での変数とは違い、未知数を表すわ
けではありません。
[変数の宣言:変数を使う前に、必ずその変数を宣言しなければなりません]
変数の型 変数名;
• 変数の型=変数に保存できる値の定義域。int (整数), float (実数) など。
• 変数の宣言は、ほかにも似たような書き方がいくつもあります。今回は省略。
- 20. 変数と繰り返しでまとめる
int i; // 繰り返し回数を保存する変数
for (i = 0; i <= 3; i = i + 1) {
fill(45, 80 – 20 * i, 99);
rect(0, 0, 200 - 50 * i, 200 – 50 * i);
}
[変数へ値を保存する:プログラムの用語で「変数に値を代入する」と言います]
変数名 = 式;
• まず、= の右側の式を計算します。
• その結果の値を、左側の変数に保存します。
• だから、= の左側と右側に同じ変数が出てくることもあります。
- 21. 変数と繰り返しでまとめる
int i; // 繰り返し回数を保存する変数
for (i = 0; i <= 3; i = i + 1) {
fill(45, 80 – 20 * i, 99);
rect(0, 0, 200 - 50 * i, 200 – 50 * i);
}
[for文:条件が成立する間、処理を繰り返します]
for (繰り返し変数の設定; 繰り返し継続の条件; 繰り返し変数の更新) {
繰り返し実行する命令
}
• 最初に、繰り返し変数の設定をします。
• 以下を繰り返します。
• 繰り返し継続の条件が成り立っているか調べます。
• 成り立っていれば、{ } 内を実行して、繰り返し変数を更新します。
• 成り立っていなければ、繰り返しを終了します。
- 23. for文の入れ子
for (i = 0; i < 10; i = i + 1) { // for文1
for (j = 0; j < 10; j = j + 1) { // for文2
fill(i * 10, 10 + j * 10, 99);
rect(i * 20, j * 20, 10, 10);
}
}
i = 0, j = 0 … 色相0*10, 彩度10+0*10, 正方形の左上隅(0*20, 0*20)
j = 1 … 色相0*10, 彩度10+1*10, 正方形の左上隅(0*20, 1*20)
…
i = 1, j = 0 … 色相1*10, 彩度10+0*10, 正方形の左上隅(1*20, 0*20)
j = 1 … 色相1*10, 彩度10+1*10, 正方形の左上隅(1*20, 1*20)
…
… …
- 26. ランダムな値(乱数)
for (i = 0; i < 10; i = i + 1) {
for (j = 0; j < 10; j = j + 1) {
fill(random(20, 40), random(50, 70), 99);
rect(i * 20 + random(-3, 3),
j * 20 + random(-3, 3),
10, 10);
}
}
[ポイント]
random(下限, 上限) … 下限≦x<上限の範囲でランダムな数字xを生成する関数
上の例では、正方形の色相、彩度、左上隅の位置に乱数を使い、微妙な違いを出し
ています。
- 29. アニメーション処理の基本
void setup() { // 初期化。プログラムの最初に1回だけ実行
size(200, 200);
colorMode(HSB, 100);
background(99);
noStroke();
}
void draw() { // 何度も繰り返して実行
fill(random(0, 100), random(50, 100), random(80, 100));
ellipse(random(0, 200), random(0, 200),
random(0, 50), random(0, 50));
}
setup(), draw()ともに関数です。
つまり、このプログラムはsetup(),
draw()という2つの関数を自作してい
るのです。
- 31. マウスの位置を取得する
void draw() {
fill(random(0, 100), random(50, 100), random(80, 100));
ellipse(mouseX, mouseY, 5, 5);
}
[ポイント]
mouseX, mouseYという変数に、自動的に現在のマウスポインタの位置が保存され
ます。
• これらの変数は宣言しなくても使えます。
• 大文字と小文字の区別に注意しましょう。
- 33. 直前のマウスの位置を取得する
void draw() {
fill(random(0, 100), random(50, 100), random(80, 100));
ellipse(mouseX, mouseY,
mouseX - pmouseX, mouseY - pmouseY);
}
[ポイント]
pmouseX, pmouseY という変数に、直前のマウスの位置が保存されています。
• これらの変数も、宣言しなくても使えます。
• 上の例では、楕円の幅と高さを、現在のマウスの位置と直前のマウスの位置の差
にしていますね。だから、マウスの移動距離に応じて楕円の大きさが変わったの
です。
- 35. 変数宣言の位置に注意!
int start; // 左端の円のy座標に対応する角度
void setup() {
…
start = 0;
}
void draw() {
int theta;
…
start = start + 2;
theta = start;
…
}
[ポイント]
• setup()やdraw()の外に変数宣言を書くと
• グローバル変数の宣言になります
• グローバル変数はsetup()でもdraw()でも使
えます
• draw()が何回実行されても、グローバル変
数に保存された値は壊れません
• setup()やdraw()の中に変数宣言を書くと
• ローカル変数の宣言になります
• ローカル変数は宣言された関数の中でしか
使えません
• ローカル変数thetaは、draw()が実行される
たびに作り直されます(値が毎回壊れます)
• 使い分けが必要です
Notas do Editor
- 答は例3-10。File > Examples > Books > Getting Started > Chapter03 > Ex_03_10