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

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

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

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


【優秀賞(ゴールド)】

smallfish小さなお魚たちの物語

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

 

manある男の物語

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

 

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

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


【優秀賞(シルバー)】

fruits季節のフルーツ拾い

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

 

kobit走る小人の物語

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

 

appleリンゴ物語

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


 

LINEで送る
Share on Facebook

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

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

報告者: 谷口鈴子、柳葉結花(情報デザイン専攻/松田ゼミ)

松田ゼミでは、3年生の社会情報学ゼミIで発想法の1つであるKJ法を実習します。実習では、9人いるゼミ生が2つのグループに分かれ、与えられた課題に対して、KJ法を用いて話し合うことで解決策を見つけていきます。今回の実習では、よりよい解決策を見つけ出すことよりもたくさんのアイデアを出すこと、ポイントになる点を明らかにすることを重点に置き、議論を進めました。

1. KJ法とはなにか?

KJ法とは、話し合いから集められた情報から必要なものを取り出し、関連するものを集め整理しまとめていくことでアイデアを見つけ出す発想法の1つです。KJ法では、課題に対する話し合いで出たアイデアや意見をカードなどに書き出しまとめ、似ているアイデアや意見を分類することで進めていきます。カードなどの紙を活用するところに大きな特徴があり、内容や質がまちまちな情報をまとめ、全体を把握するのに有効な技法といわれています。また、この方法は、個人の思考や会議での意見をまとめる際などに用いられ、例えば、まちづくりの分野などでも計画段階での住民意見の集約や、設計段階における関係者の意志の統一などに応用されています。今回のゼミでは、以下のようにしてKJ法を進めていきました。

  1. ブレインストーミング(以下、ブレスト)などで出されたアイデアや意見などをカードにまとめ、模造紙に貼り付けいく。
  2. カードを確認し、似たような意見同士をまとめ、グルーピングをしていく。グループごとにもタイトルをつけ、ほかのグループと関係があるものがあれば、大きな一つのグループにまとめていく。
  3.  グループを確認していき、グループごとの関係性を見つけていく。

最後は、発表資料にまとめて、ゼミ内で発表会を行いました。

2. ブレストした課題

今回、私たちがブレストした課題は「大妻女子大学、社会情報学部のホームページを見る人を増やすにはどうしたらいいか」ということです。この課題について議論するにあたり、対象者を、大学受験を控える高校3年生と、高校3年生を持つ両親に絞り、わかりやすく、見やすいホームページ(以下、HPとします)の作成案を作ることにしました。5月11日、22日の2週間にわたりゼミ生5人(瀬川、秋元、椎野、柳葉、谷口)でこの課題について話し合い(図1参照)、6月19日に発表会を行いました。

1

図1 ブレストの様子

3. ブレストで出た意見(主なもの)

現在の社会情報学部のHP(図2参照)をもとにKJ法を用いてブレストした結果、問題点が、大きく分け以下の3点になることがわかりました(図3参照)。

  1. 全体的にサイトが見にくい。
    サイトは文字の多さが目につき、読もうという気が起きない。各ページへのリンクが探しにくいために見たいページに行くのに時間がかかる。
  2.  サイトの作りがシンプルすぎる。
    サイトの色が2色しかなく、全面的に白色の割合が多く、単調なサイトに感じる。似たようなイラストがいくつも使われている上に、写真の少なさが画面の見にくさに繋がっている。
  3.  社会情報学部のニュース・トピックスの情報が在学生向けと一般向けで混在している。
    例えばイベントのお知らせも学生向けなのか、一般向けなのか判断がしづらい。また、専攻ごとに分かれていないのも見づらい。

2

図2.現在の社会情報学部のHP  

3                

図3.アイデアをポストイットに書き、グループ化、まとめた模造紙

これらの問題点に対し、リンクや、文字をまとめる、などのアイデアが出たので、画面の見やすさを高めることにしました。また、それだけでは寂しいHPになってしまうという意見が出たため、画像を多く利用するというアイデアを元に、ぱっとみただけでもわかるHP案を作成することにしました。ブレストを重ねていくうちに、大妻らしさ、そして女子大らしさを出したHPを作るのにはどうしたらよいかという課題を見つけ、話し合いを進めていきました(図4参照)。

