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

1,579 views

Published on

  • Be the first to comment

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

  1. 1. 情報編集(Web)HTML5 実践2Processing.jsを使う2013年6月25日東京藝術大学 芸術情報センター(AMC)担当:田所淳
  2. 2. 今日の内容‣ 前回 - JavascriptでCanvasに図形を描いた‣ なかなか面倒!!‣ より効率的で簡単な方法は無いか?‣ Processing.js という開発環境を紹介‣ Processing.js - ProcessingのJavaScirpt版‣ Processingの文法で、HTML5(Canvas)に描画‣ Processingって何?
  3. 3. Processingとは?
  4. 4. Processingとは?‣ Processing is a programming language,development environment, and online community.Since 2001, Processing has promoted softwareliteracy within the visual arts and visual literacywithin technology. Initially created to serve as asoftware sketchbook and to teach computerprogramming fundamentals within a visual context,Processing evolved into a development tool forprofessionals. Today, there are tens of thousandsof students, artists, designers, researchers, andhobbyists who use Processing for learning,prototyping, and production.
  5. 5. Processingとは?‣ http://processing.org/
  6. 6. Processing 誕生の歴史‣ Design by Numbers - John Maeda (MIT Media Lab.)‣ http://dbn.media.mit.edu/‣ Processingの祖先
  7. 7. Processing 誕生の歴史‣ MIT Media Lab. で John Maedaの博士課程の学生だったBen FryとCasey Reas によりProcessing が生みだされた(2001)‣ その後バージョンアップを重ねて現在のバージョンは1.5.1‣ Javaをベースにしたクロスプラットフォーム‣ Mac OSX, Windows, Linux 版
  8. 8. Processingに触れてみる‣ まずは起動してみる‣ Processingの起動画面
  9. 9. Processingに触れてみる‣ メニューの解説‣ 操作方法‣ 先週は(素の)Javascirptで記述した形態の描画をProcessing.jsで書いてみる
  10. 10. 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に触れてみる‣ 以下のコードを記入
  11. 11. Processingに触れてみる‣ Javascirptモードにして実行 → Webブラウザで表示‣ とっても簡単!!
  12. 12. アニメーション
  13. 13. アニメーション‣ 今日は早速アニメーションに挑戦‣ まずは全体の枠組みを理解する!‣ アニメーションを実現するには、プログラムをより構造化していく必要‣ setup()とupdate()という二つのパートに構造化してアニメーションを実現する
  14. 14. アニメーション‣ setup() ‒ 初期設定: プログラムの起動時に一度だけ実行されます。画面の基本設定やフレームレートなどを設定します。‣ draw() ‒ 描画: 設定した速さ(フレームレート)でプログラムが終了するまでくりかえし実行されます。
  15. 15. アニメーション‣ この仕組みを利用して円が斜め下に移動するプログラムを作成してみる
  16. 16. 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; //円の初期位置XposY = 40; //円の初期位置YspeedX = 3; //円の初期位置XspeedY = 2; //円の初期位置Y}void draw() {background(15); //背景を描画ellipse(posX, posY, 20, 20); //指定した位置に円を描画posX = posX + speedX; //円のX座標を更新posY = posY + speedY; //円のY座標を更新}アニメーション‣ 以下のコードを記入
  17. 17. アニメーション‣ 円がアニメーションする(はず)
  18. 18. アニメーション‣ 画面の端でバウンドさせてみる‣ 以下の条件を設定する必要‣ 画面の右端、もしくは画面の左端 → X方向のスピードを反転‣ 画面の上端、もしくは画面の下端 → Y方向のスピードを反転‣ if文‣ このような「もし○○だったら、□□しなさい、(そうでなければ、△△△しなさい)」というような制御構造を表現するための仕組み
  19. 19. if(《条件式》){《真文》//条件が正しい場合の処理} else {《偽文》//条件が正しくない場合の処理}アニメーション‣ if文の文法
  20. 20. 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; //円の初期位置XposY = 40; //円の初期位置YspeedX = 3; //円の初期位置XspeedY = 2; //円の初期位置Y}アニメーション‣ 条件分岐をつかって、壁でバウンドさせてみる
  21. 21. 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方向のスピードを反転}}アニメーション‣ 条件分岐をつかって、壁でバウンドさせてみる
  22. 22. アニメーション‣ たくさんの図形を一度に動かしてみる‣ 先週やったfor文の応用‣ データの持ち方に工夫が必要 → 配列‣ データのロッカーのようなイメージ
  23. 23. // float型の領域100コを確保、dataという配列名にfloat data[] = new float[100];// data[0], data[1], data[2] ... data[99] まで一気に生成!アニメーション‣ 配列の定義の方法の例
  24. 24. アニメーション‣ 配列とくりかえしを使用して、先程の壁でバウンドするプログラムを改造‣ たくさんの図形を同時に動かしてみる!
  25. 25. 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); //円の初期位置XposY[i] = random(height); //円の初期位置YspeedX[i] = random(-5,5); //円の初期位置XspeedY[i] = random(-5,5); //円の初期位置Y}}アニメーション‣ 配列を使用して、たくさんの図形を動かす
  26. 26. 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方向のスピードを反転}}}アニメーション‣ 配列を使用して、たくさんの図形を動かす
  27. 27. アニメーション‣ たくさんの図形が同時に動く!!
  28. 28. アニメーション‣ 今日はここまで!!

×