情報デザイン専攻では、はじめてプログラミングを学ぶ1年生向けに「プログラミング入門」という授業があります。ほぼ全員がプログラミング未経験から取り組み、プログラミングの基礎を学びます。2022年度はProcessingをJavaScriptで書けるようにしたライブラリp5.jsを導入して3年目となりました。p5.jsは自分の手元に開発環境が整っていなくても、Webブラウザ上でコーディングや共有が簡単にできるという利点があります。またアニメーション等の表現がしやすいことでも知られています。

2022年度も最後の3回の授業時間を使ってプログラミングコンテストを実施しました。これまでの結果をまとめたアーカイブサイトはこちらからご覧ください。

2022年度のプログラミングコンテストのテーマは「新時代」にしました。『ONE PIECE FILM RED』の主題歌として話題となったAdoさんの「新時代」は「世界中の人々を現実世界から解放する」ことを表現しているとのことですが、この曲に限らず、近年、様々な分野で従来の枠組みを取り払う挑戦的なできごとが増えてきているように感じられます。Adoさんの楽曲にとらわれず、自由な発想で自分なりの「新時代」を、アニメーション又はインタラクティブメディアで表現することに取り組んでもらいました。抽象的な課題に苦戦した学生が多かったですが、かなりレベルの高い技術や、工夫の凝らされた作品が多く寄せられました。今年も各クラスからノミネートされた代表作品から、教員3名による審査によって、優秀賞(ゴールド)2件、優秀賞(シルバー)3件を選出しました。次の通りご報告いたします。

受賞されたみなさん、おめでとうございます。また、惜しくも受賞できなかった方の中にも素晴らしい作品が多くありました。是非、これからも楽しんでプログラミングを続けて欲しいと願っております。

以下の受賞作品の画像をクリックすると、その作品が別タブが開きます。画面を一度クリックしてから、マウスやキーボードで操作して下さい。スマホのタッチには対応していない場合がありますので、必ずPCでご覧下さい。


【優秀賞(ゴールド)】Don’t stop thinking

Don't stop thinking

作者のコメント:初回の授業からこのコンテストでゴールド賞を取るのが目標だったので、それが達成できとても嬉しいです。まだまだ作りたいゲームやこの作品でも諦めたことがあるので、これからも作品制作を通じて技術を向上させたいです。
さて、この作品はエビデンス1に書いてある「新技術の台頭により人間の道徳心が失われていく」を核に作成しました。新時代への印象が全くなかった時に読んだ評論文からアイディアを得ました。またこのことを回避するには、道徳心が失われないように思考するべきだと考えました。そのことを最後のエンド4で自分なりに頑張って表現しました。
この作品はエンドが4つあります。ぜひ全てのエンドをご覧ください。


【優秀賞(ゴールド)】SEARCH 新時代 -新時代について、スマホで調べてみよう!

SEARCH_newage

作者のコメント:私が作ったのは、新時代についてスマホで検索しよう!というテーマの作品です。新時代は1つだけではなく、さまざまな可能性があるのだというメッセージを伝えたくて作りました。検索結果をどうやって表現するかとても悩んだのですが、Googleで検索した際に「もしかして:〇〇?」と表示される機能からインスピレーションを受けて、自分の作品に活用しました。また、今回作品を作るにあたって、ページの切り替えやボタンを押したときのアニメーションを一番意識しました。自然でなめらかな動きにするのは大変でしたが、納得のいく作品にすることができたと思います。自力でコードを書いて作品を作り上げたという達成感や経験を、これからのプログラミングの授業にも活かしていきたいです。


【優秀賞(シルバー)】バーチャル・アイドル

virtual_idol

作者のコメント:この作品は、将来VRが発達した世界で仮想世界でのアイドルとして活動する女性を描いた作品になっています。テーマが「新時代」ということだったので、誰もが理想の自分になり、発信できる世界をイメージして作りました。作品作成にあたり、ペンライトを動かしたり、クリックする度に色を変えたりするところは苦労しました。また、最初はただ物語を読み進めるだけのものにしようと考えていましたが、物足りなさを感じ、最後にミニゲームを追加しました。ミニゲームの難易度も簡単すぎないように調整しました。最終的には満足いく仕上がりになったので良かったです。今後も授業でプログラミングを学んで、面白い作品をたくさん作っていきたいです。


【優秀賞(シルバー)】repaint

