Processing によるプログラミング入門 第1回

6,554
-1

Published on

Processing によるプログラミング入門の第 1 回目。研究室の勉強会で発表しました。
PowerPoint のファイルが欲しい場合は連絡をください。

[←前回] Kinect 入門 http://www.slideshare.net/Reputeless/kinect-20715686
[次回→] 第 2 回 http://www.slideshare.net/Reputeless/processing-2

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,554
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
52
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Processing によるプログラミング入門 第1回

  1. 1. 早稲田大学 基幹理工学部 表現工学科長研究室 B4 鈴木 遼21 May 2013
  2. 2. (講座の前に)準備と動作確認 http://processing.org/download/ からOS に応じた最新版をダウンロード processing を起動(ショートカットを作っておこう) と入力し、▶ ボタンをクリックsize(400,400);background(0,0,255);
  3. 3. (講座の前に)準備と動作確認
  4. 4. 今日やること Processing とプログラミングの基礎 簡単なことを 22 項目だけ覚えます
  5. 5. 今日やること C 言語の授業を覚えていなくても OK 新しい気持ちでメディアアートプログラミングの世界へ旅立とう
  6. 6. 今日やること 英語の勉強で言えばアルファベットを覚えるところ 文章を作れるようになるのはこれから
  7. 7. 1. Processingとは [1/4] Java というメジャーなプログラミング言語をシンプルにして、アートやビジュアルデザイン機能に特化させた言語とシステム 視覚的なフィードバックをすぐに得られる 基本文法は Java と同じなので、Java の勉強にもなる!
  8. 8. 1. Processingとは [2/4] デジタルアート・ビジュアルデザインhttp://www.openprocessing.org/
  9. 9. 1. Processingとは [3/4] 2001 年 MIT メディアラボの Casey Reasと Benjamin Fry が最初のバージョンを開発 Windows や Mac など様々なプラットフォームで動作 人気が上昇するにつれ、3D 描画や MIDI,Arduino, Kinect といった様々なシステムとの連携が拡張され、活用範囲が広がっている
  10. 10. 1. Processingとは [4/4] 国内でも多くの書籍
  11. 11. 2. 画面の説明 [1/2]ディスプレイウィンドウPDE (Processing DevelopmentEnvironment) ウィンドウ
  12. 12. 2. 画面の説明 [2/2]Run ボタンテキストエディタテキストエリア
  13. 13. プログラミング これの意味がなんとなく読み解けるなら、素質があります! さっぱりわからなくても、今日の講座でわかるようになりますsize(400,400);background(0,0,255);
  14. 14. 3. 整数リテラル 整数を書くと、それは整数リテラルと呼ばれる数値データになる100-50
  15. 15. 4. テキストエリア出力 [1/3] println() は ( ) の中のデータをテキストエリアに表示するprintln(xxx);テキストエリア
  16. 16. 4. テキストエリア出力 [2/3]println(100);
  17. 17. 4. テキストエリア出力 [3/3]println(100);println(50);
  18. 18. セミコロン 命令の終了を意味する 文章の句点と同じ「眠い 。」println(100);println(50);
  19. 19. 5. 計算 [1/6] 数値データは計算ができる 演算子 + 足し算, - 引き算, * 掛け算, / 割り算100+50100-50100*50100/50
  20. 20. 5. 計算 [2/6] 計算結果を表示println(100+50);println(100-50);println(100*50);println(100/50);
  21. 21. 5. 計算 [3/6] % 余り算println(13%5);println(111%50);
  22. 22. 5. 計算 [4/6] 計算は連続できるprintln(1+2+3+4+5);println(2*2*2*2);
  23. 23. 5. 計算 [5/6] 計算順序は算数と同じ 掛け算・割り算・余り算が優先 必要なら( )を使うprintln(2+3*5);println((2+3)*5);
  24. 24. 5. 計算 [6/6] 注意: 整数の割り算は小数以下切り捨てprintln(10/3);println(71/7);
  25. 25. 6. 型 型は、あるデータで扱える値と可能な計算を決める 整数リテラルは int 型 int 型 扱える値はおよそ -21 億~21億の整数 できる計算は + - * / % など
  26. 26. 7. 変数 [1/5] 名前の付いたデータ 型名 名前 = 初期値; 「int 型の変数 x を定義、初期値は 100」int x = 100;
  27. 27. 7. 変数 [2/5]int x = 100;println(x);println(x+10);println(x*x);
  28. 28. 7. 変数 [3/5] 名前が異なれば、変数をいくつでも作れるint x = 100;int y = 50;println(x+y);int a = 1, b = 2, c = 3;println(a+b+c);
  29. 29. 7. 変数 [4/5] 変数の値は 代入演算子= で変更できる 「x に新しい値を代入する」と言うint x = 100;println(x);x = 200;println(x);
  30. 30. 7. 変数 [5/5]int x = 100;println(x);x = x+5;println(x);
  31. 31. 8. 複合代入演算 [1/2] 複合代入演算子は計算と代入を同時に行うint x = 100;println(x);x += 5;println(x);x *= 2;println(x);
  32. 32. 8. 複合代入演算 [2/2] 結果は?int x = 10;x -= 2;x *= 5;println(x);x /= 4;println(x);
  33. 33. 9.インクリメントとデクリメント ++ 1 増やす、-- 1 減らすint x = 10;++x;++x;println(x);--x;println(x);
  34. 34. 10. 比較演算 [1/3] 数値の大小を比較する計算 等しい == 等しくない != 右辺未満 < 右辺以下 <= 右辺より大きい > 右辺以上 >=
  35. 35. 10. 比較演算 [2/3] 比較演算の結果は true か false 100<200 true 50==50 true 80>90 false 5!=5 false
  36. 36. 10. 比較演算 [3/3]int x = 100;println(x<150);println(x<=-50);println(x>150);println(x>=-50);
  37. 37. 11. forループ [1/3] 継続条件を満たす間 {} の中身を繰り返すfor(int i=0; i<3; ++i){println(i);}for(初期設定; 継続条件; ターン終了時にやること){何らかの処理;}
  38. 38. 11. forループ [2/3] [問題 1] 10から 0 までカウントダウン
  39. 39. 11. forループ [2/3] [問題 1] 10から 0 までカウントダウンfor(int i=10; i>=0; --i){println(i);}
  40. 40. 11. forループ [3/3] [問題 2] 0から 100 までの偶数を表示
  41. 41. 11. forループ [3/3] [問題 2] 0から 100 までの偶数を表示for(int i=0; i<=100; i+=2){println(i);}for(int i=0; i<=50; ++i){println(i*2);}
  42. 42. 復習50%ProcessingディスプレイウィンドウPDE ウインドウテキストエディタテキストエリア整数リテラルprintln();+ - * / %型int 型変数複合代入演算 += *= など++ --比較演算== != < <= > >=true falsefor ループ
  43. 43. 12. 画面サイズ [1/2] ディスプレイウィンドウのサイズを設定 w : 幅 h : 高さsize(w,h);幅高さ
  44. 44. 12. 画面サイズ [2/2]size(600,200);
  45. 45. 13. 画面背景 [1/3] 背景の色を設定 r : Red [0,255] g : Green [0,255] b : Blue [0,255]background(r,g,b);
  46. 46. 13. 画面背景 [2/3]size(600,400);background(0,0,0);
  47. 47. 13. 画面背景 [3/3] [問題] 背景を黄色にしよう
  48. 48. 13. 画面背景 [3/3] [問題] 背景を黄色にしようsize(600,400);background(255,255,0);
  49. 49. 画面の設定 本講座では、このサイズのウィンドウを使いますsize(600,400);
  50. 50. 14.画面の座標 size(600x400) の場合(0,0) (599,0)(0,399) (599,399)+ X+ Y
  51. 51. 15. 円を描く [1/2] 円を描く x : 中心の X 座標 y : 中心の Y 座標 w : 円の幅 h : 円の高さellipse(x,y,w,h);
  52. 52. 15. 円を描く [2/2]size(600,400);ellipse(300,200,200,200);
  53. 53. 16. 線を描く [1/2] 線を描く x1 : 始点の X 座標 y1 : 始点の Y 座標 x2 : 終点の X 座標 y2 : 終点の Y 座標line(x1,y1,x2,y2);
  54. 54. 16. 線を描く [2/2]size(600,400);line(0,100,300,200);
  55. 55. 17. 長方形を描く [1/2] 長方形を描く x : 左上の X 座標 y : 左上の Y 座標 w : 幅 h : 高さrect(x,y,w,h);
  56. 56. 17. 長方形を描く [2/2]size(600,400);rect(300,200,250,150);
  57. 57. 18. 枠を消す [1/2] これ以降は枠をつけないようにするnoStroke();
  58. 58. 18. 枠を消す [2/2]size(600,400);noStroke();rect(300,200,250,150);
  59. 59. 19. 枠をつける [1/2] これ以降は枠を描くようにする r, g, b : 枠の色stroke(r,g,b);
  60. 60. 19. 枠をつける [2/2]size(600,400);noStroke();ellipse(200,200,200,200);stroke(255,0,0);ellipse(400,200,200,200);
  61. 61. 20. 塗りつぶしの色を変える [1/2] 塗りつぶしの色を変える r, g, b : 塗りつぶしの色fill(r,g,b);
  62. 62. 20. 塗りつぶしの色を変える [2/2]size(600,400);fill(0,0,255);rect(300,200,250,150);
  63. 63. 21. 塗りつぶしをしない [1/2] これ以降は塗りつぶしをしないnoFill();
  64. 64. 21. 塗りつぶしをしない [2/2]size(600,400);noFill();rect(300,200,250,150);
  65. 65. 22. 透過 [1/2] r,g,b に続き、不透明度 a [0,255] を指定 255 は透過しない、0 は完全に透過fill(r,g,b,a);
  66. 66. 22. 透過 [2/2]size(600,400);rect(50,50,300,200);fill(0,0,255,100);rect(100,100,300,200);
  67. 67. Complete!size(x,y)background(r,g,b)画面の座標ellipse(x,y,w,h)line(x1,y1,x2,y2)rect(x,y,w,h)noStroke()stroke(r,g,b)fill(r,g,b)noFill()fill(r,g,b,a)100%
  68. 68. Practice [1/2] 円をたくさん表示size(600,400);for(int x=0; x<7; ++x){ellipse(x*100,200,100,100);}
  69. 69. Practice [2/2] 円をもっと表示size(600,400);for(int x=0; x<7; ++x){for(int y=0; y<5; ++y){ellipse(x*100,y*100,100,100);}}
  70. 70. Challenge 好きな色でグラデーションを作ろう
  71. 71. 補足|『ジェネラティブ・アート』 講座で紹介した Processing の本 「メディアアート表現論」授業の沖先生が翻訳 コンピュータ生成アートの醍醐味の紹介ジェネラティブ・アート- Processingによる実践ガイド
  72. 72. 補足| 公式リファレンス
  73. 73. 補足| 公式サンプル
  74. 74.  続きは再来週の第 2 回で!
  75. 75. Questions?@Reputeless

×