fxhash –“wind” technical memo

先日、fxhashにて作品「wind」をリリースしました。

NFT用の作品を制作するたびに、普段のデイリーコーディングとはちがう学びがあるので、今回の学びを記録しておきます。

I would like to record what I learned this time when I released “wind” in fxhash.

今回はいつもの作品と違って、実行すると、線やノイズ円などが現れ、動きながら軌跡をのこし、数秒後に作品が完成する、というものです。いつもは実行するとすべての結果が一度に現れるものを作っていました。なので、色々躓いたのです。

CSSでウィンドウサイズ変更を処理する

いつもはwindowResized()を使って、ウィンドウのサイズが変更されたら、書き直す処理を入れています。こんなかんじ。

function setup() {
   initialize();
　　　　　　　seed = fxrand() * 999999 + $fx.randminter() * 999999;
}


function windowResized() {
   initialize();
   resizeCanvas(wSize, wSize);
}

function initialize(){
   wSize = min(windowWidth, windowHeight);
   createCanvas(wSize, wSize);
   pixelDensity(2)
   angleMode(DEGREES);
   ....

ですが、だんだんと書き上がるタイプのスケッチだと、この方法でリサイズがうまくいきませんでした。fxhashで他の人のコードをいくつか見てみると、CSSでリサイズする方法をみつけました。

CSSを全然理解できていないので、ちょっと解説とかできぬのですが、すみません…。

(理解したら追記したい所存です…)

人のfxhashのコードの見方

人のfxhashのコード、見られないこともあるのですが、見られることもあります。人のコードは超参考になります。(参考にする程度でお楽しみください)

• chromeの場合、作品ページの、プレビューの下のopenボタンを押す。

• 開いたページで、デベロッパーツールを開く。ソースタブを開き、sketch.js的なファイル(人によって名前違うかも)を開いてみる。

指定の時間が終わったら、最後にエフェクトをかける

最後にビシッと決まってかっこいいです！

let endTime = 100;(描画したい時間の長さ)       

       if(frameCount<endTime){
        
　　        　//メインのうごく絵
        
       }	

       if (frameCount> endTime) {
		noLoop();
                //テクスチャとか
		image(pg,0,0)
                //枠線とか
		noFill();
	        rectMode(CORNER);
		strokeWeight(width*0.01);
		stroke("#e9dbce");
		rect(0, 0, width, height);
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//最後にキャプチャ
		fxpreview();

	}

randomSeed()

moverクラスを画面上のランダムな場所にpushしているが、

function draw()の最初の行にいつも通りrandomSeed()を置くと、数個の決まった場所にしかmoverがpushされない。うぉぉ〜、なぜだあー、と困る。

randomSeed()はfunction setup()のところに移すと解決した。draw()の最初の行じゃないといけないとなんとなく思い込んでいた。

function setup() {
	seed = fxrand() * 999999 + $fx.randminter() * 999999;
	randomSeed(seed);
	noiseSeed(seed);
	initialize()
}

random2D

randomSeed()で、moverの軌跡が固定されない謎。

randomSeed()をfunction setup()のところに移すことで、画面上のランダムな位置にmoverとnoise円が表示できるようになった。しかしランダムウォークするmoverの歩き方が固定ざれず、毎回いろんな向きに進んでいく。むむむ。原因になりそうなのは、random2D。vectorを使って書く時に使う。”ランダムな角度から新しい 2D 単位ベクトルを作成”する関数です。

random2D()の中身をみてみる。

↓中身はこんな感じでした。

  static random2D() {
    return this.fromAngle(Math.random() * constants.TWO_PI);
  }　

 static fromAngle(angle, length) {
    if (typeof length === 'undefined') {
      length = 1;
    }
    return new p5.Vector(length * Math.cos(angle), length * Math.sin(angle), 0);
  }

なので、this.acc = p5.Vector.random2D(); は、

this.acc.add(cos(random()*360),sin(random()*360)); 

に書き換えて、ok、多分合ってる。これでrandomSeed()が効く。

Enabledにするのわすれない…

トークンがしばらく disabledになったままでした…かなしい…。公開時間を過ぎてすぐ、fxhashの方が教えてくださっていたのですが、翌日仕事だったため、公開時間を待たずに寝てしまっていました。公開をちゃんと見届けるのも大事。反省。。。