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

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

最終課題提出

最終課題「Patatapを作る」

最終課題制作のオンデマンドの教材を参考にしながら「Patatap」のようにキーボードからのタイピングで音と映像が同期する作品を制作してください。

• 投稿したOpenProcessingのURLを提出
• 投稿の際に sfc21final のタグをつけてください!
• 締切 : 2022年1月12日 (水)
• 最終課題講評会で発表する方もこちらに回答してください

最終課題提出フォーム

最終課題講評会での発表希望調査

この授業の最終課題の講評会を2022年1月14日と21日の2回に分けて開催します。講評会での発表をした方は一律10点 (100点満点中) 加算します。発表を希望する方は以下に学籍番号と氏名を記入してください。

締切 : 2022年1月12日 (水)

最終課題発表希望登録フォーム

今後のスケジュール

• 12月24日 : 最終課題制作に向けて (レクチャー)

(冬休み)

• 1月14日 : 最終課題講評会 (1)
• 1月21日 : 最終課題講評会 (2)

講義ノート

1. イントロダクション – Creative Codingとは? p5.jsについて 
2. かたちとコード – p5.jsで図形を描くには?
3. 反復と乱数
4. 動きを生みだす – アニメーションとベクトル
5. p5.jsで画像データを扱う – 画像の分析・再合成
6. p5.dom でHTML 5オブジェクトを使う
7. 関数によるモジュール化とバリエーション
8. p5.js オブジェクト指向プログラミング1
9. p5.js オブジェクト指向プログラミング2 – コンストラクタと、オブジェクトのバリエーション
10. p5.soundでサウンドプログラミング
11. 最終課題へ向けて! – Patatapを作る!

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のいずれか) の基本操作について習得していること