JSFiddle - React, Tailwind, and code Playground

by mathiasisaksen

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
</head>
<body>
</body>

</html>

CSS

html, body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: black;
            overflow: hidden;
        }

        main {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 100%;
        }

        canvas {
            display: block;
        }

        .tall-canvas {
            height: 100%!important;
            width: auto!important;
        }

        .wide-canvas {
            width: 100%!important;
            height: auto!important;
        }

JavaScript

(()=>{var t={919:(t,e,n)=>{const{makeNoise2D:o}=n(234);function r(t,e){this.scale=t.scale||1,this.octaves=t.octaves||4,this.falloff=t.falloff||.5,this.lacunarity=t.lacunarity||2,this.offset=[1+9*e(),1+9*e()],this.functions=Array(this.octaves).fill().map((()=>o(Math.floor(4294967296*e())))),this.rescaleFunction=t=>t}r.prototype.evaluate=function(t,e){void 0===e&&([t,e]=t);const[n,o]=this.offset;let r=0,i=1,a=0,s=this.scale;for(let l=0;l<this.octaves;l++)r+=i*(1+this.functions[l](s*t+n,s*e+o))/2,a+=i,i*=this.falloff,s*=this.lacunarity;return r/=a,this._rescaleValue(r)},r.prototype.evaluateGradient=function(t,e,n=.001){return void 0===e&&([t,e]=t),[(this.evaluate(t+n,e)-this.evaluate(t-n,e))/(2*n),(this.evaluate(t,e+n)-this.evaluate(t,e-n))/(2*n)]},r.prototype.linearRescale=function(t,e=100){const n=this._createGridEvaluator(t,e);let o=1/0,r=-1/0;for(;;){const t=n.next().value;if(void 0===t)break;o>t&&(o=t),r<t&&(r=t)}this.rescaleFunction=t=>(t-o)/(r-o)},r.prototype.uniformRescale=function(t,e=100){const n=this._createGridEvaluator(t,e);let o=0,r=0,i=0;for(;;){const t=n.next().value;if(void 0===t)break;o+=t,r+=t*t,i++}const a=o/i,s=Math.sqrt((r/i-a*a)*i/(i-1));this.rescaleFunction=t=>1/(Math.exp(-1.675*(t-a)/s)+1)},r.prototype._createGridEvaluator=function*(t,e=100){const[[n,o],[r,i]]=t,a=o-n,s=i-r,l=a/s;let h,u;l>1?(h=e,u=Math.round(e/l)):(u=e,h=Math.round(l*e));const f=a/h,c=s/u;for(let t=0;t<u;t++)for(let e=0;e<h;e++){const o=n+(e+.5)*f,i=r+(t+.5)*c,a=this.evaluate(o,i);yield a}},r.prototype._rescaleValue=function(t){const e=this.rescaleFunction(t);return e<0?0:e>1?1:e},t.exports=r},639:t=>{function...