デザイン専攻の2年生の後期に開講されている「プログラミング論及び演習」という授業を昨年度に引き続き紹介します。この授業で使用するプログラミング言語は、2014年度から従来のC言語からJavaScriptに変更しまして2015年度は2年目となります。2015年度から私(藤村)と非常勤の山崎大助先生が授業を担当しております。

本年度は、JavaScriptの基礎を学んだ後、jQueryライブラリやp5.jsライブラリの活用方法などを学びました。p5.jsはJavaScriptでアニメーションや音楽を扱いやすくする新しいライブラリで、2015年度から導入しました。ちなみに、p5.jsについてはこちらにも記事があります。

授業の最後の3回では、授業で学んだ技術を駆使して自由にWebアプリを制作しました。以下に3つの作品を紹介します。HTML5対応のPC版ブラウザ(Chrome, Firefox, Microsoft Edge等)で閲覧した場合には、以下の画像をクリックすると、別ウインドウが開き、実際に操作することができます。

最初の作品は、マウスで画面上をクリックして隠されたヒントを読み、解読して部屋から脱出するゲームです。これを作成した学生によりますと脱出ゲームとしては難易度が低いそうですが、脱出ゲームに慣れていない人にとってはかなり難しいと思います。10分で解ければ天才かも?

脱出ゲーム
escape

次の作品はお絵かきツールです。PCに保存されている任意の画像を背景画像としてアップロードすることができ、お絵かき後、キャンバスを右クリックして画像をダウンロードすることができます。ちょっと手書きを加えたいときにとても便利ですね。

お絵かきボード
drawpict

最後の作品は以下の画像から想像できますようにキーボードです。PCのキーボードがキーボードとして:-)音楽を演奏することができますし、ドラムや音量や音程を変化させるイコライザーの機能もあります。詳しく説明しなくても使えると思いますので、是非、演奏してみて下さい。zキーを押すと音楽も流れます。

キーボード
music

この授業では、このようにjQueryやp5.jsのライブラリを使って、脱出ゲーム、お絵かき、キーボードといった幅広いWebアプリを自由に制作することができました。3年生、4年生では、この経験を生かして、本格的な作品制作にチャレンジして欲しいと思います。

3年生前期の選択科目の「情報処理応用論及び演習」という授業を紹介します。この授業では、プログラミングの応用力を高めることを目指し、自分で企画したWebサイトをJavaScriptで制作しています。本年度は、この授業の前半でthree.jsと呼ぶ3Dグラフィックスを扱うライブラリを活用して「3Dポスター」を制作しました。「ポスター」と言えば普通は紙に印刷した2次元のものですが、今回はWeb上に3Dのポスターを制作することにチャレンジしました。

以下はこの「3Dポスター」の作品例です。他にも優れた作品が多数ありましたが、完成度が高い以下の6作品をアップロードいたしました。作品の画像をクリックすると、別タブに作品のWebページが開きます。マウスの左ボタンのドラッグで回転移動、右ボタンのドラッグで並行移動、ホイールでズームとなっています。尚、閲覧するにはHTML5をサポートしているChrome, Firefox, IE11が必要です

itako

【時間を大切に】

 

kouno

【お花を大切にしよう!】

 

shiino

【WANDER ART GALLERY】

 

arimura

 【クリスマス】

 

suzuki

【時は金なり】

 

abe

【音楽やろうぜ!!】

藤村ゼミの「TwitterとLeap Motionによるジェネラティブ・ミュージックの制作」という卒業研究を紹介します。この研究は、LEAP Motionと呼ぶセンサによって取得した手の動きと、Twitterからのつぶやきをリアルタイムに取得し、この2つの情報を元に、インタラクティブに音楽を生成するメディアアート作品です。まずは、以下の動画をご覧下さい。

