情報デザイン専攻では、はじめてプログラミングを学ぶ1年生向けに「プログラミング入門」という授業があります。この授業では、図形やアニメーションを描きながら、楽しくプログラミングを学ぶことができるProcessingと呼ぶプログラミング言語を使用しています。今年からProcessingバージョン3.0を使用しています。

今年度も最後の3回の授業時間を使ってプログラミングコンテストを実施しました(これまでの結果はこちらからご覧になれます。第1回コンテスト第2回コンテスト第3回コンテスト)。今年のコンテストのテーマは「◯◯の物語」です。「◯◯」の部分は自由としました。このようなテーマにした出題者側の意図は「物語」は時間の経過による変化が不可欠ですので、アニメーションやインタラクティブな操作を取り入れた作品となることを期待したからです。期待を裏切ることなく、今年度もアニメーションを駆使した素晴らしい作品が制作されました。

その中から教員4名による審査の結果、優秀賞(ゴールド)3件、優秀賞(シルバー)3件を選出しましたので、ご報告いたします。昨年度までは「最優秀賞」1件と「優秀賞」数件を選んでおりましたが、本年度は優劣をつけることが難しかったため、このような形に変更させていただきました。受賞されたみなさん、おめでとうございます。また、惜しくも受賞できなかった方の中にも素晴らしい作品が多くありました。是非、これからも楽しんでプログラミングを続けて欲しいと願っております。

以下の受賞作品の画像をクリックすると、その作品が別タブが開きます。画面を一度クリックしてから、マウスやキーボードで操作して下さい。スマホではキーボードがないのでPCでご覧下さい。Processingで制作されたコードは、processing.jsライブラリでWebページ上で動くように変換しております。


【優秀賞(ゴールド)】

smallfish小さなお魚たちの物語

作者のコメント:テーマ「〇〇の物語」と聞いて、クリックすると場面が進展するようなものを作成しようとしましたが、
自分の思うようにはいかず悩むばかりでした。しかし、ふと有名なお話のワンシーンを思い出し、このような作品になりました。授業で習ったものや資料を探しながら作っていくのは、とても時間が掛かり大変でしたが、自分でプログラムを書いて思い通りに動いた瞬間が嬉しく、楽しみながら作ることが出来ました。その気持ちを忘れず、これからもどんどんプログラミングに挑戦して取り組んでいきたいです。(A.S.)

 

manある男の物語

作者のコメント:プログラミングに関してはほぼ初心者でしたが、授業の中で、作品を作っていく中で基礎から学ぶことができました。今回のテーマ「◯◯の物語」ときいて思い浮かんだのが絵本だったので、コンセプトを「電子絵本」にしました。調べつつ作るのは大変でしたが、思った通りのものを作ることができたと思います。しかし、今回実装できなかった機能が多々あるので改良していきたいです。また、画像表示に頼っているところがあるのでProcessingでの表現をもっと学びたいと思いました。頂いた賞に恥じぬよう、精進致します。(A.M.)

 

akazukin赤ずきんちゃんのおつかい!

作者のコメント:<追記予定>


【優秀賞(シルバー)】

fruits季節のフルーツ拾い

作者のコメント:まさか自分の作品が選ばれるとは思っていなかったので、連絡をいただいて驚きました。ありがとうございます。毎授業新しいことを学び、自分の手で一つ一つ形になっていくのはとてもおもしろかったです。最終課題では、もっとこうしたら良かったのではないかと今になって思う部分もあるので、今後の授業でもっと学び、より良いものを作れるよう頑張りたいと思います。(S.I)

 

kobit走る小人の物語

作者のコメント:この度は優秀賞に選んでくださりありがとうございます。今回のテーマが「物語」ということから小人の作品を作成しました。トレンドのレトロ感とシンプルさを求め限定した3色で仕上げました。また、動きや重力、速さを工夫することで差別化を図りました。多言語でのプログラミング経験はありましたが、ゲームを作ったのは初めてで思い通りに動くProcessingはとても面白かったです。これからもこの経験を生かして楽しくプログラミングを勉強していきたいです。(N.O.)

 

appleリンゴ物語

作者のコメント:プログラミングはほぼ初心者で、わからない事が多くとても難しく感じました。私は、決められた範囲の中だけで落下するプログラミングを作成してみたかったのでこの作品を作りました。最初は、上手くいかずとても苦労しましたが、少しずつ形になり出来上がりが目に見えとても楽しかったです。これからも、プログラミングを沢山勉強して今よりも完成度の高い作品が作れるよう頑張りたいと思います。(A.M.)


 