repaint

作者のコメント:私は「自分自身の新時代」をテーマにして作成しました。
ネガティブな物事ひとつとってみても、捉え方次第でその印象はガラッとプラスに傾きます。その小さな積み重ねがエネルギーとなり一人一人にとっての新時代を巻き起こしてくれるのではないかと思いました。このような考えを題名の通り、塗り替える動作を用いることで作品に落とし込みました。彩度や図形の動く速度などを工夫することで人物の抽象的な心情の変化を表しました。私なりの新時代をこの作品で追体験していただけたら嬉しいです。


【優秀賞(シルバー)】ユメの終着点

ユメの終着点

作者のコメント:今回のテーマである「新時代」について考えたとき、スポーツや新しい技術に対してなど、様々な業界で使われる「新時代」という言葉に作品のイメージが定まらず苦戦しましたが、その共通点を探したとき、「新時代」にたどり着く過程に「大きな夢、野望」があると感じて「人の夢」に注目した作品を制作しました。
こだわりは手書きのオリジナルキャラクターです。表情をいくつか用意したこと、おまけの部屋で現実世界の日付とリンクした会話をつくることで、親しみやすいキャラクターを目指しました。全9つのエンディングごとにキャラクターのセリフも違うので、キャラクターの反応も楽しみながらプレイしていただけたら嬉しいです。
最後に、構想に時間が掛かってしまったことや、技術不足から自分の思うような作品にすることができなかったため悔しさもありますが、この悔しさをばねにして今後も技術を身につけ、面白い作品を制作したいです。


これまでのコンテストの記事は以下のリンクからご覧になれます。

情報デザイン専攻では、はじめてプログラミングを学ぶ1年生向けに「プログラミング入門」という授業があります。ほぼ全員がプログラミング未経験から取り組み、プログラミングの基礎を学びます。2021年度はProcessingをJavaScriptで書けるようにしたライブラリp5.jsを導入して2年目となります。p5.jsはProcessingをJavaScriptに移植したものなので、自分の手元に開発環境が整っていなくても、Webブラウザ上でコーディングや共有が簡単にできるという利点があります。またアニメーション等の表現がしやすいことでも知られています。

2021年度も最後の3回の授業時間を使ってプログラミングコンテストを実施しました(これまでの結果はこちらからご覧になれます。第1回コンテスト第2回コンテスト第3回コンテスト第4回コンテスト第5回コンテスト第6回コンテスト第7回コンテスト第8回コンテスト)。

2021年度のプログラミングコンテストのテーマは「ダイバーシティ」にしました。「人種、性別、年齢、障がい、国籍、民族、宗教、社会的地位、性的指向・性自認、価値観などの違いを尊重し、認め合う社会にする」という考え方を啓発するためのプロモーションアニメーション又はインタラクティブメディアの制作です。抽象的な課題に、なかなか可視化のアイデアを得られず、表現方法を模索する学生の姿が見られました。また、これまでのプログラミングコンテストの作品蓄積の影響か、年々アイデアや工夫の凝らされた作品が増えてきています。今年も各クラスからノミネートされた代表作品から、教員3名による審査によって、優秀賞(ゴールド)1件、優秀賞(シルバー)4件を選出しました。次の通りご報告いたします。

受賞されたみなさん、おめでとうございます。また、惜しくも受賞できなかった方の中にも素晴らしい作品が多くありました。是非、これからも楽しんでプログラミングを続けて欲しいと願っております。

以下の受賞作品の画像をクリックすると、その作品が別タブが開きます。画面を一度クリックしてから、マウスやキーボードで操作して下さい。スマホのタッチには対応していない場合がありますので、必ずPCでご覧下さい。


【優秀賞(ゴールド)】多種多様の妖怪相談室


YokaiCounselingRoom

作者のコメント:私は、人種、性別、障害といった目で見てわかりやすい多様性だけでなく、個人の価値判断の基準や自己評価などといった細かな内面の多様性こそ尊重されるべきだと考え、この作品を作りました。ただ、「多様性を尊重しよう!」というメッセージを表示するだけでは、プレイヤーが多様性について自分で考えなおし、明日からの行動を変えることには繋がりません。そのため、皆が皆違うことをプレイヤーが自身で実感したような気持ちになれる作品を目指しました。ナレーターが存在せず、操作指示のメッセージをキャラクターが発する場面や、hour()やminute()を使用して、現実世界の時間をキャラクターが言い当てる場面、プレイヤーが心を読まれる場面、これらを通して、プレイヤーの没入感を高めました。背景や雲、キャラクターの表情などは、すべて手書きで用意しています。絵を用意する際、画面内にあるモノの視認性を高められるように、他の授業で習ったレイアウトやコントラスト比を意識しました。

