Flowing #4

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Water Flowing</title>
<script type="text/javascript">
let pal_ind,palettes=[["#f9f0de","#8e8780","#fab515","#d7312e","#2a71af","#ad7347","#242424"],["#f299a5","#084698","#1a86c8","#74afe0","#a0d6da","#f8f9f2"],["#bfb7af","#d8ccc0","#f2e2d5","#453f3b","#f2d7cd"],["#fffeff","#a58c68","#2f2a26","#8c847a","#df3f36"],["#281740","#f29d35","#04504e","#f27405","#f24c3d"],["#fbedcc","#e8ba91","#cc9665","#834e3e","#d2746e"],["#eae6e2","#d9865a","#4f616f","#f2bfac","#d96055"],["#364161","#d8c3a9","#cbad71","#5a7a8f","#c89b6b"],["#d1d2aa","#5c7346","#eeaf24","#d9771e","#d7481e"],["#1c2137","#284555","#de4639","#db6528","#f5ad0d"],["#e6e4cc","#bf8c60","#d03814","#97632b","#edbeaa"],["#8ecae6","#219ebc","#023047","#ffb703","#fb8500"],["#264653","#2a9d8f","#e9c46a","#f4a261","#e76f51"],["#e74645","#fb7756","#facd60","#fff86c","#5fbcba"],["#454d66","#309975","#58b368","#dad873","#efeeb4"],["#361d32","#543c52","#f55951","#edd2cb","#f1e8e6"],["#12492f","#14606b","#f56038","#f7a325","#ffca7a"],["#29338f","#4675d7","#48d6d2","#81e9e6","#fefcbf"],["#f9b4ab","#fdebd3","#264e70","#679186","#bbd4ce"],["#ffa822","#134e6f","#ff6150","#1ac0c6","#dee0e6"]];
</script>
<script id="snippet-random-code" type="text/javascript">
let seed=window.location.href.split("/").find(e=>e.includes("i0"));if(null==seed){const b="0123456789abcdefghijklmnopqrstuvwsyz";seed=new URLSearchParams(window.location.search).get("seed")||Array(64).fill(0).map(e=>b[Math.random()*b.length|0]).join("")+"i0"}else{let t="seed=";for(let e=0;e<seed.length-t.length;++e)if(seed.substring(e,e+t.length)==t){seed=seed.substring(e+t.length);break}}function cyrb128(l){let n=1779033703,i=3144134277,a=1013904242,s=2773480762;for(let e=0,t;e<l.length;e++)n=i^Math.imul(n^(t=l.charCodeAt(e)),597399067),i=a^Math.imul(i^t,2869860233),a=s^Math.imul(a^t,951274213),s=n^Math.imul(s^t,2716044179);return n=Math.imul(a^n>>>18,597399067),i=Math.imul(s^i>>>22,2869860233),a=Math.imul(n^a>>>17,951274213),s=Math.imul(i^s>>>19,2716044179),[(n^i^a^s)>>>0,(i^n)>>>0,(a^n)>>>0,(s^n)>>>0]}function sfc32(t,l,n,i){return function(){var e=(t>>>=0)+(l>>>=0)|0;return t=l^l>>>9,l=(n>>>=0)+(n<<3)|0,n=(n=n<<21|n>>>11)+(e=e+(i=(i>>>=0)+1|0)|0)|0,(e>>>0)/4294967296}}let mathRand=sfc32(...cyrb128(seed));
</script>
<style>
html {
background: black;
height: 100%;
}
body {
height: 100%;	
margin: 0;
padding: 0px;
}
canvas {
padding: 0;
margin: auto;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
function Palette(rand) {
pal_ind = Math.floor(palettes.length*rand);
return pal_ind;
}
function Grid(rand) {
let grid = Math.floor(3*rand);
return grid;
}
function Scale(rand) {
let scale = 1.0 + Math.floor(4*rand);
return scale;
}
function Detail(rand) {
let det = Math.floor(3*rand);
return det;
}
function Shade(rand) {
let shade = Math.floor(2*rand);
return shade;
}
window.$generativeTraits = {
"Palette": Palette(mathRand()),
"Grid": Grid(mathRand()),
"Scale": Scale(mathRand()),
"Detail": Detail(mathRand()),
"Shading": Shade(mathRand()),
}
console.log(window.$generativeTraits)
let gl,program,texturePal,canvas_size_w=1080,canvas_size_h=1080,texture_size=1080;const numColors=4096;let timeLocation,textureSizeLocation,scaleLocation,detail,shade,scale,grid,dd=[0,0,0],gg=[0,0,0],vs=[],difficulty,size_on_disk,usage,maxmempool,size_1,total_fee;const glsl=e=>e;function init(){console.log(seed);var e=generateColors(palettes[pal_ind]),t=(grid=window.$generativeTraits.Grid,scale=window.$generativeTraits.Scale,detail=window.$generativeTraits.Detail,shade=window.$generativeTraits.Shading,dd[detail]=1,gg[grid]=1,vs=[[2,2.66,3.33,4],[2,2.33,2.66,3],[1,1.33,1.66,2]],gl=canvas.getContext("webgl"),`,S smoothstep,V vec3,W vec2,F float
`.replace(/,/g,`
#define `)+`
#define PI 3.1415926538
#define PI2 6.283185308
precision highp F;
uniform sampler2D u_sp;uniform W u_res;uniform F u_t;uniform F u_rs;uniform int u_sh;uniform F u_sc;
F hsh(F p){p+=u_rs;p=fract(p*0.011);p*=p+7.5;p*=p+p;return fract(p);}
F hsh(W p){p+=u_rs;V p3=fract(V(p.xyx)*0.13);p3+=dot(p3,p3.yzx+3.333);return fract((p3.x+p3.y)*p3.z);}
F nos(W x){W i=floor(x);W f=fract(x);F a=hsh(i);F b=hsh(i+W(1.0,0.0));F c=hsh(i+W(0.0,1.0));F d=hsh(i+W(1.0,1.0));W u=f*f*(3.0-2.0*f);return mix(a,b,u.x)+(c-a)*u.y*(1.0-u.x)+(d-b)*u.x*u.y;}
F nos(V x){const V sp=V(110,241,171);V i=floor(x);V f=fract(x);F n=dot(i,sp);V u=f*f*(3.0-2.0*f);return mix(mix(mix(hsh(n+dot(sp,V(0,0,0))),hsh(n+dot(sp,V(1,0,0))),u.x),mix( hsh(n+dot(sp,V(0,1,0))),hsh(n+dot(sp,V(1,1,0))),u.x),u.y),mix(mix( hsh(n+dot(sp,V(0,0,1))),hsh(n+dot(sp,V(1,0,1))),u.x),mix( hsh(n+dot(sp,V(0,1,1))),hsh(n+dot(sp,V(1,1,1))),u.x),u.y),u.z);}
W rn2(W p){return W(hsh(dot(p,W(127.1,311.7))),hsh(dot(p,W(269.5,183.3))));}
F cel(W p){W i_st=floor(p);W f_st=fract(p);F md=10.;for (int j=-1; j<=1; j++ ){for (int i=-1; i<=1; i++ ){W nei=W(F(i),F(j));W point=rn2(i_st+nei);point=0.5+0.5*sin(PI2*point);W diff=nei+point-f_st;F dist=length(diff)*length(diff);if( dist < md ){md=dist;}}}return md;}
F fbm(W x){F v=0.0;F a=0.5;W shift=W(100);mat2 rot=mat2(0.88,0.48,-0.48,0.88);for (int i=0; i < 2; ++i){v+=a*nos(x);x=rot*x*2.0+shift;a*=0.5;}return v;}
F fbm(V x){F v=0.0;F a=0.5;V shift=V(100);for (int i=0; i < 2; ++i){v+=a*nos(x);x=x*2.0+shift;a*=0.5;}return v;}
W map(W p,F time){for( int i=0; i<4; i++ ){F a=nos(p*0.6)*2.0*PI+time;p+=0.1*W(cos(a),sin(a));}return p;}
F stm;V dd=V(0);V gg=V(0);
F g(W v,W st,F ns){F sc=1080./u_res.x;W f;v=gg[0]*v+gg[1]*floor(v*6.0)/6.0+gg[2]*v;f=v*gg[0]+fract(v)*gg[1]+mod(v,0.1)*gg[2];stm=gg[0]*0.1/ns+gg[1]*0.14/sqrt(1.+ns)+gg[2]*0.4/sqrt(ns);F gg=dd[0]*(0.04*fbm(st*sc*0.1*u_res.x)-0.02)*1.2;gg+=dd[1]*(0.04*cel(st*sc*0.08*u_res.x)-0.02)*1.2;gg+=dd[2]*(0.04*fbm(st*sc*0.1*u_res.x)+0.04*cel(st*sc*0.08*u_res.x)-0.04)*1.2;F g1=(fbm(V(v,0.0*u_t)+4.0*fbm(V(v,0.0*u_t))+4.0*fbm(V(f,0.2*u_t)+4.0*fbm(V(f,0.2*u_t))))+gg);F stp=stm*length(f);F pct=0.3;F g2=S(pct-stp,pct,g1)-S(pct,pct+stp,g1);pct=0.4;g2+=S(pct-stp,pct,g1)-S(pct,pct+stp,g1);pct=0.5;g2+=S(pct-stp,pct,g1)-S(pct,pct+stp,g1);pct=0.6;g2+=S(pct-stp,pct,g1)-S(pct,pct+stp,g1);return (1.0-g2)*g1+g2+0.05*fbm(st*u_res.x)-0.025;}
void main(){W st=gl_FragCoord.xy/u_res.xy;F ns=u_sc;W v=map(st*ns,0.5*u_t);dd[0]=F(${dd[0]});dd[1]=F(${dd[1]});dd[2]=F(${dd[2]});gg[0]=F(${gg[0]});gg[1]=F(${gg[1]});gg[2]=F(${gg[2]});V color=V(0.0);color+=g(v,st,ns);const W h=W(0.001,0);V nrm=normalize(V(g(v-h.xy,st,ns)-g(v+h.xy,st,ns),2.0*h.x,g(v-h.yx,st,ns)-g(v+h.yx,st,ns)));F index=clamp(color.g,0.0,1.0)*255.0;gl_FragColor=texture2D(u_sp,W((index+0.5)/256.0,0.5));gl_FragColor.rgb=0.6*gl_FragColor.rgb+0.2*gl_FragColor.rrr+0.2*gl_FragColor.ggg+0.2*gl_FragColor.bbb;if (u_sh == 1){gl_FragColor.rgb+=(0.1*nrm.rrr+0.1*nrm.ggg+0.1*nrm.bbb);gl_FragColor.rgb*=0.9;gl_FragColor.rgb-=0.05;}gl_FragColor.rgb=(gl_FragColor.rgb-0.5)/(1.0-0.3)+0.5;F sat=0.2;F average=(gl_FragColor.r+gl_FragColor.g+gl_FragColor.b)/3.0;if (sat > 0.0){gl_FragColor.rgb+=(average-gl_FragColor.rgb)*(1.0-1.0/(1.001-sat));}else{gl_FragColor.rgb+=(average-gl_FragColor.rgb)*(-sat);}
}`),t=(compile=(e,t,r)=>{var o=e.createShader(e.VERTEX_SHADER),t=(e.shaderSource(o,t),e.compileShader(o),e.createShader(e.FRAGMENT_SHADER)),r=(e.shaderSource(t,r),e.compileShader(t),e.createProgram());return e.attachShader(r,o),e.attachShader(r,t),e.linkProgram(r),e.useProgram(r),r},program=compile(gl,`
attribute vec4 a_pos;
void main(){
gl_Position=a_pos;
}
`,t),gl.createBuffer()),t=(gl.bindBuffer(gl.ARRAY_BUFFER,t),gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,1,1]),gl.STATIC_DRAW),gl.getAttribLocation(program,"a_pos")),t=(gl.enableVertexAttribArray(t),gl.vertexAttribPointer(t,2,gl.FLOAT,!1,0,0),timeLocation=gl.getUniformLocation(program,"u_t"),gl.getUniformLocation(program,"u_sp")),r=gl.getUniformLocation(program,"u_rs"),o=(textureSizeLocation=gl.getUniformLocation(program,"u_res"),gl.getUniformLocation(program,"u_sh"));scaleLocation=gl.getUniformLocation(program,"u_sc"),gl.uniform1f(timeLocation,0),gl.uniform1f(r,.5*canvas_size_w*mathRand()),gl.uniform1i(o,shade),gl.uniform1f(scaleLocation,vs[grid][scale-1]),texturePal=gl.createTexture(),gl.bindTexture(gl.TEXTURE_2D,texturePal),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.NEAREST),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.NEAREST),gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,numColors,1,0,gl.RGBA,gl.UNSIGNED_BYTE,e),gl.uniform1i(t,0),gl.activeTexture(gl.TEXTURE0),gl.bindTexture(gl.TEXTURE_2D,texturePal),gl.clearColor(0,0,0,1),window.addEventListener("keydown",onDocumentKeyDown,!1),window.addEventListener("resize",onWindowResize,!1),onWindowResize()}function renderLoop(e){e*=.001,gl.uniform1f(timeLocation,.05*e),gl.uniform2f(textureSizeLocation,texture_size,texture_size),gl.viewport(0,0,canvas_size_w,canvas_size_h),gl.clear(gl.COLOR_BUFFER_BIT),gl.drawArrays(gl.TRIANGLE_STRIP,0,4),requestAnimationFrame(renderLoop)}function onWindowResize(){canvas_size_w=window.innerWidth,canvas_size_h=window.innerHeight,texture_size=canvas_size_w>=canvas_size_h?canvas_size_h:canvas_size_w,gl.canvas.width=canvas_size_w,gl.canvas.height=canvas_size_h,gl.uniform2f(textureSizeLocation,texture_size,texture_size),gl.viewport(0,0,canvas_size_w,canvas_size_h),gl.clear(gl.COLOR_BUFFER_BIT),gl.drawArrays(gl.TRIANGLE_STRIP,0,4)}function onDocumentKeyDown(e){83===e.which&&(gl.canvas.width=3840,gl.canvas.height=2160,texture_size=2160,gl.uniform2f(textureSizeLocation,texture_size,texture_size),gl.viewport(0,0,gl.canvas.width,gl.canvas.height),gl.clear(gl.COLOR_BUFFER_BIT),gl.drawArrays(gl.TRIANGLE_STRIP,0,4),imgData=gl.canvas.toDataURL("image/png"),saveFile(imgData.replace("image/png","image/octet-stream"),"gl-"+seed+".png"),onWindowResize())}init(),requestAnimationFrame(renderLoop);let saveFile=function(e,t){var r=document.createElement("a");"string"==typeof r.download?(document.body.appendChild(r),r.download=t,r.href=e,r.click(),document.body.removeChild(r)):location.replace(uri)};function generateColors(t){var r=[];for(let e=0;e<t.length-1;e++)r.push(t[e]),r.push("#242424");r.push(t[t.length-1]);var o=numColors/(r.length-1),g=r.map(e=>{return[parseInt(e.substring(1,3),16),parseInt(e.substring(3,5),16),parseInt(e.substring(5,7),16)]}),a=new Uint8Array(4*numColors);for(let e=0;e<numColors;e++){var i=Math.floor(e/o),n=g[i],s=g[i+1],i=(e-i*o)/o,l=n[0]+i*(s[0]-n[0]),c=n[1]+i*(s[1]-n[1]),i=n[2]+i*(s[2]-n[2]);a[4*e]=Math.round(l),a[4*e+1]=Math.round(c),a[4*e+2]=Math.round(i),a[4*e+3]=255}return a}
</script>
</body>
</html>

Flowing #37

Flowing #42

Flowing #86

Inscription #18592340

More from this Collection