第１回　プログラミングの基礎を復習
　
　  　　
１ はじめに
 
・この授業（演習）について
　- この授業は Processing と Java を用いてプログラミングを学びます。
　- Processingでは構造化プログラミング（繰り返し，条件分岐など）の復習
　- Javaではオブジェクト指向プログラミング（クラス，クラスの継承など）の学修

・プログラミングの環境について
　- この授業は Processing と Java の開発・実行環境が必要です。
　- 自分のパソコンに Processing をインストールしてください。
　- Java はインストールして環境を用意するか、paiza.io などのWebで利用できる環境でもOKです。
　　
  　　
２ Processingの準備
 
・Processingとは
　- Processingは、基本的に Javaの仕様 で簡単に利用できる（基本的に文法はJava）
　- 視覚的なフィードバック(グラフィックス)が容易に得られるプログラミング言語・統合開発環境
　- プログラミングを勉強するのに適している、おすすめです
　- 無料で使えます

・ Processingの環境を用意する
　- 自分のPCで行う場合は Processing をインストールしてください

・ Processingのインストール
　- ここからダウンロード -->　https://processing.org
　　Windows, Mac, Linux は自分の環境に合わせる
　　
　 　※お金は払う必要はありません

　- ダウンロードした *.zip ファイルの中にあるフォルダ「processing-4.0**」をまるごと
　　どこかに解凍して、その中の「processing.exe」を起動すればOK


・ 以下、図と同じように打ち込んで実行してみなさい
　- 左上の（▶）を押すと実行
　- コンソールに表示されればOK
　
　　
  - print(); //改行なしでコンソールに表示
  - println(); //改行ありでコンソールに表示
　　

３ Processingの基本
 
・言語仕様
　- 基本は Java
　- Javaの文法に加え、Processing独自（グラフィックス、3DCG描画、マウス操作など）の機能が追加されている

・プログラムの実行
　　

・ Processingの座標系
　　

・ サンプルプログラム
  - 以下のプログラムを打ち込んで実行してみなさい
size( 400, 400 );
background(255);
 
ellipse( 200, 200, 100, 100 );
  
  - size(400,400); //ウィンドウサイズを400x400 にする
  - background(255); //背景を白色にする
  - ellipse(200,200,100,100); //円を描画する
　
 
  　　
４ 基本図形を描く
 
・ 点を打つ
size( 400, 400 );
point( 200, 200 ); // (200,200)に点を打つ

・ 直線を描く 　
size( 400, 400 );
line( 20, 380, 380, 20 ); // 点(20,380)と点(380,20)を結ぶ直線を描く

・ 三角形を描く　　
size( 400, 400 );
triangle( 20,20,90,50,60,100 ); // (20,20)と(90,50)と(60,100)を頂点とする三角形

・ 四角形を描く
size( 400, 400 );
quad( 30,20, 100,50, 70,100, 20,80 ); // (30,20)、(100,50)・・・を頂点とする四角形

・ 長方形を描く
size( 400, 400 );
rect( 20, 40, 200, 100 ); // rect( 左上のx座標、y座標、幅、高さ );

・ 楕円を描く
size( 400, 400 );
ellipse( 200, 200, 300, 100 ); // ellipse( 中心のx座標、y座標、幅、高さ );

・ 扇形を描く
size( 400, 400 );
arc( 200, 200, 300, 300, PI/2, 3*PI/2 );
// arc( 中心のx座標、y座標、幅、高さ、始点の角度、終点の角度 );
// 角度はラジアン度数を用いる、PIは円周率

・滑らかな線で描く
size( 480, 120 );
noSmooth(); // 通常の描画、線がギザギザになる
ellipse( 160, 60, 100, 100 ); // 左側に円を描画
smooth(); // 線が滑らかになる
ellipse( 300, 60, 100, 100 ); // 右側に円を描画

・ 線の太さを指定する
size( 480, 120 );
smooth();
strokeWeight(1); // 線の太さを1にする
rect( 40, 30, 70, 70 ); // 長方形
strokeWeight(2);
rect( 118, 30, 70, 70 );
strokeWeight(4);
rect( 198, 30, 70, 70 );
strokeWeight(8);　// 線の太さを８にする
rect( 280, 30, 70, 70 );
strokeWeight(12);
rect( 365, 30, 70, 70 );

・ 画面の背景色を指定
size( 400, 400 );
background(255); // 背景を白色にする　（0:黒）・・・（128:グレー）・・・（255:白）

・ 図形の内部を塗りつぶす or 塗りつぶさない
size( 320, 120 );
background( 255 );
fill(255); // 白色で内部を塗りつぶす
rect( 20, 10, 140, 100 ); // 長方形
noFill(); // 内部を塗りつぶさない
rect( 170, 10, 140, 100 ); // 長方形

