多摩美 – サウンド&ネット 2015年度

Web応用3 : Javascript中級編 – オブジェクト、関数、オブジェクトの配列

December 14, 2015

今回は、最終プロジェクトのための準備として、p5.jsについてもう少し突っ込んだ内容の理解を深めます。

p5.jsとProcessingとの大きな違いは、ProcessingがJavaをベースとしているのに対して、p5.jsはJavaScriptをベースにしています。JavaとJavaScriptは名前は似ていますが、全く別の言語です (ハムとハムスターくらい違います!)。ですので、p5.jsで、オブジェクトを使用したり、オブジェクトの配列を作るには、Java版のProcessingとは若干やり方が異なってきます。

今回は、p5.jsのJavaScriptとしての側面を意識しつつ、以下の内容を理解します。

オブジェクト (Object)
関数 (Function)
オブジェクト内の関数
コンストラクタ (Constructor)
オブジェクトの配列

スライド資料

Web応用2 : Javascript中級編 – オブジェクト、関数、オブジェクトの配列

サンプルプログラム

サンプルプログラム 12月15日

ソースコード

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; //色を変更
  };
}