Load Image Generated From A Function In P5.js Canvas

I'm trying to load an image that is returned as a result of a function in a library called gaborgen.js The idea is that I should be able to generate a Gabor patch image using this

Solution 1:

You can use a base-64 encoded image directly in P5.js by passing the string directly into the loadImage() function. Here's an example:

var img;

function setup() {
  createCanvas(400, 400);
  img = loadImage('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
}

function draw() {
  background(220);
    image(img, 0, 0, width, height);
}

Notice the data:image/png;base64, part of the argument.

I don't know what gaborgen() function returns, so you're going to need to do some debugging to figure out exactly where your code breaks down. Work forward in smaller steps and check your developer tools for errors.