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

講義ノート

1. オリエンテーション
2. かたちとコード – p5.jsで図形を描くには?
3. 反復と乱数
4. 動きを生みだす – アニメーションとベクトル
5. p5.jsで画像データを扱う – 画像の分析・再合成

科目概要

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

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

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

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

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

講義のための環境設定

1. Githubアカウントの作成

この講義では、Github Copilotを活用した生成AIによるコーディングを推奨しています。下記の映像やリンクを参考にGithubのアカウントを作成してください。

• 【2025年最新】GitHub無料でアカウント作成する方法を解説！

2. Github Copilot環境設定

Visual Studio Code + Github Copilotによるp5.jsの最強開発環境を構築します!

※ Githubアカウントを既に作成していることが前提です。

2.1. Visual Sutudio Codeのインストール

Visual Studio Codeのページからインストーラーをダウンロードしてインストールします。

2.2. Visual Studio Codeに必要な拡張機能を追加

Visual Studio Codeのインストールが完了したら、以下の拡張機能をどんどん追加していきます!

• p5.vscode
• p5js Snippets
• Github Copilot
• Github Copilot Chat

2.3. Github Copilot Freeプランの導入

下記のページにアクセスします。

• Github Copilot

画面をスクロールしていって下記の画面の「Open in VS Code」をクリックします。

教材・参考文献

• 田所 淳 (著) 、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のいずれか) の基本操作について習得していること