yoppa.org

多摩美 - サウンド&ネット 2014年度

第4回: Web応用1 – Webブラウザでプログラミング、p5.js入門

この講義のここまで前半3回では「Web基礎」と題して、HTMLとCSSの基本、そしてTumblrを使用したオンライン・ポートフォリオの作成について解説してきました。前半のまとめとして、作成したオンライン・ポートフォリオのベースとなる部分を提出してもらいます。提出方法は授業内で指示します。

いよいよ後半は、サウンド&ネットのサウンドのパートとも協力して、Web上で音を使用した作品を公開することを最終目標に、新たな内容に進んでいきます。

JavaScript – Webブラウザでプログラミングする

これまで取り扱ってきた、HTMLやCSSは人工的に仕様が策定された言語ではありますが、プログラミング言語ではありませんでした（HTMLはマークアップ言語、CSSはスタイルシート言語）。

HTMLやCSSとは別に、Webブラウザ上で動作させることのできるプログラミング言語が存在します。その代表的な言語がJavaScriptです。

現在、Webサイトは「文書」を載せるためのメディアから、「アプリケーション」を作動させるためのプラットフォームへとその姿を変えつつあります。そのための技術を総称して（広義の）HTML5と呼ばれ、次世代のWeb技術として注目されています。

JavaScriptはこうしたHTML5の技術を支える根幹となるプログラミング言語といえます。

※ 注意: プログラミング言語のJavaとJavaScriptは、名称が似ているので関連する技術と勘違いされがちですが、全く関係ありません。「ハム」と「ハムスター」くらい違います。

JavaScriptのためのライブラリ

JavaScirptはプログラミング言語や開発環境をダウンロードしたり設定しなくても、Webブラウザさえあえればすぐにプログラミングが可能です。ただし、JavaScript単体でプログラミングするには、ある程度のプログラミングに関する知識と学習が必要となります。

JavaScriptでは、開発を容易にするための拡張機能として、ライブラリ（Library）と呼ばれる、汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたものが数多く開発され、フリーウェアとして配布されています。

代表的なものだけでも数多くのライブラリが存在しています。

こうした数多くのライブラリの中から、今回はp5.jsというライブラリを使用していきたいと考えています。

p5.js

p5.jsはアーティストでプログラマーのLauren McCarthyさんを中心に、Processing Foundationやニューヨーク大学ITPのサポートで開発されています。

p5.jsを採用した理由はいくつかあります。

  • 既に春学期にProcessingを学んでいるので、導入が楽
  • テキストやビデオ（Webcamからの入力を含む）、サウンドといったHTML5の他の要素を使用できる
  • わかりやすい開発環境（p5 editor）が存在する
  • Processingの開発コミュニティーとの相互交流がある

様々な利点からp5.jsを活用していくことにしました。

p5.jsをはじめよう!

p5.jsの開発する場合、2通りの開発方法があります。

  • p5.jsのライブラリを手動でリンクして、テキストエディタで編集する方法
  • p5.jsの専用の開発環境（p5.js editor）を使う方法 – ただし現状ではOS X版のみ

今回は、設定が容易な専用の開発環境である「p5.js editor」を使用する二つ目の方法で導入を行います。

p5.jsのダウンローロページから、Editorの欄にある「p5.js editor」をダウンロードします。

ダウンロードした、p5.zipを展開すると、p5.appというアプリケーションが生成されます。

screenshot_389

このアイコンをダブルクリックするとエディターが起動します。

screenshot_390

まず手始めに、以下のように入力してみましょう。

function setup() {

}

function draw() {
  ellipse(50, 50, 80, 80);
}

入力したら、画面左上の実行ボタンをクリックします。するとWebブラウザが起動して、円が表示されます。

screenshot_391

さらにプログラムに追加します。

function setup() {
  createCanvas(640, 480);
}

function draw() {
  if (mouseIsPressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

このプログラムを実行してみましょう。マウスの位置に円が移動します。また、マウスをクリックしたときには黒い円、マウスボタンを押していない時には白い円になります。

screenshot_392

Processingとp5.jsの違い

ここまでやってきたように、p5.jsはProcessingにとても近い文法で簡単にWebブラウザ上でプログラミングが可能です。ただし、p5.jsとProcessingは微妙に違っている部分もあります。

Processingとp5.jsの違いは、p5.jsのGithubページ内のドキュメントにまとまっています。このドキュメントを参照しながら、違いについて解説します。

実習: p5.js演習

後半は、実習形式で進めます。以下の内容で個人で作業を行ってください。

1. サンプルを実行

  • p5.jsのサンプルページのExample以下にある、様々なサンプルをEditorにコピペして実行してみる。
  • 実行したサンプルからひとつお気に入りのプログラムを選択する。

2. サンプルを改造

  • 選択したサンプルの数値や色、動きなどを変更して、別のプグラムに改造する。

3. 発表

  • プログラムを発表、サンプルの何を変更したのか解説