4

図4 ブレストの結果をグルーピングしたもの

4. 解決策

KJ法の結果、得られた解決策を以下に示します。図5にこれをベースにし、自分たちで作成した例を示します。

  1.  誰がHPを見に来るのか、対象者をはっきりさせる。
    サイトを見に来る対象者が誰かということを考え、構成を女子高校生向けと保護者向けに分けます。しかし女の子が見たくなるような、『かわいらしさ』は今のサイトにはありません。そして女子高生の保護者は、きっと校内のことやセキュリティー、就職率などについて気になるのではないかと考え、対象者ごとにHPを用意することにしました。
  2.  サイトのデザインの変更
    サイトの全体の配色やデザインを一新し、リンクをまとめて見やすくすることにしました。今回は情報デザインのページを例に考えました(図5参照)。サイトの基本的な色は、現在の社会情報学部の各専攻用のバナーの色から情報デザインカラーの青を基調とします。(環境は赤、生活はピンク)トップ画像は昨年度のミス大妻を使用します。昨年度のミス大妻は社会情報学部の方だったので一般の人にも知ってもらおうと思い使用しました。4枚のトップ画像は自動で変わり、学部の紹介動画も見られます。カーソルを項目の上に動かすと項目が画像に切り替わり、イメージを伝えやすくします。
  3. 社会情報学部らしさのアピール
    私たち社会情報学部情報デザイン専攻の大きなアピールポイントは、女子大の中の理系ということです。共学の大学の理系のHPは男子学生の画像が貼ってあり、構成もシンプルなものが多いですが、その中で女子大の理系のHPの可愛さはインパクトがあると思います。また、理系ということで格好よさそうと思っている高校生もいるはずなので、サイトのデザイン自体を自分で変えられる機能をつけます。これはサイトに行くとサイト側から「可愛いのいいか、格好いいのがいいか」などの質問をされ、答えによってデザインが変わり、サイトへのイメージを変えつつ、同時にテクノロジーのアピールもできます。
  4. ニュース・トピックスの移動
    ニュース・トピックスの項目のほとんどは在校生向けで、高校生は見ないと考え、ページの一番下に配置します。各トピックスを在学生や専攻ごとに分けることで見やすくすることにしました。

5

図5 私たちが考えたサイトのイメージ図

5. 発表会

KJ法の結果は、ゼミ内の発表会を行い、もう1つのチームと議論をしました(図6参照)。発表会でもう1つのグループから主に以下のような質問が出ました。

  1.  対象者に保護者を入れる意味は何か?
    最近大学、特に女子大のオープンキャンパスには保護者が付き添うようになってきました。大学側でも親向けのイベントを行うなど、家族全体で子供の進路を考えています。このため、専攻ごとのページにも保護者が知りたい情報をまとめることで、保護者にもわかりやすくなるのではないかと考えました。
  2.  授業内容を写真で説明するのは難しいのでは?
    今までの授業内容は文字での説明が多く、どんな内容なのかイメージがしづらいですが、図を入れることでイメージが変わり、授業内容に興味が出るのではと考えました。
  3.  女子大は可愛いというイメージは人それぞれでは?
    女子大だからHPを可愛くすれば興味を持って見てもらえるという考え方は人それぞれです。そこで4節に記述したように自分でサイトのデザインを変えられるようにすることで、知的なイメージも伝えられるようにします。

6

図6.発表会の様子

6. まとめ

今回、KJ法を行ってみて課題を多方向から客観的に見ることができました。関係のないような些細なアイデアでもたくさん紙に書いて、グループにすることで何が問題なのかということがはっきりしていきました。また、発表しあうことで自分たちからではわからない意見も聞くことができ、よりよい解決策を考えることができました。今後は複数人でなく個人でも一つの課題について効率的に個々のアイデアから全体像を導き出すことができるのではないかと思います。