作品制作の中で、障子が瞬間移動したり、どうしてもエラー表示が出てしまったりと、苦労した点も沢山ありました。しかし、この授業を通して、自分の表現したいものがどんどん作れるようになっていくのが楽しかったです。今後も学習を進めて、もっと面白い作品を制作していきたいです。


【優秀賞(シルバー)】ダイバーシティって?

What'sDiversity

作者のコメント:今回のテーマである「ダイバーシティ」からどのような作品にするべきであるか、着想に時間がかかりました。物語ではありませんが、作品を見てくださる方に対して語りかけるような表現方法を取りました。仕掛け絵本のようにひとつひとつのイラストにも注目し、操作なども楽しんでいただきたいです。この作品が、ひとりひとりの違いを認め合う社会にするための小さなきっかけとなって欲しいと考えています。

今後は更に面白い作品の制作ができるよう、プログラミングスキルの向上に励みたいと思います。


【優秀賞(シルバー)】色々な見え方

VariousWaysOfSeeing

作者のコメント:この作品は、「ダイバーシティ」というお題の中でも障がい、特に目の障がいについて取り上げました。1年生で履修した、キャリア・ディベロップメント・プログラムという授業で「ウェブアクセシビリティ」について学び、目の障がいを持つ人が意外と身近にいることを知ったことから、このテーマに決めました。全ページでなにかしらのオブジェクトを動かし、視覚的にも楽しく学ぶことが出来る様にしたところがポイントです。絵を描くことや、クイズ形式でページが進むようにプログラムすることには、とても苦労しました。この作品をきっかけに、目の障がいについての理解が少しでも深まれば嬉しいです。

シルバー受賞で悔しい思いもありますが、さらなる技術の向上を目指していきたいと思います。


【優秀賞(シルバー)】ダイバーシティについて学ぼう!

Let'sLearnAboutDiversity

作者のコメント:私は、ユーザーが選択した会話により、話を進めていくことで、ダイバーシティを知らない方にも大切さを理解してもらえるような作品を作成しました。上下に分かれている吹き出しをユーザーが選択すると、会話やスライドがそれぞれ変化する部分にも注目してもらいたいと思います。今回の作品を作成するにあたり、図形や吹き出しをクリックし、別のスライドに移動させる設定に苦労しましたが、何度も試行錯誤することで完成した作品には、達成感があります。今後も、プログラミングの授業を通して、知識や技術を身に付けていきたいと思います。


【優秀賞(シルバー)】多様性について学ぼう!!

LearnAboutDiversity

作者のコメント:「ダイバーシティを啓発する」というテーマを与えられた時、多様性についてあまりイメージが湧かず、とても難しいと感じました。そこで自分が多様性について理解を深めるところから始めました。そして学んだことを見てくださる人に少しでも伝えられるような作品を目指して制作を進めました。作品のこだわりは、「多様性」であることを重視し、何か特定のものを表す具体的なイラストをあえて多用しなかったという点です。代わりに多様性を連想させるような抽象的な図形を使って表現しました。そのほかにも余白や色の微調整、見やすいフォントを丁寧に選ぶことや分かりやすい文章を作ることに力を入れました。私の作品を通じて、多様性について理解を深めたりや多様性について考えたりするきっかけになれば幸いです。最後に、私がこの成果を出せたのはアドバイスをくれた方々のご協力があってこそのものと考えています。本当にありがとうございました。シルバーという結果でしたが、目標のクオリティに達することはできていません。これからも知識を蓄え、技術を磨いていきたいです。


情報デザイン専攻では、はじめてプログラミングを学ぶ1年生向けに「プログラミング入門」という授業があります。2019年度までは図形やアニメーションを描きながら、楽しくプログラミングを学ぶことができるProcessingを使用してきましたが、2020年度はオンライン授業に対応することもあり、ProcessingをJavaScriptで書けるようにしたライブラリp5.jsを導入しました。p5.jsはProcessingをJavaScriptに移植したものなので、少し書き方は異なりますが、自分の手元に開発環境が整っていなくても、Webブラウザ上でコーディングや共有が簡単にできるという利点があります。

