• 慶應義塾大学湘南藤沢キャンパス
• 総合政策学部・環境情報学部
• 2018年度秋学期、水曜日3時限
• 教室: ι11
• 担当教員: 田所淳
• 履修条件: PC (macOS、Windows、Linuxのいずれか) の基本操作について習得していること。
• 学生が準備するソフト・機材: macOS、Windows、LinuxのいずれかのOSがインストールされたノートPC

講義ノート

• 第1回: イントロダクション – Creative Codingとは? p5.jsについて
• 第2回: かたちとコード – p5.jsで図形を描くには?
• 第3回: 反復と乱数
• 第4回: 動きを生みだす – アニメーションとベクトル
• 第5回: 生成的な形をつくる – p5.js オブジェクト指向プログラミング入門
• 第6回: p5.jsで画像データを扱う – 画像の分析・再合成
• 第7回: p5.js Libraryを使う 1 – p5.dom でHTML 5オブジェクトを使う
• 第8回: p5.js Libraryを使う 2 – p5.soundでサウンドプログラミング (1)
• 第9回: p5.js Libraryを使う 2 – p5.soundでサウンドプログラミング (2)
• 第10回: p5.jsで3Dグラフィクスをプログラミング
• 第11回: 最終課題のヒント – インタラクションを表現する
• 第12回: 最終課題のヒント2 – Patatapを作ってみる

最終課題について

最終課題のテーマ「インタラクションを表現する」

外部からの何らかのアクションに対して反応する(インタラクション)作品を、この講義で学んだp5.jsを用いて表現してください。プログラムは、p5.jsを使用していることを条件とします。ただし、他のプログラムと組み合わせても構いません。

ユーザーのアクションはマウスやキーボードだけとは限りません。

• 映像
• 音
• ネットワーク
• 各種センサー

など様々な入力に対するインタラクションを斬新なアイデアで表現してください。

提出するもの

• OpenProcessingに提出した作品のURL
• 作品タイトル
• 作品解説 : 200〜400文字程度

提出方法・締切

• SFC-SFSのレポートシステムより提出
• 2019年1月7日締切

科目概要

クリエイティブ・コーディングのためのJavaScriptのライブラリー「p5.js」を使用して、デザインとプログラミングについて考察する。また、実際にコーディングしながら実習・作品制作を行う。主にプログラミングの初心者を対象に、視覚的な表現を通して、プログラミングの基礎(制御構造、くりかえし)から始まり、最終的には、3D表現や画像処理、データ解析などを用いた高度な表現を取得することを目標とする。

主題と目標／授業の手法など

この授業では、プログラミングを通してデザインについて考えます。デザインといっても、一般的に連想する図案や形態を扱う「グラフィックデザイン」という狭義の意味にとどまらず、「インタラクションデザイン」や「サウンドデザイン」、さらにはコーディングの際の「デザインパターン」など、幅広い意味でデザインを捉え、プログラミングによって実現していきます。

授業では、オープンソースのJavaScriptのライブラリーp5.jsを使用します。p5.jsは、Processingから派生したJavaScriptによる視覚的な表現やデザインのための開発環境で、初心者でもすぐにプログラミングが始められるよう設計されています。

p5.jsを用いたプログラミングの基本から始めて、最終的には p5.jsで3D表現や画像処理、データ解析など、高度なプログラミングによる表現が可能となることを目標とします。

教材・参考文献

• ベン・フライ(著)、ケイシー・リース(著)、中西泰人(監修)、安藤幸央(翻訳)、澤村正樹(翻訳)、 杉本達應(翻訳)、Processing:ビジュアルデザイナーとアーティストのためのプログラミング入門、ビー・エヌ・エヌ新社、2015、688p
• 田所 淳(著)、齋藤あきこ(著、編集)、Beyond Interaction – クリエイティブ・コーディングのためのopenFrameworks実践ガイド、改訂第2版、ビー・エヌ・エヌ新社、2013、282p
• Casey Reas(著)、Ben Fry(著)、船田 巧(翻訳)、Processingをはじめよう 第2版 (Make: PROJECTS)、オライリージャパン、2011、252p、(Make: PROJECTS)、2016、284p
• Casey Reas(著)、久保田 晃弘 (監修)、吉村 マサテル(翻訳)、FORM+CODE -デザイン／アート／建築における、かたちとコード、ビー・エヌ・エヌ新社、2011、184p
• ダニエル・シフマン (著), Daniel Shiffman (著), 尼岡 利崇 (監修), 鈴木 由美 (編集), 株式会社Bスプラウト (翻訳)、Nature of Code -Processingではじめる自然現象のシミュレーション、ボーンデジタル、2014、440p
• マット・ピアソン (著),沖 啓介(翻訳),久保田 晃弘(監訳)、ジェネラティブ・アート-Processingによる実践ガイド、ビー・エヌ・エヌ新社、2014、245p
• Hartmut Bohnacker (著), Benedikt Gross (著), Julia Laub (著), 国分 宏樹 (監修), 深津 貴之 (監修), Claudius Lazzeroni (編集), 久保田 晃弘 (その他), Generative Design ―Processingで切り拓く、デザインの新たな地平, ビー・エヌ・エヌ新社、2016、488p

提出課題・試験・成績評価の方法など

履修態度、課題提出(中間課題・最終課題)の内容を総合的に評価します。

履修上の注意

• PC (macOS、Windows、Linuxのいずれか) の基本操作について習得していること
• macOS、Windows、LinuxのいずれかのOSがインストールされたノートPCを持参すること