yoppa.org

情報メディアデザイン 2025

  • 開講学科 : 建築・都市・環境工学群
  • 標準対象年次: 2年
  • 単位数: 2単位
  • 担当教員: 田所　淳
  • 学期: 前期
  • 曜日時限: 木曜3限

授業の概要

テーマ: プログラミングを用いた表現の基礎を学ぶ

情報メディアを用いた様々な作品の実例を紹介しながら、実際にプログラミングを用いて簡単な作品制作を通して情報メディアデザインについての導入を行う。プログラミングの演習では、初心者を対象に、環境構築からプログラム構造の基本、アルゴリズムを用いたデザインや形態の生成などを学ぶ。この講義はプログラミング初心者を対象としている。プログラミングの経験や習熟度は問わない。

建築・都市・環境工学群では建築、土木、工学デザインと多岐に渡る専門分野が用意されている。現在は自分にはプログラミングは関係無いと考えていたとしても、実際にはどの分野に進むにしてもプログラミングで表現する能力はとても重要なものである。この講義はどの分野を専攻するかに関わらず履修して学習することを推奨する。

キーワード

情報メディアデザイン、コンピューテーショナルデザイン、クリエイティブコーディング、メディアアート、プログラミング

講義資料

  1. オリエンテーション、生成AIとプログラミング
  2. コードによる表現 – Creative Coding
  3. かたちとコード / 基本図形と色彩による画面構成

受講条件・関連科目

  • 自分のノートPCを授業に持参してくること (BYOD)
  • PCの基本操作は理解していること

授業方法

  • 受講者のノートPCを使用したBYOD形式で講義室で授業を行う

講義のための環境設定

1. Githubアカウントの作成

この講義では、Github Copilotを活用した生成AIによるコーディングを推奨しています。下記の映像やリンクを参考に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のインストールが完了したら、以下の拡張機能をどんどん追加していきます!

2.3. Github Copilot Freeプランの導入

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

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

3. OpenProcessingへのユーザー登録

今後、作品の共有にはOpenProcessingを使用します。下記のページからユーザー登録をしておいてください。「Join」のリンクから登録します。

参考書

  • 田所淳 Processingクリエイティブ・コーディング入門: コードが生み出す創造表現. (2017). Japan: 技術評論社.
  • 田所淳 Beyond Interaction: クリエイティブ・コーディングのためのopenFrameworks実践ガイド. (2020). Japan: ビーエヌエヌ新社.
  • 田所淳 演奏するプログラミング、ライブコーディングの思想と実践: Show Us Your Screens. (2018). Japan: ビーエヌエヌ新社.
  • Fry, B., Reas, C. (2014). Processing, Second Edition: A Programming Handbook for Visual Designers and Artists. United States: MIT Press.
  • McCarthy, L., Reas, C., Fry, B. (2015). Getting Started with P5.js: Making Interactive Graphics in JavaScript and Processing. United States: Maker Media, Incorporated.

成績評価

  • 中間課題発表 (30%)
  • 最終課題発表 (70%)