LINEで送る
Share on Facebook

情報デザイン専攻では、はじめてプログラミングを学ぶ1年生向けに「プログラミング入門」という授業があります。この授業では、図形やアニメーションを描きながら、楽しくプログラミングを学ぶことができるProcessingと呼ぶ言語を使用しています。

今年度も最後の3回の授業時間を使ってプログラミングコンテストを実施しました(これまでの結果はこちらからご覧になれます。第1回コンテスト第2回コンテスト)。今年のコンテストのテーマは「つながり」です。「つながり」という言葉から連想されるテーマを自由に取り上げ、アニメーションやインタラクティブな操作を取り入れた作品制作に取り組みました。

最後の授業では、Web上にアップロードされた4クラスの全作品を学生全員で相互鑑賞し、投票を行いました。この投票結果と教員による評価を合わせ、最優秀賞、優秀賞作品を選出しました。今年度はなかなかの力作ぞろいで、例年より多くの作品がノミネートされました。審査の結果、最優秀賞2件、優秀賞2件を選出しましたので、ご報告いたします。受賞されたみなさん、おめでとうございます。下の画像をクリックすると、別ウインドウが開き、HTML5対応のChrome、Firefox等(IEはバージョンによってNG)で閲覧した場合にはマウスやキーボードで操作することができます。

【最優秀賞】


yamanote

山手線の全駅を電車が順に走っていく作品です。コミカルな電車の描写が面白いだけでなく、走っている電車がどこを通過中かが画面下部のガイドに連動して表示されています。


sweets

星がまたたく月夜。スイーツをクリックすると、スイーツが勢いよくジャンプします。背景の星がまたたいたり、ジャンプの際に一緒にハートが飛び散るなど細かい工夫が施された、技術的にも評価の高い作品です。

【優秀賞】

gear

歯車で「つながり」を表した、歯車の美しさが際立つ作品です。歯車を動かす/止めるのを操作することができます。

train

電車の車両をユーザのキー入力で連結させ、連結後に走り出すことで「つながり」を表現しています。

これらの作品を作られた学生には、後日、「第3回プログラミング入門、プログラミングコンテスト」にふさわしい記念品が授与されます。残念ながら受賞とならなかった作品のなかにも大変素晴らしい作品が多くありました。この授業を通じて学んだことを生かして、2年生の授業でもますます腕を磨いていってほしいと思います。

受賞者のコメント(追記)

今回の作品は見てもらう人にインパクト、華やかさを感じてもらうこと、また触って遊べることをコンセプトに作りました。作品を作りはじめた当初はプロセッシングに苦手意識があり、自分が考えたアイデアをなかなかプログラムにすることができませんでした。そこで一度にすべてを作るのではなく、授業内容を復習しながら実現したいイメージを簡単に作りすこしずつ完成度を高め、苦手意識を克服しながら作品を完成させました。工夫した点はたくさんのランダム要素を加えたことです。右にはねたり左にはねたり、出てくる星やハートもそれぞれにいくつかのランダム要素が加えられています。また、後からソースがわかりやすく、変更しやすいように書くことも心掛けました。最優秀賞をもらい驚くとともに、嬉しさでいっぱいです。家族や友人、犬とも喜びを分かち合いました。(Y.T.)

「つながり」というテーマより、歯車同士の力のつながりを考え、今回作品を作りました。画像を使用せずProcessingのみで作品を作りたかったので形にするのはとても大変で時間がかかりましたが、この度優秀賞を受賞することができ、喜びでいっぱいです。自分が作りたいと思うものを形にするのはとても大変なことですが、達成感や自分への自信へと繋がっていくと思うので、これからも努力を怠らないよう頑張りたいと思います。(M.S.)

「つながる」というテーマから汽車の連結が思い浮びました。プログラミングは授業で習ったもので組むことができましたが、もう少しシンプルにまとめることができればよかったかなと思います。汽車の連結は、固定しておくものと動かすものとを区別して作るのに時間がかかり大変でしたが、私自身、一番気に入っているところです。これからも授業や自習を通してスキルを上げていきたいです。(F.M.)

 

LINEで送る
Share on Facebook

情報デザイン専攻では、はじめてプログラミングを学ぶ1年生向けに「プログラミング入門」という授業があります。この授業では、図形やアニメーションを描きながら、楽しくプログラミングを学ぶことができるProcessingと呼ぶ言語を使用しています。