2020年度も最後の3回の授業時間を使ってプログラミングコンテストを実施しました(これまでの結果はこちらからご覧になれます。第1回コンテスト第2回コンテスト第3回コンテスト第4回コンテスト第5回コンテスト第6回コンテスト第7回コンテスト)。2020年度のコンテストのテーマは「持続可能な世界の実現に向けて」にしました。2015年に国連によって定められた、2030年に達成すべき「持続可能な開発目標」SDGs。SDGsの目標又はターゲットの中から一つ選び、その知名度を向上させるための作品作りです。わかりやすく楽しめるプロモーションアニメ又はインタラクティブメディアの制作を課題としました。

こうして1年生全員がコンテンストに取り組みました。オンライン授業下では、なかなか友人と相談しながら進めるなどの機会には恵まれませんでしたが、そのような環境の中でもアニメーションやマウス・キーボード操作を駆使した素晴らしい作品が多数制作されました。今年度は創意工夫が凝らされた作品が多く、教員3名による審査は難航しましたが、優秀賞(ゴールド)4件、優秀賞(シルバー)1件を選出しました。次の通りご報告いたします。

受賞されたみなさん、おめでとうございます。また、惜しくも受賞できなかった方の中にも素晴らしい作品が多くありました。是非、これからも楽しんでプログラミングを続けて欲しいと願っております。

以下の受賞作品の画像をクリックすると、その作品が別タブが開きます。画面を一度クリックしてから、マウスやキーボードで操作して下さい。スマホのタッチには対応していない場合がありますので、必ずPCでご覧下さい。


【優秀賞(ゴールド)】クリックで学ぼう!SDGs

ClicktoLean1

作者のコメント:SDGsという一見難しそうなテーマを、いかに分かりやすく飽きさせない様に伝えるかで最初はとても悩みました。色々考えた末、SDGsの解説をテキストでしっかりする反面、周りの風景にアニメーションをつけて賑やかな雰囲気にする事で、閲覧意欲が上がる様にしました。素材はほぼ全て自作したのでとても時間がかかりましたが、プログラミングで思い描いていた通りに動いてくれた時には大きな達成感が得られて楽しかったです。
今後も様々な授業を通して、プログラミングのスキルを上げていけたらと思っています。


【優秀賞(ゴールド)】地球にやさしく!

Earth

作者のコメント:今回のテーマは「持続可能な世界の実現に向けて」ということで、SDGsの17の目標から
「13.気候変動に具体的な対策を」を宣伝しようと思いこの作品を制作しました。気候変動に対して私たちが日常でできる小さなことを、簡単に確認してもらえるように場面ごとに2択が出る作品になっています。場面の切り替えやポイント管理が大変で、想像しているものを表現するのはとても難しかったのですが、これまでの授業やインターネットで調べたこと、友人からの教えによりなんとか形にすることができました。まだ理解できていない部分も多いですが、様々な表現ができるようにこれからも勉強に励みたいと思います。


【優秀賞(ゴールド)】クリーンエネルギー

CleanEnergy

作者のコメント: 地球温暖化が進んでいる世の中において、エネルギーをクリーンにするというテーマは私たちにとって大変身近な問題でもあり、改善していかなければいけない問題だと思いこのテーマを選びました。この作品のテーマは世界全体が取り組まなければいけないことと、私たちが日々の生活で取り組むことが出来るエネルギーの節約についてを、アニメーションとスライド形式によって分かりやすく伝えるということです。私にとって初めてのプログラミングだったので、頭の中のイメージを作品として再現することはとても難しく大変苦労しました。今後もたくさんのプログラミング技術を吸収して、スキルの向上をしていきたいと思います。


【優秀賞(ゴールド)】分別ごみ拾い

Game

作者のコメント:至ってシンプルなゲームシステムです。しかし、細部までこだわり抜いた作品でもあります。「持続可能な世界の実現に向けて」ということで、スコアが上がるにつれて晴れていく空は、私たちが向かう明るい未来とリンクしています。この作品は、母の「最近はお肉のトレイも洗ってプラスチックごみで捨てているから燃えるごみの袋が軽い」という何気ない発言から生まれました。この作品の着想を与えてくれた母、私が理解できるまで質問に回答してくださった先生、そして試運転に付き合ってくれた友人たち、ついでに直接は関与していないけれど父に、この場を借りて感謝を伝えさせていただきます。長くなりましたが、この経験を自信として、より一層楽しみながら、精進していきます。


