プログラミング入門 Processing プログラミング第 4 回 九州産業大学理工学部情報科学科神屋郁子 ( pp@is.kyusan-u.ac.jp ) 時限 クラス 水 1 機械 ( クラス 3) 水 2 機械 ( クラス 1) 水 4 電気 (B1 B2) 後ろ 5 列は着席禁止 3 人掛けの中央は着席禁止 第 4 回の内容 前回の質問への回答 マウスの操作と図形の描画 : メソッド 小テスト 2 前回の質問から (1/2) 前回の質問から (2/2) lineの使い方 line(x1, y1, x2, y2); 例 line(10,20,30,40); (10,20) と (30,40) の間に線を引く 図形を傾けるには rotateを調べる (9 週に扱います ) 曲線 bezier を調べる 4 点のx,y 座標のデータ 例 bezier(85, 20, 10, 10, 90, 90, 15, 80); 半円 arc(x, y, 幅, 高さ, 開始角度, 終了角度 ); 例 arc(50, 55, 50, 50, 0, HALF_PI); 3 rect と quad の違い どちらも 4 角形ですが rect は線が水平と垂直 triangle や quad の数値 リファレンスを見てください ( まず調べよう ) 人によって進度や難易度が違うので全体には詳しく説明しません 遠慮なく個別で 質問してください x,y 座標のペアが triangle( 三角形 ) だと 3 つ quad( 四角形 ) だと 4 つ 背景色 background( 赤, 緑, 青 ); 背景を 2 色に background は 単色 または 画像 単色以外は 画像を使うと良い 画像は 10 週目に説明 4
前回の復習命令 ( メソッド ) 命令をまとめて新たな命令を作る 命令の記述 例 命令の名前 ( データ 1, データ 2, データ 3, ); size(360,360); rect(50,50,50,50); nostroke(); データの個数は命令によって違う データがない場合もある 命令の名前 (); の形 自動販売機のところに行くコインを入れるジュースを選ぶジュースを取り出す ジュースを買う まとめてジュースを買うという命令を作りたい 5 6 命令を作る 動きのあるプログラム : 構造を作る 命令を作るときの書き方 void 命令の名前 () { 文 1; 文 2; 実行する処理文 3; 7 setup と draw という命令を作る 前回の書き方 実行したい処理 ( 設定や描画の命令を並べた ) 今回の書き方 void setup { 最初に一度実行したい処理 ( 初期設定 ) void draw { 繰り返し実行したい処理 ( 描画 ) 8
プログラムを構造にする マウスポインタの位置 命令を並べて命令を作る void setup(){ 最初に 1 度実行したい処理 ( 初期設定 ) 繰り返し実行したい処理 ( 描画 ) setup と draw という命令の名前は決まっている setup と draw という 2 つの命令を作ることで動きのあるプログラムを作ることができる 9 ellipse(0, 0, 50, 50); 数値はすべて 0 や 50 という数値 座標は変化しない ellipse(mousex, mousey, 50, 50); mousex や mousey は 現在のマウスの座標が数値として格納されている変数 値が変化するので座標も変化する 変数は次回詳しく 10 void setup(){ size(256, 256); nostroke(); framerate(30); fill(mousex, 0, 0); ellipse(mousex, mousey, 50, 50); 1. 動きのあるプログラム 1 マウス操作で画像を描く 命令 ( メソッド ) をつくる / つかう Processing で用意されている命令をつかう size(360, 360); rect(50, 50, 50, 50); Processing で決められている命令をつくる Processing が実行時にその命令を勝手に使う void setup() { void draw() { 自分で命令をつくり つかう void fade() { fade(); 11 12
構造を理解する fade(); fadeの命令を使う void setup(){ 最初に１度実行したい処理 初期設定 setupとdrawという 命令の名前は 決まっている fade(); 繰り返し実行したい処理 描画 自分で名前を付けた 命令(fade)を 描画の処理の中で使う void fade(){ fill(mousex, 99, 99); float speed = dist(mousex, mousey, pmousex, pmousey); ellipse(mousex, mousey, speed, speed); fadeの命令を作る void fade(){ fill(255, 255, 255, 5); rect(0, 0, width, height); 自分で名前を付けた 命令(fade)を作る int ct = 0; 3. フェードアウト(一部) 13 5. 動きのあるプログラム2 14 int count = 0; void setup(){ size(360,360); framerate(30); void setup(){ size(400,400); nofill(); ct = (ct + 1) % 360; stroke(255, 0, 0); line(180, 180, 180 + 180*sin(radians(ct)), 180+180*cos(radians(ct))); for文で複数の円を描く 繰り返し background(0); count++; for(int i = 0; i < 20; i++){ stroke(0, (((i+count) * 20) % 250),0); ellipse(200,200,20*i, 20*i); 15 5. 動きのあるプログラム3 16
プログラムの提出 ( 演習点 ) 動きのあるプログラムを作ってみよう! 1 3 5 7 のどれかを改良したものを提出 K s Life のレポート機能から 締め切りは 6 日後の 23:59 それ以降も受け取るが減点する もっと改良したくてもこの時間に一度提出しよう ( 削除して提出しなおし可能 ) 評価は K s Life 上ではしない 17 提出する内容 以下をコメントとして入力 今回の内容の概要 (1,3,5,7 のどれを改良したか ) 工夫した点 ( どのように改良したか ) 質問 ( 何かあれば ) 感想 ( 簡単だった 難しかったなど ) 入らない場合は 3 つ目の提出ファイルとして追加してもよい 提出ファイルとして以下の 2 つ プログラム (*.pde) 実行画像 (PNG または JPG) 提出ファイルの名称にはそれぞれ学籍番号を入力 18 プログラミング入門で提出するレポート 講義で指定された内容のファイルを提出 作成したプログラム本体 (.pde ファイル ) プログラムは問題ごとに保存しておく プログラムを実行した際の画像 (.png ファイル ) 画像は 提出するプログラムのみスクリーンショットを撮って保存する K s Life で提出 画像ファイルの保存方法 19 20
フォルダの作成 ( 初回のみ実施 )(1/4) ツールバーの中の フォルダ のアイコンをクリック フォルダの作成 ( 初回のみ実施 )(2/4) 右側の ピクチャ のアイコンをクリックし 新しいフォルダー のアイコンをクリック 21 22 フォルダの作成 ( 初回のみ実施 )(3/4) 新しいフォルダーが作成される フォルダの作成 ( 初回のみ実施 )(4/4) フォルダの名前を プログラミング入門 に変更する 23 24
画像ファイルの保存方法 (1/6) ここに入力して検索 に Snipping Tool と入力し起動 Sn ぐらいまで入力すると出てきます クリックして起動 画像ファイルの保存方法 (2/6) モードから [ ウィンドウの領域切り取り ] を選択 25 26 画像ファイルの保存方法 (3/6) [ 新規作成 ] をクリックし 実行画面を選択してクリック 画像ファイルの保存方法 (4/6) クリックした画像が選択される 27 28
画像ファイルの保存方法 5/6 画像ファイルの保存方法 6/6 [ファイル] [名前をつけて保存]を選択 プログラミング入門のフォルダの下に プログラムと同じ ファイル名 例 pp03p2 で保存 29 30 K s Lifeにログインし ホーム画面の提出物最新情報から プログラミング入門のレポートページをクリック スクリーンショットの都合上 情報 ネットワーク特論 という科目名に なっていますが プログラミング入 門 という科目のレポートが届いてい ます 31 32
レポートタイトルをクリック [提出レポート]にプログラム本体と画像ファイルの2つを 提出 [コメント]に 以下をコメントとして入力 で書か れた内容を入力し 提出 33 34 Processingのフォルダは プログラム本体 画像ファイルともに[ファイルを選択]を 左側の一覧の[PC]をクリックして[ドキュメント]をクリッ クリックし 提出するファイルを選択 画像はプログラム を選択した画面 クし [Processing]というフォルダを選択 提出するファイルの保存場所は 次のページを参考に 35 36
プログラミング入門のフォルダは [PC]の[ピクチャ]をクリックし [プログラミング入門] ファイルがアップロードされたら 名称にそれぞれ自分の というフォルダを選択 学籍番号を記入 必須 37 38 コメントを記入 なければ書かなくて良い [レポートを提出]ボタンを押して提出完了 39 40