見出し画像

fxhashにp5.js製アートを出品する時メモ

reona396

fxhashやってはいるんですけど、いっっっつも細かいとこ忘れちゃって上手くいかないのでメモしておきます

index.htmlの構成

<html>
  <head>
    <title>作品名</title>
    <script src="./fxhash.js"></script>
    <script src="./p5.min.js"></script>
    <script src="./sketch.js"></script>

    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      canvas {
        margin: auto;
      }
    </style>
  </head>

  <body></body>
</html>

こんな感じにしておいて、fxhash.jsは下記からダウンロードしておく

index.htmlやsketch.jsなどが入ったディレクトリを圧縮するのではなく、これらの必要なファイルを複数選択して圧縮しておく

p5.jsのスケッチのコード

たぶんこんな感じで大丈夫なはず…
(やばいとこあればコメントで教えてください)

const SEED = $fx.rand() * 10000;
let thumbnailTaken = false;

function setup() {
  initCanvas();
}

function draw() {
  // 作品のコード
  // ...

  // 実行して3秒後にサムネイル撮影
  if(!thumbnailTaken && frameCount > 60 * 3.0){
    $fx.preview();
    thumbnailTaken = true;
  }
}

function initCanvas() {
  const canvasSize = min(windowWidth, windowHeight);
  createCanvas(canvasSize, canvasSize);

  randomSeed(SEED);
  noiseSeed(SEED);
}

function windowResized() {
  initCanvas();
  redraw();
}

WEBGLかつ数秒後にキャプチャしたい作品のサムネ生成

例えばこんな感じの、p5.jsのWEBGLモードを利用しつつ、サムネイルは数秒後の状態にしたい作品の場合…

スケッチのコード内に下記のようにコードを仕込んでおいて、

  // 実行して3秒後にサムネイル撮影
  if(!thumbnailTaken && frameCount > 60 * 3.0){
    $fx.preview();
    thumbnailTaken = true;
  }

「Configure capture」の設定のところで下記のように設定する
設定確定後にめちゃくちゃ待つ(3〜5分)のでその間にお茶をいれてお菓子を食べてもよい

  • Trigger

    • Programmatic trigger using fxpreview() を指定

  • Target

    • From <canvas> を指定

  • Canvas CSS selector

    • 「canvas」と入力

  • Uses GPU ?

    • GPU-enabled render instances にチェックを入れる

よかったらfxhashも見てってください〜


Processingとp5.jsとクリエイティブコーディングが大好きです。 めちゃくちゃ元気！