【優秀賞(シルバー)】節電

Saving

作者のコメント:「持続可能な開発目標」SDGsの七つ目の目標「エネルギーをみんなに、そしてクリーンに」より、節電を推奨するアニメーションスライドを作成しました。このスライドの一番の特徴として、キーボードの上下キーを電源スイッチに見立て、ONにした場合とOFFにした場合で場面が切り替わるようにプログラムしています。節電を行うことによって様々な方面に対して良い影響があるということが伝わっていたら嬉しいです。
自分が作りたいものを実際に再現することはとても難しく、試行錯誤しながらかなり時間をかけて完成させた作品なので、この経験を生かし、今後も引き続き知識を蓄えながら更に発展した作品を作れるよう努力していきたいと思います。


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

2019年度にも最後の3回の授業時間を使ってプログラミングコンテストを実施しました(これまでの結果はこちらからご覧になれます。第1回コンテスト第2回コンテスト第3回コンテスト第4回コンテスト第5回コンテスト)、第6回コンテスト。2019年度のコンテストのテーマは「レシピ」にしました。手順物語性や変化を入れ込んだ、動きのあるインタラクティブな作品作りに結び付けてほしいとのねらいがありました。

こうして1年生全員が取り組んだコンテンストですが、2019年度もProcessingのアニメーションを駆使した素晴らしい作品が多数制作されました。その中から教員3名による審査の結果、優秀賞(ゴールド)2件、優秀賞(シルバー)3件を選出しましたので、ご報告いたします。

受賞されたみなさん、おめでとうございます。また、惜しくも受賞できなかった方の中にも素晴らしい作品が多くありました。是非、これからも楽しんでプログラミングを続けて欲しいと願っております。

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


【優秀賞(ゴールド)】Let’s make pizza by processing!

pizza

作者のコメント:テーマである「レシピ」から食べ物を連想し、自分好みのピザのトッピングを楽しむことができる作品が作りたいと考え制作しました。基本部分を完成させた後、トッピングの種類やピザの焼き目をこだわったり、名前入力や日付表示、スクリーンショット、アドバイス表示などの機能を追加したりすることで、より興味を持って遊んでもらえるように工夫しました。自分のアイデアを表現するために本やインターネットで調べ、うまくいかない時は別の表現方法を考え探すなどの苦戦をしたり、 Webページ上で動かない機能があるなどの反省点があったりましたが、とても勉強になる良い経験となりました。今後はより視野を広げて、人の心を動かすことのできるコンテンツ制作を目指し、学びを深めていきたいと考えています。


【優秀賞(ゴールド)】花のレシピ

flower

作者のコメント:レシピがテーマということで、操作によって変化し、状態が移り変わっていくようなものにしようと考えた結果、花を育てるゲームを制作することにしました。この作品で一番大事なのは分岐だと考えます。花が育つまでに全部で3回操作を行うことが出来ますが、水か栄養剤のどちらを与えるかによって育ち方が変わっていきます。これには私の実体験も生かされています。また、見えない部分ですが、if文と状態を示す変数を利用して、タイトルとゲーム画面の状態遷移を戻り値なしの関数で行ってみました。こうすることですっきりまとまったのではないかと思います。あとは一番綺麗に育てることが出来た場合に、ちょっとしたお楽しみのヒントが表示されるようになっています。賞をいただけてとても嬉しいです。ありがとうございました。


【優秀賞(シルバー)】おだんご

odango

作者のコメント:今回のテーマ「レシピ」から私はおだんごが完成するまでの過程をつくりました。場面の切り替えやキーボードを押して操作できるようにするところに苦戦しました。おだんごを焼いているときに湯気を出したり、おだんごの焼き加減の色を工夫したので、みなさんにおいしそうと思ってもらえると嬉しいです。今後もプログラミングを勉強して、楽しくいろいろな作品がつくれるように頑張っていきたいです。


【優秀賞(シルバー)】恐竜のシチュー

dino

