Web応用3 : Javascript中級編 – オブジェクト、関数、オブジェクトの配列
今回は、最終プロジェクトのための準備として、p5.jsについてもう少し突っ込んだ内容の理解を深めます。
p5.jsとProcessingとの大きな違いは、ProcessingがJavaをベースとしているのに対して、p5.jsはJavaScriptをベースにしています。JavaとJavaScriptは名前は似ていますが、全く別の言語です (ハムとハムスターくらい違います!)。ですので、p5.jsで、オブジェクトを使用したり、オブジェクトの配列を作るには、Java版のProcessingとは若干やり方が異なってきます。
今回は、p5.jsのJavaScriptとしての側面を意識しつつ、以下の内容を理解します。
- オブジェクト (Object)
- 関数 (Function)
- オブジェクト内の関数
- コンストラクタ (Constructor)
- オブジェクトの配列
スライド資料
サンプルプログラム
ソースコード
- a01_moveCircleNoObject
var x = 0; //x座標
var y = 200; //y座標
var diameter = 50;
function setup() {
createCanvas(600, 400);
}
function draw() {
//円が横に移動するアニメーション
background(0);
fill(255, 127, 31);
ellipse(x, y, diameter, diameter);
x = x + 1;
}
- a02_moviCircleObject
// circleオブジェクト
var circle = {
x:0, //x座標
y:200, //y座標
diameter:50 //直径
};
function setup() {
createCanvas(600, 400);
}
function draw() {
//円が横に移動するアニメーション
background(0);
fill(255, 127, 31);
ellipse(circle.x, circle.y, circle.diameter, circle.diameter);
circle.x = circle.x + 1;
}
- a03_moviCircleObject2
// circleオブジェクト
var circle = {
x:0, //x座標
y:200, //y座標
diameter:50, //直径
color:{r:255, g:127, b:31} //色 (オブジェクト)
};
function setup() {
createCanvas(600, 400);
}
function draw() {
background(0);
fill(circle.color.r, circle.color.g, circle.color.b);
ellipse(circle.x, circle.y, circle.diameter, circle.diameter);
circle.x = circle.x + 1;
}
- a04_functionPre
// bubbleオブジェクト
var bubble = {
x: 300, // x座標
y: 200 // y座標
}
function setup() {
createCanvas(600, 400);
}
function draw() {
// bubbleの位置に円を描く
background(0);
stroke(255);
strokeWeight(4);
noFill();
ellipse(bubble.x, bubble.y, 24, 24);
// 移動
bubble.x = bubble.x + random(-1, 1);
bubble.y = bubble.y + random(-1, 1);
}
- a05_function
// bubbleオブジェクト
var bubble = {
x: 300, // x座標
y: 200 // y座標
}
function setup() {
createCanvas(600, 400);
}
function draw() {
move(); //移動
display(); //表示
}
// 表示を定義した関数 display()
function display() {
background(0);
stroke(255);
strokeWeight(4);
noFill();
ellipse(bubble.x, bubble.y, 24, 24);
}
// 移動を定義した関数 move()
function move() {
bubble.x = bubble.x + random(-1, 1);
bubble.y = bubble.y + random(-1, 1);
}
- a06_function2
// bubbleオブジェクト
var bubble = {
x: 300, // x座標
y: 200 // y座標
}
function setup() {
createCanvas(600, 400);
}
function draw() {
move(2.0); //移動
display(); //表示
}
// 表示を定義した関数 display()
function display() {
background(0);
stroke(255);
strokeWeight(4);
noFill();
ellipse(bubble.x, bubble.y, 24, 24);
}
// 移動を定義した関数 move() スピードを指定
function move(speed) {
bubble.x = bubble.x + random(-speed, speed);
bubble.y = bubble.y + random(-speed, speed);
}
- a07_objectFunction
// bubbleオブジェクト
var bubble = {
x: 300, // x座標
y: 200, // y座標
//円を表示する関数
display: function() {
background(0);
stroke(255);
strokeWeight(4);
noFill();
ellipse(bubble.x, bubble.y, 24, 24);
},
//泡を移動する関数
move: function(speed) {
this.x = this.x + random(-speed, speed);
this.y = this.y + random(-speed, speed);
}
}
function setup() {
createCanvas(600, 400);
}
function draw() {
bubble.display(); //表示
bubble.move(2.0); //移動
}
- a08_constructor
var bubble; //Bubbleクラスのインスタンス
function setup() {
createCanvas(600, 400);
// Bubbleオブジェクトを初期化して、bubbleを生成
bubble = new Bubble();
}
function draw() {
background(0);
bubble.move();
bubble.display();
}
// Bubbleクラス
function Bubble() {
//パラメータを初期化
this.x = random(0, width);
this.y = random(0, height);
this.speed = random(2.0);
// 移動
this.move = function() {
this.x = this.x + random(-this.speed, this.speed);
this.y = this.y + random(-this.speed, this.speed);
};
// 表示
this.display = function() {
stroke(255);
strokeWeight(4);
noFill();
noFill();
ellipse(this.x, this.y, 24, 24);
};
}
- a09_objectArray
var bubble = []; //Bubbleクラスのインスタンスの配列
function setup() {
createCanvas(600, 400);
//配列の数だけBubbleオブジェクトを初期化して、bubbleを生成
for (var i = 0; i < 100; i++) {
bubble[i] = new Bubble();
}
}
function draw() {
background(0);
//配列の数だけ移動して表示
for (var i = 0; i < 100; i++) {
bubble[i].move();
bubble[i].display();
}
}
// Bubbleクラス
function Bubble() {
//パラメータを初期化
this.x = random(0, width);
this.y = random(0, height);
this.speed = random(2.0);
// 移動
this.move = function() {
this.x = this.x + random(-this.speed, this.speed);
this.y = this.y + random(-this.speed, this.speed);
};
// 表示
this.display = function() {
stroke(255);
strokeWeight(4);
noFill();
noFill();
ellipse(this.x, this.y, 24, 24);
};
}
- a10_finalProjectTemplate
var sample = []; //サウンドファイルの配列
var animation; // 現在再生しているアニメーション
// サウンドファイルをプレロード
function preload() {
sample[0] = loadSound('assets/se01.wav');
sample[1] = loadSound('assets/se02.wav');
sample[2] = loadSound('assets/se03.wav');
sample[3] = loadSound('assets/se04.wav');
}
// 初期設定
function setup() {
createCanvas(windowWidth, windowHeight);
}
// アニメーションを再生
function draw() {
background(0);
if (animation) {
animation.draw();
}
}
// キー入力でサウンドを再生 + アニメーションを選択
function keyTyped() {
if (key == 'a') {
sample[0].play();
animation = new Anim_a();
}
if (key == 's') {
sample[1].play();
animation = new Anim_s();
}
if (key == 'd') {
sample[2].play();
animation = new Anim_d();
}
if (key == 'f') {
sample[3].play();
animation = new Anim_f();
}
}
// アニメーションを定義
// Animation A
function Anim_a() {
this.draw = function() {
};
}
// Animation S
function Anim_s() {
this.draw = function() {
};
}
// Animation D
function Anim_d() {
this.draw = function() {
};
}
// Animation F
function Anim_f() {
this.draw = function() {
};
}
- a11_finalProjectAnimation
var sample = []; //サウンドファイルの配列
var animation; // 現在再生しているアニメーション
// サウンドファイルをプレロード
function preload() {
sample[0] = loadSound('assets/se01.wav');
sample[1] = loadSound('assets/se02.wav');
sample[2] = loadSound('assets/se03.wav');
sample[3] = loadSound('assets/se04.wav');
}
// 初期設定
function setup() {
createCanvas(windowWidth, windowHeight);
}
// アニメーションを再生
function draw() {
background(0);
if (animation) {
animation.draw();
}
}
// キー入力でサウンドを再生 + アニメーションを選択
function keyTyped() {
if (key == 'a') {
sample[0].play();
animation = new Anim_a();
}
if (key == 's') {
sample[1].play();
animation = new Anim_s();
}
if (key == 'd') {
sample[2].play();
animation = new Anim_d();
}
if (key == 'f') {
sample[3].play();
animation = new Anim_f();
}
}
// アニメーションを定義
// ------------------------------------------------------
// Animation A
function Anim_a() {
this.x = width / 2; //X初期位置を画面の中心に
this.y = height / 2; //y初期値を画面の中心に
this.diameter = 0; //直径の初期値を0に
this.speed = 10; //スピードを10に
this.draw = function() {
noStroke(); // 線は描かない
fill(0, 127, 255); // 塗りの色を設定
//指定した直径で円を描く
ellipse(this.x, this.y, this.diameter, this.diameter);
this.diameter += this.speed; //スピードの値分、直径を増加させる
};
}
// ------------------------------------------------------
// Animation S
function Anim_s() {
this.width = 0; //幅の初期値を0に
this.speed = 80; //スピードを80に
this.draw = function() {
noStroke();
fill(255, 0, 0);
rectMode(CORNER); // 四角形の描画モードをCORNERに
rect(0, 0, this.width, height); //四角形を描画
this.width += this.speed; //四角形の幅を変化させる
};
}
// ------------------------------------------------------
// Animation D
function Anim_d() {
this.rotate = 0; //回転角度の初期値を0に
this.size = 0; //サイズの初期値を0に
this.speed = 50; //スピードの初期値を0に
this.draw = function() {
push(); //座標を記録
fill(255, 255, 0);
noStroke();
//原点(中心軸)を画面の中心に
translate(width / 2, height / 2);
//指定した角度で回転
rotate(radians(this.rotate));
//四角形の描画モードを設定
rectMode(CENTER);
rect(0, 0, this.size, this.size); //四角形を描く
pop(); //座標を復元
this.rotate += this.speed; //角度を変更
this.size += this.speed; //サイズを変更
};
}
// ------------------------------------------------------
// Animation F
function Anim_f() {
this.bgColor = 255; //初期の色を白に
this.speed = -2; //スピードを-2に
this.draw = function() {
noStroke();
fill(this.bgColor); // 設定した色で描画
rect(0, 0, width, height); //四角形を描く
this.bgColor += this.speed; //色を変更
};
}