![// float型の領域100コを確保、dataという配列名に
float data[] = new float[100];
// data[0], data[1], data[2] ... data[99] まで一気に生成!
アニメーション
‣ 配列の定義の方法の例](https://image.slidesharecdn.com/infoedit130625-130624163131-phpapp01/85/Web-HTML5-2-Processing-js-23-320.jpg)
![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
}
}
アニメーション
‣ 配列を使用して、たくさんの図形を動かす](https://image.slidesharecdn.com/infoedit130625-130624163131-phpapp01/85/Web-HTML5-2-Processing-js-25-320.jpg)
![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方向のスピードを反転
}
}
}
アニメーション
‣ 配列を使用して、たくさんの図形を動かす](https://image.slidesharecdn.com/infoedit130625-130624163131-phpapp01/85/Web-HTML5-2-Processing-js-26-320.jpg)
情報編集(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方向のスピードを反転 } } } アニメーション ‣ 配列を使用して、たくさんの図形を動かす