【制作の背景・目的】

　制作の背景は、メディアアートに関する展示イベントを見学し、自身もメディアアートに関する作品を制作してみたいと考えたからです。多くのメディアアートについて知って触れる機会にしてほしいと思い、簡単なメディアアートの博物館のようなものを作りたいと考え、行動し始めました。
　制作の目的は、自分の作品を通して、少しでもメディアアートの良さを知ってもらい、メディアアートに対する興味・関心を持ってもらうことです。

【内容】

　オリジナルのARマーカーをブラウザを通してスマートフォンのカメラで読み取ってもらうと、読み取ったマーカー上にそのマーカーに書かれた模様に沿ったプログラムアニメーション映像が描画されます。また、ただマーカーを読み取って映像を流すのではなく、画面をタップするというユーザーのアクションによって映像が変化する簡単なインタラクティブ要素のある作品です。

【体験手順】

1. スマートフォンを起動し、鑑賞したい作品のWebサイト兼カメラを開くための二次元コードを読み込ませます。
2. 画面内の指示にしたがい、「hb20a064.github.io」にカメラの使用を許可しますか？というメッセージに対して[許可する]を押してください。
3. カメラが起動したら、鑑賞したい作品のARマーカーを画面内にかざしてください。
4. ネットワークの状況やお使いのスマートフォンによっては、画面表示や操作の反応が遅い場合があります。その際は、もう一度最初から操作をやり直してください。

※１：使用するブラウザは、GoogleChromeを推奨します。
※２：二次元コードに対応したARマーカーは、枠の色が同じです。

【スマートフォン画面の操作について】

　作品は、スマートフォンの画面を指で軽くタップすると変化を楽しむことができます。
　また、BGMや効果音など、音の出る仕掛けとなっております。
　お使いのスマートフォンの音量を調整してお楽しみください。

【AR体験説明動画】

【作品紹介】

　和傘、花、風船、クラッカー、ふしぎな木、星と虹、花火、風車の計８つのAR作品とARマーカーを８つと展示用セット４つを制作しました。

○8つのAR作品とARマーカー

●和傘（Wagasa）

　ARマーカーをかざすと、和傘が上から降ってきます。
　和傘を１度タップすると、音楽が流れ始め、回転しながら落下していきます。
　さらにもう１度タップすると、回転が緩やかになり落下していきます。

　和傘の二次元コードを読み込めない場合はこちらから。
>和傘(Wagasa)ARマーカーを読み取るサイトへ移行します。※カメラが起動します。

●花（Flower）

　ARマーカーをかざし、画面に映ったARマーカーをタップすると
タップした場所に花が咲きます。
　花の色はランダムに変わります。

　花の二次元コードを読み込めない場合はこちらから。
>花(Flower)ARマーカーを読み取るサイトへ移行します。※カメラが起動します。

●風船（Balloon）

　ARマーカーをかざすと、風にゆらめく風船が登場します。
　風船をタップすると、上方向へゆっくりと風船が飛んでいきます。

　風船の二次元コードを読み込めない場合はこちらから。
>風船(Balloon)ARマーカーを読み取るサイトへ移行します。※カメラが起動します。

●クラッカー（Cracker）

　ARマーカーをかざすと、クラッカーが両サイドに登場します。
　クラッカーをタップすると、１度だけ紙吹雪が発射されます。

　クラッカーの二次元コードを読み込めない場合はこちらから。
>クラッカー(Cracker)ARマーカーを読み取るサイトへ移行します。※カメラが起動します。

●ふしぎな木（MagicalTree）

　ARマーカーをかざすと、ふしぎな木が登場します。
　ふしぎな木をタップすると、葉っぱの色がランダムに変わります。
　何度も変化させることができます。

　ふしぎな木の二次元コードを読み込めない場合はこちらから。
>ふしぎな木(MagicalTree)ARマーカーを読み取るサイトへ移行します。※カメラが起動します。

●星と虹（Star and Rainbow）

　ARマーカーをかざすと雲が登場します。
　雲をタップすると、星が降り出します。
　もう１度画面をタップすると、星が降り止み虹が現れます。

　星と虹の二次元コードを読み込めない場合はこちらから。
>星と虹(Star and Rainbow)ARマーカーを読み取るサイトへ移行します。※カメラが起動します。

●花火（Fireworks）

　ARマーカーをかざし、画面に映した状態で好きなところをタップすると、
タップした位置に向かって花火玉が飛んでいき、花火が咲きます。
　タップした位置によって、花火の色が変わります。

　花火の二次元コードを読み込めない場合はこちらから。
>花火(Fireworks)ARマーカーを読み取るサイトへ移行します。※カメラが起動します。

●風車（Kazaguruma）

　ARマーカーをかざすと、風車が５つ登場します。
　風車をタップすると、勢いよく回ったのち回転が元に戻ります。

　風車の二次元コードを読み込めない場合はこちらから。
>風車(Kazaguruma)ARマーカーを読み取るサイトへ移行します。※カメラが起動します。

○４つの展示用セット

　展示用セットを制作した理由は、AR作品と合った展示用の背景セットを作ることによって、世界観がより鮮明となり、AR作品に対する没入感が高まると考えたため、制作しました。

【AR作品紹介動画】

【反省点・改善点など】

　作品を制作していく上で、自分で解決方法を見つけられず進捗が滞った際には、さまざまな人の意見に耳を傾け、参考にするなどし、視野を広げて対応してゆくことが重要だと気づくことができました。
　今回の制作が初の自分の力だけでの個人制作だったので、技術的に表現するのが難しく、three.jsで用意されている既存の3Dオブジェクトのみでの制作となりました。なので既存のオブジェクトではなく、自作のオリジナルの3Dオブジェクトを作る技術があれば、さらに表現の幅を広げられたのではないかと思いました。

【使用ツール】

Visual Studio Code
Three.js
AR.js
AR.js Marker Training
QRのススメ
GitHub
Canva
GarageBand
CapCut

【クレジット】

Canva
いらすとや
OKUMONO
OKUMONO+F
効果音ラボ
Audiostock
DOVA-SYNDROME
Springin’ Sound Stock
OtoLogic
ポケットサウンド