💾p5.js Node

A guide to using the p5.js img2img process in the EmProps Studio

Introduction

In EmProps Studio, p5.js integration allows for dynamic, code-driven creation of images which can then be used as inputs for image-to-image (img2img) transformations. This guide will help you understand how to leverage p5.js in your projects for more creative and varied outputs.

Getting Started with p5.js in Studio

Step 1: Enable img2img

To begin, make sure the img2img option is checked. This will allow you to use a generated image as the starting point for further image generation.

Select img2img and p5.js to reveal the Open Editor button

Step 2: Selecting p5.js

With img2img enabled, you'll see the option to choose p5.js as your source. Select it to proceed.

Step 3: Access the p5.js Editor

Click on the "OPEN EDITOR" button to launch the p5.js editor. Here, you can write or paste your p5.js code. The visual output of your code will become the source image for img2img processing.

The p5.js editor in action, variables can be copied from the left and pasted into the code.

How p5.js Works in Studio

Behind the scenes, the Studio generators execute your p5.js code within a virtual browser environment. The output displayed in the browser is captured and used as the input for the Stable Diffusion model.

Features of p5.js in Studio

Variables Support

You can enhance your p5.js scripts with variables that you've defined in the Variables section of your project. At present, only Character string value types can be incorporated. The variables are accessible within your p5.js code as follows:

function draw() {
  background(variables["background_color"]); // Bracket notation
  // Alternatively, you can use dot notation
  background(variables.background_color);
}

Note: The recommended method for accessing variables in your code is to use bracket notation, e.g., variables["myVariable"].

An example of a variables set containing numerical values for use in the p5.js node.

Pseudorandom Number Generator - PseudoRandom

Pseudorandom provides a suite of utility functions to produce pseudorandom numbers in your p5.js scripts. Use the “hash” variable to seed the generator for consiste

nt results.

Example Usage:

pseudorandomSeed(hash);
const randomFloat = pseudorandom(1, 100);
console.log(randomFloat);

Pseudorandom Methods:

• pseudorandomSeed(seed): Initializes the pseudorandom number generator with a seed.

• pseudorandom(min, max): Returns a pseudorandom decimal number between the min (inclusive) and max (exclusive).

• pseudorandoms(n, min, max): Creates an array of pseudorandom numbers within a range.

• pseudorandomInteger(min, max): Generates a pseudorandom integer within a range.

• pseudorandomIntegers(n, min, max): Produces an array of pseudorandom integers.

• pseudorandomBoolean(): Yields a pseudorandom boolean.

• pseudorandomPick(array): Selects a random element from an array.

• pseudorandomWeightedPick(array, weights): Chooses an element from an array based on weights.

• pseudorandomPickButNot(array, exclude): Picks an element from an array, excluding one.

Frame Capturing

Capture a specific frame from an animated p5.js script using the capture() function.

Example:

let captureAt = 100;

function draw() { 
  // Your drawing code here 
  if (frameCount === captureAt) { 
       capture(); // Captures the specified frame 
     } 
}

With these steps and features, you can craft complex and unique inputs for your img2img tasks, pushing the boundaries of AI-powered image generation. Remember to save and test your scripts regularly to refine your artistic outputs.

Tips and Tricks:

For those new to coding, creating a template can be straightforward using most AI chatbots. Consider prompting, "Please generate a p5.js generative art project that produces {{desired image}}". You can then copy and paste the code into the p5.js node and test it by pressing 'Run'. If you would like to check the console log, be sure to press f12 in your browser to view the console. This is where any applicable messages from p5.js will be displayed.