今年度も昨年の第1回コンテスト同様、最後の3回の授業時間を使ってプログラミングコンテストを実施しました。今年のコンテストのテーマは「流れ」としました。「流れ」には「水」や「空気」などの液体や気体の流れはもちろん、「自動車」や「お寿司」などの物の流れ、さらには「時の流れ」などもあり、独創的なアイデアが生まれるのを期待したからです。また、「流れ」にはアニメーションなどの動的な表現が求められるため、プログラミング技術が高められるということも狙っています。

Processingで作成された作品は、processing.jsというライブラリを使うことにより、Webブラウザでご覧いただくことができます。最後の授業では、各自が制作した作品をWebサーバにアップロードして、各クラスでプレゼンテーションを行いました。さらに4クラスに分かれて制作しておりましたので、他のクラスの作品を含めて鑑賞し、学生自身に気に入った作品を投票してもらいました。 この学生の投票と、授業を担当する4名の教員の評価を合計して、以下の4作品が優秀作品として選出しましたので、本日ここで発表します。おめでとうございます。下の画像をクリックすると、別ウインドウが開き、HTML5対応のChrome、Firefox等(IEはバージョンによってNG)で閲覧した場合にはマウスで操作することができます。

【最優秀賞】proc2014_robot

ロボット工場における流れ作業を美しく表現しています。背景画像の完成度が素晴らしいですね。

【優秀賞】 proc2014_balloon

ゆっくりとした空気の流れを気球で表現しています。クリックし続けると気球が上がります。

【優秀賞】proc2014_clock

時の流れを表現しています。中央部分のドアをクリックし続けるとドアが開きます。

【優秀賞】proc2014_season

季節の流れを美しく表現しています。右矢印キーで速度が変わります。

 

これらの作品を作られた学生には、後日、「第2回プログラミング入門、プログラミングコンテスト」にふさわしい素晴しい副賞(?)が渡されることになっております。今回、惜しくも選ばれなかった学生の中にもたくさんの素晴しい作品がありました。今後もプログラミングを楽しんでいただければと思います。さて、来年のテーマは何にしましょうか?

追記

「季節の流れ」を制作した学生の感想:自分の作品が優秀賞をいただけてとても驚きました。プログラミングに関しては初心者でしたが、授業で学んだ知識を形にしたものが評価していただけたのは嬉しいです。プログラムが思ったように動かずに悩んだり、書き直したりしたのは大変でしたが、解決策や代案が思いついたときの喜びも多かったのでとても良い経験となりました。時間や技術の問題で、妥協したところもありましたし、別の作品(ゲーム要素の強い物)も作ってみたいと思っているので、これからもプログラミングの勉強を頑張っていきたいです。(T.N.)

LINEで送る
Share on Facebook

卒業研究は、授業で学んできた「知識」を、実際の問題に応用することで使える「技術」に昇華させる重要な学びのステップです。今日は卒業研究の実例として、藤村ゼミのH25年度の二人の学生の卒業研究を紹介します。

一つ目の卒業研究は「三軸加速度センサによるジェネラティブミュージックの制作」というもので、手袋に縫い込まれた三軸加速度センサから手の動きのデータを取得し、インタラクティブに映像と音楽を生成するメディアアートの制作です。

この作品では、15個の音をランダムな順番で音量や長さを変化させながら再生する、といった複数のルールをアルゴリズム化して音楽を合成しました。また、三軸加速度センサの値を音楽と映像に反映させ、人間の動作がリアルタイムに作品に反映されるようにしています。制作にはProcessingとArduinoを使用しました。三軸加速度センサを組み込んだArduinoをUSBケーブルでPCと接続し、計測データをProcessingで受信し、受信した値を使って音楽とアニメーションを生成するようにしました。

この作品は「作品を創るプロセス」そのものが作品であり、作り手の意志と受け手の意志の両方のインタラクションによって作品が完結します。

二つ目の卒業研究は「Processingによる遠隔通信モーションキャプチャ技術の開発」というもので、先程の例と同様に三軸加速度センサの値を活用しますが、こちらは、Arduinoではなく、スマートフォンAndroidに備えられている加速度センサを活用しています。こちらは、スマートフォンベースなので、アプリさえインストールすれば誰でも簡単に参加できるようにすることを狙っています。

