Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie 情報編集(Web) HTML5 実践2 Processing.jsを使う
Ähnlich wie 情報編集(Web) HTML5 実践2 Processing.jsを使う (20)
Mehr von Atsushi Tadokoro
Mehr von Atsushi Tadokoro (20)
情報編集(Web) HTML5 実践2 Processing.jsを使う
- 2. 今日の内容 ‣ 前回 - JavascriptでCanvasに図形を描いた ‣ なかなか面倒!! ‣ より効率的で簡単な方法は無いか? ‣ Processing.js という開発環境を紹介 ‣ Processing.js - ProcessingのJavaScirpt版 ‣ Processingの文法で、HTML5(Canvas)に描画 ‣ Processingって何?
- 4. 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.
- 6. Processing 誕生の歴史 ‣ Design by Numbers - John Maeda (MIT Media Lab.) ‣ http://dbn.media.mit.edu/ ‣ Processingの祖先
- 7. Processing 誕生の歴史 ‣ MIT Media Lab. で John Maedaの博士課程の学生だった Ben FryとCasey Reas によりProcessing が生みだされた (2001) ‣ その後バージョンアップを重ねて現在のバージョンは1.5.1 ‣ Javaをベースにしたクロスプラットフォーム ‣ Mac OSX, Windows, Linux 版
- 9. Processingに触れてみる ‣ メニューの解説 ‣ 操作方法 ‣ 先週は(素の)Javascirptで記述した形態の描画を Processing.jsで書いてみる
- 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. Processingに触れてみる ‣ Javascirptモードにして実行 → Webブラウザで表示 ‣ とっても簡単!!
- 12. アニメーション
- 13. アニメーション ‣ 今日は早速アニメーションに挑戦 ‣ まずは全体の枠組みを理解する! ‣ アニメーションを実現するには、プログラムをより構造化して いく必要 ‣ setup()とupdate()という二つのパートに構造化してアニ メーションを実現する
- 14. アニメーション ‣ setup() ‒ 初期設定: プログラムの起動時に一度だけ実行され ます。画面の基本設定やフレームレートなどを設定します。 ‣ draw() ‒ 描画: 設定した速さ(フレームレート)でプログラムが 終了するまでくりかえし実行されます。
- 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; //円の初期位置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座標を更新 } アニメーション ‣ 以下のコードを記入
- 18. アニメーション ‣ 画面の端でバウンドさせてみる ‣ 以下の条件を設定する必要 ‣ 画面の右端、もしくは画面の左端 → X方向のスピードを反転 ‣ 画面の上端、もしくは画面の下端 → Y方向のスピードを反転 ‣ if文 ‣ このような「もし○○だったら、□□しなさい、（そうでなけ れば、△△△しなさい）」というような制御構造を表現するた めの仕組み
- 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; //円の初期位置X posY = 40; //円の初期位置Y speedX = 3; //円の初期位置X speedY = 2; //円の初期位置Y } アニメーション ‣ 条件分岐をつかって、壁でバウンドさせてみる
- 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. アニメーション ‣ たくさんの図形を一度に動かしてみる ‣ 先週やったfor文の応用 ‣ データの持ち方に工夫が必要 → 配列 ‣ データのロッカーのようなイメージ
- 23. // float型の領域100コを確保、dataという配列名に float data[] = new float[100]; // data[0], data[1], data[2] ... data[99] まで一気に生成! アニメーション ‣ 配列の定義の方法の例
- 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); //円の初期位置X posY[i] = random(height); //円の初期位置Y speedX[i] = random(-5,5); //円の初期位置X speedY[i] = random(-5,5); //円の初期位置Y } } アニメーション ‣ 配列を使用して、たくさんの図形を動かす
- 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方向のスピードを反転 } } } アニメーション ‣ 配列を使用して、たくさんの図形を動かす