mmm2


第2回 Processingの基本操作2 簡単なアニメーション(10月11日)



*TAの紹介 


*出席確認

<出席確認メール> 添付ファイルなし 受付:本日14:30〜16:15

本日のキーワードは授業中に連絡します。


宛先:miwamoto[at]riko.shimane-u.ac.jp

件名:MMM2 20161011

本文: 学生番号 名前 「本日のキーワード」



Processingでできること

work(Z:)フォルダの「マルチメディア数学II」のフォルダにある「sample1」「sample2」「sample3」ファルダをそれぞれホームディレクトリにコピーして、それぞれ.pdeファイル(sample1.pdeなど)を開いて実行してみよう。


練習1 sample1.pdeを開き、実行せよ。ウィンドウのサイズを変更するところはどこか探してみよ。

練習2 sample2.pdeを開き、実行せよ。マウスについて動く円の色を変更するところはどこか探して、に変更してみよ。

練習3 sample3.pdeを開き、実行せよ。島根県をピンク色に塗るにはどこを変更すれば良いか探してみよ。


プログラミングの基礎

 プログラミングの基本的なことを復習しよう。Processingに限らず、BasicやC言語、Javaでも基本は同じである。

プログラミングの基礎へ


練習4 新しいファイルを作り、for文を使って、下図のような絵を描いてみよ

「20161011-1」と名前をつけて「保存」しておくこと。



注意:数学の記号の使い方

sinやcosはそのまま使える。角度はラジアン。円周率πは、大文字でPIとかく。

使い方の例:sin(PI/2);


練習5 練習4の円の輪郭の太さを変更せよ。


輪郭を描画しない

noStroke()

輪郭を描きたくない場合は、noStroke();と命令する。括弧の中には何も入れない。

図形の中を塗りつぶさない

noFill()

内部を塗りつぶしたくない場合は、noFill();と命令する。括弧の中には何も入れない



練習6 練習5を下図のような絵になるように変更せよ。



アルファチャンネル  0 ~ 255の整数値で不透明度を決める

色の指定には、アルファチャンネルと呼ばれる「不透明度」を意味する数値を入れることも可能である。使い方は、グレースケールやRGBカラーの値のあとにもう一つ値を付け加えれば良い。

使い方の例・グレースケール:fill(255,100);

使い方の例・RGBカラー:fill(255,0,0,100);


練習7 練習6を、下図のような絵になるように変更せよ。



練習8 新しいファイルを作成し、例えば下図のようなクマの絵をかけ。(全く同じである必要はない。自身の絵心、力量で良い。)下図の茶色はRGBで(210,90,20)を使っている。

「20161004-2」と名前をつけて「保存」しておくこと。





文字を書く


文字を描画

text("文字列", x, y)

文字を画面に出力するには、text関数をつかう。座標(x,y)の位置に文字が書かれる。

文字サイズの指定

textSize(サイズ)

文字のサイズを指定するには、textSize関数をつかう。文字の色は、図形の塗りつぶしと同じく、fill関数をつかう。



入力例(最後の2行が描く部分の位置を確認せよ。)

size(400,200);

textSize(36);

background(255);

fill(0,0,255);

text("Hello, world!", 20, 100);

line(20,100,150,100);


練習9 練習8(または練習7)のプログラムを変更し、自分の学生番号と名前(ローマ字)を画面に出力せよ。



print と println について(補足)



【重要】Processing特有の関数(setupとdraw)

 Processingには、setup()とdraw()という特徴的な関数が用意されている。setup()関数の中に書かれた内容は最初に1回だけ実行される。一方、draw()関数の中に書かれた内容は、プログラムが停止されるまでずっと繰り返し実行される。

 draw()に書かれた内容が実行される各回をフレーム(frame)と呼び、デフォルトの設定では1秒間に60フレーム(60回)実行される。


練習10 新しいファイルに次のソースを書いて実行してみよ。(setup()関数の動作確認)

「20161004-3」と名前をつけて「保存」しておくこと。


void setup()                       

{                                          

    println("setup");           

}                                         


練習11 練習10のファイルを書き換えて(練習10のところをコメントアウトせよ)、次のソースを書いて実行してみよ。(draw()関数の動作確認)


void draw()

{

    println("draw " + frameCount);

}


フレームレートの指定

frameRate(回数)

draw()を実行する速度は自由に設定することができる。例えば、1秒間に10回だけdraw()を実行したい場合は、setup()関数の中にframeRate(10);をかく。


練習12 1秒間に10回draw()を実行するように、練習11のファイルを書き換えよ。


練習13 練習12のファイルを書き換えて、次のプログラムをかけ。

(不要な部分は削除せずにコメントアウトせよ)


void setup()

{

    size(400, 200);

    frameRate(10);

}


void draw()

{

     line(mouseX, 0, mouseX, 200);

}


*mouseXは、マウスの位置のx座標を取得する関数である。(mouseYは、マウスの位置のy座標を取得できる)


Processingのプログラムの構成

 練習13のように、Processingのプログラムは、setup()関数とdraw()関数で構成される。まずはじめに、setup()関数の中に、初期条件を入れ、その後時間発展していく部分をdraw()の中にかく。もしsetup()とdraw()の両方で使いたい変数がある場合は、プログラムの一番はじめ(setup()の中にもdraw()の中にも入れない)に宣言する(グローバル変数と呼ばれる)。


fig2-1




ボールを動かす

 通常、アニメーションを表示するには、for文などの繰り返し命令を使うが、Processingの場合draw()関数が既に繰り返し関数になっているため、アニメーションのためのfor文は不要である。


アンチエイリアシング
(なめらかさ)

smooth()

図形の輪郭を描画した時などに、smooth()関数をsetup()関数の中にかいておくと、輪郭がなめらかになる。

乱数の発生

random(low, high)

ランダムな数字を使いたい場合は、Random関数をつかう。指定した範囲(low <= x <= high)の乱数を発生させる。発生する乱数はfloat型(実数値)であるので注意。


練習14 配布されたプログラムコードball.pdeを変更して、ボールにビリヤードのような動きをさせるようプログラムせよ。


複数のボールを動かす

 100個のボールを同時に動かそうとすると、100個分の変数を用意するのは大変である。このような場合、配列を使う。

配列の宣言

「float型の値を5つ入れるための配列xを用意する」

float x[] = new float[5];


本日の課題 配布されたプログラムコードballs.pdeを変更して、

複数のボールがビリヤードのように動くプログラムを作成せよ。(オリジナリティがあれば、ビリヤードのようでなくても可)

・自分の学生番号と名前(ローマ字)を画面に出力せよ。

・新たに、「report1_学生番号」と名前をつけて保存せよ。



<レポート課題1> 添付ファイル report1_学生番号.pde

受付:本日14:30〜10月17日(月)23:59


本日の課題を完成させ、提出すること。


宛先:miwamoto[at]riko.shimane-u.ac.jp

件名:MMM2 report1

本文: 学生番号 名前 ファイル添付(report1_学生番号.pde)