mmm2


第1回  Processingの基本操作1 簡単な図形(10月4日)



本講義の目的

 自然界で見られる様々な現象を理解するためには、数学的な考えや解析が有用であるが、現象が複雑であったり、導かれた数理モデルが解析困難である場合には、数値シミュレーションを用いて解析することが有用となる。本講義では、現象の「可視化」に重点を置き、現象を理解する手助けとなる数値シミュレーションの基本的な方法について学ぶこと目的とする。


授業の受け方

① 毎回出席をメールにより確認する。

② 各回の「練習」問題を各自で解き、授業の進行に合わせて理解度を各自確認する(わからないところは積極的にTAに聞くこと)。

③ 講義は聞きつつ、自分のペースでどんどん進めて良い。

④ 各回の最後にある「本日の課題」を各自で解き、その回の理解度を確認し、わからなかったところはよく復習する。 →レポート課題になる場合があるので指示に注意。

⑤ グループワークのときは、各自の役割分担を明確にし、協力して課題に取り組む。


評価基準 (個人ワーク50% グループワーク50%)

① 基本的なプログラミングができているか。

② セルオートマトンモデルを理解し、適切なプログラミングにより現象をシミュレーションできているか。

③ オイラー法による微分方程式のシミュレーションができているか。

④ ルンゲクッタ法による微分方程式のシミュレーションができているか。

*個人ワーク4回提出のうち3回以上提出しているもののみグループワークへ進む

(個人ワーク4回提出のうち2回以上提出できていない場合は未修扱いとします)

⑤ 課題を探求し、シミュレーションを効果的に使うことで、現象を深く理解しようと努力しているか。

⑥ 発表内容に詳しくない聴衆に配慮し、わかりやすいプレゼンテーションを行えたか。


<お知らせ>

武蔵野大学友枝明保准教授をお迎えして「渋滞学」に関するセミナーを開きます。どなたでも参加OKですので、時間のある人はぜひ聴きに来てください。

日時:10月11日(火)3,4時限 

場所:数理第2総合演習室(総理3号館6階)


*本日の出席確認*


Processingとは

 Casey ReasとBenjamin FryがMITメディアラボで開発した言語で、Javaをベースにした総合開発環境を含んだ言語である。Processingの特徴としては、インストールが簡単で、かつ直感的なイメージを表現できるプログラミングを学ぶ人のために開発された言語であること。

「とにかく手軽で、それでいて出来上がったプログラムを動かしたときの満足度は超一級」

ー谷尻かおり著「Processingによる画像処理とグラフィクス」より

それがProcessingである。簡単なプログラミングから始めて、3次元、webカメラ、画像処理、Androidプログラミングと各自で好きなことを実現できる。一方で、物理ライブラリを使って、物理現象を可視化するのも容易である。

 ProcessingはWindows, Mac OS X, Linux上で動作するオープンソースのプログラミング言語なので、各自のPCに簡単にインストールすることが可能である。インストール方法は簡単なので、いつでも手軽にプログラミングできる環境を整えてみてください。

自分のPCでProcessingを使いたい人へ


参考資料(各自でProcessingを勉強したい人は、どれか1冊をやってみると良いでしょう)

① Daniel Shiffman著 Morgan Kaufmann Publishers (Elsevier)

