情報編集(Web)HTML5 実践2Processing.jsを使う

2013年6月25日東京藝術大学 芸術情報センター(AMC)担当：田所淳

今日の内容‣ 前回 - JavascriptでCanvasに図形を描いた‣ なかなか面倒!!

‣ より効率的で簡単な方法は無いか?‣ Processing.js という開発環境を紹介

‣ Processing.js - ProcessingのJavaScirpt版‣ Processingの文法で、HTML5(Canvas)に描画

‣ Processingって何?

Processingとは?

Processingとは？‣ Processing is a programming language, development environment, and online community. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology. Initially created to serve as a software sketchbook and to teach computer programming fundamentals within a visual context, Processing evolved into a development tool for professionals. Today, there are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning, prototyping, and production.

Processingとは？‣ http://processing.org/

Processing 誕生の歴史‣ Design by Numbers - John Maeda (MIT Media Lab.)‣ http://dbn.media.mit.edu/‣ Processingの祖先

Processing 誕生の歴史‣ MIT Media Lab. で John Maedaの博士課程の学生だった Ben FryとCasey Reas によりProcessing が生みだされた (2001)

‣ その後バージョンアップを重ねて現在のバージョンは1.5.1‣ Javaをベースにしたクロスプラットフォーム‣ Mac OSX, Windows, Linux 版

Processingに触れてみる‣ まずは起動してみる‣ Processingの起動画面

Processingに触れてみる‣ メニューの解説‣ 操作方法

‣ 先週は(素の)Javascirptで記述した形態の描画をProcessing.jsで書いてみる

size(640, 480); //640x480pixelの画面を生成background(31); //背景色fill(31,127,255); //塗りの色stroke(255); //線の色point(300, 200); //(300,200)の場所に点を描くline(50, 100, 400, 300); //(50,100)の点から(400,300)の点へ線を引くrect(400, 100, 100, 300); //(400,100)の点から、幅100、高さ300の四角形を描くellipse(200, 340, 300, 200); //(200,340)の点を中心に、幅300、高さ200の楕円を描く

Processingに触れてみる‣ 以下のコードを記入

Processingに触れてみる‣ Javascirptモードにして実行 → Webブラウザで表示‣ とっても簡単!!

アニメーション

アニメーション‣ 今日は早速アニメーションに挑戦‣ まずは全体の枠組みを理解する!

‣ アニメーションを実現するには、プログラムをより構造化していく必要

‣ setup()とupdate()という二つのパートに構造化してアニメーションを実現する

アニメーション‣ setup() ‒ 初期設定: プログラムの起動時に一度だけ実行されます。画面の基本設定やフレームレートなどを設定します。

‣ draw() ‒ 描画: 設定した速さ(フレームレート)でプログラムが終了するまでくりかえし実行されます。

アニメーション‣ この仕組みを利用して円が斜め下に移動するプログラムを作成してみる

float posX, posY; //円の中心位置を格納する変数float speedX, speedY; //円の速度を格納する変数void setup() { size(640, 480); //640x480pixelの画面を生成 frameRate(60); //フレームレート stroke(63, 191, 255); //線の色 fill(0, 127, 255, 127); //塗りの色 posX = 40; //円の初期位置X posY = 40; //円の初期位置Y speedX = 3; //円の初期位置X speedY = 2; //円の初期位置Y}

void draw() { background(15); //背景を描画 ellipse(posX, posY, 20, 20); //指定した位置に円を描画 posX = posX + speedX; //円のX座標を更新 posY = posY + speedY; //円のY座標を更新}

アニメーション‣ 以下のコードを記入

アニメーション‣ 円がアニメーションする(はず)

アニメーション‣ 画面の端でバウンドさせてみる

‣ 以下の条件を設定する必要‣ 画面の右端、もしくは画面の左端 → X方向のスピードを反転‣ 画面の上端、もしくは画面の下端 → Y方向のスピードを反転

‣ if文‣ このような「もし○○だったら、□□しなさい、（そうでなければ、△△△しなさい）」というような制御構造を表現するための仕組み

if(《条件式》){《真文》//条件が正しい場合の処理

} else {《偽文》//条件が正しくない場合の処理

}

アニメーション‣ if文の文法

float posX, posY; //円の中心位置を格納する変数float speedX, speedY; //円の速度を格納する変数

void setup() { size(640, 480); //640x480pixelの画面を生成 frameRate(60); //フレームレート stroke(63, 191, 255); //線の色 fill(0, 127, 255, 127); //塗りの色 posX = 40; //円の初期位置X posY = 40; //円の初期位置Y speedX = 3; //円の初期位置X speedY = 2; //円の初期位置Y}

アニメーション‣ 条件分岐をつかって、壁でバウンドさせてみる

void draw() { background(15); //背景を描画 ellipse(posX, posY, 20, 20); //指定した位置に円を描画 posX = posX + speedX; //円のX座標を更新 posY = posY + speedY; //円のY座標を更新 if (posX < 0 || posX > width) { //もし画面の左端または右端に到達したら speedX = speedX * -1; //X方向のスピードを反転 } if (posY < 0 || posY > height) { //もし画面の下端または上端に到達したら speedY = speedY * -1; //Y方向のスピードを反転 }}

アニメーション‣ 条件分岐をつかって、壁でバウンドさせてみる

アニメーション‣ たくさんの図形を一度に動かしてみる‣ 先週やったfor文の応用

‣ データの持ち方に工夫が必要 → 配列‣ データのロッカーのようなイメージ

// float型の領域100コを確保、dataという配列名にfloat data[] = new float[100];

// data[0], data[1], data[2] ... data[99] まで一気に生成!

アニメーション‣ 配列の定義の方法の例

アニメーション‣ 配列とくりかえしを使用して、先程の壁でバウンドするプログラムを改造

‣ たくさんの図形を同時に動かしてみる!

int NUM = 100;float posX[] = new float[NUM]; //円の中心位置を格納する変数float posY[] = new float[NUM];float speedX[] = new float[NUM]; //円の速度を格納する変数float speedY[] = new float[NUM];

void setup() { size(640, 480); //640x480pixelの画面を生成 frameRate(60); //フレームレート stroke(63, 191, 255); //線の色 fill(0, 127, 255, 127); //塗りの色 //NUM回くりかえし for (int i = 0; i < NUM; i++) { posX[i] = random(width); //円の初期位置X posY[i] = random(height); //円の初期位置Y speedX[i] = random(-5,5); //円の初期位置X speedY[i] = random(-5,5); //円の初期位置Y }}

アニメーション‣ 配列を使用して、たくさんの図形を動かす

void draw() { background(15); //背景を描画 //NUM回くりかえし for (int i = 0; i < NUM; i++) { ellipse(posX[i], posY[i], 20, 20); //指定した位置に円を描画 posX[i] = posX[i] + speedX[i]; //円のX座標を更新 posY[i] = posY[i] + speedY[i]; //円のY座標を更新

//もし画面の左端、または右端に到達したら if (posX[i] < 0 || posX[i] > width) { speedX[i] = speedX[i] * -1; //X方向のスピードを反転 } //もし画面の下端、または上端に到達したら if (posY[i] < 0 || posY[i] > height) { speedY[i] = speedY[i] * -1; //Y方向のスピードを反転 } }}

アニメーション‣ 配列を使用して、たくさんの図形を動かす

アニメーション‣ たくさんの図形が同時に動く!!

アニメーション‣ 今日はここまで!!