・ 外形線を描かない（塗りつぶしのみ）
size( 180, 120 );
background( 255 );
noStroke(); // 外形線を描画しない
fill(200); // 灰色で内部を塗りつぶす
rect( 10, 10, 70, 100 ); // 長方形
stroke(0); // 外形線を描画する(引数は色情報)
rect( 100, 10, 70, 100 ); // 長方形

・ 任意の色指定
　　　任意の色は３つのパラメータR（赤色）、G（緑 色）、B（青色）の成分を 0～255 で指定します。
　　　RGB値はProcessingのツール「Color Selector」で調べることができます。
size( 480, 120 );
background( 0, 100, 200 ); // 背景を light blue　に
fill( 255, 0, 0 ); // 塗りつぶしを 赤色 にする
rect( 25, 10, 100, 100 );
fill( 0, 255, 0 ); // 塗りつぶしを 緑色 にする
rect( 135, 10, 100, 100 );
fill( 0, 0, 255 ); // 塗りつぶしを 青色 にする
rect( 245, 10, 100, 100 );
fill( 100, 100, 100 ); // 塗りつぶしを 灰色 にする
rect( 355, 10, 100, 100 );
　


５ 主な変数
 
変数はJavaと同じ

　・ char, int, float, double, String, color, boolean

・ int型、float型
  int x = 3; int y = 6;
  float z = 2.83;

  println( "x+y=" + (x+y)  );
  println( "z*1.08=" + z*1.08 );

・ char型、boolean型
  boolean b = true; // or false
  char res;

  if( b==false ){ res = 'N'; }else{ res = 'Y'; }
  println( "answer=" + res );

・ String型（文字列を扱う）
  String s1 = "Good "; String s2 = "Morning.";

  println( ">> " + s1 + s2  );

・ color型（色情報を扱う）
  color c1, c2;

  size( 400, 400 );
  background( 255 );
  c1 = color( 255, 0, 0); // 赤色の指定
  c2 = color( 255, 255, 0, 128 ); // 黄色で半透明（４個目はα値）
  fill( c1 );
  ellipse( 150, 150, 200, 200 ); // 左上の○
  fill( c2 );
  rect( 160, 160, 180, 180 ); // 右下の□
　
 
  　　
６ setup( ) 関数
 
Processingは関数（メソッド）を使うことができる
その中でも setup() と draw() は特別な関数として実装される

setup()関数は、プログラムが実行されたときに一番最初に一回だけ実行される
プログラムの初期化はここに記述する

int x;

void setup()
{
  x = 0;
  println("Initialization\n"); 
}
　

　- 「関数」　・・・　処理をひとまとめにしたもの
　- 「メソッド」　・・・　関数とほぼ同じだが，主にオブジェクト指向プログラムでの名称


７ 単純な繰り返し
 
・単純な繰り返しの処理

・ for文
　
　　for( 初期化； 条件； 更新式 ){ 処理 }
　　　- 初期化 ・・・ ループの最初に実行される
　　　- 条件 ・・・ ここに指定されている条件が満たされている間、繰り返す
　　　- 更新式 ・・・ １回の処理ごとに更新する式

　　　i++;はiを１増やす、i--;はiを１減らす、の意味（Pythonでは使えない処理）

・ 0から9まで、1から10までの数字をコンソールに表示する
for(int i=0;i<10;i++){ // iが0,1,2,・・・,9まで繰り返す
  print(" " + i);
}
print("\n");
for(int i=1;i<=10;i++){ // iが1,2,3,・・・,10まで繰り返す
  print(" " + i);
}
　
・ 10から1までの数字をコンソールに表示する
for(int i=10;i>0;i--){ // iが10,9,8,・・・,1まで繰り返す
  print(" " + i);
}
　
・ 0から10まで偶数の数字を表示する(その１）
for(int i=0;i<=10;i=i+2){ // iが0,2,4,・・・,10まで繰り返す
  print(" " + i);
}
　
・ 0から10まで偶数の数字を表示する(その２）
for(int i=0;i<=5;i++){ // iが0,1,2,・・・,5まで繰り返す
  print(" " + i*2);
}
　
・ 〇を５個表示する（その１）
size(400,400);
background(255);

ellipse( 0, 200, 20, 20 );
ellipse(100,200, 20, 20 );
ellipse(200, 200, 20, 20 );
ellipse(300, 200, 20, 20 );
ellipse(400, 200, 20, 20 );
　
・ 〇を５個表示する（その２）
size(400,400);
background(255);

for(int i=0;i<5;i++){ // iが0,1,2,・・・,4まで繰り返す
  ellipse(100*i, 200, 20, 20 );
}
　


 演習
 
　　演習のページへ