How to correctly convert images and attach to canvas in p5js?

Question

Currently I'm working on a big project where I'm drawing the shoe model in canvas and using some functions to divide them into segments. Those segments are clickable in order to change the images depending on which and how many colors have been chosen. So, let say if we have selected 3 colors then my helper function will generate new image from those colors (or basically will change the colors of current image into new colors).

It works fine, but currently I have 6 segments in total and it does not really work good, so it is not really 100% reliable.

First, I would like to share some variables I have:

// some variables to initialize
let initializeDrawingsCalled = false;
let segmentToInitialize = null;
let initializationDelayCounter = 0;
const INITIALIZATION_DELAY_FRAMES = 4;

// related to images and segments
let img = {
    tongue: null,
    // some other values
};

let segmentTextureMask = {
    tongue: null,
    // some other values
}

let createMask = {
    tongue: null,
    // some other values
}

var initVariables = {
    // selected parts
    selectedSegment: null,
    // to get the loading for specific segment
    loading: {
        TONGUE: false,
        // some other values
    },
};

and my sketch function is like following:

export const shoeSketch = (p5Instance) => {
    p5 = p5Instance;
    // initially just loading simple white image
    p5.preload = () => {
        const baseUrl = '/img/white.png';
        img.collarSide = p5.loadImage(baseUrl);
        img.collarFront = p5.loadImage(baseUrl);
        img.heelSide = p5.loadImage(baseUrl);
        img.sidePanel = p5.loadImage(baseUrl);
        img.sideCap = p5.loadImage(baseUrl);
        img.tongue = p5.loadImage(baseUrl);
    }

   p5.setup = () => {
        // these two functions are used to load the shoe model, nothing fancy
        createMeasurementSet();
        createCps();

        p5.createCanvas(1300, 500, p5.WEBGL);
    };
}

    p5.draw = () => {
        p5.background(initVariables.lightGrey);
        // this updateCPs take some time to finalize putting points correctly in canvas
        updateCPs(); 

        // thus I need to have counter like this to initialize drawings
        if (!initializeDrawingsCalled) {
            initializationDelayCounter++;
            if (initializationDelayCounter > INITIALIZATION_DELAY_FRAMES) {
                initializeDrawings();
                initializeDrawingsCalled = true;
            }
        }

and two helper functions to initializeDrawings and drawImages are used to initialize the masks in the canvas and draw images using p5.image() function.

Most importantly, I have changeSegmentImage where it changes the segment image, but first it gets imageUrl to convert image to file, and then using replaceColors I convert the image colors into new colors passed and create uri from it and attach it to mask using loadImage.

export const changeSegmentImage = async (imageUrl, colors) => {
    try {
        // Validate imageUrl
        if (!imageUrl) throw new Error("Invalid image URL");
        initVariables.loading[initVariables.selectedSegment] = true;

        // Convert imageUrl to file
        const file = await imageUrlToFile(imageUrl);

        // Replace colors in the file
        const converted_file = await replaceColors(file, colors);

        // Create a URL for the converted file
        const uri = URL.createObjectURL(converted_file); // it is correct, image generated is fine

        // Load the image based on the selected segment
        // problem appears to be here with loadImage function
        switch (initVariables.selectedSegment) {
            case 'COLLARSIDE':
                img.collarSide = p5.loadImage(uri);
                break;
            // and others
            default:
                throw new Error("Invalid segment selected");
        }

        // Reset initialization flags
        initializeDrawingsCalled = false;
        segmentToInitialize = initVariables.selectedSegment;

    } catch (error) {
        console.error("Error changing collar side image:", error);
    } finally {
        // Ensure loading state is set to false
        initVariables.loading[initVariables.selectedSegment] = false;
    }
};

It works all good if I have only two segments visible, but if I have more segments (like 5-6) then it gets slower and actually does not load the image using loadImage.

Answer 1

I guess I found the answer myself. I have tried different crazy methods like setTimeout, but it was giving some flaws even it worked fine. Thus, I read more about loadImage function and saw that it is asynchronous function, thus I had to change the loadImage part of my code. Instead of setting the images like before, I tried:

 p5.loadImage(uri, (loadedImg) => {
    switch (initVariables.selectedSegment) {
        case 'COLLARSIDE':
            img.collarSide = loadedImg;
            break;
        case 'COLLARFRONT':
            img.collarFront = loadedImg;
            break;
        default:
            throw new Error("Invalid segment selected");
}

where the function is called with a callback to ensure the image is loaded before setting it.