この講義はZoomを利用した完全リモートで行います。ZoomのURLなどオンラインでの参加についての情報は、SFC SOLを参照してください。

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

最終課題について

最終課題テーマ「音を視る – サウンドのビジュアライズ」

最終課題は、今回解析したp5.soundライブラリーのFFTを用いて、音響をビジュアライズした作品を制作してください。

• 最終発表の受付は締切ました (12月10日)
• 履修者は全員 (最終発表を希望した人もしなかった人も) 最終作品を提出してください
  • 最終発表した作品から改良したり、別のものにしても構いません
• 最終締切は12月18日までとします。
• 読み込むサウンドファイルは自由とします (できれば著作権フリーのもので
• 音響を独自の視点でビジュアライズしてください
• OpenProcessingに提出する際に必ず「sfcdesipro20final」とタグ付けしてください

最終課題提出フォーム

講義ノート

• イントロダクション – Creative Codingとは? p5.jsについて
• かたちとコード – p5.jsで図形を描くには?
• 反復と乱数
• 動きを生みだす – アニメーションとベクトル
• p5.jsで画像データを扱う – 画像の分析・再合成
• p5.dom でHTML 5オブジェクトを使う
• p5.js Libraryを使う 1 – p5.soundでサウンドプログラミング(1)
• p5.js Libraryを使う 1 – p5.soundでサウンドプログラミング(2)
• 最終課題のためのヒント+質問の回
• 最終課題発表会 (1回目) 
• 最終課題発表会 (2回目)

p5.js プログラミング環境の構築

p5.jsのプログラミング環境の構築は、以下のページを参考にしてください。

• p5.js プログラミング環境の構築

科目概要

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

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

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

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

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

教材・参考文献

• 田所 淳 (著) 、Processing クリエイティブ・コーディング入門 – コードが生み出す創造表現、 技術評論社 、2018、240p
• ベン・フライ(著)、ケイシー・リース(著)、中西泰人(監修)、安藤幸央(翻訳)、澤村正樹(翻訳)、 杉本達應(翻訳)、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のいずれか) の基本操作について習得していること