yoppa.org

前橋工科大学 – 工学デザイン実習 II 2025

最終課題について・課題制作の手順

スライド資料

今期の工学デザイン実習IIの情報メディアデザイン分野の最終課題の内容の説明と、その制作の手順について解説します。しっかりと理解して課題を提出するようにしてください。

最終課題

書籍「Generative Design」のサンプルを元にして、p5.jsを用いてジェネラティブデザインの作品を制作して提出してください。コーディングには生成AI (Github Copilot) などを用いて構いません。

最終課題提出フォーム

課題提出期限: 2026年1月25日 23:59

参考資料

GitHub Copilot を極める会

制作の手順

1. Generative Design (p5.js版) のサンプルをダウンロード

2. Visual Studio Code でサンプルのフォルダを開いて「Go Live」

  • Visual Studio Code起動
  • 上部メニューから File > Open Folder 選択
  • 展開したフォルダ「Code-Package-p5.js-1.4.3」を選択
  • 画面右下にある「((.)) Go Live」ボタンを押す
  • Webブラウザでサンプル一覧が表示されるはず
height:600

3. Webブラウザでサンプルを閲覧、気にいったスケッチを1つピックアップ

  • サンプルのサムネイルをクリックすると、スケッチが表示される
  • 気にいったサンプルを1つ選択しその番号を記録 例: P_1_0_01
  • Visual Studio Codeから同じ名前のフォルダ内の「sketch.js」を開く
height:360

4. Visual Studio Code + Github Copilotの環境を駆使してプログラムを解析

  • Visual Studio Codeの上部にある「ふきだし」のアイコンを押してチャット画面を表示
  • プロンプト入力覧の下部の設定を「Ask」「Auto」に
  • プログラムを解析するプロンプト (質問) を入力
    • 例: 「このコードの内容を説明してください」…etc.
height:320

5. プログラムを改造して独自の作品にする (Github Copilot使用可)

  • プロンプトからいろいろリクエストしてみる
    • 「変化する図形を正方形ではなく円にしてください」
    • 「色が変化しながら回転するようにしてください」など
  • コードが生成されたらコード画面上部の「Apply」ボタンを押す
  • コードが更新されたら「Keep」を選択して確定する
height:300
  • ブラウザで表示したスケッチが更新されているはず!
height:480

6. 提出フォームからコードを提出 (sketch.js)

以下のフォームから提出してください!

height:400