2021プログラミング４：外部データの使用

p5jsでは外部のデータを扱うことができます。

画像ファイルの読み込み
まず始めにp5jsで使用したい画像ファイルを用意します。jpeg形式かpng形式の画像を用意しましょう。次にp5jsのエディターを開き、ログインしておきます。p5jsのエディターのスケッチエリアの上部左側の” > “ボタンを押すと、Sketch Filesメニューが表示されます。続けて”▼”ボタンを押すとメニューが表示されるので、Upload Fileを選択し、開いたウィンドウにファイルをドラッグ・アンド・ドロップします。Sketch Filesメニュー欄にアップロードしたファイル名が表示されるので確認しておきましょう。

画像ファイルの表示
アップロードした画像ファイルをp5jsのプログラムで使用してみましょう。画像ファイルは、ここでは仮に test.jpg という名称のJPEGデータとします。

let img;

function preload() {
 img = loadImage('test.jpg');
}

function setup() {
 createCanvas(400, 400);
 background(0);
}

function draw(){
 image(img, 0, 0,400,300);
}

上記のプログラムでは、始めに画像ファイル用の変数を作成し、img と名付けます。次に、preload()関数を設定します。変数　img　にloadImage()関数を使って画像ファイル test.jpg（testは任意の名称を各自で入力してください）を格納します。画像ファイル test.jpg　を格納した変数 img　をimage()関数を使って表示します。

image()関数の各パラメータは以下のようになります。

image(画像を格納した変数, x座標, y座標, 幅, 高さ)

複数の画像ファイルを表示する
複数の画像ファイルを表示する際のプログラム例を以下に記述します。画像ファイルは、ここでは仮に test1.jpg, test2.jpg という名称の２種類のJPEGデータとします。

let img1;
let img2;

function preload() {
 img1 = loadImage('test1.jpg');
 img2 = loadImage('test2.jpg');
}

function setup() {
 createCanvas(600, 400);
 background(0);
}

function draw(){
 image(img1, 0, 0,600,400);
 image(img2, mouseX, mouseY,200,100);
}

扱える画像フォーマット
Processingで扱うことのできるラスタ画像のファイルフォーマットは、JPEG、PNG、GIF になります。
ラスタ画像とは色のついた点（ドット）の集合として画像を表現するデータ形式のことです。もとの画像サイズより拡大するとジャギー（ギザギザ）が目立つようになるなど、拡大、縮小、変形には適さない形式ですが、写真などの複雑な画像の表現に適しています。

練習：PNGデータを使用し背景を透明化した画像データを作成する。
作成した画像データを使用して、画像データがマウスカーソルの動きに追従する作品を作成してください。

サウンドの再生

はじめに、サウンドの再生を実行します。まず、フリーの音源データをインターネット上から探してデスクトップにダウンロードします。ダウンロードする音源データは必ずmp3形式を選んでください。ダウンロードした音源データの名称をtest.mp3と変更します。

次に、画像データを扱った時と同じように、p5jsのエディターを開きログインしておきます。p5jsのエディターのスケッチエリアの上部左側の” > “ボタンを押すと、Sketch Filesメニューが表示されます。続けて”▼”ボタンを押すとメニューが表示されるので、Upload Fileを選択し、開いたウィンドウにファイルをドラッグ・アンド・ドロップします。Sketch Filesメニュー欄にアップロードしたファイル名が表示されるので確認しておきましょう。

以下のコードを記述して実行ボタンを押すと音源データが再生されます。

let sound;

function preload() {
 sound = loadSound("test.mp3");
}

function setup() {
 createCanvas(400, 400);
 sound.loop();
 sound.play();
}

function draw() {

}

マウスクリックでサウンドを再生する

次にマウスをクリックすることでサウンドが再生されるプログラムを作成してみましょう。（新規でプログラムを作成する場合は、先ほどと同じようにあらかじめ音源データを追加しておきます。）

let sound;

function setup() {
 sound = loadSound('test.mp3');
 createCanvas(400, 400);
 background(255, 0, 0);
}

function mousePressed() {
 if (sound.isPlaying()) {
   sound.stop();
   background(255, 0, 0);
 } else {
   sound.play();
   background(0, 255, 0);
 }
}

音量の視覚化

サウンドの音量（ボリューム）とグラフィックスを関連づけてみましょう。

let sound, analyzer;

function preload() {
 sound = loadSound('test.mp3');
}

function setup() {
  createCanvas(400, 200);
  analyzer = new p5.Amplitude();
  sound.pause();
  sound.loop();
  analyzer.setInput(sound);
}

function draw() {
    background(0);
    let rms = analyzer.getLevel();
    fill(255,0,0);
    ellipse(width/2, height/2, 10+rms*200, 10+rms*200);
}

練習：２種類のサウンドデータを用意する。
２種類のサウンドデータの音量に合わせて変化するグラフィック作品を作成してください。

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル