Processing 学習ノート

アップグレードふくい Vol.25 「Processingではじめるインタラクティブデザイン」

2010-01-30T07:30:00Z

2010年1月30日、アップグレードふくい Vol.25 | アップグレードふくいでのセッション「Processingではじめるインタラクティブデザイン」の発表資料を公開します。]]> Processing for Android を試してみた - 推薦図書 - Processing: A Programming Handbook for Visual Designers and Artists - ブラウザで無料ではじめるActionScript 3.0 ―It's a wonderfl world― - Beyond Interaction ―メディアアートのためのopenFrameworksプログラミング入門 - 参考サイト - Processing 学習ノート - iPhoneArt | Software Art for the iPhone - まとめ - デザイナー向けの開発環境が整いつつある。始めるなら今！（無料だし！） - インタラクティブデザインは面白い！ - Processing ではじめよう！ - ありがとうございました！

1b-13 課題「時計」制作のヒント

2010-01-25T05:40:00Z

課題「時計」の参考作品

Processing for Android を試してみた

2009-12-28T13:03:40Z

Processing for Android をMac OS10.6で試してみた。 android.processing.org からAdnroidのビルドに対応したProcessingをダウンロード - そのままアプリケーションフォルダに入れると、元々あるProcessingを上書きしてしまうので、「Processing for Android」のようにリネームしてから配置する。 - Android SDK | Android Developers からAndroid SDKをダウンロード - 解凍したフォルダ「android-sdk-mac_86」をアプリケーションフォルダに配置 ## Android SDK のセットアップ - Android SDK を起動する - android-sdk-mac\_86フォルダ内toolsフォルダ内のandroidをダブルクリック（これで起動しない場合は、ターミナルから「/Applications/android-sdk-mac\_86/tools/android 」入力して起動する） - サイドメニューの「Available Packages」を選び、Processing for Android に必要な以下4つのPackageをインストールする - SDK Platform Android 1.6, API 4 - SDK Platform Android 2.0, API 5 - Google APIs by Google Inc., Android API 4 - Google APIs by Google Inc., Android API 5 ※ダウンロードができない場合は、Settingを以下のようにしてみる。 ## Android Mode の設定 - Processing (for Android) を起動し、「Android Mode」を設定する設定が完了すると「Done loading Android tools.」と表示される。 ※初回の設定時に Android SDK の場所を聞かれるので、「android-sdk-mac\_86」フォルダを指定する。指定先を間違えた場合は、ライブラリフォルダ内Processingフォルダ内のpreferences.txtに「android.sdk.path=/Applications/android-sdk-mac\_86」と直接設定すればよい。 ## Android emulator で sketch を実行する - Android Mode 設定後、Run する。 - Android emulator が起動しsketch が実行される。 ※Processing と Android emulator の連携が不安定っぽく、何度かリトライすることで正常に実行された。]]>

1b-10 ライブカメラを使う

2009-12-14T05:40:00Z