作者のコメント:この度は優秀賞に選んでくださりありがとうございます。今回の作品は、操作はすべてクリックで場面が展開していく作品を制作し、ストーリー性のあるゲームで楽しく見ていただけるような作品制作を心掛けました。ストーリーとしての面白みを出すために、あえて現実味のない内容にしました。レシピの要素として、このストーリーの結末は2種類用意してありますが、それぞれ最後の場面までの過程を「レシピ」と考えました。特に頑張った点は、クリックのタイミングをシーンごとに設定したところと、クリックの範囲指定です。初めてのプログラミング制作でしたが、頭の中でやりたいことがたくさん思い浮かんでしまい、時間はかかってしまいましたが、1つの作品を完成できたことに大きな達成感を感じることができました。多くの改善点はありますが、今後も精進していきたいと思います。


【優秀賞(シルバー)】mouse de cooking!

hotcake

作者のコメント:今回のテーマの「レシピ」から料理をイメージし、マウスを動かすと遅れてついてくる動きを焼く過程に使いたいと思いこの作品を制作しました。炎の揺らめきや時間経過に応じた焼き色の変化など細かい部分にもこだわりました。卵が落ちてくる部分の作成が1番大変でしたが、毎週の課題によって得た知識の中でどのように動きを表現しようか考える時間が楽しかったです。もっといろいろな表現ができるように今後とも精進していきたいです。


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

平成30年度にも最後の3回の授業時間を使ってプログラミングコンテストを実施しました(これまでの結果はこちらからご覧になれます。第1回コンテスト第2回コンテスト第3回コンテスト第4回コンテスト第5回コンテスト)。平成30年度のコンテストのテーマは「過去と未来」にしました。物語性や変化を入れ込んだ、動きのあるインタラクティブな作品作りに結び付けてほしいとのねらいがありました。

こうして1年生全員が取り組んだコンテンストですが、平成30年度もProcessingのアニメーションを駆使した素晴らしい作品が多数制作されました。その中から教員3名による審査の結果、優秀賞(ゴールド)2件、優秀賞(シルバー)2件を選出しましたので、ご報告いたします。

受賞されたみなさん、おめでとうございます。また、惜しくも受賞できなかった方の中にも素晴らしい作品が多くありました。是非、これからも楽しんでプログラミングを続けて欲しいと願っております。

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


【優秀賞(ゴールド)】

eisyaki

作者のコメント:映写機から映される6つの情景は、いずれも多くの女性が通ずる場面をセピア調で再現しました。全ての顔が白抜きになっているのは、皆様の顔をあてはめてみていただきたいと考えたからです。また「過去と未来」というテーマから連想して、赤子の未来、妊婦の過去だけでなく、まだ顔の見えない胎児の未来が最初のシーンに繋がるようにしました。


【優秀賞(ゴールド)】

eisyaki

作者のコメント:ジブリ映画のopで出てくる映写機を回すおじさんをヒントにムービーっぽく仕上げました。こだわりは映画がほんとに始まるかのように3、2、1のカウントダウンからスタートさせて、ワクワク感をひきたたせたことで、これは毎週の課題で得た知識を応用してコードを作りました。また、この作品は全てrect(30,50,50,60)など座標指定して図形を作って人や風景、物を表してるのがこだわりです。8ビットのようなデジタルらしい雰囲気で揃えたかったので頑張りました。プログラミング初心者で最初は全然分からなかったのですが、難しいコードを理解して自分で応用してアニメーションを完成させた時の達成感がとても大きかったです!2年生でも頑張ります!


【優秀賞(シルバー)】

FutureandPast

作者のコメント:「過去と未来」というテーマが発表され、その時私はゲームを作りたいと思っており、ゲームを作るとするならばどういった形にすべきか、どうのようにテーマと関連付けるかと思案しました。最終的にはクラスメイトと話し合い、先生にご教授いただきながら制作しました。このゲームは過去と未来のステージがあり、方向キーを操作しながら人間が穴を避けながらゴールまで走るゲームです。ポイントを取る判定と穴に落ちる当たり判定の調整に苦労しました。また、操作がわかりやすい・しやすいように心がけました。今後はこのゲームの改良・改善はもちろん、Processingを含めたプログラミング言語の勉学に励みたいと思います。


【優秀賞(シルバー)】

space_time

作者のコメント:テーマが昨年度よりはっきりしていたということもあり、どのようなものを作るかは想像しやすかったです。私はプログラミングを作るのがあまり得意ではないので、自分の得意な絵で表現していこうと思い、今回このような作品を作りました。1年前までは自分が1からこのような作品を作るとは思っていなかったのでとてもいい勉強になったかと思います。勉強不足のためできないことも多く悔しい思いもしましが、今回この賞に選ばれたことを今後の糧にしてさらに勉強に励んでいきたいです。


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

