ポリゴン状の背景が作れるjQuery「Geometryangle」

2019年9月25日2019年10月18日

1 最終的なコードはこちら

おしゃれな背景が作りたい

浦島です。今回は、ポリゴン状の背景が作れるjQuery「Geometryangle」を紹介します。
他のどのサイトよりもわかりやすく紹介していきます
まずは公式サイトをご覧くださいと言いたかったのですが、公式サイトが存在していませんでした。

githubからファイルをダウンロードしよう

githabからダウンロードしたフォルダを解凍しましょう
今回必要なファイルは「geometryangle.min.js」だけ

jQueryとgeometryangleを読み込もう

head内に下記のコードを書き込んでいきましょう

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

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

スクリプトの書き方

<script>
        $(function () {
            $('body').Geometryangle({ mesh: {}, lights: [{}], line: {}, vertex: {} });
        });
    </script>

$(function () {

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

});

</script>

body内に書き込んでいきましょう

最終的なコードはこちら

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="geometryangle.min.js"></script>
   
    <title>Geometryangle</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0px;
　　　　　　　　}
    </style>
</head>

<body>

    <script>
        $(function () {
            $('body').Geometryangle({ mesh: {}, lights: [{}], line: {}, vertex: {} });
        });
    </script>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Geometryangle</title>

<style>

html,

body {

width: 100%;

height: 100%;

overflow: hidden;

margin: 0px;

　　　　　　　　}

</style>

</head>

<body>

$(function () {

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

});

</script>

</body>

</html>

cssをいじってポリゴンが全体に表示する様にしてみました。

cssでポリゴンが全体に表示する様にしてみました
mesh、 lights、 line、vertexの値を変更してお好みのポリゴンを作ってみてくださいね。

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