ライブカメラの映像を加工した作品をつくってみる。 import processing.video.*; // Videoを扱うライブラリをインポート Capture camera; // ライブカメラの映像をあつかうCaptureの変数 void setup() { size(480, 320); camera = new Capture(this, width, height, 12); // Captureオブジェクトを生成 } void draw() { image(camera, 0, 0); // 画面に表示 } //カメラの映像が更新されるたびに、最新の映像を読み込む void captureEvent(Capture camera) { camera.read(); } ### 同じ映像を4分割で表示する import processing.video.*; Capture camera; void setup() { size(480, 320); camera = new Capture(this, width, height, 12); } void draw() { image(camera, 0, 0, width/2, height/2); // 画面に表示　左上に1/2サイズで image(camera, width/2, 0, width/2, height/2); // 画面に表示　右上に1/2サイズで image(camera, 0, height/2, width/2, height/2); // 画面に表示　左下に1/2サイズで image(camera, width/2, height/2, width/2, height/2); // 画面に表示　右下に1/2サイズで } void captureEvent(Capture camera) { camera.read(); } ### 色情報を取得して再描画する import processing.video.*; Capture camera; void setup() { size(480, 320); colorMode(HSB, 100); smooth(); noStroke(); camera = new Capture(this, width, height, 12); } void draw() { background(0); camera.loadPixels(); //カメラ画像のpixel情報を読み込み int d = 10; //円の直径を定義 // ライブカメラの映像から、円の直径の間隔ごとに、色情報を取得し、その色で円を描く for(int y = d / 2 ; y < height ; y += d) { for(int x = d / 2 ; x < width ; x += d) { int pos = (y * width) + x; // pixelの位置 color c = camera.pixels[pos]; // pixelの色情報 fill(c); ellipse(x, y, d, d); } } } void captureEvent(Capture camera) { camera.read(); } #### pixels 配列とは - 画面全体またはPImageオブジェクトを1次元の配列として表したもの - color型の配列 - (x,y)の情報は pixels[(y*width)+x)] で得られる #### 練習 - 円の大きさをランダムにしてみる - 色情報を加工してみる ## 参考：OpenCV（画像処理ライブラリ）を使う ### 準備：OpenCVのインストール - OPENCV \ library - OpenCVのインストール - OpenCVの Processing ライブラリを、書類＞ Processing ＞ libraries 内に配置 ※Mac室では、インストールの権限制限があり、みなさん自身ではインストールができません。利用したい場合は事前に相談ください。 ### そのまま表示する import hypermedia.video.*; //OpenCVライブラリをインポート OpenCV opencv; //OpenCV型の変数 void setup() { size(480, 320); opencv = new OpenCV(this); opencv.capture(width, height); ////映像読み込みの初期化 } void draw() { opencv.read(); //映像を読み込む image(opencv.image(), 0, 0); //映像を表示 } - videoライブラリを使用するときよりも、コードがシンプルになる ### 加工して表示する import hypermedia.video.*; OpenCV opencv; void setup() { size(480, 320); opencv = new OpenCV(this); opencv.capture(width, height); } void draw() { opencv.read(); //左上 opencv.convert(OpenCV.GRAY); //グレースケールに変換 image(opencv.image(), 0, 0, width/2, height/2); //画面に表示　左上に1/2サイズで //右上 opencv.invert(); //色を反転 image(opencv.image(), width/2, 0, width/2, height/2); // 画面に表示　右上に1/2サイズで //左下 opencv.restore(); //オリジナルの映像に戻す opencv.flip(OpenCV.FLIP_HORIZONTAL); //映像を水平方向に反転する image(opencv.image(), 0, height/2, width/2, height/2); // 画面に表示　左下に1/2サイズで //右下 image(opencv.image(OpenCV.SOURCE), width/2, height/2, width/2, height/2); // 画面に表示　オリジナルの映像を右下に1/2サイズで } ### そのほかOpenCVでできること - 顔認識 → OpenCV::cascade() \ language (API) - 輪郭検出 → OpenCV::blobs() \ language (API)]]>

Box2D を Processing で使う

2009-12-13T09:04:45Z

物理エンジンBox2DをProcessingで使ってみる。 Browse JBox2D Files on SourceForge.net から最新版をダウンロードする（本エントリー執筆時は2.0.1） - 解凍したフォルダ名を「JBox2D」として、次のフォルダ内に配置：書類＞ Processing ＞ libraries --> - BoxWrap2Dをダウンロード - BoxWrap2Dページ内の「Get the library」をクリックしてダウンロード - 解凍したフォルダ「boxwrap2d」を、次のフォルダ内に配置：書類＞ Processing ＞ libraries ※Macの場合 - Processing を起動していた場合は、再起動する ## Box2D を使ってみる - 「画面をクリックすると、マウスポインタの位置から円が落ちる」プログラムを書いてみる import org.jbox2d.p5.*; Physics physics; void setup() { size(500, 500); frameRate(60); physics = new Physics(this, width, height); physics.setDensity(1.0); } void draw() { background(204); } void mousePressed() { physics.createCircle(mouseX, mouseY, 15); } - 参考にしたページ：Processing 1.0 - JBox2D with BoxWrap2D Tutorial - メモ：BoxWrap2Dフォルダに入っているサンプル「SwingingDemo」を実行すると「The package "org.jbox2d.testbed.tests" does not exist. You might be missing a library.」とエラーが出た。以下のimport文を削除したら動いた。　 import org.jbox2d.testbed.tests.*; import org.jbox2d.testbed.*; import org.jbox2d.util.blob.*; import org.jbox2d.testbed.timingTests.*;]]>

1b-09 アニメーション

2009-12-07T05:40:00Z