平成29年度にも最後の3回の授業時間を使ってプログラミングコンテストを実施しました(これまでの結果はこちらからご覧になれます。第1回コンテスト第2回コンテスト第3回コンテスト第4回コンテスト)。平成29年度のコンテストのテーマは「しなやか」にしました。平成30年度には大妻女子大学110周年記念事業を予定しており、その記念事業のテーマが「しなやかに、生きる」に決まりそうということを聞き、それを先取りしようと考えこのテーマにしました。ところが、最終的には記念事業の方は別のテーマに決まってしまいました。とはいえ、「しなやか」という単語には、柔らかい優しさを持ちつつしっかりとした芯をもつというニュアンスがあり、とっても良いテーマだと今でも思っております。また、プログラミングの観点からもアニメーションなどでしなやかさを如何に表現するかということが難しく、とてもやりがいのあるテーマになったと考えております。

こうして1年生全員が取り組んだコンテンストですが、平成29年度もProcessingのアニメーションを駆使した素晴らしい作品が多数制作されました。その中から教員4名による審査の結果、優秀賞(ゴールド)2件、優秀賞(シルバー)2件を選出しましたので、ご報告いたします。

受賞されたみなさん、おめでとうございます。また、惜しくも受賞できなかった方の中にも素晴らしい作品が多くありました。是非、これからも楽しんでプログラミングを続けて欲しいと願っております。

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


【優秀賞(ゴールド)】

branko2

作者のコメント:ある意味異色を放つこの作品で賞を頂けたことを困惑しつつも嬉しく思います。この作品は当初、ハイジのブランコの様にする予定でしたが、トラブルもあり中止となりました。しかし、今回の作品はそのトラブルを逆手に取って作成したものなので、何事も思考の転換が大事だと深く感じました。先生には多くのことをお手伝い頂きましたので、その事に感謝しつつ今後も精進していきたいです。(H.M.)


【優秀賞(ゴールド)】

fan

作者のコメント:この度はこのような素晴らしい賞をいただき、誠にありがとうございます。プログラミングコンテストでの受賞は、入学前から憧れていましたので、とても嬉しく思います。今回のテーマ「しなやか」は、アイデアを考えることも、それを形にすることも難しく、試行錯誤の繰り返しでした。自然な髪の毛の動きを作る事、スイッチのON/OFFで動きを切り替えるようにした事が特に一生懸命に取り組んだ点です。初めはわからない事も多く大変でしたが、自分のイメージ通りに完成した時は達成感がありました。他の学生の作品にも、自分では思いつかなかったアイデアや工夫が多く見られたので、周りから良い影響を受けつつ、今後も努力を怠ることなく精進していきます。(E.A.)


【優秀賞(シルバー)】

pudding

作者のコメント:今回のテーマ「しなやか」からプリンの動きをイメージし、この作品を作りました。プリンの微妙に揺れる動きにこだわり、速度を調整するのが難しかったです。自分の思い通りに動かすのはとても大変でしたが、作品が完成した時は達成感があり、やりがいを感じられました。プログラミングは初めてでしたが、授業で基礎から丁寧に教えていただいたので理解することができました。今後、より良い作品が作れるようにプログラミングの勉強を頑張りたいと思います。(N.K.)


【優秀賞(シルバー)】

stream

作者のコメント:プログラミングは初心者だったので、何から始めたら良いかわからず試行錯誤しながらこの作品を作りました。ですから優秀賞に選ばれて、すごく嬉しく思っています。ありがとうございます。今回のテーマは”しなやか”ということだったので金魚が泳いでいる時のヒレや水の流れを動かすことによりしなやかさを表現しました。自分のイメージでは金魚がマウスに向かって泳いできたり、尻尾を泳いでいるかのように滑らかに動かしたかったのですが今の私にはできませんでした。ですからこれからの授業で多くのことを学び、自分のイメージしたものを実現できるように頑張りたいと思います。(M.K.)


情報デザイン専攻では、はじめてプログラミングを学ぶ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.)


 

デザイン専攻の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年生では、この経験を生かして、本格的な作品制作にチャレンジして欲しいと思います。

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

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