Display an Image Created by a Function on a p5.js Canvas

Question

Display an Image Created by a Function on a p5.js Canvas

I'm attempting to import an image generated by a function in the gaborgen.js library.

The goal is to create a Gabor patch image using this library, save it as an image variable in p5, and then show it on the canvas.

The library has a gaborgen() function that requires two parameters. For example, calling gaborgen(50, 40) would produce a Gabor patch based on those values. The returned image from the library is in base64 PNG format.

My initial attempt to load the image was unsuccessful, resulting in just a blank screen in the sketch.

var img;

function setup() {
    createCanvas(640, 360);
    img = createImg(gaborgen(50, 40));
}

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

The gaborgen() function in the Gaborgen.js library looks like this:

gaborgen = function(tilt, sf) {
    // Function code here
};

Is there a way for me to successfully load a base64 PNG image returned by a function into p5.js?

javascript png p5.js

Answer 1

Answer №1

If you want to incorporate a base-64 encoded image directly in P5.js, simply input the string into the loadImage() function. Here's an illustration:

let 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);
}

Remember the crucial part of the argument is data:image/png;base64,.

If gaborgen() doesn't return what you expect, it's essential to debug and locate the problem area. Progress incrementally and use your developer tools to catch any errors.

Answer 2

If you want to incorporate a base-64 encoded image directly in P5.js, simply input the string into the loadImage() function. Here's an illustration:

let 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);
}

Remember the crucial part of the argument is data:image/png;base64,.

If gaborgen() doesn't return what you expect, it's essential to debug and locate the problem area. Progress incrementally and use your developer tools to catch any errors.

Display an Image Created by a Function on a p5.js Canvas

Answer №1

Similar questions

Steps to activate an event when Windows is loaded

Vue.js dynamic routing is causing CSS to malfunction

IE6 does not support Ajax jquery functionality

Remove all items from the Backbone Collection and delete them from the corresponding Lawnchair storage

Error message: AJAX encountered an unexpected token that caused a SyntaxError to be thrown

Looking up the image directory in a JSON file on the fly - (Module not found...) React, Next.js

Incorporating OpenLayers and TypeScript: Issue with Event.map.forEachFeatureAtPixel, where the argument type is not compatible with the parameter type

Would it be feasible to rename files uploaded to Firebase within an AngularJS controller using logic?

V-Calendar is not displaying the accurate dates

What is the best way to add an event listener to every item in a list within a Vue component

There is an issue with the syntax in your for-loop control where a closing parenthesis is missing

Error 500 - NodeJS API Updater Experiencing Technical Difficult

Saving an array within the Yii framework

Can the arrangement of divs be altered solely based on specific browser widths, rather than just for visual appeal?

Utilizing the onscroll feature to trigger a function within a ScrollView

Creating Helper Functions for Modifying Arrays in Javascript Without Creating a New Reference: How Can I Extend the Array Class?

JavaScript code to locate the most pertinent strings within an array based on a specific substring

Creating a node.js function that can be used with OracleDB

What is causing the consistent occurrences of receiving false in Angular?

What is the best way to organize two separate arrays based on a single shared variable?