LINEで送る
Share on Facebook

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

【音楽やろうぜ!!】

LINEで送る
Share on Facebook

情報デザイン専攻2年生の必修科目「クリエイティブ思考法」の第1回目(4月14日)は、今年度も本学名誉教授の田邉和子先生をお迎えして、「女性として生きる-卒業生の就職を通して」というテーマで講演していただきました。

田邉和子名誉教授の講演

講演の前半では、先生のご専門の原子核物理から、原子力の優れた点と問題点について学生にわかりやすい説明がなされました。後半では、情報デザイン専攻の卒業生の就業状況や、女性が活躍できる職業や仕事の選び方などについて、具体例とともに話が進みました。

学生は受講後の感想文で、たとえば「2011年度の東日本大震災で起こった様々な問題を自分自身のこととして捉えるようになった」と述べたり、また、就職について、「女性として社会で生きていくために、改めて考える機会になり、大学での勉強に対する意欲が一層高まった」と述べるなど、この授業をきっかけに社会への関心や本専攻で学ぶ意味を再確認できた様子でした。物事をいろいろな切り口で考えることや、積極的に新しい情報にアクセスして判断を行うことの重要性についても感想文で触れられていましたが、これは当授業の狙いである「気づき」であり、今後さらに理解を深めて行動に移してほしいものです。

 

以下は、講演後の学生の感想文から抜粋したものです。

 

放射能は害を与えるだけのものだと思っていましたが、考古学における年代の調査で必要なものだと知り、害を与える一面もあるものの、歴史を解明するという偉大な研究の一部に必要だということに驚きました。今まで原子力と考古学は全く関わりのない学問だと思っていたため、大きな関わりがあったことにも驚きました。(Kさん)

新しいエネルギー源が作られている事を知り、うれしかったです。もっとCO₂を作らず効率よく発電できる方法が開発されて安全な物ができるといいなと思いました。(中略)
卒業後の進路については、大妻は就職率が高く情報系が強いと聞きこの学部(情報系)での学びを生かして就職が決まるといいなと思いました。(中略)
企業側が求める礼儀正しさ、協調性をあと3年間で身に付けていき、普段から礼儀に気を付けて行動していこうと思いました。必要だと思われる人材にどうしたらなれるのだろうと考えられるきっかけになる講義でした。(Cさん)

 原発事故による放射能汚染で人体の影響など様々な不安要素が身の周りに起きていることを改めて知りました。しかし、それに対処しようと検出器の開発、宇宙線のミューオン測定装置の発明などの対策に取り組んでいることに感心しました。このような技術がますます必要となってくるとのことなので、私も大学で広い視野を持って学び、能力や技術を伸ばしていきたいです。(Aさん)

 東日本大震災の時の原発事故における放射能について、イメージはできても詳しいことは知らなかった。地震から月日が経ち、以前よりは原発問題などが報道されることは少なくなったが、未だに問題は多く残っていることが分かった。放射能などの問題などから他のエネルギー源を利用していこうとしても、それぞれにメリット・デメリットがあるため、簡単には移行することはできないということが、難しい問題だと感じた。(Kさん)

原子力発電について、今まで問題の内容をしっかりと理解してニュースを見てはいませんでした。今日のお話しを聞いて何が問題であるのか、知ることができました。今まではニュースを何気なく見ていましたが、汚染の現状や原発の内部についての詳しいお話しを聞いたことで原発問題への考えも変わりました。
人間の生死にも関わる自国の問題なので決して他人事ではないと感じました。原発に問題があるから代替エネルギーを使おうといっても、代替エネルギーにもそれぞれ問題があったりして、簡単に解決できる問題でもないので深刻なことだと思いました。(Mさん)

会社の選び方で将来伸びそうな会社、働き易い会社などの資料がとてもためになりました。企業が求める、基礎学力、協調性、礼儀正しさ、気配りなどを日頃から意識し、大学生活で身に付けていきたいです。(Nさん)

LINEで送る
Share on Facebook

