Rays #53

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>"Rays" by Paweł Dudko | pdudko.com</title>
   

    <script id="snippet-random-code" type="text/javascript">
        // not editable
        let seed = window.location.href.split('/').find(t => t.includes('i0'));

        if (seed == null) {
            const alphabet = "0123456789abcdefghijklmnopqrstuvwsyz";
            seed = new URLSearchParams(window.location.search).get("seed") || Array(64).fill(0).map(_ => alphabet[(Math.random() * alphabet.length) | 0]).join('') + "i0";
        } else {
            let pattern = "seed=";
            for (let i = 0; i < seed.length - pattern.length; ++i) {
                if (seed.substring(i, i + pattern.length) == pattern) {
                    seed = seed.substring(i + pattern.length);
                    break;
                }
            }
        }

        function cyrb128($) {
            let _ = 1779033703, u = 3144134277, i = 1013904242, l = 2773480762;
            for (let n = 0, r; n < $.length; n++) _ = u ^ Math.imul(_ ^ (r = $.charCodeAt(n)), 597399067), u = i ^ Math.imul(u ^ r, 2869860233), i = l ^ Math.imul(i ^ r, 951274213), l = _ ^ Math.imul(l ^ r, 2716044179);
            return _ = Math.imul(i ^ _ >>> 18, 597399067), u = Math.imul(l ^ u >>> 22, 2869860233), i = Math.imul(_ ^ i >>> 17, 951274213), l = Math.imul(u ^ l >>> 19, 2716044179), [(_ ^ u ^ i ^ l) >>> 0, (u ^ _) >>> 0, (i ^ _) >>> 0, (l ^ _) >>> 0]
        }

        function sfc32($, _, u, i) {
            return function () {
                u >>>= 0, i >>>= 0;
                var l = ($ >>>= 0) + (_ >>>= 0) | 0;
                return $ = _ ^ _ >>> 9, _ = u + (u << 3) | 0, u = (u = u << 21 | u >>> 11) + (l = l + (i = i + 1 | 0) | 0) | 0, (l >>> 0) / 4294967296
            }
        }

        let mathRand = sfc32(...cyrb128(seed));

    </script>
    <style>
        body {
            margin: 0;
            padding: 0;     
            overflow: hidden;
        }
    </style>
</head>
<body>
  <canvas id="myCanvas"></canvas>