画像シーケンスからアニメーションを作成する方法を学ぶ int numFrames = 12; //アニメーションのフレーム数 int frame = 0; // 表示するフレーム番号 PImage[] images = new PImage[numFrames]; //アニメーション画像の配列 void setup() { size(320, 240); frameRate(6); // 画像の読み込み images[0] = loadImage("animation-000.jpg"); images[1] = loadImage("animation-005.jpg"); images[2] = loadImage("animation-010.jpg"); images[3] = loadImage("animation-015.jpg"); images[4] = loadImage("animation-020.jpg"); images[5] = loadImage("animation-025.jpg"); images[6] = loadImage("animation-030.jpg"); images[7] = loadImage("animation-035.jpg"); images[8] = loadImage("animation-040.jpg"); images[9] = loadImage("animation-045.jpg"); images[10] = loadImage("animation-050.jpg"); images[11] = loadImage("animation-055.jpg"); } void draw() { frame++; // ループ処理 if (frame == numFrames) { frame = 0; } image(images[frame], 0, 0); //画像を表示 } ### for文を使ってたくさんの画像を読み込む int numFrames = 60; //アニメーションのフレーム数 PImage[] images = new PImage[numFrames]; //アニメーション画像の配列 void setup() { size(320, 240); frameRate(30); // 画像の読み込み for (int i = 0; i < images.length; i++) { images[i] = loadImage("animation-" + nf(i, 3) + ".jpg"); } } void draw() { int frame = frameCount % numFrames; //現在のフレームをアニメーションのフレーム数で割った余りを代入 image(images[frame], 0, 0); //画像を表示 } ### 練習：動きを加える 1. 表示の際、画像をほんの少しランダムに配置する 2. 表示の際、画像を1pxずつ下げて表示する 3. 表示の際、不透明度を設定し、残像のように見せる ## マウスの動きで、アニメーションをコントロールする int numFrames = 60; //アニメーションのフレーム数 PImage[] images = new PImage[numFrames]; //アニメーション画像の配列 void setup() { size(320, 240); frameRate(30); // 画像の読み込み for (int i = 0; i < images.length; i++) { images[i] = loadImage("animation-" + nf(i, 3) + ".jpg"); } } void draw() { } void mouseMoved() { int frame = int(map(mouseX, 0, width, 0, numFrames)); //マウスポインタのx座標を0以上60未満の値へマッピング image(images[frame], 0, 0); } ## 練習：おみくじ（画像版）をつくってみる - おみくじの画像（大吉、中吉、小吉、吉）をイラストレータまたはPhotoshopで作成する。画像形式はPNG形式を推奨。 - 以下の演出を入れる - プログラムを実行すると、おみくじのアニメーションがスタートする。大吉、中吉、小吉、吉の順 - 画面をマウスでクリックすると、アニメーションがストップする。 - キーボードを押すと、おみくじのアニメーションがスタートする。]]>

1b-08 課題「おみくじをつくる」

2009-11-30T05:40:00Z

これまでの授業で学んだことをもとにして、「おみくじ」を作成してください。 1b-04 反応させる（マウスからの入力に） - ヒント：1b-05 反応させる（キーボードからの入力に） - おみくじデータの用意方法は？ - 配列を利用する - ヒント：1b-07 配列を使うの「用意したデータを選ぶ」 - おみくじをランダムに選ぶには？ - random関数を利用する - ヒント：1a-05 繰り返し（ループ）とランダム - 大吉が出にくく、吉が出やすくするには？ - 100本のくじのうち、大吉は10本、中吉は20本、小吉は30本、吉は40本、と考える - ヒント：1a-06 条件と分岐 - if(...){...}else if(...){...}else if(...){...}else{} ## 手順のヒント - 基本的な機能が動作するシンプルな「プロトタイプ」を作る - プロトタイプが出来てから、細部を作り込んでいく ## 評価のポイント - おみくじとして成立しているか - おみくじの面白さを客観的に理解し、ビジュアル・演出等で表現できているか - シンプルでわかりやすいプログラムを書いているか]]>

1b-07 配列を使う

2009-11-16T05:40:00Z

