実現したいこと
Trianglifyを使って、パラメータにsparkleを指定した背景画像を作りたい。
前提
現在、TrianglifyとJavaScriptを使って背景画像を作成しています。
ぼやけた色遣いになってしまいただのグラデーションのように見えるため、sparkleというパラメータを指定したいのですがうまくいきません。
間違っているところ、またより良い書き方などありましたら教えていただきたいです。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width" /> 7 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> 8 <script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/2.0.0/trianglify.min.js"></script> 9<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/4.1.0/trianglify.min.js" referrerpolicy="no-referrer"></script>--> 10<!-- <script src='https://unpkg.com/trianglify@^4/dist/trianglify.bundle.js'></script>--> 11 <link rel="stylesheet" href="background.css"> 12</head> 13<body id="result"> 14<div id="sample">背景に設定するボックス 15 <div id="sample1">Test</div> 16 <div id="sample2">Test</div> 17 <div id="sample3">Test</div> 18</div> 19 20<script src="background.js"></script> 21</body> 22</html>
CSS
1body {2 height: 100vh;3 background-size: cover;4 margin: 0px;5}
JavaScript
1function addTriangleTo(target) {2 // var dimensions = target.getClientRects()[0];3 var pattern = Trianglify({4 width: document.documentElement.clientWidth,5 height: document.documentElement.clientHeight,6 seed: '87knia',7 cell_size: 50,8 x_colors: [ '#ffa500', '#ffff00', '#ffffff' ],9 // y_colors: [ '#ffa500', '#ffff00', '#ffffff' ],10 variance: 1,11 // colorFunction: trianglify.colorFunction.sparkle(1.0),12 // strokeWidth: 1013 });14 target.style['background-image'] = 'url(' + pattern.png() + ')';15}16addTriangleTo(document.body);
試したこと
- バージョン変更
今は2を使っているのですが、sparkleが指定できるようになったのが4からっぽいので最新版に変更し、sparkleを指定している行(該当のソースの11行目)のコメントアウトを外してみました。
しかし真っ白になってしまいました。
HTML
1<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/2.0.0/trianglify.min.js"></script>--> 2 <script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/4.1.0/trianglify.min.js" referrerpolicy="no-referrer"></script> 3<!-- <script src='https://unpkg.com/trianglify@^4/dist/trianglify.bundle.js'></script>-->
- GitHubの内容に従ってみる
先ほどのものはこちらのサイトのものを少し改変して使っていたのですが、GitHubを参考に書き換えてみました。
その結果、sparkleを指定して画像を表示することはできたのですが、上下左右に少し大きく生成されてしまうようになりました。
また、背景ではなくただの画像として表示されてしまっているようです。
HTML
1<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/2.0.0/trianglify.min.js"></script>--> 2<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/4.1.0/trianglify.min.js" referrerpolicy="no-referrer"></script>--> 3 <script src='https://unpkg.com/trianglify@^4/dist/trianglify.bundle.js'></script>
JavaScript
1const pattern = trianglify({2 width: document.documentElement.clientWidth,3 height: document.documentElement.clientHeight,4 cellSize: 50,5 variance: 1,6 seed: '87knia',7 xColors: [ '#ffa500', '#ffff00', '#ffffff' ],8 yColors: 'match',9 colorFunction: trianglify.colorFunctions.sparkle(0.7),10 strokeWidth: 0,11})12document.body.appendChild(pattern.toCanvas())
発生している問題
ちょっとした問題なのですがテキストの拡大・縮小をする際、該当のソースコードのところに書いたコードはテキストのみが拡大縮小されますがGitHubの内容に従ってみるに書いたコードは画像もろとも拡大・縮小してしまいます。
背景画像として設定されていないことが原因だとは思っているのですが生成したものをbackground-imageに設定する方法がわかりません。
該当のソースに書いたようにtarget.styleを書く方法はうまくいきませんでした。
また、こちらはさらに些細な問題なのですが、GitHubの内容に従ってみるのものは画像としてダウンロードできますが、該当のソースコードのものはダウンロードできません。
できる必要がないのでできないままで良いのですが、少し理由が気になっています。
0 コメント