Can't get the index.html to display anything about webgl-fluid

[cloydlau]

Height of #app is 0, check the style sheet. I'll be willing to help if you can provide a codesandbox demo.

[ChrisCalabrese]

Thank you so much. Greatly appreciate any help. I looked for a style sheet in the folder but couldn't find one, maybe that's the problem? I'm quite a novice when it comes to programming so please forgive my ignorance, I opened an account at codesandbox but quickly realized I was over my head. Would you be able to point me in the right direction to set one up the correct sandbox for these files? The goal is implementing the canvas/particles into the background of a WordPress site. I already figured out how to put the canvas behind the wrap div using this setup and I got it all working but now I want to edit the particle settings and I'm running into some issues:

Instead of using the js found in the code pen which is minified and hard to edit Id prefer to Import your file so I can change settings as well as utilize your trigger mousemove on default customization. Right now I can't seem to get any other js file to load the same way other than the minified file.

Here is how the .js I took from the code pen above and modified currently looks in WP:

<script src="myurl/files/fluid/webgl-fluid.umd.min.js">
</script> 

<script>

//INSERT  CANVAS BELOW WRAP DIV	
var h = document.getElementById("wrap");
h.insertAdjacentHTML("afterend", '<canvas id="canvas"></canvas>');
				
//I WISH I UNDERSTOOD THIS LINE BETTER
window['webgl-fluid'].default(document.querySelector('canvas'));
	
//USE WRAP DIV AS CANVAS MOUSEOVER EVENT LISENTER
document.querySelector('#wrap').addEventListener('mousemove', event => {
    //console.log('move');
    newEvent = new event.constructor(event.type, event);
    document.querySelector('canvas').dispatchEvent(newEvent);
});

</script>

How do I edit this code to get your file to load in this same way? Thank you!

[cloydlau]

I think your codepen demo works quite well. You can change settings by:

window['webgl-fluid'].default(document.querySelector('canvas'), {
  TRIGGER: 'click',
  // ...more in README.md
})

[ChrisCalabrese]

Thank you! I should have been clearer that the code pen is working with mouse move and that is how I want it to work. I could not get it to work with the original file set which is why I mentioned it in my first post. I guess all I really need to do is be able to modify these setting below but the minified file seems really tough to work in. How do I use a file like your file that isn't minified so I can access these settings? Thank you!

var canvas = document.getElementsByTagName('canvas')[0];
        resizeCanvas();
        var config = {
            SIM_RESOLUTION: 128,
            DYE_RESOLUTION: 1024,
            CAPTURE_RESOLUTION: 512,
            DENSITY_DISSIPATION: 2,
            VELOCITY_DISSIPATION: 2,
            PRESSURE: 0,
            PRESSURE_ITERATIONS: 50,
            CURL: 1,
            SPLAT_RADIUS: 0.05,
            SPLAT_FORCE: 40000,
            SHADING: false,
            COLORFUL: true,
            COLOR_UPDATE_SPEED: 10,
            PAUSED: false,
            BACK_COLOR: {
                r: 0,
                g: 0,
                b: 0
            },
            TRANSPARENT: false,
            BLOOM: false,
            BLOOM_ITERATIONS: 2,
            BLOOM_RESOLUTION: 256,
            BLOOM_INTENSITY: 1.63,
            BLOOM_THRESHOLD: 0.1,
            BLOOM_SOFT_KNEE: 0.2,
            SUNRAYS: true,
            SUNRAYS_RESOLUTION: 196,
            SUNRAYS_WEIGHT: 0.3
        };

[cloydlau]

I guess the document has made it quite clear that all original options are configurable. You don't need to worry about any minified file.

[ChrisCalabrese]

Thanks! I think what you are saying is your link has all the code I need to complete this task.

I agree I don't want to use the minified file. How do I use your file?

Should I replace the current url with your file like this?:

<script src="myurl/files/fluid-master/src/index.js">  
</script>  

Where does this go?

import WebglFluid from 'webgl-fluid'

I put together a pen with your code, I can't get it to work. https://codepen.io/chriscalabrese/pen/qBpEKKJ

[cloydlau]

If you don't use npm you can try:

<!DOCTYPE html>
<html>
<body>
<canvas style="width: 100vw; height: 100vh;"/>
<script type="module">
import WebglFluid from 'https://cdn.skypack.dev/[email protected]'

WebglFluid(document.querySelector('canvas'), {
  // options
})
</script>
</body>
</html>

[ChrisCalabrese]

Ok this code loads into the canvas but I still can't adjust the settings. I can't use your file? How do I change setting now? https://codepen.io/chriscalabrese/pen/qBpEKKJ

<!DOCTYPE html>
<html>
<body>
<canvas style="width: 100vw; height: 100vh;"/>
<script type="module">
import WebglFluid from 'https://cdn.skypack.dev/[email protected]'

WebglFluid(document.querySelector('canvas'), {
  // options
})
</script>
</body>
</html>

[ChrisCalabrese]

I figured it out. Thank you cloydlau!