yoppa.org

最終課題「Patatapを作る!」提出作品

前橋工科大学で開講された講義「データ構造とアルゴリズム」の最終課題「Patatapを作る!」に提出された作品です。キーボード (主に[a][s][d][f]の近辺)の入力に反応してサウンド再生と同時にアニメーションが表示されます。素晴しい作品が数多く集まったのでOpenProcessingのリンクを共有します!

第14回： Illustratorの基礎 (5) 最終課題について

最終課題テーマ : 前橋工科大の新しいVI(ヴィジュアル・アイデンティティー)を策定する

内容を大幅に絞り込みました! (その分クオリティーを上げましょう!)

あなたが前橋工科大学のビジュアル・アイデンティティーのデザイン担当者になったと仮定して、現在の前橋工科大のVIを全面的にリニューアルしていください。未来に向けて、前橋工科大学のイメージを刷新して魅力ある大学のイメージを発信してください。

作成するもの

  • ロゴタイプ (日本語 / 英語)
  • ロゴタイプについての解説

実際の大学のVI規定の資料を参考にしてください。

その他「大学 VI」「大学 ビジュアルアイデンティティー」「University Visual Identity」などで検索すると、いろいろな実例が公開されています。

提出フォーマット

  • 用紙サイズ : A4ヨコ
  • 枚数 : 1枚 (日英ロゴタイプと解説を1枚にレイアウトして収める)
  • レイアウト自体も評価対象です!
  • 学籍番号と氏名を入れる

提出方法

  • tadokoro+mit19@gmail.comへ提出
  • Subject : 最終課題
  • 本文に学籍番号と氏名
  • Illustratorのファイルを圧縮せずに添付

締切

  • 締切 : 2019年7月22日 (授業の前日)

サンプルファイル

最終課題のサンプルを作成しました! 参考にしてください。

第13回 : Illustratorの基礎 4 – 文字と書体、文章のデザイン

読み手が制作されたデザインから受ける印象は、書体の種類や文字の配置によって大きく変わります。また、書体や文字の配置や大きさ行送りなどによって、文章の読み安さは大きく変化します。読み手に適切に情報を伝えるデザインを制作するには、書体の種類、書体によるイメージ、タイトルに適した書体と本文に適した書体、読み易い文章のための文字の配置方法など、様々な知識が必要です。今回は文字と書体、文章のデザインについて、Illustratorを使用しながら学んでいきます。

スライド資料

第10回: p5.jsでインタラクションを表現する

John Maeda, Reactive Books (1995 to 1999)

インタラクション (Interaction) とは、動作 (action) を間 (inter) を結ぶもの、つまり複数の存在が互いに影響を及ぼしあうことを意味します。プログラムに関してのインタラクションとは、動作しているプログラムとそれを使用しているユーザとの間を結ぶ手段を意味します。コンピュータプログラムにおけるインタラクションは、基本的な機能としては、マウスやキーボードからの入力とそれに対する反応が考えられます。さらに範囲を拡大させて、カメラ入力を用いたインタラクション (ジェスチャー入力、顔認識など)、音を用いたインタラクション (音楽や音響に反応するプログラム) など様々な方法を用いることが可能です。

今回は、このインタラクションの基本に立ち返り、マウスとキーボードによるインタラクションの様々な実例を取り上げます。

スライド資料

第13回: 最終課題へ向けて! – Patatapを作る!

Image result for patatap

この講義「データ構造とアルゴリズムでは」変数と定数、反復、乱数、論理式と条件文、アニメーションとベクトル、配列の操作、関数、そしてオブジェクト指向プログラミングと様々なトピックスを扱ってきました。最終課題はこれらの内容を総動員して、Patatap (https://patatap.com/) のようなインタラクティブなオーディオビジュアル作品をp5.jsで制作します。

Patatapはとてもシンプルなインタラクションで構成された作品です。キーボードを操作すると、それぞれのキーにシンプルなアニメーションが割り振られていて、同時にサンプリングされたサウンドが鳴るようになっています。仕組みはとても単純なのですが、キーボードをリズムにあわせてタイピングすることで音と映像が同期して、まるでVJのパフォーマンスをしているような気分を味わえます。キーボードの組み合わせは無限にあるので、いつまでも飽きることがありません。

今回は、最終課題に向け、p5.jsをつかってPatatapを制作するための方法について解説していきます。

スライド資料

サンプルプログラム

第12回 : Illustratorの基礎 3 – 配色の基本、画像と写真の配置

今回も引き続きIllustratorを用いたデザインの基礎について、実際に作業しながら習得していきます。今回は、配色の基本と画像や写真の配置についてとりあげます。

調和のとれた色彩を用いるには、色についての基本的な知識が必要となります。RGBとCMYK、HSBカラースペース、色相環における類似色と補色の関係、トーンといった色彩の設計に関する基礎について学んでいきます。

さらに今回は、画像や写真の配置についても取り上げます。実験によって文字や言葉よりも画像を含む情報伝達の方がより記憶に残りやすい現象が確認されています。この現象を画像優位性効果 (Picture superiority effect = PSE) と呼びます。画像や写真の配置や扱い方によって、デザインの印象は大きく変化します。様々な画像の配置方法について紹介していきます。

スライド資料

次回までの課題

課題: 総合デザイン工学科の「ワクワクするような」紹介ポスターをつくる

  • ポスターを見た高校生が「この学科に入りたい!」と思えるようなデザインに
  • 学科の情報は以下のPDFを参照してください
  • グリッドシステムを使用して、論理的にデザインすること
  • サイズ: A3タテ
  • 写真を1点以上使用すること
    • 工科大Webサイトの写真
    • カメラやスマートフォンなどで写真撮影
  • CMYKカラーで作成
    • カラースキームを設計すること
    • まとまりのある色彩設計を心掛ける
  • ウケ狙いは必要ありません! 真面目に素直にデザインしてください