この作品では、Twitterアカウント所持者がつぶやいたタイムラインの中から特定のキーワード(今作品ではおはよう)が含まれるツイートを10秒ごとに20件取得し、そのツイートのテキストによってドラム音が生成します。そして、Leap MotionはLeap Motion演奏者の手の座標、ジェスチャーを1秒に最大60回送信し、送信された情報から、メロディが鳴り、手の座標によりそのメロディにエフェクトを適用します。本作品の全体構造を下の図に示します。Twitterから生成される音楽とLeap Motionから再生される音楽が合わさることで本作品のジェネラティブ・ミュージックを生成するようにしました。尚、実装はTwitter APIの部分に一部PHPを使用しましたが、大部分はJavaScriptで開発しております。

twittermusic

本作品のオリジナリティはLeap Motionの演奏者一人だけではなく、Twitterのアカウントを所持している全ての人々が本作品のジェネラティブ・ミュージックに参加できるという点です。つまり、Leap Motionで演奏者、Twitterの利用者のどちらが欠けていたら完成しない、新感覚の複数人参加型のジェネラティブ・ミュージックとして制作しました。

藤村ゼミではWebサイトの構築技術やメディアアートの制作等をテーマとして取り組んでいます。藤村ゼミのH26年度の卒研テーマの一覧はこちらをご覧下さい。

デザイン専攻の2年生の後期に開講されている「プログラミング論及び演習」という授業を紹介します。この授業は2013年度まではC言語を使っていましたが、2014年度からは、近年利用が広がっているJavaScriptに変更し、Web技術の基礎を学ぶ授業にしました。JavaScriptは、Webブラウザ上で実行可能な言語ですので、Windows、Mac、iOS、Androidによらず実行できること大きなメリットです。さらに、HTML5の普及によりOSの基本機能が利用可能になり、3DCGやゲーム等を含む、あらゆる分野のアプリが制作できるようになったため、JavaScriptは、ますます重要となっていくでしょう。

本年度は、JavaScriptの基礎を学んだ後、jQueryライブラリを活用して対話的なユーザインタフェースの制作方法を学びました。そして最後の4回では、enchant.jsライブラリを活用してJavaScriptで動くゲーム作品を制作しました。以下に制作したゲーム作品を紹介します。以下の2つの作品は特に完成度の高さが際立つ優れた作品でした。画像をクリックすると、別ウインドウが開き、HTML5対応のChrome、Firefoxで閲覧した場合にはマウスで操作することができます。

※「メモリー」はスマートフォンでも動作しますが、他の作品はキーボード(矢印キー)が必要ですのでPCで操作して下さい。

【最優秀賞】メモリーprog2014_memory

【優秀賞】忍者を入れるな!prog2014_sengoku

また、以下の3作品は、惜しくも優秀賞とはなりませんでしたが、楽しめる作品でしたので、紹介致します。

ハートを集めて♥prog2014_usagi

宇宙サッカーprog2014_space

りんごをゲットprog2014_apple

この授業を受講した2年生の皆様、3年生からはWebプログラミング、アルゴリズム論及び演習、オブジェクト指向プログラミング論及び演習、画像処理論及び演習、情報処理応用論及び演習など、プログラミングを学べる授業がたくさんありますので、引き続きプログラミングを楽しんで下さい。

落合ゼミでは、Java言語やWebシステム構築の勉強をしています。

Webシステム構築のために、まずHTML、CSSを用いてホームページの基本的な構造を作製します。そのあとに、データベース構築のためのSQLにPHPやJavascriptなどを組み合わせることにより、顧客管理システムや伝言掲示板などのWebシステムを構築します。また、アンドロイドアプリやiPhoneアプリの作製なども将来的に視野に入れています。

また、卒業研究の一環として複雑系科学というトピックも勉強しています。最近、情報技術の発展により、Amazonなどのオンライン販売取引データやGoogle検索履歴などのさまざまな大規模なデータが蓄積されています。これらのデータはビックデータなどとも言われています。これらのビックデータを調べることにより、サービス利用者の行動特性などが見えてきます。付加価値の高い情報を抽出して、社会・経済の問題解決をするのが狙いです。

2013_ochiaisemi