配列とは番号の付いた変数。1つの名前の変数で複数の値を持つことができる。 ### 配列を使わないプログラム（変数を使わない） void setup() { size(100, 100); noLoop(); } void draw() { // 5つの点A,B,C,D,Eを順に直線で結ぶ beginShape(); vertex(50, 18); //点Aの座標を指定 vertex(29, 82); //点Bの座標を指定 vertex(83, 43); //点Cの座標を指定 vertex(17, 43); //点Dの座標を指定 vertex(71, 82); //点Eの座標を指定 endShape(CLOSE); } ### 配列を使わないプログラム（変数を使う） void setup() { size(100, 100); noLoop(); } void draw() { int x0 = 50, y0 = 18; //点Aのx座標, y座標 int x1 = 29, y1 = 82; //点Bのx座標, y座標 int x2 = 83, y2 = 43; //点Cのx座標, y座標 int x3 = 17, y3 = 43; //点Dのx座標, y座標 int x4 = 71, y4 = 82; //点Eのx座標, y座標 // 5つの点A,B,C,D,Eを順に直線で結ぶ beginShape(); vertex(x0, y0); vertex(x1, y1); vertex(x2, y2); vertex(x3, y3); vertex(x4, y4); endShape(CLOSE); } ### 配列を使ったプログラム void setup() { size(100, 100); noLoop(); } void draw() { int[] x = {50, 29, 83, 17, 71}; //点A,B,C,D,Eのx座標 int[] y = {18, 82, 43, 43, 82}; //点A,B,C,D,Eのy座標 // 5つの点A,B,C,D,Eを順に直線で結ぶ beginShape(); for (int i = 0; i < x.length; i++) { vertex(x[i], y[i]); } endShape(CLOSE); } - プログラムが短くシンプルに - 点の数を増やしたいとき、プログラムの書き換えが簡単 #### 配列宣言 - 《配列データ型》[] 《配列の名前》　例）int[] x - 《配列データ型》[] 《配列の名前》 = new 《配列の設定》　例）int[] x = new int[5] #### 配列への代入 - 一度にまとめて　例）x = {50, 29, 83, 17, 71} - 個別に: x[0] = 50, x[1] = 29, x[2] = 83, x[3] = 17, x[4] = 71　※0番目から始まることに注意 #### **length** 配列の長さ - 上記サンプルで、x.length は 5 となる ## 配列の使い方1 「過去のデータを記憶する」 int length = 50; //配列の個数 int[] x = new int[length]; //x座標を記録する配列 int[] y = new int[length]; //y座標を記録する配列 void setup() { size(800, 600); smooth(); frameRate(60); } void draw() { background(204); //画面をリセット //配列を参照して円を描画する for(int i=0 ; i < length ; i++) { fill(i * 3); ellipse(x[i], y[i], i, i); } } //マウスが動いたときの処理：マウスの座標を記録する void mouseMoved() { //配列の値をひとつ後ろへ移動する for(int i = length - 1 ; i >= 1 ; i--) { x[i] = x[i-1]; y[i] = y[i-1]; } x[0] = mouseX; y[0] = mouseY; } ## 配列の使い方2 「複数の動きを処理する」 int length = 20; float[] x = new float[length]; float[] speed = new float[length]; void setup() { size(400, 400); for (int i = 0; i < length; i++){ x[i] = width / 2; speed[i] = random(-1, 1); } } void draw() { background(204); for (int i = 0; i < length; i++){ x[i] = x[i] + speed[i]; rect(x[i], (height / length) * i, 10, 10); } } ※ 上のプログラムは、以下のプログラムを応用したもの float x; float speed; void setup() { size(400, 400); x = width / 2; speed = 1; } void draw() { background(204); x = x + speed; rect(x, height/2, 10, 10); } ## 配列の使い方3 「用意したデータを選ぶ」 String[] message = {"how","are","you?","I","am","fine","thank","you!"}; PFont font; int count = 0; void setup(){ size(400, 400); colorMode(HSB, 100); background(99); font = loadFont("sample.vlw"); textFont(font); textAlign(CENTER); frameRate(3); } void draw() { background(99); fill(random(100), 99, 99); text(message[count], width/2, height/2); count++; count %= message.length; } ## 練習 - 「おみくじ」を作る]]>

1b-06 時間を表示する

2009-11-09T05:40:00Z

