FXHASH

Wanda Oliver (original)

Params & WYSIWYG - How I Did It


Not being a web developer but rather someone who has learned enough p5.js to get by, I will share here how I implemented my first fx(params) WYSIWYG project. My hope is that my approach will be useful to others in a similar situation. Use at your own risk, but please share any mistakes or improvements you find so that I can post a correction. The example used is my recent project, "Polaroids".

The first lines of my sketch populate an array that defines the parameters I intend to declare to fx(params), as well as two global variables that will hold the input I will receive from fx(params). Then the function setParams() is called to initialize the interface.

Javascript
var ParamsEntity=
[
  {
    id: "embeddedMessage",
    name: "Label",
    type: "string",
    default: "Hello World",
  },
  {
    id: "seedInput",
    name: "Seed Input",
    type: "number",
    options: 
    {
      min: 0,
      max: 999999,
      step: 1,
    },
  },
]

let seedKey = ""; // to hold working seed
let phrase = "";  // to hold the entered label text

setParams(); 

setParams() has the following definition.

Javascript
function setParams()
{
  $fx.params(ParamsEntity);  // initialize fx(params) using the array prepared earlier

  phrase = $fx.getParam("embeddedMessage");   // retrieve and store the Label param
  seedKey = $fx.getParam("seedInput");        // retrieve and store the Seed Input param

}

Next I call preload(), followed by setup(), and draw() as is typical for any sketch. The code that is essential to the WYSIWYG implementation is found in preload() and setup(). The essential code in each of the two functions is shown below.

Note: in my actual code, there are project specific items such as other variable declarations and common setup actions in each of the functions that have no bearing on the WYSIWYG implementation. They are omitted for simplicity.

Javascript
function preload()  
{
  seed = int($fx.randminter() * seedKey);
  
  // this establishes the PRNG seed using the seedKey captured from the params input
  // it is important to note that the statement uses $fx.randmiinter() rather than $fx.rand()
  // this insures that the minter wallet address is used for the hash rather than the traditional fx(hash) random hash value
  // the WYSIWYG feature is dependent on the hash being the minter address 
}
Javascript
function setup() 
{
  randomSeed(seed); // initialize the p5.js random() function with the seed set in preload()
  noiseSeed(seed);  // initialize the p5.js noise() function with the seed set in preload()

  // it is important, for purposes of determinism, that no p5.js random functions are called before this point
}

From this point forward your draw() function can be coded as you please.

You may be wondering why I provided the Seed Input param. I found that if I used a constant in preload() <e.g. seed = int($fx.randminter() * 123456789);> as I have done in the past when using the traditional random hash, my algorithm became very repetitive for any given minter address. With Seed Input included in the params set and randomized each time the Randomize Params button is clicked, the full design space was opened to the minter. This is an area that I have earmarked for further exploration.

The final thing that I will share is that Sandbox testing was a bit unintuitive at first. It is designed to support the testing of both WYSIWYG and traditional projects. That isn't surprising, but I had to sit back and sort it out for myself the first time through.

Sandbox view of "Polaroids"

When testing, new hash and retry with same hash should redraw the image without changing it in any way. Since you are using the WYSIWYG feature, the hash should have no bearing on the output. New address should generate a new iteration. Retry with same address should redraw the current image without changing it in any way.

If you'd like to play with "Polaroids", a link is included below. If you have any questions or suggestions for making this article more useful, feel free to tag me with a post on Twitter or in the fx(hash) Discord server.

Love and creativity always,

Wanda

**




stay ahead with our newsletter

receive news on exclusive drops, releases, product updates, and more