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

講義ノート

• オリエンテーション
• かたちとコード – p5.jsで図形を描くには?
• 反復と乱数
• 動きを生みだす – アニメーションとベクトル
• p5.jsで画像データを扱う – 画像の分析・再合成
• 関数によるモジュール化とバリエーション
• 番外編: ライブコーディング入門 
• p5.js オブジェクト指向プログラミング(1)
• p5.js オブジェクト指向プログラミング(2) – コンストラクタと、オブジェクトのバリエーション
• 最終課題へ向けて! – Patatapを作る!
• Beyond p5.js – 次のステップへ！

最終課題提出

最終課題「Patatapを作る」

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

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

最終課題提出フォーム

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

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

締切 : 2023年1月10日 (水)

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

科目概要

クリエイティブ・コーディングのための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のいずれか) の基本操作について習得していること