「メディア情報学」今週から3回分を担当する松山です。よろしくお願いします。

さて、ここではコンピューターをメディア、すなわち、情報を伝達するツールとして考えてみたいと思います。

コンピューターはプログラムで動作するものであることから、まずは、みなさんにも簡単なプログラミングを用いた情報表現を体験してもらいたいと思います。

今回は、「p5.js(ピー・ファイブ・ドット・ジェー・エスと読みます)」というプログラミングツールを使ってみるところからはじめましょう。まずは習うより慣れろということで。

プログラムはコピー&ペーストせず、自分の手(キーボード入力)で書いてみてください。実際に書いてみることで、理解しやすくなると思います。

では、はじめましょう。


p5.js ウェブエディタ

まずは、ブラウザを開いて、下記URLのWebサイトにアクセスしてください。

https://p5js.org

すると、下図のようなWebサイトが表示されると思います。

Webサイト p5js.org のスクリーンショット

Webサイト p5js.org のスクリーンショット

ページ左下にある「</> Start Coding」ボタンを押してください。

こんなボタンを押す

こんなボタンを押す

すると、下のような画面が表示されると思います。

p5.js ウェブエディタのスクリーンショット

p5.js ウェブエディタのスクリーンショット

これは、「p5.js ウェブエディタ(Web Editor)」と呼ばれる、ブラウザ上で動作する p5.js の開発環境です。

これで、プログラミングを行う準備が完了しました。


プログラムの実行