2020年12月17日

A-Frameで始めるクリエイティブ・コーディング入門

目次

  1. はじめに
  2. クリエイティブ・コーディングとは
  3. A-Frameとは
  4. 1. 実践 – 基本のコード
  5. 2. 実践 – 応用
  6. 3. 発表
  7. まとめ

はじめに

新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay17です!

昨日は「Ruby Enumerableモジュールを理解して繰り返し処理を書く際の選択肢を増やす」という記事でした!

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ファイルをダブルクリックしてみると…
スクリーンショット 2020-11-19 12.03.58.png (170.2 kB)
このような絵が表れました!

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>

giphy.gif (116.9 kB)

クルクル回転させるだけで、画面に変化が出て見応えが出てきました!
これは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>

giphy (1).gif (95.5 kB)

大小の動きにもアニメーションがプラスされてダイナミックになってきました!
今回足したのは以下の一行です。

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!
それにどこかに溜めておくと、自分の作ったものを後から見返したり、アレンジし直すのに便利です。

作品を公開できるプラットフォーム

※プラットフォームによっては作品がMITライセンスとなってしまいますのでそれぞれの規約をお確かめください。

まとめ

今回はクリエイティブ・コーディング入門と題して、A-Frameを使った作品作りのヒントをまとめました!

著者自身、元々絵の制作をやっていてその後コーディングを始めたので、簡単に始められるA-Frameにかなり救われました。(簡単なコードで画が作れると楽しく、モチベーションを保ったままコーディングの勉強ができたため…)

クリエイティブ・コーディングは他にもProcessing(p5.js)、TouchDesigner、openFrameworks、Three.jsなどなど、様々なツールや言語が使われています。
ぜひ自分のスキルに合ったやりやすい方法を探して、作品制作にチャレンジしてみてくださいね。

WebAR/VRのお仕事に関するご相談

Bageleeの運営会社、palanではWebAR/VRに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

1

1

AUTHOR

damien

Damien

WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

かっきー

かっきー

まりな

まりな

suzuki

suzuki

taro

taro

xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

kobari

taishi kobari

フロントエンドの開発を主に担当してます。Blitz.js好きです。

CONTACT PAGE TOP