Processing の基礎 Processing の使い方と簡単なプログラミング 1. プログラムの作成手順と画面の機能 Processing を実行します。しばらくすると，Processing のアプリケーションウィンドウ が表示されます。 1.1. Processing の画面 ここで，画面の説明をします。 ツールバー 編集領域 メッセージ コンソール １つウィンドウが表示されます。Macintosh の場合は，他のアプリケーションと同様に， 画面の最上部にメニューバーがあり，アプリケーションウィンドウ内にはツールバーがあ ります。 1 真ん中の白い領域が編集領域で，ここにプログラムを書きます。その下のグレーの部分 は，プログラムの実行時のメッセージを表示する部分で，一番下の黒い領域は， 「コンソー ル」といって，プログラムの処理状況や，プログラムでテキストデータを表示させる命令 を実行すると，ここに表示されます。右下のボタン[Errors]をクリックすると，エラーメ ッセージの詳細を表示することができます。 1.2. 環境設定 プログラムの命令の記述には日本語は使えませんが，コメントや文字データとしては， 日本が使えます。ただし，デフォルトのままでは，日本語の入力ができないので，環境設 定（Preferences）で設定を行います。また，Windows の場合は，日本語を表示しようとす ると文字化けが起こるので，フォントの設定も行います。 まず，環境設定のダイアログボックスを表示させます。それには，メニューバーの 「Processing」→「環境設定」選択します。 2 表示されたウィンドウ「設定」で，項目「言語」が「日本語」になっていることを確認 します。なっていない場合は「日本語」を選択した後，ボタン[OK]をクリックし，Processing を再起動します。 項目「エディタ／コンソールフォント」は日本語フォント（例：MS Gothic など）を選択 します。また，項目「複雑なテキスト入力を有効にする」にチェックを入れ，ボタンを[OK] をクリックした後，一度 Processing を終了させ，再び起動します。 フォントサイズ等は自分の好みで変更してかまいません。 3 1.3. 基本図形の描画 まずは，２次元グラフィックスの描いてみましょう。次の表に基本図形を描くための関 数（コマンド，命令）を紹介します。 図 形 関 数 点 point(x, y) 直線 line(x1, y1, x2, y2) 三角形 triangle(x1, y1, x2, y2, x3, y3) 長方形 rect(x, y, w, h) 一般的な四角形 quad(x1, y1, x2, y2, x3, y3, x4, y4) 楕円 ellipse(x, y, w, h) ディスプレイウィンドウのサイズ size(x, y) ここで，x，y は画面の２次元ウィンドウの座標値を示します。また，w，h はそれぞれ描 画する図形の幅と高さを表します。これらの値はピクセルで定義します。 図形の描画結果は，コンソールには表示されません。図形描画用の別のウィンドウ（デ ィスプレイウィンドウ）が表示されます。このウィンドウのサイズを決めるのが size 関数 です。 コンピュータグラフィックスでは，座標の扱いが数学とは一部異なります。size でディ プレイウィンドウを表示すると，四角いウィンドウが表示されますが，原点は左上で，y 座 標は，下方向に値が増加します。 4 （０，０） 以下のような，プログラムを書いて，実行してみましょう。なお，文末には「；（セミコ ロン） 」を付けます。 5 プログラムを実行するには，赤丸で示した[実行]ボタンをクリックします。 次のような結果が表示されれば，成功です。 6 セミコロンを入れるのを忘れたりすると，以下のようなエラー表示がされます。動作し ないときは，プログラムの内容を確認しましょう。 ※関数の名前は大文字，小文字の区別があります。正確に記述してください。 7 プログラムは上から順番に実行されます。たとえば，line 関数の位置を一番下に変更す ると，次のような結果になります。 図形は，内側が塗りつぶされた状態になります。規定の色は白です。塗りつぶしをした くない場合は，その図形の描画の前に関数「noFill()」を挿入します。各自で確認してみ てください。 1.4. 線の色や太さ，塗りつぶしの色の設定 以下の関数を使うと，線の色や塗りつぶしの色を変更することが出来ます。新たに設定 し直さない限り，それ以降に記述した描画関数に適用されます。途中で変えたいときは， これらの関数を設定し直します。R, G, B はそれぞれ赤，緑，青の値を設定します（デフォ ルトでそれぞれ 0～255） 。 設 定 関 線の色 stroke(R, G, B) 線の太さ strokeWeight(w) 塗りつぶしの色 fill(R, G, B) 線を描かない（図形の輪郭） noStroke () 塗りつぶしをしない noFill() 8 数 先ほどのプログラムに任意に色などを設定してみましょう。 9 1.5. ファイル（スケッチ）の保存と読み込み Processing では，プログラムを「スケッチ」と呼びます。通常は複数のファイルから構 成されるので，保存するときにはフォルダーの形式で記録されます。 メニューバーから「ファイル」→「保存」を選択します。 ダイアログボックスが表示されたら， 「ファイル名」を入力して，USB フラッシュメモリ に保存します。 スケッチを読み込む場合は，メニューバーから「ファイル」→「開く...」を選択します。 保存した名前のフォルダーを開き，フォルダーと同じ前で拡張子が「.pde」のファイルを 選択します。 Processing を終了するときは，メニューバーから「Processing」→「Processing を終了」 を選択します。 10
© Copyright 2024 ExpyDoc
