デザイン専攻の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プログラミング、アルゴリズム論及び演習、オブジェクト指向プログラミング論及び演習、画像処理論及び演習、情報処理応用論及び演習など、プログラミングを学べる授業がたくさんありますので、引き続きプログラミングを楽しんで下さい。

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

情報デザイン専攻では、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