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

[nijatmursali]

Topic

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.

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[limzykenneth]

@nijatmursali I may not fully understand what you are trying to do here but I think the problem lies with img.collarSide = p5.loadImage(uri);. JavaScript relies heavily on asynchronous operations, especially around IO which means that anything that loads things, including loadImage() will run asynchronously. Which means loadImage() don't actually finishes loading your image by the time the next line or more of your code is run.

The preload() function p5.js provides is a way to hide that complexity but it only does so in the function itself. Using the loadImage() function outside of preload() will encounter the asynchronous problem mentioned above. It is recommended to use the callbacks of loadImage() if you need to use it outside of preload(). You can try to promisify the function if you wish to use async/await too.