カラフルなメッシュ画像を表示させる「Trianglify」

2017.08.25　Posted by Coding_team

Webプログラミング

こんにちは、ウェブラボ技術メモです。

今回はカラフルなメッシュ画像を表示させる「Trianglify」を使用してみようと思います。

設定を比較するDEMOを作成しました。
DEMOはこちら

様々なパターンがありますが、短いコードで簡単に設定できてしまいます。
それでは実際に実装していきましょう。

以下からプラグインをダウンロードしてください。
github

まずはhead内でjquery本体とプラグインを読み込ませます。

■HTMLhead内

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/trianglify.min.js"></script>

1 2	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/trianglify.min.js"></script>

次にプラグインのオプション設定を行います。
この他のオプションについては、githubにて公開されています。

■HTMLhead内　スクリプト部分

<script>
	var sample = Trianglify({
		width: 980, //横幅（px指定 デフォルトは600px）
		height: 400, //縦幅（px指定 デフォルトは400px）
		cell_size: 75 //メッシュサイズ（高いほど粗くなり、低いほど細かくなる デフォルトは75）
		variance: 0.75 //分散（0～1の小数点以下の値 デフォルトは0.75）
		x_colors: 'random', //x軸方向のグラデーション（カラーコードの配列で指定 デフォルトはランダム生成を行う「random」）
		y_colors: ['#000', '#07539F', '#FFF'] //y軸方向のグラデーション（カラーコードの配列で指定 デフォルトはx_colorsの設定を引き継ぐ「match_x」）
	});
	document.getElementById("result").appendChild(sample.canvas())//要素のidを指定
</script>