第８回

  　　

０ 第８回～第12回は

 

・ プログラミングの基礎を学ぶ 　- プログラム作成の基礎を学ぶ 　- どのプログラミング言語でも必要な根本的な部分 　- Processingを使ってプログラムの作り方の基礎を学ぶ ・ 主な内容 　- プログラム作成の手順・方法 　- 変数 　- 計算 　- 繰り返し 　- 条件分岐 　- 乱数 　- グラフィックス（座標系、基本図形の描画、色の指定） 　- アニメーション 　- マウス操作

　　
　　   　　

１ Processingとは

 

・ Processingとは 　- Processingは、基本的に Javaの仕様・文法 でソースを作成する 　（基本的に文法はJavaだが、pythonも利用可） 　- Javaの文法に加え、Processing独自（グラフィックス、3DCG描画、マウス操作など）の機能が追加されている 　- 視覚的なフィードバック(グラフィックス)が容易に得られるプログラミング言語・統合開発環境 　- 初心者がプログラミングを勉強するのに適している、お勧め！ 　- 無料で使えます 　 ・ 自分のPCでもProcessingを利用できます 　- 自分のPCに Processing をインストールしましょう ・ Processingのインストール 　- ここからダウンロード -->　https://processing.org 　　Windows, Mac, Linux は自分の環境に合わせる 　　 　 　※お金を払う必要はありません 　- ダウンロードした *.zip ファイルの中にあるフォルダ「processing-4.*」をまるごとどこかに解凍する 　　「C:\Program Files」への解凍を推奨 　　「C:\Program Files\processing-4.*\」の中にある、実行ファイル「processing.exe」のショートカット 　　をデスクトップなどに作成しておくと、起動が簡単になる 　- Processingのアンインストールは、フォルダ「processing-4.*」をまるごと削除するだけです 　　レジストリへの書き込みはないので、削除も簡単です

　　

２ Processingを使ってみよう

 

・ Processingの起動 　- 以下の実行ファイル「processing.exe」をダブルクリックしてProcessingを起動する 　 ・ プログラムの実行と停止 　　   - 以下のプログラムを打ち込んで実行してみましょう 　 ＜円を描く＞ size( 400, 400 ); background(255);   ellipse( 200, 200, 40, 40 );      - size(400,400); //ウィンドウサイズを400x400 にする   - background(255); //背景を白色にする   - ellipse(200,200,40,40); //円を描画する ＜繰り返しを使って同心円を描画する例＞ 　 　 ・ エディタの文字サイズを変更するには　 　エディタの文字サイズを変更することができます。 　メニューの [ファイル] --> [設定...] で、下記の「エディタフォントサイズ」を適宜変更してください。

 
  　　

３ 基本図形を描く

 

・ Processingの座標系   - グラフィックスの座標系は以下のとおり、y軸の±方向に注意する　 　 ・ グラフィックウィンドウのサイズを指定する size( 600, 400 ); // 横幅600ピクセル、高さ400ピクセルのウィンドウ ・ 点を打つ 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は円周率 ＜演習１＞ 　下図を描画しなさい。 　　- 画面のサイズは 400x400 　　- 四角形(正方形)を描画して、次に円を描画する 　　- 円の半径は 100x√2 　 　 　 　解答例

４ 描く順序

 

記述されたプログラムは上から順番に実行されていきます。 その際、複数の図形が重なると先に描画されたものは上書きされます。 ・ 長方形の上に円 size( 480, 120 ); rect( 60, 20, 320, 60 ); // 長方形 ellipse( 380, 70, 80, 80 ); // 円 ・ 円の上に長方形 size( 480, 120 ); ellipse( 380, 70, 80, 80 ); // 円 rect( 60, 20, 320, 60 ); // 長方形

 

５ 属性の変更

 

・ 滑らかな線で描く size( 800, 400 ); strokeWeight(4); noSmooth(); // 通常の描画、線がギザギザになる ellipse( 200, 200, 350, 350 ); // 左側に円を描画 smooth(); // 線が滑らかになる ellipse( 600, 200, 350, 350 ); // 右側に円を描画 ・ 線の太さを指定する 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 ); ＜演習２＞ 　下図を描画しなさい。 　　- 画面のサイズは 400x400 　　- 線の太さは 8 　 　解答例

６ 色の指定

  　　

・ 色の指定 　　描画などの色は３つのパラメータ R（赤色）、G（緑色）、B（青色）の成分を 0～255 で指定します。 　　■ ( 0, 0, 0 )　　■ ( 255, 0, 0 )　　■ ( 0, 255, 0 )　　■ ( 0, 0, 255 ) 　　■ ( 255, 255, 0 )　　■ ( 0, 255, 255 )　　■ ( 255, 0, 255 )　　■ ( 255, 255, 255 ) 　　■ ( 255, 128, 0 )　　■ ( 128, 24, 160 )　　■ ( 60, 128, 32 )　　■ ( 128, 128, 128 )　　 　 ・ 画面の背景色を指定 size( 400, 400 ); background(255); // 背景を白色にする　　0:黒 ・・・ 128:グレー ・・・ 255:白 　　 ・ 図形の内部を塗りつぶす or 塗りつぶさない size( 320, 200 ); background( 192 ); fill(255); // 内部の塗りを白色にする rect( 20, 50, 140, 100 ); // 長方形（左側） noFill(); // 内部を塗りつぶさない rect( 170, 50, 140, 100 ); // 長方形（右側） 　 ・ 外形線(枠線、線分)の色を指定 size( 400, 400 ); background( 192 ); stroke(255, 0, 0); // 赤色 rect( 20, 20, 160, 160 ); // □を描画 stroke(0, 0, 255); // 青色 ellipse( 300, 100, 160, 160 ); // 〇を描画 stroke(255, 255, 0); // 黄色 line( 20, 220, 180, 380 ); // ＼を描画 stroke(0, 255, 0); // 緑色 line( 180, 220, 20, 380 ); // ／を描画 　 ・ 外形線(枠線)を描かない（塗りつぶしのみ） size( 320, 200 ); background( 192 ); fill(255); // 内部の塗りを白色にする rect( 20, 50, 140, 100 ); // 長方形（左側） noStroke(); // 外形線を描画しない rect( 170, 50, 140, 100 ); // 長方形（右側） 　　　 ・ 透明度の指定 　　　RGBに加えて、４つめのパラメータ追加して、透明度を指定できます。 　　　透明度はアルファ(α)値と呼ばれ、成分を 0(透明)～255(不透明) で指定します。 size( 480, 200 ); background( 224 ); noStroke(); // 枠線は描画しない fill( 0, 255, 0 ); // 緑色、α値の指定なし rect( 15, 80, 450, 40 ); // 横長の長方形 // 左から１番目 fill( 255, 0, 0, 255 ); // 赤色、α値＝255 rect( 25, 50, 100, 100 ); // 左から２番目 fill( 255, 0, 0, 128 ); // 赤色、α値＝128 rect( 135, 50, 100, 100 ); // 左から３番目 fill( 255, 0, 0, 64 ); // 赤色、α値＝64 rect( 245, 50, 100, 100 ); // 左から４番目 fill( 255, 0, 0, 16 ); // 赤色、α値＝16 rect( 355, 50, 100, 100 ); 　 ＜演習３＞ 　下図を描画しなさい。 　Windowのサイズは 400x400, ２個の円の中心座標は(0,0), (400,0)であり、 　円の直径は800である。(円は ellipse();で描画) 　色について、左は青、右は赤で α値=128 を設定する。 　 　 　解答例