pp2018-pp4base

Size: px

Start display at page:

Download "pp2018-pp4base"

たみえなぐも
5 years ago
Views:

1 プログラミング入門 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

2 前回の復習命令 ( メソッド ) 命令をまとめて新たな命令を作る命令の記述例命令の名前 ( データ 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

値が変化するので座標も変化する変数は次回詳しく 10 void setup(){ size(256, 256); nostroke(); framerate(30); fill(mousex, 0, 0); ellipse(mousex, mousey, 50, 50); 1.

3 プログラムを構造にするマウスポインタの位置命令を並べて命令を作る 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)を

speed); fadeの命令を作る void fade(){ fill(255, 255, 255, 5); rect(0, 0, width, height); 自分で名前を付けた命令(fade)を作る int ct = 0; 3.

動きのあるプログラム2 14 int count = 0; void setup(){ size(360,360); framerate(30); void setup(){ size(400,400); nofill(); ct = (ct + 1) %

4 構造を理解する 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. フェードアウト(一部) 動きのあるプログラム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, *sin(radians(ct)), *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); 動きのあるプログラム3 16

5 プログラムの提出 ( 演習点 ) 動きのあるプログラムを作ってみよう! のどれかを改良したものを提出 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

6 フォルダの作成 ( 初回のみ実施 )(1/4) ツールバーの中のフォルダのアイコンをクリックフォルダの作成 ( 初回のみ実施 )(2/4) 右側のピクチャのアイコンをクリックし新しいフォルダーのアイコンをクリックフォルダの作成 ( 初回のみ実施 )(3/4) 新しいフォルダーが作成されるフォルダの作成 ( 初回のみ実施 )(4/4) フォルダの名前をプログラミング入門に変更する 23 24

7 画像ファイルの保存方法 (1/6) ここに入力して検索に Snipping Tool と入力し起動 Sn ぐらいまで入力すると出てきますクリックして起動画像ファイルの保存方法 (2/6) モードから [ ウィンドウの領域切り取り ] を選択画像ファイルの保存方法 (3/6) [ 新規作成 ] をクリックし実行画面を選択してクリック画像ファイルの保存方法 (4/6) クリックした画像が選択される 27 28

8 画像ファイルの保存方法 5/6 画像ファイルの保存方法 6/6 [ファイル] [名前をつけて保存]を選択プログラミング入門のフォルダの下にプログラムと同じファイル名例 pp03p2 で保存 K s Lifeにログインしホーム画面の提出物最新情報からプログラミング入門のレポートページをクリックスクリーンショットの都合上情報ネットワーク特論という科目名になっていますがプログラミング入門という科目のレポートが届いています 31 32

9 レポートタイトルをクリック [提出レポート]にプログラム本体と画像ファイルの2つを提出 [コメント]に以下をコメントとして入力で書かれた内容を入力し提出 Processingのフォルダはプログラム本体画像ファイルともに[ファイルを選択]を左側の一覧の[PC]をクリックして[ドキュメント]をクリックリックし提出するファイルを選択画像はプログラムを選択した画面クし [Processing]というフォルダを選択提出するファイルの保存場所は次のページを参考に 35 36

10 プログラミング入門のフォルダは [PC]の[ピクチャ]をクリックし [プログラミング入門] ファイルがアップロードされたら名称にそれぞれ自分のというフォルダを選択学籍番号を記入必須コメントを記入なければ書かなくて良い [レポートを提出]ボタンを押して提出完了 39 40

pp2018-pp9base

pp2018-pp9base プログラミング入門 Processing プログラミング第 9 回九州産業大学理工学部情報科学科神屋郁子 ( pp@is.kyusan-u.ac.jp ) 時限クラス水 1 機械 ( クラス 3) 水 2 機械 ( クラス 1) 水 4 電気 (B1 B2) 後ろ 5 列は着席禁止 3 人掛けの中央は着席禁止今後の予定第 9 回 : 複数の図形 (2) 繰り返しと座標変換第回 : 画像の表示と音の再生