jQUeryのプラグイン、geometryangleを色々といじってみました。
geometryangleとは、ポリゴン状の背景を描写してくれるjQueryのプラグインです。簡単に幾何学模様を生成できるので、webサイトの背景などにちょっとアクセントを付けたい時に便利らしいです。（使ったことないですが）
勝手な印象で「幾何学模様のjsって設定が異常に大変そう。」って思ってこれまで全く触っていなかったのですが、勉強がてら色々と触ってみたので、使える情報があればと共有します。
この記事の目次
勉強するに当たり参考にさせて頂いたサイト
わかりやすい実装のサンプルは、【jQuery】ポリゴン状の背景を描画する［Geometryangle］の使い方 – onzeをご参照ください。（僕の下記の紹介よりもわかりやすいですわｗ）
geometryangleの実装の仕方を簡潔に紹介
簡単に、最もシンプルな実装の方法を記載します。
ダウンロード
GEOMETRYANGLE – 公式サイトから、geometryangle.min.jsをダウンロードして自分の環境にアップロードしてください。
アップロードして呼び出し
その後、下記のように呼び出し
<!-- googleにホストされているjQueryの呼び出し--> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- geometryangleの呼び出しです。 --> <script src="geometryangle.min.js"></script>
bodyに適用させて
$(function () {
$('body').Geometryangle({
mesh: {},
lights: [{}],
line: {},
vertex: {}});
});
完成！
See the Pen [jQuery]ポリゴンアニメーションGeometryangle デフォルト by nkmrkisk (@rekid) on CodePen.
これで実装は完了です。geometryangleはデフォルトだとオレンジの背景に、黄色の光源がマウスによってくる形になっていますね。あとは個人の好きにoption（下記で紹介）をいじって遊んでください。
ちなみに、別の要素に対して適用させることも可能です。その場合は、上記で「$(‘body’)」と指定している箇所を変更してください。とまあこんな感じに、ただ読み込むだけでもお洒落でカッコいいポリゴンが作られるわけです。
Option一覧
Optionを修正して自分好みに変えて遊ぶために、１つ１つOptionを試してみました。が、何に影響を与えているOptionなのかがわからないものも多少ありました。。とりあえず参考になればと思い全て下記残します。
title="option"]
$(function () {
$('body').Geometryangle({
mesh: {
'width':1.2, // canvas全体の横幅
'height':1.2, // canvas全体の縦幅
'depth':0, // ポリゴンの奥行き
'columns':10, // ポリゴンの列数
'rows':8, // ポリゴンの行数
'xRange':0.01, // 頂点のx軸の可動域
'yRange':0.01, // 頂点のy軸の可動域
'zRange':0, // 頂点のz軸の可動域
'ambient':'rgba(255,255,255, 1)', // 周囲の色（lightでの設定と干渉します
'diffuse':'rgba(255,255,255, 1)', // 放散される色（lightでの設定と干渉します
'background':'rgba(255,255,255,1)', // キャンパスの背景色
'speed':0.0002, // x,y,z軸のパスの稼働速度です。大きいほど早くなります。
'fluctuationSpeed':0.5,
'fluctuationIntensity':0,
'onRender':function(){}
},
lights: [{
'count':1, //0 = none 。0に近いほど明るくなります
'xyScalar':1, //scalar = 数量 数量が何にあたるのかは不明です。
'zOffset':100, // キャンバスとのz軸の距離 数値が大きい方が広い箇所に影響する
'ambient':'rgba(255,255,255, 1)', // 周囲の色（meshでの設定と干渉します
'diffuse':'rgba(255,255,255, 1)', // 放散される色（meshでの設定と干渉します
'position': [500, 400], // undefinedにするとマウスに追従します、場所指定は配列で[x, y]
'speed':0.1,
'gravity':1200, // マウス位置への吸引力
'dampening':0.95, // 光源の動きを抑制する力、1以上になると反発してしまうのか戻ってこない
'autopilot':false // 指定箇所でとどまるように動く true , false
}],
line: {
'draw':true, //線の表示非表示設定
'fill':"rgba(0,0,200,1)", // 線の色
'thickness':3, // 線の太さ
'fluctuationSpeed':0.2, //点滅のスピード
'fluctuationIntensity':0.5 // 点滅の滅時の透過度
},
vertex: {
'draw':false, // 表示非表示設定
'radius':1, //頂点の大きさ
'fill':'rgba(0,0,0,1)',// 頂点の色
'fluctuationIntensity':10, // 頂点を点滅させる
'fluctuationSpeed':0.5, // 頂点の点滅のInterval
'strokeWidth':1,// 頂点の枠線の太さ
'strokeColor':'rgba(0,0,255,1)' // 頂点の枠線
}});
});
geometryangleを使って色々作ってみた
geometryangle 網目状の模様
See the Pen [jQuery]geometryangleをいじってみた。 by nkmrkisk (@rekid) on CodePen.
網目状のポリゴンは、meshやlightのカラーをopacity:0に設定し見えなくし、lineの設定を変えることで作成が可能です。ちなみに、上記のサンプルでは、meshのxRangeとyRangeを0にしているので、表示させたlineがデフォルトと違い全く動かない状態になっています。
geometryangle たいよおぉぉぉぉぉおぉぉ！
See the Pen [jQuery]geometryangleをいじってみた。その２ by nkmrkisk (@rekid) on CodePen.
meshのcolumnsとrowsの数を増やし、lightの位置を固定しました。ちょっとスタイリッシュなドット画って感じの画が作れます。lightにはpositionに絶対値を設定しているので、マウスに反応しません。
geometryangle なんか丸いのが点々とするやつ
See the Pen [jQuery]geometryangleをいじってみた。その３ by nkmrkisk (@rekid) on CodePen.
meshとlightとlineを非表示にして、vertexでドットだけを動かしています。ポリゴンのjQueryの完全無駄使いですが、こういった見せ方もできるんだなーっと気がついたら作っていました。
おわりに
jQueryのプラグインのgeometryangleは、ポリゴン以外にも使えるので、意外と汎用性が高いし簡単にカッコいいデザインが作れそうです。思いついたら少し触ってみるのはいかがでしょうか。