SFC – デザインとプログラミング 2025
最終課題へ向けて! – Patatapを作る!
この講義「デザインとプログラミング」では、変数と定数、反復、乱数、論理式と条件文、アニメーションとベクトル、配列の操作、関数、そしてオブジェクト指向プログラミングと様々なトピックスを扱ってきました。最終課題はこれらの内容を総動員して、Patatap (https://patatap.com/) のようなインタラクティブなオーディオビジュアル作品をp5.jsで制作します。
Patatapはとてもシンプルなインタラクションで構成された作品です。キーボードを操作すると、それぞれのキーにシンプルなアニメーションが割り振られていて、同時にサンプリングされたサウンドが鳴るようになっています。仕組みはとても単純なのですが、キーボードをリズムにあわせてタイピングすることで音と映像が同期して、まるでVJのパフォーマンスをしているような気分を味わえます。キーボードの組み合わせは無限にあるので、いつまでも飽きることがありません。
今回は、最終課題に向け、p5.jsをつかってPatatapを制作するための方法について解説していきます。
スライド資料
制作テンプレート
今日はあらかじめサウンドファイルをアップロードしたテンプレートを用意しました
- OpenProcessingで制作する場合: 下記のスケッチをForkして使用
- VScodeで制作する場合: 下記のファイル一式をダウンロード
- サウンドファイルのみダウンロード
最終課題提出
最終課題「Patatapを作る」
最終課題制作のオンデマンドの教材を参考にしながら「Patatap」のようにキーボードからのタイピングで音と映像が同期する作品を制作してください。
- 投稿したOpenProcessingのURLを提出
- 投稿の際に sfc25final のタグをつけてください!
- 締切 : 2026年1月23日 (木)
- 制作テンプレート
今後のスケジュール
- 12月19日 (金) : コンストラクタとオブジェクトのバリエーション
- 12月26日 (金) : 最終課題に向けて – Patatapをつくる
- 1月9日 (金) : Beyond p5.js – p5.jsを越えて
- 1月16日 (金) : 休み (月曜日の講義振替日)
- 1月23日 (金) : 休講 (申し訳ありません!)
- 1月24日 (土) : 補講 (3、4、5限) 3限に講評会
本日のアンケート
(最終課題提出フォームとは別で) 本日の講義に参加した方は以下のフォームに回答してください。
