yoppa.org


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

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

  • a02_moviCircleObject

  • a03_moviCircleObject2

  • a04_functionPre

  • a05_function

  • a06_function2

  • a07_objectFunction

  • a08_constructor

  • a09_objectArray

  • a10_finalProjectTemplate

  • a11_finalProjectAnimation