「LEARNING PRICESSING A Beginner’s Guide to Programming Images, Animation, adn Interaction」(pdfを無料で入手できる

*英語ですが、基本的なところからとても丁寧に書かれています。


② 三井和男著 森北出版

「デザイン言語Processing入門楽しく学ぶコンピュテーショナルデザイン」

*薄い本ですが、真似してプログラミングするだけで、いろいろできるようになります。きちんと勉強したい人は、他の本も使ったほうが良いです。


③ 田原淳一郎著 カットシステム

「Processingプログラミング入門Javaベースのオープンソース綜合開発環境」

*プログラミングの基本から書かれています。プログラミングやパソコンに興味はあるけど、何から始めたらわからない、という人には良いかも。


④ 谷尻かおり著 谷尻豊寿監修 カットシステム

「Processingによる画像処理とグラフィックス」

*簡単なプログラムから、Androidプログラミングまで書かれています。


⑤ ダニエル・シフマン著 尼岡利崇監修 ボーンデジタル

「Nature of Code Processingではじめる自然現象のシミュレーション」

*プログラミングの基本をある程度知っている人向け。

*ダニエル・シフマンのサイトでは、授業(英語)を無料で閲覧することが可能



Processingを始めよう!

*「アプリ」の中の「Processing」で右クリック

*「ファイルの場所を開く」をクリック

*Processingのショートカットをデスクトップへコピー


① Processingを起動(下図はMac版)

*「〜〜〜実行しますか」という画面は「実行」をクリック

fig1


Processingを起動すると、上図のようなウィンドウが現れる。

Edit領域にプログラムコードを書く。Processingでは、プログラム、コードのことをスケッチと呼ぶ。

・メッセージ領域には書いているコードのエラーがリアルタイムで表示される。

・コンソール領域にプログラム実行時のエラーやprintなどで出力した文字が表示される。


簡単なプログラム

入力例1

ellipse(50,50,80,80);

練習1 入力例1をEdit領域に書き、Runボタンを押してみよう。



保存

保存ボタンをクリックし、「20161004-1」と名前をつけて「保存」をクリック。

Processingでは、名前をつけたファルダが作成され、その中に同じ名前で、「.pde」という拡張子のファイルが保存される。

どの場所に保存されているか確認しておくこと。 (デスクトップに授業用のフォルダを作っておくと良い)


Processingでできること

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


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

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

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

練習5 sample4.pdeを開き、実行せよ。この授業のページのQRコードを作るにはどこを変更すれば良いか探してみよ。

練習6 sample5.pdeを開き、実行せよ。コンソール領域に出ている数字が意味するものは何か考えよ。この数字を0.5以上にする方法も考えてみよ。


Processingの約束ごと

  • Processing では,実行する順番を変える命令を明示的に書かない限り,上から順番に実行される。
  • 各行の命令の最後にはセミコロンをつける。
  • 命令は小文字から始まり,2単語以上が連なる場合は2つめ以降の頭文字は大文字になる(noStroke()など)。→Processingで用意されている関数
  • スラッシュを2回続ける(//)と,それ以降行末まで,書いてあることは実行されるときには無視される(コメントアウト)。その行が何をしているかをメモしておくのに使ったり,一時的にその行を使わないようにするのに用いると良い。
  • コメントアウトは,スラッシュアスタリスク(/*)とアスタリスクスラッシュ(*/)で挟む形式も使える。



ウィンドウの大きさ

図形を描画するためには,まずは図形を描くためのキャンバス(つまりウィンドウ)が必要である。size命令によって、ウィンドウの大きさが決められ、ウィンドウが表示される。 size 命令は、Processing では必ず最初に書くこと。


ウィンドウサイズの設定

size(横幅, 高さ)

横幅と高さには、ピクセル(画面や画像ファイルにおける最小単位)数が入る。そのため必ず整数値を入れること。


練習7 20161004-1.pdeの初めの行に、sizeの命令を入れてみよ。 


座標の扱い方

sizeを使って命令すると、ウィンドウには下図のような座標軸が作られている。

左上が原点となっている。縦軸は下向きが正なので注意。

下図は、size(600,400);と書いた場合(Mac版)。



図形を描く

キャンバスを用意したら、図形を描いてみよう。まずは代表的な図形を描く練習をしよう。その他の図形は、Processingで用意されている関数の「2D Primitives」を参照のこと。


point(x,y)

点を描くには1点(x,y)を指定する


2点を結ぶ線分

line(x1,y1,x2,y2)

線分を描くには2点(x1,y1) と(x2,y2)を指定する


練習8 交差する2本の直線を描いてみよ。


3点を結ぶ三角形

triangle(x1,y1,x2,y2,x3,y3)

三角形を描くには、3点(x1,y1) と(x2,y2)と(x3,y3)を指定する

左上を基準とした長方形

rect(x,y,横幅,高さ)

長方形を描くには、長方形の左上の点(x,y)と横幅と高さを指定する。


練習9 長方形の中に三角形を描いてみよ。


中心を基準とした楕円

ellipse(x,y,横幅,高さ)

楕円(円)を描くには、中心の座標(x,y)と横幅と高さを指定する。


練習10 楕円を描いてみよ。



プログラミングの基礎

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

プログラミングの基礎へ


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

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

スクリーンショット 2016-09-30 19.41.26


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

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

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



カラー・輪郭・塗りつぶし

図形の色を決める命令を確認して練習しよう。


背景色を設定する

background(色の指定)

まずは、キャンバス(背景)の色を変えてみよう。指定しない限り、グレーのウィンドウが現れる。


「色の指定」には、以下の3通りの方法がある。とりあえずは、①と②が使えるようになろう。

① グレースケール

② RGBカラー

③ HSBカラー


① グレースケール (0 ~ 255の整数値)で灰色の濃さを決める

使い方の例:background(100);

マルチメディア数学2.005


② RGBカラー 赤(R)と緑(G)と青(B)の割合を決める

使い方の例:background(100,50,255);

fig3


練習12 練習11の背景色を変更せよ。



輪郭に色をつける

stroke(色の指定)

図形を描く命令の直前に、色を決める命令strokeやfillを入れると、輪郭や図形の内部の色を変更できる。色の指定の方法は背景色と同じである。

図形の中を塗りつぶす

fill(色の指定)

strokeの指定がない場合はデフォルトで黒(0)

fillの指定がない場合はデフォルトで白(255)


練習13 練習12の円の輪郭の色と内部の色を変更せよ。



輪郭の太さを変える

strokeWeight(太さの指定)

輪郭の線の太さは、ピクセル数(整数値)で変更できる。

使い方の例:strokeWeight(5);


練習14 練習13の円の輪郭の太さを変更せよ。


輪郭を描画しない

noStroke()

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

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

noFill()

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



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

スクリーンショット 2016-09-30 19.30.19





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

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

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

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


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

スクリーンショット 2016-09-30 19.47.52



本日の課題1 新しいファイルを作成し、例えば下図のようなクマの絵をかけ。(全く同じである必要はない。自身の絵心、力量で良い。)

下図の茶色はRGBで(210,90,20)を使っている。

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

スクリーンショット 2016-09-30 20.00.05



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

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


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

件名:MMM2 20161004

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