デザイン専攻の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年生の必修科目「クリエイティブ思考法」の第2回目(4月22日)は、今年度も筑波大学システム情報系から三谷 純准教授をお迎えして、伸縮の無い平板素材を折ることによるモノ作りとしての折り紙について、『折り紙における創造性』というタイトルで講演していただきました。

DSC_8076_s

『古くから日本に伝わる「折紙」は、私たちの多くが幼少のころに体験し、親しんでいるものです。一方で、最近では折紙に関する数理的な側面からの研究が進み、従来の折紙とは一線を画するような作品が登場するようになりました。とくにコンピュータを使った設計支援の技術の進歩は目覚ましく、曲線・曲面を含む折紙の設計も可能になりました。』という三谷先生の前置き説明に、学生は興味と驚きを同時に感じたようでした。

講義では、折紙の形が折り線の配置によって規定されることを主題に、折り線の配置に関する法則や、折り線の設計方法の解説の後、三谷先生が開発したソフトウェアのデモンストレーションや制作風景の動画などを通して、折紙設計の実際を知ることができました。

DSC_8063_s

また、蛇腹折りと中わり折りを組み合わせた簡単な折りや、曲線をもつ「花型」の折り紙も体験しました。このような工夫に富んだ講義を通じて、受講生は従来の「折紙」の固定概念から離れ、折りの新しい可能性を感じてもらえたことと思います。

DSC_8099_s

以下は、講演後の受講学生の感想から抜粋したものです。

たった1枚の伸縮しないただの紙だったものが、躍動的に表現力をもった立体へと華麗に変化していく様にとっても驚きを感じました。小さいころに遊びで折り紙をした時に、1つ1つ工程を終えて完成へと近づいていく時のワクワクした気持ちを思い出し、懐かしくもなりました。また、コンピュータを用いることで広がるクリエイティブな活動の可能性を感じました。コンピュータといえば計算力を活かしたシステム系のイメージが強くありましたが、このようなデザインの分野での技術を知ることができ、改めて情報デザインに興味を持ちました。今、学んでいる科目やこれから学ぶことができる情報系の科目を、より懸命に取り組んでいきたいと思いました。【Y.K.】

コンピュータを使って設計しながら様々な折り紙の研究をしている方が世界に数多くいらっしゃると聞き、正直驚きました。折り紙がなぜ情報系と関係性があるのか、講義を聴くまでは疑問でしかありませんでした。しかし、コンピュータを使って作りたいモノや形を設計したり、数学的・工学的な面から折り線の配置や曲面の作り方などを研究されているとのことで、とても面白いと思いました。また、デパートの展示品やPVの背景、服のデザインなどにも折り紙の技術が取り入れられていて、「折り紙」というものはとても幅広い可能性を持つものだと感じました。昔ながら遊びの1つとしか今までは考えていませんでしたが、今日の講義を聞いたことで、私の中で折り紙の考え方が変わりました。【M.O.】

今回、三谷先生から教えていただいたことは“大人の折り紙”。折り紙は子供がする遊びという考えを覆すものでした。大人が大人の頭脳をフルに使って折り紙をすると、ぞの1枚の紙が限りない可能性を生み出すことができるという。その可能性はとても大きなもので、世界にも影響をあたえたという事実がとても嬉しく、日本人としての誇りを感じることができました。【M.H.】

折り紙は昔からある平面的なものであると思っていたので、折り紙と現代的なグラフィックデザインやPCとの組み合わせはすごく意外だと思いましたが、講義を聞いて今や折り紙はただの遊びではなく、最先端技術の開発にも大きく関わっていると知りました。【M.T.】

蛇腹折りや、曲線をもつ折り紙を体験した時の感覚が、数学を勉強している時やプログラミングを勉強している時と少し似ていることに気が付きました。完成をイメージしながら作る立体的で曲線の多い折り紙を折る作業は、子供の頃のようなワクワク感を思い出す一方で、大学で学んだプログラミングなどの情景も脳裏に浮かび、懐かしいようなそうでないような不思議な気持ちになりました。【H.A.】

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