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.
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.
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.
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
}
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.
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
**