<script type="text/javascript">
// code ↓
console.log("seed:",seed);class Rnd{rD(){return mathRand()}rN(r,t){return r+(t-r)*this.rD()}rI(r,t){return Math.floor(this.rN(r,t+1))}rB(r){return this.rD()<r}}const R=new Rnd;class Perlin{constructor(){this.R=new Rnd,this.grad3=[[1,1,0],[-1,1,0],[1,-1,0],[-1,-1,0],[1,0,1],[-1,0,1],[1,0,-1],[-1,0,-1],[0,1,1],[0,-1,1],[0,1,-1],[0,-1,-1]],this.p=[];for(var r=0;r<256;r++)this.p[r]=Math.floor(256*this.R.rD());for(this.perm=[],r=0;r<512;r++)this.perm[r]=this.p[255&r];this.simplex=[[0,1,2,3],[0,1,3,2],[0,0,0,0],[0,2,3,1],[0,0,0,0],[0,0,0,0],[0,0,0,0],[1,2,3,0],[0,2,1,3],[0,0,0,0],[0,3,1,2],[0,3,2,1],[0,0,0,0],[0,0,0,0],[0,0,0,0],[1,3,2,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[1,2,0,3],[0,0,0,0],[1,3,0,2],[0,0,0,0],[0,0,0,0],[0,0,0,0],[2,3,0,1],[2,3,1,0],[1,0,2,3],[1,0,3,2],[0,0,0,0],[0,0,0,0],[0,0,0,0],[2,0,3,1],[0,0,0,0],[2,1,3,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[2,0,1,3],[0,0,0,0],[0,0,0,0],[0,0,0,0],[3,0,1,2],[3,0,2,1],[0,0,0,0],[3,1,2,0],[2,1,0,3],[0,0,0,0],[0,0,0,0],[0,0,0,0],[3,1,0,2],[0,0,0,0],[3,2,0,1],[3,2,1,0]]}dot(r,t,e){return r[0]*t+r[1]*e}noise(r,t){var e,i,a=(r+t)*(.5*(Math.sqrt(3)-1)),o=Math.floor(r+a),l=Math.floor(t+a),n=(3-Math.sqrt(3))/6,s=(o+l)*n,g=r-(o-s),c=t-(l-s);g>c?(e=1,i=0):(e=0,i=1);var d=g-e+n,f=c-i+n,p=g-1+2*n,A=c-1+2*n,m=255&o,F=255&l,E=this.perm[m+this.perm[F]]%12,u=this.perm[m+e+this.perm[F+i]]%12,R=this.perm[m+1+this.perm[F+1]]%12,h=.5-g*g-c*c,B=.5-d*d-f*f,D=.5-p*p-A*A;return 70*((h<0?0:(h*=h)*h*this.dot(this.grad3[E],g,c))+(B<0?0:(B*=B)*B*this.dot(this.grad3[u],d,f))+(D<0?0:(D*=D)*D*this.dot(this.grad3[R],p,A)))}}const perlin=new Perlin;function map(r,t,e,i,a){return i+(a-i)*(r-t)/(e-t)}let bckCol,dim=Math.min(window.innerWidth,window.innerHeight),spots=R.rI(10,25),radius=[],m=[],mOff=1e-4*R.rN(1,7),x=[],y=[],z=[],S=30,sRot=[],b=1,bOffset=R.rN(0,.005),bMag=1,xOff=[],yOff=[],pC=[],noiseFeat=mathRand()>.79,pFeat=R.rI(1,24),angleFeat=mathRand()>.87?0:mathRand()<.1?1:2,colorBackground=R.rI(0,1);const PI=Math.PI,TWO_PI=2*PI;let blurV=[];blurV=blurV=0==angleFeat?[R.rN(0,R.rN(0,1)),0]:1==angleFeat?[0,R.rN(0,R.rN(0,1))]:[R.rN(-.9,.9),R.rN(0,.9)],Math.pow(blurV[0],2)+Math.pow(blurV[1],2)<.18&&(blurV[0]>blurV[1]?blurV[0]+=.35:blurV[1]+=.35);const vs2="attribute vec2 a_position;attribute vec2 a_texCoord;uniform vec2 u_resolution;varying vec2 v_texCoord;\nvoid main(){vec2 clipSpace=a_position/u_resolution*2.0-1.0;gl_Position=vec4(clipSpace*vec2(1,-1),0,1);v_texCoord=a_texCoord;}",fs2="precision mediump float;uniform sampler2D u_image;varying vec2 v_texCoord;uniform vec2 dl;float rnd(vec3 scale,float seed){return fract(sin(dot(gl_FragCoord.xyz+seed,scale))*43758.5453+seed);}\nvoid main(){vec4 col=vec4(0.0);float tt=0.0;float off=rnd(vec3(12.9898,78.233,151.7182),0.0);for(float t=-30.0;t<=30.0;t++){float pc=(t+off-0.5)/30.0;float w=1.0-abs(pc);vec4 spl=texture2D(u_image,v_texCoord+dl*pc);spl.rgb*=spl.a;col+=spl*w;tt+=w;}gl_FragColor=col/tt;}";function setup(){for(i=0;i<spots;i++)radius[i]=R.rI(dim/100,dim/4),m[i]=R.rN(0,100),x[i]=R.rN(0,dim),y[i]=R.rN(0,dim),z[i]=R.rN(0,dim),xOff[i]=R.rN(4,10),yOff[i]=R.rN(4,10),sRot[i]=R.rN(0,TWO_PI);if(noiseFeat){let r=R.rI(20,200);for(i=0;i<r;i++)radius[spots+i]=R.rI(dim/400,dim/100),m[spots+i]=R.rN(0,10),y[spots+i]=R.rN(0,dim),z[spots+i]=R.rN(0,dim),x[spots+i]=R.rN(0,dim),xOff[spots+i]=R.rN(4,10),yOff[spots+i]=R.rN(4,10),sRot[spots+i]=R.rN(0,PI);spots+=r}angle=0==angleFeat?-PI/4:1==angleFeat?PI/4:R.rN(0,PI),p=pFeat;let r=1==p?["#0B1626","#2F1517","#4599B5","#A83882","#B4DDDD","#DBBEF2"]:2==p?["#0B1626","#2F1517","#4599B5","#A84B28","#B4DDDD","#C4E4A2"]:3==p?["#140000","#021c13","#003924","#005841","#750100","#990100","#d7bb30","#ccae00"]:4==p?["#1D1702","#2B0426","#650427","#AD2C00","#ddac0a","#c6c339","#E55130"]:5==p?["#200e36","#2B0426","#366290","#E27D52","#D3EAC0","#EDC557","#A8DAB9"]:6==p?["#200A0E","#080811","#006978","#170F08","#FBFBD6","#02E7CA","#729C9D"]:7==p?["#0A0A3D","#041604","#00C075","#87C000","#F9BD27","#FE8900","#FE003B"]:8==p?["#2A0002","#14060B","#664C4C","#EF3B01","#C11900","#A20005"]:9==p?["#000000","#0B1626","#68D1E6","#A6DAD7","#DFE3CB","#F2852F","#F96800"]:10==p?["#000000","#2F1517","#2AABCF","#6CBAB5","#C3CAA1","#E54508","#F32A00"]:11==p?["#200e36","#1A0210","#e04372","#5aa9e6","#4a4e69","#e04372","#e6b953"]:12==p?["#131303","#040207","#EFA72F","#EF7717","#77BFA7","#FBEAB5","#5D402E"]:13==p?["#1E1E3D","#002030","#009FAF","#CB323E","#EA6740","#ECC850"]:14==p?["#1E1E3D","#292B30","#592D2D","#DEB968","#FEFDDE","#3D4046"]:15==p?["#040207","#002030","#60A5AA","#FAEDC1","#5F5850","#C0B297"]:16==p?["#0F0F00","#030313","#9C8C68","#FDA5A1","#9E7B52","#E1CC92"]:17==p?["#0A0A1A","#120202","#FF8B00","#000000","#649EE8","#917FFF"]:18==p?["#020202","#0A0A1A","#09BEBB","#12737C","#28211E","#FB344B"]:19==p?["#000000","#200B01","#F92900","#F1D593","#85B7B0","#EFD7A7"]:20==p?["#000000","#1A1A1A","#F35C4B","#F6A440","#F9C965","#FDE4AC","#FFFFB1"]:21==p?["#0D1626","#091425","#051738","#204E75","#005151","#A0995F"]:22==p?["#000000","#091425","#764E37","#DF8D78","#F0D3AE","#C4DFDB"]:23==p?["#020202","#1A1A1A","#605274","#8DB1C4","#F8BE75","#E4615B","#D0303C"]:["#050505","#0F0F0F","#000000","#7F7F7F","#333333","#E5E5E5","#F0F0F0"];pC.push(...r);let t=pC.length-1;for(ii=0;ii<3;ii++)for(i=t-1;i<=t;i++)pC.push(pC[i])}var c=document.createElement("canvas");c.width=dim,c.height=dim;var ctx=c.getContext("2d");function draw(){for(ctx.beginPath(),ctx.rect(0,0,c.width,c.height),ctx.fillStyle=pC[colorBackground],ctx.fill(),i=0;i<spots;i++){let r=pC[i%pC.length],t=map(perlin.noise(m[i],i),-1,1,-dim/xOff[i],dim/xOff[i]),e=map(perlin.noise(m[i],i+200),-1,1,-dim/yOff[i],dim/yOff[i]),a=map(perlin.noise(10*m[i],i+999),-1,1,-radius[i]/20,radius[i]/20);ctx.beginPath(),ctx.arc(x[i]+t,y[i]+e,radius[i]+a,0,2*Math.PI),ctx.fillStyle=r,ctx.fill(),m[i]+=mOff}bMag=map(perlin.noise(b,spots),-1,1,.8,1.2),render(),b+=bOffset,window.requestAnimationFrame(draw)}function createShader(r,t,e){var i=r.createShader(t);if(r.shaderSource(i,e),r.compileShader(i),r.getShaderParameter(i,r.COMPILE_STATUS))return i;r.deleteShader(i)}function createProgram(r,t,e){var i=r.createProgram();if(r.attachShader(i,t),r.attachShader(i,e),r.linkProgram(i),r.getProgramParameter(i,r.LINK_STATUS))return i;r.deleteProgram(i)}function setRectangle(r,t,e,i,a){let o=t,l=t+i,n=e,s=e+a;r.bufferData(r.ARRAY_BUFFER,new Float32Array([o,n,l,n,o,s,o,s,l,n,l,s]),r.STATIC_DRAW)}setup(),window.requestAnimationFrame(draw);const canvasGL=document.getElementById("myCanvas");canvasGL.width=dim,canvasGL.height=dim;const gl=canvasGL.getContext("webgl");var vertexShader=createShader(gl,gl.VERTEX_SHADER,vs2),fragmentShader=createShader(gl,gl.FRAGMENT_SHADER,fs2),program=createProgram(gl,vertexShader,fragmentShader),positionLocation=gl.getAttribLocation(program,"a_position"),texcoordLocation=gl.getAttribLocation(program,"a_texCoord"),positionBuffer=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer),setRectangle(gl,0,0,c.width,c.height);var texcoordBuffer=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,texcoordBuffer),gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1]),gl.STATIC_DRAW);var texture=gl.createTexture();gl.bindTexture(gl.TEXTURE_2D,texture),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.NEAREST),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.NEAREST);var resolutionLocation=gl.getUniformLocation(program,"u_resolution"),blurVectorLocation=gl.getUniformLocation(program,"dl");function render(){if(gl){gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,ctx.canvas),gl.useProgram(program),gl.enableVertexAttribArray(positionLocation),gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);var r=gl.FLOAT,t=0;gl.vertexAttribPointer(positionLocation,2,r,false,0,t),gl.enableVertexAttribArray(texcoordLocation),gl.bindBuffer(gl.ARRAY_BUFFER,texcoordBuffer),gl.vertexAttribPointer(texcoordLocation,2,r,false,0,t),gl.uniform2f(resolutionLocation,gl.canvas.width,gl.canvas.height),gl.uniform2f(blurVectorLocation,blurV[0]*bMag,blurV[1]*bMag);var e=gl.TRIANGLES;t=0;gl.drawArrays(e,t,6)}else console.log("Needs WebGL to run")}gl.viewport(0,0,gl.canvas.width,gl.canvas.height);
// code ↑


// traits ↓
window.$generativeTraits = {
  "Palette": pFeat,  
  "Lights": spots,
  "Noisy": noiseFeat,
  "Angle": angleFeat == 0 ? 'horizontal' : angleFeat == 1 ? 'vertical' : 'diagonal'
}
console.log(window.$generativeTraits)
    // traits ↑


</script>


</body>
</html>


Rays #29

Rays #26

Rays #125

Inscription #274640

More from this Collection