2020年12月17日
A-Frameで始めるクリエイティブ・コーディング入門
はじめに
新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay17です！
昨日は「Ruby Enumerableモジュールを理解して繰り返し処理を書く際の選択肢を増やす」という記事でした！
今回は「A-Frameを使ったクリエイティブ・コーディング入門」というタイトルで、
クリエイティブ・コーディングってなに？という方でも
A-Frameというライブラリを使って簡単に作品制作にチャレンジできるような入門記事を書きたいと思います！
クリエイティブ・コーディングとは
さて、まず「クリエイティブ・コーディング」とは何でしょうか？
クリエイティブ・コーディング（Creative Coding）とは、その名の通りクリエティブなコードを書くこと
「プログラムを機能のためではなく表現のために書くこと」です。
「表現」の手法って、色々ありますよね。
絵画、彫刻、映像、ダンス、音楽……
クリエイティブ・コーディングはプログラムをその表現の一媒体として使う試みです。
プログラムを用いることで、絵画・彫刻などではなかなか表現できないような
【時間での変化】【インタラクション】【リアルタイムのデータ】【ランダム】などなどプログラムならではの要素を扱うことができ、
他の媒体では表現できないような作品を作ることができるんです。
（p5.js使用）
（TouchDesigner使用）
（A-Frame使用）
クリエイティブ・コーディングを掘り下げる！
クリエイティブ・コーディングをもっと知りたい方には、日本発のクリエイティブコーディング・映像プラットフォーム【NEORT】を見てみるのがおすすめです。
プログラムで書かれた作品はソースコードも見ることができるので、
すごいアーティストの作品がどのように実装されているのか確認することもできます。
A-Frameとは
今回使う開発ライブラリ A-Frameは、誰でも簡単に WebVRの開発ができるものです。
（WebVRとはWebブラウザでVR : バーチャルリアリティをやること）
このA-Frameのいいところはとにかく簡単なところ。
プログラマじゃなくてもhtmlのタグで大体のことができてしまいます。
どれほど簡単なのか、実際に書いていきましょう。
1. 実践 – 基本のコード
テキストエディタにhtmlファイルを作ります。
<html>
<head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
</head>
<body>
<a-scene vr-mode-ui="enabled: false">
<a-box position="0 0 -2" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sky color="#ECECEC"></a-sky>
<a-entity camera></a-entity>
</a-scene>
</body>
</html> こちらをコピペ&保存してhtmlファイルをダブルクリックしてみると…
このような絵が表れました！
A-Frameはこの通り、少ない行数でVRシーンを作ることができるので簡単に3Dの図形やシーンを作ることができます。
つまり表現がテーマのクリエイティブ・コーディングの入門にはうってつけなのです。
See the Pen
XWKwbJY by Damien (@Damien_Ito)
on CodePen.
今回はこの画面をアレンジすることでクリエイティブな作品を作っていきましょう。
2. 実践 – 応用
boxが置いてあるだけだと殺風景なのでアレンジしていきます。
A-Frameには多くのプロパティが用意されていて、htmlのタグにプラスすることでオブジェクトを様々にアレンジすることができます。
例えば「Animation」
これは文字通りオブジェクトにアニメーションをさせることができるプロパティで、画面に動きをプラスすることができます。
A-Frame – Animationドキュメント
試しにboxオブジェクトに回転アニメーションを足してみます。
<a-box
position="0 0 -3"
rotation="0 45 0"
material="color: #4CC3D9"
animation="property: rotation; from: 0 0 0; to: 360 360 0; loop: true; dur: 3000; easing: linear"
></a-box> 
クルクル回転させるだけで、画面に変化が出て見応えが出てきました！
これはa-boxに以下の一行を追加しています。
animation="property: rotation; from: 0 0 0; to: 360 360 0; loop: true; dur: 3000; easing: linear"
こんな感じでプロパティを組み合わせたりアレンジしていきましょう。
さらに動きを足してみます。
先ほどは回転（rotation）のプロパティをアニメーションさせたので、今度は大きさ（scale）もアニメーションさせてみます。
<a-box
position="0 0 -3"
rotation="0 45 0"
material="color: #4CC3D9"
animation="property: rotation; from: 0 0 0; to: 360 360 0; loop: true; dur: 3000; easing: linear"
animation__2="property: scale; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1000; loop: true; dir: alternate"
></a-box> 
大小の動きにもアニメーションがプラスされてダイナミックになってきました！
今回足したのは以下の一行です。
animation__2="property: scale; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1000; loop: true; dir: alternate"
ひとつのオブジェクトにanimationを複数足す場合はanimation__2など数字を付けた記述の仕方をします。
この辺はドキュメントをご覧ください。
こんな感じでプロパティを足して自分の作品を作ってみましょう！
Animation組み合わせ例①
前述のアニメーションを複数のboxに適用させて、回転させてみました。
ここから背景色、box色を変えたり、また回転のスピードを変えたりしても違った画面が作れそうですね。
See the Pen
qBNGOvj by Damien (@Damien_Ito)
on CodePen.
Animation組み合わせ例②
こちらはJavaScriptも併せた発展形ですが、やっていることは同じでとにかくanimationで動きを持たせました。
JSでa-boxを画面いっぱい配置して、以下でanimationを用いています。
– それぞれのboxを回転
– それぞれのboxの大きさを変更
– カメラを回転
スピード（animation所用時間: dur）をanimationごとに変えておくこと、
またイージングeasingを効果的に使うことで、単調にならずに常に複雑な画を見せることができます。
See the Pen
MWjJxYp by Damien (@Damien_Ito)
on CodePen.
3. 発表
作った作品は、気が向いたら発表してみましょう！簡単なものでもOK！
それにどこかに溜めておくと、自分の作ったものを後から見返したり、アレンジし直すのに便利です。
作品を公開できるプラットフォーム
- ・NEORT
- ・Codepen
- ・Open Processing（Processingを使った作品限定）
※プラットフォームによっては作品がMITライセンスとなってしまいますのでそれぞれの規約をお確かめください。
まとめ
今回はクリエイティブ・コーディング入門と題して、A-Frameを使った作品作りのヒントをまとめました！
著者自身、元々絵の制作をやっていてその後コーディングを始めたので、簡単に始められるA-Frameにかなり救われました。（簡単なコードで画が作れると楽しく、モチベーションを保ったままコーディングの勉強ができたため…）
クリエイティブ・コーディングは他にもProcessing（p5.js）、TouchDesigner、openFrameworks、Three.jsなどなど、様々なツールや言語が使われています。
ぜひ自分のスキルに合ったやりやすい方法を探して、作品制作にチャレンジしてみてくださいね。
WebAR/VRのお仕事に関するご相談
Bageleeの運営会社、palanではWebAR/VRに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。
この記事は
参考になりましたか？
6
2
AUTHOR
Damien
WebAR/VRの企画・開発をやっています。森に住んでいます。
関連記事
アプリでもっと便利に！気になる記事をチェック！
記事のお気に入り登録やランキングが表示される昨日に対応！毎日の情報収集や調べ物にもっと身近なメディアになりました。
簡単に自分で作れるWebAR
「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。
palanARへ
