Visual noise generate via code component on Pavlovia

[PorteP73]

Hi everyone,
I am trying to upload my experiment (which works perfectly well locally) on Pavlovia.
In the experiment, I define some visual noise via matrix creation and then refer to this variable in an ImageStim component.

Description of the problem:
I have found some code to define a matrix in JS, but it seems (I think) that now I can’t use this variable in the ImageStim component to display it.

Does anyone have any idea how I can display this matrix of noise online?
Thanks in advance!

Perrine

[JensBoelte]

Hello

You try to match an image filename to an array of random numbers. Print the value of X to the console to check whether X is what you want it to be.

Best wishes Jens

By the way, do not import Python libraries. There are no online equivalents. The Builder imports all relevant libraries by default.

[PorteP73]

Hello,
Sorry for the late reply!
Locally it works perfectly well to use the array of random numbers to generate visual noise, here is what I want to obtain (and that I obtain locally):

I’ve tried several things to convert this code to make it compatible with pavlovia (without importing python libraries) but nothing seems to work, any idea?

Thanks in advance!

[JensBoelte]

Hello

Without an error message? You find some information on how to debug your JavaScript code here PsychoPy Online Demos - #3 by thomas_pronk

Best wishes Jens

[PorteP73]

Hi again,

I look through the link you send and find some useful information (thanks for this!). Unfortunately what I try to achieve still isn’t working.
I want to generate the kind of visual noise I sent in the previous reply. To do so in PsychoJs I generate a random black-and-white texture and display it online using a canvas.
I use the following code:

function generateNoise(width, height) {
    const noiseArray = new Uint8ClampedArray(width * height * 4);
    for (let i = 0; i < noiseArray.length; i += 4) {
        const value = Math.random() > 0.5 ? 255 : 0; 
        noiseArray[i] = value;     
        noiseArray[i + 1] = value; 
        noiseArray[i + 2] = value; 
        noiseArray[i + 3] = 255;   // Alpha
    }
    return new ImageData(noiseArray, width, height);
}

function imageDataToBase64(imageData) {
    const canvas = document.createElement('canvas');
    canvas.width = imageData.width;
    canvas.height = imageData.height;
    const ctx = canvas.getContext('2d');
    ctx.putImageData(imageData, 0, 0);
    return canvas.toDataURL();
}

function displayNoise() {
    const width = 256;  
    const height = 256; 
    const noiseImageData = generateNoise(width, height);
    const dataURL = imageDataToBase64(noiseImageData);

    const noiseStim = new visual.ImageStim({
        win: psychoJS.window,
        units: 'height',
        image: dataURL,
        size: [5, 5],  
        pos: [0, 0]
    });
    noiseStim.setAutoDraw(true);
}
displayNoise();

This code generates a valid URL as I obtain the following image:

But, when using it on pavlovia I have the following error:

Any idea how I can solve this or how I can generate this kind of visual noise otherwise?

Thanks a lot for your help

[JensBoelte]

Hello

I do not speak JavaScript, sorry. But I doubt that you can load a stimulus via an url. What you probably need to do is generate the stimulus just before each trial. Depending on the number of trials, it may be worth generating the visual stimulus offline, saving it to a file and loading it when needed.

Best wishes Jens