ごきげんよう。センバクです。fxhashにて作品「For you」をリリースしました。
June 1st (06:00 EST / 12:00 CET / 20:00 JST) _ 64 editions 4tez
https://fxhash.xyz/generative/30885…
NFT用の作品を制作するたびに、普段のデイリーコーディングとはちがう学びがあるので、今回の学びを記録しておきます。
I would like to record what I learned this time when I released “For you” in fxhash.
sandboxでのエラー
ボイラープレートを利用してfxhashアップロード用のファイルを作っています。
fxhash create とCLI コマンド を打ち込み、テンプレートを読み込み、p5.jsファイルやsketch.jsファイルを追加し、cssを直し…などして、fxhash build とコマンドを入れてアップロード用のファイルを作ります。これをアップロードするだけで基本的にはアップロード完了するのですが、ひさしぶりにやったらサンドボックスでエラーが出ました。
“An error occurred when validating your project. NO_PROJECT_SDK”
– 最新版をダウンロードして試す
fxhash@latest createテンプレートを作成するときに、最新版を読んで作成すると解決するかと思いましたが、せず！
sandboxではなく、mint a Generative Tokenにアップロードしたところ、あっけなく表示できました。なぜ….
PixcelDensity問題
いつも迷うPixcelDensity()の設定。だいたい2くらいにしていたのですが、良いのかどうかよく分からず。その端末ごとの密度+ちょっと良い、くらいがいいのかな、と今回は違う設定をしてみました。
デバイスがモバイルかどうか判断し、もしモバイル端末なら、処理が遅くなりすぎるのを防ぐために、端末のピクセル密度に合わせたpixcelDensityにする。もしモバイル端末でなければデバイスのpixcelDensity + 1 の密度にしてちょっときれいに。maxのpixcelDensityは4までとし、重くなりすぎるのを防ぐ。
const isMob = /Android|webOS|iPhone|iPad|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (isMob) {
pixelDensity();
} else {
pixelDensity(Math.min(window.devicePixelRatio + 1, 4));
}
ロード時間をコンソールに表示させつつデバッグ
手軽でなんとなく重すぎないか分かり、べんり〜。
console.log("Load time: " + millis() * 0.001 + " seconds");
キャンバスサイズの可変問題
見る人の端末サイズやブラウザのサイズによって、キャンバスサイズを可変にする必要があるのですが、p5jsのwindowResized()とresizeCanvas()という関数を使ってjs内でやる方法と、CSSでする方法があります。前回はCSSの方法にしてみましたが、今回も同じで行きました。
fxhashのドキュメント内に詳しく書かれた頁があるので、読みながら試行錯誤するのがいいかもしれない。
fxhashのドキュメント、新しくなってからとても丁寧に書かれています。ここで駄目ならfxhashのdiscordを検索するとわかることが多い。
discord、Google翻訳できなくてむむむですが、chromeの拡張機能使うと翻訳できて本当に助かります。
