# Visual noise generate via code component on Pavlovia

**URL:** <https://discourse.psychopy.org/t/visual-noise-generate-via-code-component-on-pavlovia/40922>\
**Category:** Online experiments\
**Created:** [July 26, 2024, 1:09pm UTC](https://discourse.psychopy.org/t/visual-noise-generate-via-code-component-on-pavlovia/40922 "2024-07-26T13:09:19Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![PorteP73](https://avatars.discourse-cdn.com/v4/letter/p/7ea924/32.png) [@PorteP73](https://discourse.psychopy.org/u/PorteP73)\
**Post date:** [July 26, 2024, 1:09pm UTC](https://discourse.psychopy.org/t/visual-noise-generate-via-code-component-on-pavlovia/40922/1 "2024-07-26T13:09:19Z")

</div>

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.  
 ![Capture d'écran 2024-07-26 150055](https://us1.discourse-cdn.com/flex002/uploads/psychopy/original/3X/f/6/f67fdbb4c344a8e5565a14d398a40bf1ee0c8895.png)  
 ![Capture d'écran 2024-07-26 145943](https://us1.discourse-cdn.com/flex002/uploads/psychopy/original/3X/3/6/36f3751fdd664496aa0de3c0ac555c4e6edd1555.png)

**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.  
 ![Capture d'écran 2024-07-26 150010](https://us1.discourse-cdn.com/flex002/uploads/psychopy/original/3X/f/c/fc2c2d88b99663be72a3fe884e4b2bd36b2b2b5f.png)  
 ![Capture d’écran du 2024-07-26 14-25-39](https://us1.discourse-cdn.com/flex002/uploads/psychopy/original/3X/a/0/a0cd4a5e9c9a1cae4c3e167401e50f492547de44.png)

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

Perrine

---

<div class="post-metadata">

**Author:** ![JensBoelte](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/jensboelte/32/9060_2.png) [@JensBoelte](https://discourse.psychopy.org/u/JensBoelte)\
**Post date:** [July 29, 2024, 11:45am UTC](https://discourse.psychopy.org/t/visual-noise-generate-via-code-component-on-pavlovia/40922/2 "2024-07-29T11:45:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![PorteP73](https://avatars.discourse-cdn.com/v4/letter/p/7ea924/32.png) [@PorteP73](https://discourse.psychopy.org/u/PorteP73)\
**Post date:** [August 12, 2024, 8:58am UTC](https://discourse.psychopy.org/t/visual-noise-generate-via-code-component-on-pavlovia/40922/3 "2024-08-12T08:58:17Z")

</div>

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):  
 ![Capture d’écran du 2024-08-12 10-54-38](https://us1.discourse-cdn.com/flex002/uploads/psychopy/original/3X/0/6/069c8dcee32d62af1512966c513d216156e77eec.png)  
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!

---

<div class="post-metadata">

**Author:** ![JensBoelte](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/jensboelte/32/9060_2.png) [@JensBoelte](https://discourse.psychopy.org/u/JensBoelte)\
**Post date:** [August 12, 2024, 9:17am UTC](https://discourse.psychopy.org/t/visual-noise-generate-via-code-component-on-pavlovia/40922/4 "2024-08-12T09:17:24Z")

</div>

Hello

Without an error message? You find some information on how to debug your JavaScript code here [PsychoPy Online Demos - #3 by thomas\_pronk](https://discourse.psychopy.org/t/psychopy-online-demos/22319/3)

Best wishes Jens

---

<div class="post-metadata">

**Author:** ![PorteP73](https://avatars.discourse-cdn.com/v4/letter/p/7ea924/32.png) [@PorteP73](https://discourse.psychopy.org/u/PorteP73)\
**Post date:** [August 13, 2024, 8:27am UTC](https://discourse.psychopy.org/t/visual-noise-generate-via-code-component-on-pavlovia/40922/5 "2024-08-13T08:27:36Z")

</div>

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:

```auto
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:

 ![Capture d'écran 2024-08-13 101736](https://us1.discourse-cdn.com/flex002/uploads/psychopy/original/3X/6/b/6b2339ade88fdf42a04430932be8dc559734d97d.png)  
But, when using it on pavlovia I have the following error:  
 ![Capture d'écran 2024-08-13 101756](https://us1.discourse-cdn.com/flex002/uploads/psychopy/original/3X/0/0/00c6b3e82a0c642a67e0a731eb325c25f077fb2f.png)  
Any idea how I can solve this or how I can generate this kind of visual noise otherwise?

Thanks a lot for your help

---

<div class="post-metadata">

**Author:** ![JensBoelte](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/jensboelte/32/9060_2.png) [@JensBoelte](https://discourse.psychopy.org/u/JensBoelte)\
**Post date:** [August 13, 2024, 9:04am UTC](https://discourse.psychopy.org/t/visual-noise-generate-via-code-component-on-pavlovia/40922/6 "2024-08-13T09:04:36Z")

</div>

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