Android端末側のアプリはProcessingのAndroidモードを使って制作しました。そして、Android端末からネットワークを介して送信される加速度センサの値を受け取ってリアルタイムに画像を生成するサーバ側のプログラムもProcessingを使って開発しました。この研究では、端末とサーバとの間の汎用的な通信プロトコルの設計に重点を置いていますのでアート作品としてはシンプルなものとしています。また、こちらの作品では、以下の映像のように、複数端末の動きを同時に取得して映像を作るサンプルも制作しました。

藤村ゼミではこのような参加型のメディアアートの制作を一つのテーマとして取り組んでいます。藤村ゼミのH25年度の卒研テーマの一覧はこちらをご覧下さい。

LINEで送る
Share on Facebook

情報デザイン専攻では、2年生と3年生向けにC/C++、Java、JavaScript、PHP、SQL等を使って実習する多くのプログラミングの授業がありますが、さらに本年度より、はじめてプログラミングを学ぶ1年生向けに「プログラミング入門」という授業が開講されました。

この授業ではProcessingと呼ぶプログラミング言語を使っています。Processingは、様々な図形やアニメーションを描くことや、ユーザの入力操作に反応するインタラクティブなグラフィックス作品が容易に作成できるため、近年、プログラミング言語の教育用入門ツールやインタラクティブ・アートの制作用言語として広く利用されています。

今年度は、最後の3回の授業時間を使ってプログラミングコンテストを実施することにしました。コンテストでは、「海」、「空」、「花」の3つのテーマの中から一つを選んで、そのテーマに合ったグラフィック作品を制作するものです。そして最後の授業ではみんなが制作した作品をサーバにアップロードしてお互いの作品の鑑賞して気に入った作品に投票するというイベントも行いました。というわけで学生が制作した作品はこの授業を履修するほぼ全員1件の約96件です:


pde01pde02
pde03pde04
pde05pde06
pde07pde08
pde09pde10
pde11pde12
pde13pde14
pde15pde16

これらの沢山の作品の中から本授業を担当した4人の教員が厳正な評価を行い、その中で次の作品を最優秀作品として選出致しました。おめでとうございます。

クリックするとクリオネが現れ、光に向かって上に泳ぎます。

 

それから、次の2作品は、優秀賞として選出致しました。

画面を1回クリックした後、「6」キーを押すと人が右に進みます。

いろいろな位置にマウスを動かし、クリックしてみて下さい。

Processingで作成された作品は、processing.jsというライブラリを使うことにより、Webブラウザでご覧いただくことができます。これらの3つの作品は、上記の画像をクリックすると、別ウインドウが開き、HTML5対応のChromeやFirefox等で閲覧した場合にはマウスで操作することができます。

これらの作品を作られた学生には、後日、第1回プログラミング入門、プログラミングコンテストにふさわしい素晴しい副賞が渡されることになっております。今回、惜しくも選ばれなかった学生の中にも素晴しい作品が多数ありました。選ばれなかった学生も是非、今後もプログラミングを楽しんでいただければと思っております。

それから、コンテスト以外にも、普段の授業の演習で、以下のような素晴らしい作品を制作した学生もおりました。とても良かったので、紹介しておきます:

soubusen

来年は、どのような作品が制作されるかとても楽しみです。

2014年4月追記:受賞者のコメントを追加します:

最優秀賞:最優秀賞をいただき、ありがとうございます。苦労して作った作品なので、とても嬉しいです。プログラムを作ることは初めてで、わからないことも多く試行錯誤をしながら作ったため大変でしたが、改良するごとに目に見えてよくなっていくのがわかりとても楽しかったです。これからもっとプログラミングについて勉強をしていきたいと思います。(A.S.)

優秀賞:プログラミングについてはほぼ初心者でしたが、基礎を積み上げて何とか形にすることができました。何もない状態から、少しずつ自分の想像したプログラムに変化していく過程がとても楽しかったです。これからprocessing以外のプログラム言語も勉強していきますが、それらも使いこなせるように頑張りたいと思います。(E.I.)

優秀賞:私の作品が優秀賞をとったという連絡が来たとき、喜びよりも驚きが大きかったです。この作品は「空」をテーマに作らせていただきました。美しさよりも楽しさを重視して作ったので楽しんでいただけたのならば幸いです。これからもprocessingをもっと勉強して今よりもより完成度の高い作品が作れるよう努力したいと思います。ありがとうございました。(A.T.)

LINEで送る
Share on Facebook