現在の時間を表示する。 void setup() { size(100, 100); frameRate(1); //フレームレートを1に設定（毎秒1回draw関数を実行） } void draw() { int s = second(); //秒 int m = minute(); //分 int h = hour(); //時 println(h + ":" + m + ":" + s); //コンソールに日時を表示 } ### コンソールに日時を表示する（分と秒は2ケタで表示） void setup() { size(100, 100); frameRate(1); } void draw() { int s = second(); int m = minute(); int h = hour(); String t = h + ":" + nf(m, 2) + ":" + nf(s, 2); println(t); } ### ウィンドウに日時を表示する PFont font; void setup() { size(100, 100); frameRate(1); font = loadFont("Monaco-18.vlw"); textFont(font); textAlign(RIGHT); } void draw() { background(0); int s = second(); int m = minute(); int h = hour(); String t = h + ":" + nf(m, 2) + ":" + nf(s, 2); //println(t); text (t, 93, 55); } ## 時間を視覚化する ### 長方形の長さで、時計を表現する 19:45:06 void setup() { size(240, 240); frameRate(1); } void draw() { background(204); int s = second(); int m = minute(); int h = hour(); //長方形の長さで時計を表現する rect(0, 0, h*10, height/3); rect(0, height/3, m*4, height/3); rect(0, height*2/3, s*4, height/3); } ### 三針時計をつくる ※針の描画を理解するには、三角関数の知識が必要。 void setup() { size(240, 240); frameRate(1); smooth(); } void draw() { background(204); noStroke(); ellipse (120, 120, 200, 200); int s = second(); int m = minute(); int h = hour(); stroke(0); strokeWeight(4); line(120, 120 , 60*cos(h % 12 * TWO_PI / 12 - HALF_PI) + 120, 60*sin(h % 12 * TWO_PI / 12 - HALF_PI) +120); //時針の描画 strokeWeight(2); line(120, 120 , 80*cos(m * TWO_PI / 60 - HALF_PI) + 120, 80*sin(m * TWO_PI / 60 - HALF_PI) +120); //分針の描画 strokeWeight(1); line(120, 120 , 90*cos(s * TWO_PI / 60 - HALF_PI) + 120, 90*sin(s * TWO_PI / 60 - HALF_PI) +120); //秒針の描画 } ## 練習 - second関数を利用し、時間（秒）に反応したアニメーションを作成する ## 参考資料：時計を用いたビジュアル・インタラクティブ表現 - Web Designing: TeraClockでFlash時計を作ろう「みんなのオリジナル時計」ギャラリー - physiclock - SCR | DROPCLOCK by tha - SCR | CRASHCLOCK by tha - INDUSTRIOUS CLOCK - SURFACE.YUGOP.COM || MONO*crafts 3.0 - CLOCKBLOCK1.0 - SURFACE.YUGOP.COM || MONO*crafts 3.0 - UNIQLOCK ]]>

1b-05 反応させる（キーボードからの入力に）

2009-11-02T05:40:00Z

キーボードからの入力に反応して、画面が変化するプログラムを学ぶ。 int x = 0; void setup() { size(400, 400); } void draw() { background(204); if (keyPressed == true) { x++; //println(key); } ellipse(x, height/2, 60, 60); } ## **key** 押されたキーの文字や記号を納める変数キーのa（小文字のエー）が押されているとき、円が左から右にすすむ int x = 0; void setup() { size(400, 400); } void draw() { background(204); if ((keyPressed == true) && (key == 'a')) { x++; } ellipse(x, height/2, 60, 60); } ※大文字小文字を問わないようにするためには、次のように「aまたはAが押されているとき」で条件を設定する int x = 0; void setup() { size(400, 400); } void draw() { background(204); if ((keyPressed == true) && ((key == 'a') || (key == 'A'))) { x++; } ellipse(x, height/2, 60, 60); } ## **void keyPressed() {...}** キーが押されたときに1回だけ {...} の中を実行する ※キーを押しっぱなしにして一定時間経つと、キーの連続入力状態になり、そのスピードに合わせ連続して実行される。キーが押されると、円が1ピクセルだけ左から右にすすむ int x = 0; void setup() { size(400, 400); } void draw() { } void keyPressed() { background(204); x++; ellipse(x, height/2, 60, 60); //println(key); } ## **void keyReleased() {...}** キーが離されたときに1回だけ {...} の中を実行するキーが離されると、円が止まる int x = 0; int speed = 1; void setup() { size(400, 400); } void draw() { background(204); x = x + speed; ellipse(x, height/2, 60, 60); } void keyReleased() { speed = 0; } ## 押されたキーの文字を表示する ※事前に「Tools」の「Create Font...」でフォントデータを生成しておく。（教科書86ページまたは1a-07 画像や文字を使うを参照） int x = 0, y = 50; PFont font; void setup() { size(400, 400); background(0); fill(255, 128); font = loadFont("Serif-48.vlw"); textFont(font, 48); //textAlign(CENTER); } void draw() { } void keyPressed() { text(key, x, y); } void keyReleased() { x += 10; if (x > width) { x = 0; y += 50; } } ### 練習 1. 文字の出現位置をランダムにしてみる 2. 文字の色をランダムにしてみる 3. スペースキーを押すと、画面がリセットされる ]]>

1b-04 反応させる（マウスからの入力に）

2009-10-26T05:40:00Z

マウスからの入力（移動、クリック）に反応して、画面が変化するプログラムを学ぶ。 void setup() { size(400, 400); } void draw() { //background(204); //fill(0); ellipse(mouseX, mouseY, 60, 60); } ### 練習 - マウスポインタの位置に円がくっついて動く - マウスポインタの位置に「10pxの黒い円」を描く ## **pmouseX**, **pmouseY** 前フレームのマウスポインタの位置（座標）前フレームのマウスポインタの位置から現フレームのマウスポインタの位置に線が描かれる。（マウスを動かすと、線が描かれるように見える） void setup() { size(400, 400); //strokeWeight(10); } void draw() { line(mouseX, mouseY, pmouseX, pmouseY); } ### 練習 - マウスポインタの位置が、画面の左側のときは線の太さを5, 画面の右側のときは線の太さを10にする ## **mousePressed** マウスボタンが押されている（== true）、押されていない（== false）マウスボタンを押している間、線が描かれる。 void setup() { size(400, 400); strokeWeight(10); } void draw() { if (mousePressed == true){ line(mouseX, mouseY, pmouseX, pmouseY); } } ## **void mousePressed() {...}** マウスボタンが押されたときに1回だけ {...} の中を実行するマウスボタンを押すと、円が描かれる。 void setup() { size(400, 400); } void draw() { } void mousePressed() { ellipse(mouseX, mouseY, 60, 60); } ## **void mouseReleased() {...}** マウスボタンが離されたときに1回だけ {...} の中を実行するマウスボタンを押している間、線が描かれる。ボタンが離されると線が消える。 void setup() { size(400, 400); strokeWeight(10); } void draw() { if (mousePressed == true){ line(mouseX, mouseY, pmouseX, pmouseY); } } void mouseReleased() { background(204); //マウスボタンが離されると画面がリセットされる } ## 練習：次のような動作をするプログラムを書くマウスポインタの位置に赤い円が描かれる。マウスボタンを押すと、円の塗り色が変わる。 int h=0; void setup() { size(400, 400); colorMode(HSB,100); background(99); noStroke(); } void draw() { fill(h,99,99); ellipse(mouseX, mouseY, 60, 60); } void mousePressed(){ h+=5; h%=100; } マウスボタンを押すと、前回マウスボタンを押した位置からの折れ線が描ける。 float pX, pY; void setup() { size(400, 400); strokeWeight(10); } void draw() { } void mousePressed() { line(pX, pY, mouseX, mouseY); } void mouseReleased() { pX = mouseX; //マウスボタンが離されたときのx座標を記憶する pY = mouseY; //マウスボタンが離されたときのy座標を記憶する }]]>

1b-03 関数を定義し利用する

2009-10-19T05:40:00Z

よく利用する処理は「関数」を利用することで、見渡しの良いプログラムにすることができる。 void setup() { size(100, 100); colorMode(HSB, 100); background(0); noLoop(); // draw関数を繰り返さない } void draw() { // 左に赤の矩形 fill(0, 99, 99); rect(20, 40, 20, 20); // 右にオレンジの矩形 fill(10, 99, 99); rect(60, 40, 20, 20); } ## 矩形を2つ描く（関数を使って） void setup() { size(100, 100); colorMode(HSB, 100); background(0); noLoop(); } void draw() { drawBox(20, 40, 0); // 左に赤の矩形 drawBox(60, 40, 10); // 右にオレンジの矩形 } void drawBox(float x, float y, int h) { fill(h, 99, 99); rect(x, y, 20, 20); } ## 練習 - 上記（関数を使った方）のプログラムを改変してみる 1. 黄色の矩形を追加し、矩形を3個にする。 2. 矩形のサイズを、一辺15pxの正方形に変更する。 3. 矩形を、直径が20pxの円に変更する。関数名も変更する。 4. 幅400px高さ400pxのウィンドウに、任意のイラストを3つ表示する。 5. 4で描いたイラストを動かしてみる。]]>

1b-02 動きを制御する - 直線の動き

2009-10-05T05:40:00Z

画面を連続して書き替えることで、「動き」を表現してみる。 float x; // 物体の位置 float speed; // 物体のスピード void setup() { size(200, 200); // 位置とスピードの初期化 x = 0; speed = 1; } void draw() { background(255); // 画面をリセット x = x + speed; // 位置の計算 // 矩形の描画 rect(x, height/2, 10, 10); } ## 練習 - 上記のプログラムを改変してみる 1. スピードを速くする 2. 右から左に動かす 3. 上から下に動かす 4. 矩形の描画をバスの描画に置き換え、左から右に動かす 5. バスの描画部分を関数にする 6. 自分で考えたものの形を動かす（例：乗り物、動物） 7. 左から右に動かし、右端まで行ったら、左端から出てくるようにする。（ヒント：if文を使う）]]>

1b-01 プログラムの構造化 - 初期化関数とメインループ関数

2009-09-28T05:40:00Z

後期の授業では、これまでのような静止画を生成する表現から、アニメーションやマウスの動きに反応する表現に挑戦する。 size(400,400); rectMode(CENTER); rect(200,200,120,60); // ボディ ellipse(165,230,30,30); // 後輪・外側 ellipse(235,230,30,30); // 前輪・外側 ellipse(165,230,20,20); // 後輪・内側 ellipse(235,230,20,20); // 前輪・内側 rectMode(CORNER); rect(245,180,15,20);// 窓・前 rect(195,180,30,20); // 窓・中 rect(150,180,30,20); // 窓・後 ### バスを描く（変数を使って） size(400,400); int x=200; // ボディの中心のx座標 int y=200; // ボディの中心のy座標 int h=60; // ボディの高さ、幅の基準 int d=30; // 車輪の直径の基準 rectMode(CENTER); rect(x,y,h*2,h); // ボディ ellipse(x-35,y+h/2,d,d); // 後輪・外側 ellipse(x+35,y+h/2,d,d); // 前輪・外側 ellipse(x-35,y+h/2,d-10,d-10); // 後輪・内側 ellipse(x+35,y+h/2,d-10,d-10); // 前輪・内側 rectMode(CORNER); rect(x+45,y-20,h/4,h/3); // 窓・前 rect(x-5,y-20,h/2,h/3); // 窓・中 rect(x-50,y-20,h/2,h/3); // 窓・後 ## 初期化関数とメインループ関数を使う ###関数とはプログラムを「構造化」する際に用意する「部品」のようなもの。 ###初期化関数（setup） void setup(){ ＜初期化の内容＞ } ###メインループ関数（draw） void draw(){ ＜プログラムの内容＞ } ###バスを描く（初期化関数とメインループ関数を使って） int x=200; // ボディの中心のx座標 int y=200; // ボディの中心のy座標 int h=60; // ボディの高さ、幅の基準 int d=30; // 車輪の直径の基準 void setup(){ size(400,400); noLoop(); // 繰り返さない } void draw(){ rectMode(CENTER); rect(x,y,h*2,h); // ボディ ellipse(x-35,y+h/2,d,d); // 後輪・外側 ellipse(x+35,y+h/2,d,d); // 前輪・外側 ellipse(x-35,y+h/2,d-10,d-10); // 後輪・内側 ellipse(x+35,y+h/2,d-10,d-10); // 前輪・内側 rectMode(CORNER); rect(x+45,y-20,h/4,h/3); // 窓・前 rect(x-5,y-20,h/2,h/3); // 窓・中 rect(x-50,y-20,h/2,h/3); // 窓・後 } ####グローバル変数 - 関数の外で定義された変数 - どの関数からでもアクセスできる ####noLoop drawの処理を繰り返さない（1回だけdrawの処理を行う） ##自分で定義した関数を使う ###3台のバスを描く（関数を使わずに1つ1つ描く） int x=200; // ボディの中心のx座標 int y=200; // ボディの中心のy座標 int h=60; // ボディの高さ、幅の基準 int d=30; // 車輪の直径の基準 void setup(){ size(400,400); noLoop(); // 繰り返さない } void draw(){ // 中央のバス rectMode(CENTER); rect(x,y,h*2,h); // ボディ ellipse(x-35,y+h/2,d,d); // 後輪・外側 ellipse(x+35,y+h/2,d,d); // 前輪・外側 ellipse(x-35,y+h/2,d-10,d-10); // 後輪・内側 ellipse(x+35,y+h/2,d-10,d-10); // 前輪・内側 rectMode(CORNER); rect(x+45,y-20,h/4,h/3); // 窓・前 rect(x-5,y-20,h/2,h/3); // 窓・中 rect(x-50,y-20,h/2,h/3); // 窓・後 // 左上のバス rectMode(CENTER); rect(x-100,y-100,h*2,h); // ボディ ellipse(x-35-100,y+h/2-100,d,d); // 後輪・外側 ellipse(x+35-100,y+h/2-100,d,d); // 前輪・外側 ellipse(x-35-100,y+h/2-100,d-10,d-10); // 後輪・内側 ellipse(x+35-100,y+h/2-100,d-10,d-10); // 前輪・内側 rectMode(CORNER); rect(x+45-100,y-20-100,h/4,h/3); // 窓・前 rect(x-5-100,y-20-100,h/2,h/3); // 窓・中 rect(x-50-100,y-20-100,h/2,h/3); // 窓・後 // 右下のバス rectMode(CENTER); rect(x+100,y+100,h*2,h); // ボディ ellipse(x-35+100,y+h/2+100,d,d); // 後輪・外側 ellipse(x+35+100,y+h/2+100,d,d); // 前輪・外側 ellipse(x-35+100,y+h/2+100,d-10,d-10); // 後輪・内側 ellipse(x+35+100,y+h/2+100,d-10,d-10); // 前輪・内側 rectMode(CORNER); rect(x+45+100,y-20+100,h/4,h/3); // 窓・前 rect(x-5+100,y-20+100,h/2,h/3); // 窓・中 rect(x-50+100,y-20+100,h/2,h/3); // 窓・後 } ※draw関数の中に、同じようなプログラムが繰り返されている。これを効率よく書き換えることで、プログラムの入力を楽にすることができる。 ###3台のバスを描く（自分で定義した関数を使って） int h=60; // ボディの高さ、幅の基準 int d=30; // 車輪の直径の基準 void setup() { size(400, 400); noLoop(); // 繰り返さない } void draw() { drawBus(200, 200); //中央のバス drawBus(100, 100); //左上のバス drawBus(300, 300); //右下のバス } void drawBus(int x, int y) { rectMode(CENTER); rect(x, y, h*2, h); // ボディ ellipse(x-35, y+h/2, d, d); // 後輪・外側 ellipse(x+35, y+h/2, d, d); // 前輪・外側 ellipse(x-35, y+h/2, d-10, d-10); // 後輪・内側 ellipse(x+35, y+h/2, d-10, d-10); // 前輪・内側 rectMode(CORNER); rect(x+45, y-20, h/4, h/3); // 窓・前 rect(x-5, y-20, h/2, h/3); // 窓・中 rect(x-50, y-20, h/2, h/3); // 窓・後 } - drawBus：バスの描画を定義した関数（わかりやすい任意の名前を付ける） ###バスを走らせる

バスを走らせる - wonderfl build flash online

int x; // ボディの中心のx座標 int y; // ボディの中心のy座標 int h = 60; // ボディの高さ、幅の基準 int d = 30; // 車輪の直径の基準 int speed = 1; // 進む速さ void setup() { size(400, 400); x = -h; // ボディの中心のx座標 y = height / 2; // ボディの中心のy座標 //noLoop(); // 繰り返さない } void draw() { background(255); // 画面をリセットする drawBus(x, y); // バスを描く x = x + speed; // 進む if(x > width + h){ x = -h; // バスが右端まで行ったら左端に戻る } } void drawBus(int x, int y) { rectMode(CENTER); rect(x, y, h*2, h); // ボディ ellipse(x-35, y+h/2, d, d); // 後輪・外側 ellipse(x+35, y+h/2, d, d); // 前輪・外側 ellipse(x-35, y+h/2, d-10, d-10); // 後輪・内側 ellipse(x+35, y+h/2, d-10, d-10); // 前輪・内側 rectMode(CORNER); rect(x+45, y-20, h/4, h/3); // 窓・前 rect(x-5, y-20, h/2, h/3); // 窓・中 rect(x-50, y-20, h/2, h/3); // 窓・後 } ####画面のリセット draw関数の最初で背景を白で塗る（background(255);）ことで、画面をリセットしている ### バスを走らせる（キーボードを押したときに） int x; // ボディの中心のx座標 int y; // ボディの中心のy座標 int h = 60; // ボディの高さ、幅の基準 int d = 30; // 車輪の直径の基準 int speed = 1; // 進む速さ void setup() { size(400, 400); x = -h; // ボディの中心のx座標 y = height / 2; // ボディの中心のy座標 //noLoop(); // 繰り返さない } void draw() { background(255); // 画面をリセットする drawBus(x, y); // バスを描く if (keyPressed == true) { x = x + speed; // 進む } if (x > width + h) { x = -h; // バスが右端まで行ったら左端に戻る } } void drawBus(int x, int y) { rectMode(CENTER); rect(x, y, h*2, h); // ボディ ellipse(x-35, y+h/2, d, d); // 後輪・外側 ellipse(x+35, y+h/2, d, d); // 前輪・外側 ellipse(x-35, y+h/2, d-10, d-10); // 後輪・内側 ellipse(x+35, y+h/2, d-10, d-10); // 前輪・内側 rectMode(CORNER); rect(x+45, y-20, h/4, h/3); // 窓・前 rect(x-5, y-20, h/2, h/3); // 窓・中 rect(x-50, y-20, h/2, h/3); // 窓・後 } ## 練習 1. line、ellipse、rectなどを使ってものの形を描く（例：乗り物、動物） 2. 変数や自分で定義した関数を使って、1と同じ形を3つ描く 3. 描いた形を左から右へ動かす 4. 描いた形を上から下へ動かす]]>

1a-13 Adobe Illustrator で作成した素材を Processing で利用する

2009-07-13T05:40:00Z

Adobe Illustrator で作成した素材を Processing で利用したい人のために、手順を解説する。 - Adobe Illustrator で素材を作成 - 書き出し（背景が透過のPNG形式） - フォトショップでトリミング、保存解説に利用した Adobe Illustrator のバージョンは「CS3」なので、バージョンの違いにより用語の違いがある場合がある。 Adobe Photoshop で作成した素材を利用したい場合は、メニューの「ファイル＞ Webおよびデバイス用に保存」でPNG形式を選択し、保存する。自由に素材を描き、名前をつけて保存する。保存形式は「ai形式」とする。 ## 書き出し（背景が透過のPNG形式）背景が透過のPNG形式の画像を書き出す。メニューの「ファイル > 書き出し」を選択する。ファイルに名前をつけ、**フォーマットをPNG**にして、任意の場所（例えばデスクトップ）に書き出しする。書き出しオプションで、解像度は「**スクリーン**」、背景は「**カラー：透明**」を選択する。OK を押すと、背景の透過処理されたPNGファイルが作成される。 ## Adobe Photoshop でトリミング、保存書き出したままの画像では、背景の余計な部分が多いのでトリミングする。上の手順で作ったPNG ファイルを、Adobe Photoshop で開く。メニューの「イメージ > トリミング」を選択する。トリミング対象カラーは「透明ピクセル」を選択、「トリミングする部分」は全部にチェックを入れる。トリミングされた画像を確認し、保存する。 i]]>