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へ
palanでは一緒に働く仲間を募集しています
正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。
運営メンバー
Eishi Saito 総務
SIerやスタートアップ、フリーランスを経て2016年11月にpalan（旧eishis）を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。
sasakki デザイナー
アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。
やまかわたかし デザイナー
フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。
Sayaka Osanai デザイナー
Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。
はらた エンジニア
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています
こぼり ともろう エンジニア
サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。
ささい エンジニア
フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。
Damien
WebAR/VRの企画・開発をやっています。森に住んでいます。
ゲスト bagelee
かっきー
まりな
suzuki
miyagi
ogawa
雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。
いわもと
デザイナーをしています。 好きな食べ物はラーメンです。
taishi kobari
フロントエンドの開発を主に担当してます。Blitz.js好きです。
kubota shogo
サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています！
nishi tomoya
aihara
グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。
nagao
SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。
Kainuma
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています
sugimoto
asama
ando
iwasawa ayane
oshimo
異業界からやってきたデザイナー。 palanARのUIをメインに担当してます。 これからたくさん吸収していきます！
