【jQuery】ポリゴン状のアニメーションを描画するGeometryangleの使い方

こんにちは、Ryohei（@ityryohei）です！

Geometryangleはポリゴン状のアニメーションを描画するjqueryのプラグインになります。導入も簡単で、デフォルトの状態であればダウンロードしたプラグインを読み込んで数行記述するだけで美しいポリゴン状のアニメーションが表示されるようになります。

以下、デモになります。

Demo

上記デモはGeometryangleをデフォルトの状態で導入したものになります。ゆらゆらと変化するポリゴン状のアニメーションが美しいですね。マウスカーソルにも反応しますので、閲覧中の方も、おっ！なんだこれは！となること間違いなしです。

Geometryangleの使い方

プラグインのダウンロードは下記のリンクから行います。Gitからダウンロードすることができます。

https://github.com/TritonCode/Geometryangle

ダウンロードした「Geometryangle-master.zip」を展開してフォルダ内にある「geometyryangle.js」もしくは「geometryangle.min.js」をHTMLファイルに読み込みます。GeometryangleはjQueryのプラグインになりますので、jQueryも読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="geometryangle.min.js"></script>

上記のファイルを読み込み、下記スクリプトを追加します。セレクタにはポリゴン状のアニメーションを表示したい要素をセレクタに指定します。下記で「body」となっている箇所になります。

$(document).ready(function(){
  $('body').Geometryangle({mesh:{}, lights: [{}], line: {}, vertex: {}});
});

上記をまとめると下記のようになります。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="geometryangle.min.js"></script>
$(document).ready(function(){
  $('body').Geometryangle({mesh:{}, lights: [{}], line: {}, vertex: {}});
});

最後にセレクタで指定した要素にスタイルを追記します。

body {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

固定表示にしたくない場合は下記のように修正しましょう。z-indexは他要素の重なり順によって修正していただければと思います

body {
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
}

以上でデフォルトで設定されているポリゴン状のアニメーションが表示されます。

Geometryangleのオプション

下記のページにデモのリンクやドキュメントのリンクが載せてありますが、現在（2018年7月1日）は閲覧できないようです。

https://github.com/TritonCode/Geometryangle

なので、スクリプトの中身に設定されているデフォルト値を記載します。オプションは下記のように追加します。

$(document).ready(function(){
  $('body').Geometryangle({
    mesh:{
      //ここにmeshのプロパティを追加
    },
    lights: [{
      //ここにlightsのプロパティを追加
    }],
    line: {
      //ここにlineのプロパティを追加
    },
    vertex: {
      //ここにvertexのプロパティを追加
    }
  });
});

下記は「geometry.js」で設定されているデフォルト値になります。それぞれの値を変更してお好みのポリゴンアニメーションを作成しましょう！

mesh

width	1.2
height	1.2
depth	10
columns	undefined
columns_auto	true
rows	undefined
rows_auto	true
zoom	1
xRange	0.8
yRange	0.1
zRange	1.0
ambient	'rgba(85, 85, 85, 1)'
diffuse	'rgba(255, 255, 255, 1)'
background	'rgb(255, 255, 255)'
speed	0.0002
fluctuationSpeed	0.5
fluctuationIntensity	0
floorPosition	false
draw	true

lights

count	1
xyScalar	1
zOffset	100
ambient	'rgba(255,0,102, 1)'
diffuse	'rgba(255,136,0, 1)'
speed	0.010
gravity	1200
dampening	0.95
minLimit	10
maxLimit	null
minDistance	20
maxDistance	400
autopilot	false
draw	false