Download to read offline
![最初のプログラム
課題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)
[プログラムを書く時の注意点]
• かな漢字変換がオフになっていることを確認しましょう（特に空白文字に注
意!）
• 大文字と小文字を間違えないように（間違うとプログラムは動きません）
• セミコロンをつけ忘れないように](https://image.slidesharecdn.com/esfwjxtrpc0jjt3q6dcc-signature-6005270a393641d79a3ff9525981f10cef9ac7bb6a1cf0aaa2cd6f6cd24ac790-poli-150724074213-lva1-app6891/85/20150725-6-320.jpg)
![プログラムで絵を描く
課題4. 次のプログラムを実行してみましょう。
size(800, 600);
point(240, 60);
line(20, 50, 420, 110);
[ポイント]
• Processingでは、描画の命令（関数）を次々と実行していくことで絵を描きま
す。
• 前に書いた図形は後に書いた図形に上書きされていきます。
• 関数の書式： 関数名(引数1, 引数2, …)
• 引数の個数や順番には意味があります。勝手に変えてはいけません。
• Processingでは、描画ウインドウの左上隅が原点となっており、x軸は右方向、
y軸は下方向が正になります。（y軸の正方向が数学とは逆です）
[関数]
• size(横方向のピクセル数, 縦方向のピクセル数)
• 描画ウインドウの大きさを決めます。](https://image.slidesharecdn.com/esfwjxtrpc0jjt3q6dcc-signature-6005270a393641d79a3ff9525981f10cef9ac7bb6a1cf0aaa2cd6f6cd24ac790-poli-150724074213-lva1-app6891/85/20150725-9-320.jpg)
![描画色の指定(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（＝色指定の上限値＝白）に指定](https://image.slidesharecdn.com/esfwjxtrpc0jjt3q6dcc-signature-6005270a393641d79a3ff9525981f10cef9ac7bb6a1cf0aaa2cd6f6cd24ac790-poli-150724074213-lva1-app6891/85/20150725-14-320.jpg)
![同じような描画の繰り返し
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](https://image.slidesharecdn.com/esfwjxtrpc0jjt3q6dcc-signature-6005270a393641d79a3ff9525981f10cef9ac7bb6a1cf0aaa2cd6f6cd24ac790-poli-150724074213-lva1-app6891/85/20150725-17-320.jpg)
![変数と繰り返しでまとめる
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 (実数) など。
• 変数の宣言は、ほかにも似たような書き方がいくつもあります。今回は省略。](https://image.slidesharecdn.com/esfwjxtrpc0jjt3q6dcc-signature-6005270a393641d79a3ff9525981f10cef9ac7bb6a1cf0aaa2cd6f6cd24ac790-poli-150724074213-lva1-app6891/85/20150725-19-320.jpg)
![変数と繰り返しでまとめる
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);
}
[変数へ値を保存する：プログラムの用語で「変数に値を代入する」と言います]
変数名 = 式;
• まず、= の右側の式を計算します。
• その結果の値を、左側の変数に保存します。
• だから、= の左側と右側に同じ変数が出てくることもあります。](https://image.slidesharecdn.com/esfwjxtrpc0jjt3q6dcc-signature-6005270a393641d79a3ff9525981f10cef9ac7bb6a1cf0aaa2cd6f6cd24ac790-poli-150724074213-lva1-app6891/85/20150725-20-320.jpg)
![変数と繰り返しでまとめる
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 (繰り返し変数の設定; 繰り返し継続の条件; 繰り返し変数の更新) {
繰り返し実行する命令
}
• 最初に、繰り返し変数の設定をします。
• 以下を繰り返します。
• 繰り返し継続の条件が成り立っているか調べます。
• 成り立っていれば、{ } 内を実行して、繰り返し変数を更新します。
• 成り立っていなければ、繰り返しを終了します。](https://image.slidesharecdn.com/esfwjxtrpc0jjt3q6dcc-signature-6005270a393641d79a3ff9525981f10cef9ac7bb6a1cf0aaa2cd6f6cd24ac790-poli-150724074213-lva1-app6891/85/20150725-21-320.jpg)
![ランダムな値（乱数）
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を生成する関数
上の例では、正方形の色相、彩度、左上隅の位置に乱数を使い、微妙な違いを出し
ています。](https://image.slidesharecdn.com/esfwjxtrpc0jjt3q6dcc-signature-6005270a393641d79a3ff9525981f10cef9ac7bb6a1cf0aaa2cd6f6cd24ac790-poli-150724074213-lva1-app6891/85/20150725-26-320.jpg)
![マウスの位置を取得する
void draw() {
fill(random(0, 100), random(50, 100), random(80, 100));
ellipse(mouseX, mouseY, 5, 5);
}
[ポイント]
mouseX, mouseYという変数に、自動的に現在のマウスポインタの位置が保存され
ます。
• これらの変数は宣言しなくても使えます。
• 大文字と小文字の区別に注意しましょう。](https://image.slidesharecdn.com/esfwjxtrpc0jjt3q6dcc-signature-6005270a393641d79a3ff9525981f10cef9ac7bb6a1cf0aaa2cd6f6cd24ac790-poli-150724074213-lva1-app6891/85/20150725-31-320.jpg)
![直前のマウスの位置を取得する
void draw() {
fill(random(0, 100), random(50, 100), random(80, 100));
ellipse(mouseX, mouseY,
mouseX - pmouseX, mouseY - pmouseY);
}
[ポイント]
pmouseX, pmouseY という変数に、直前のマウスの位置が保存されています。
• これらの変数も、宣言しなくても使えます。
• 上の例では、楕円の幅と高さを、現在のマウスの位置と直前のマウスの位置の差
にしていますね。だから、マウスの移動距離に応じて楕円の大きさが変わったの
です。](https://image.slidesharecdn.com/esfwjxtrpc0jjt3q6dcc-signature-6005270a393641d79a3ff9525981f10cef9ac7bb6a1cf0aaa2cd6f6cd24ac790-poli-150724074213-lva1-app6891/85/20150725-33-320.jpg)
![変数宣言の位置に注意!
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()が実行される
たびに作り直されます（値が毎回壊れます）
• 使い分けが必要です](https://image.slidesharecdn.com/esfwjxtrpc0jjt3q6dcc-signature-6005270a393641d79a3ff9525981f10cef9ac7bb6a1cf0aaa2cd6f6cd24ac790-poli-150724074213-lva1-app6891/85/20150725-35-320.jpg)
Uploaded byTakeo Kunishima
20150725 オープンキャンパス資料
2015年7月25日、岡山県立大学オープンキャンパスにおける体験講義で用いた資料。http://www.slideshare.net/kunishi/20120723 を部分的に改定したもので、内容はほぼ同じである。
More Related Content
![[CE94] 高等学校での「プログラミング」教育の導入– PEN を用いて (発表資料)](https://cdn.slidesharecdn.com/ss_thumbnails/ce94-130128015048-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
20150725 オープンキャンパス資料
- 1.
- 2. 今日の内容 • プログラミング言語 Processingによるアニメー ション作成 • 画面上で •図形が動く • マウスに合わせて図形が反応 して動く • etc. • いわゆる「アニメ」ではありま せん • アニメーションを通してプ ログラミングの体験をして もらう
- 3. 参考資料 • Processing公式サイト http://www.processing.org/ •Processing入門講座 http://ap.kakoku.net/ • 書籍 • 「Processingをはじめよう」（オライリー・ジャパン） • 「Built with Processing デザイン/アートのためのプログラミング入門」 （BNN）
- 4.
- 5.
- 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) [プログラムを書く時の注意点] • かな漢字変換がオフになっていることを確認しましょう（特に空白文字に注 意!） • 大文字と小文字を間違えないように（間違うとプログラムは動きません） • セミコロンをつけ忘れないように
- 7.
- 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))
- 12. 図形を描く関数 課題5. 下の図は、横方向480, 縦方向120の描画ウインドウに、 以下の2つの図形を描いています。このプログラムを作ってみ てください。 •左上隅 (160, 30), 横幅260, 縦幅20の長方形 • 中心が (140, 0), 半径が190の円 https://gist.github.com/kunishi/7996f7d50e511e3358d9
- 13. 色についての予備知識 • 色の種類 • 有彩色…色味のある色（赤、青、黄など） •無彩色…色味のない色（白、灰色、黒） • 色を数値で表現する方法 • グレイスケール：無彩色の表現。0が黒、数値が大きいほど白 • RGB：赤(R), 青(B), 緑(G)に色を分解して、その濃さで表現 • HSB：色相（H）、彩度（S）、明度（B）という成分で表現
- 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() • 図形の塗りつぶしをしない（＝輪郭線だけを描く）
- 16.
- 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
- 18.
- 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 (繰り返し変数の設定; 繰り返し継続の条件; 繰り返し変数の更新) { 繰り返し実行する命令 } • 最初に、繰り返し変数の設定をします。 • 以下を繰り返します。 • 繰り返し継続の条件が成り立っているか調べます。 • 成り立っていれば、{ } 内を実行して、繰り返し変数を更新します。 • 成り立っていなければ、繰り返しを終了します。
- 22.
- 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) … … …
- 24. プログラミングを知っている方向け for文以外にも、次のような文が用意されています。 • if (条件){ 条件が成立するとき実行 } • if (条件) { 条件が成立するとき実行 } else { 条件が成立しないとき実行 } • while (繰り返し継続条件) { 繰り返し処理 } • ++演算子 i++; // i = i + 1と同じ意味
- 25.
- 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を生成する関数 上の例では、正方形の色相、彩度、左上隅の位置に乱数を使い、微妙な違いを出し ています。
- 27.
- 28.
- 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つの関数を自作してい るのです。
- 30.
- 31. マウスの位置を取得する void draw() { fill(random(0,100), random(50, 100), random(80, 100)); ellipse(mouseX, mouseY, 5, 5); } [ポイント] mouseX, mouseYという変数に、自動的に現在のマウスポインタの位置が保存され ます。 • これらの変数は宣言しなくても使えます。 • 大文字と小文字の区別に注意しましょう。
- 32.
- 33. 直前のマウスの位置を取得する void draw() { fill(random(0,100), random(50, 100), random(80, 100)); ellipse(mouseX, mouseY, mouseX - pmouseX, mouseY - pmouseY); } [ポイント] pmouseX, pmouseY という変数に、直前のマウスの位置が保存されています。 • これらの変数も、宣言しなくても使えます。 • 上の例では、楕円の幅と高さを、現在のマウスの位置と直前のマウスの位置の差 にしていますね。だから、マウスの移動距離に応じて楕円の大きさが変わったの です。
- 34.
- 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()が実行される たびに作り直されます（値が毎回壊れます） • 使い分けが必要です
- 36. 自由にアニメーションを作ってみよう • ここまでで、Processingによるプログラミングについて、基本 的なことをひと通りお話しました。 • 残りの時間は、自由にアニメーションを作ってみてください。 •いろんな図形を使ってみる、とか • 色の変化をプログラムで作ってみる、とか • 繰り返し文とアニメーションを組み合わせる、とか • etc.
Editor's Notes
- #13 答は例3-10。File > Examples > Books > Getting Started > Chapter03 > Ex_03_10