<!-- Shader Session with Nicole Vella | 2022
 *
 * Nicole: 
 * https://www.instagram.com/nicole.vella.art/
 *
 * We're curiouslyminded:
 * https://www.curiouslyminded.xyz
 * https://www.twitch.tv/curiouslyminded
 * https://www.youtube.com/curiouslyminded -->

<div id="shadercollab"></div>
<script id="vertex" type="x-shader/x-vertex">
	void main() { gl_Position = vec4(position, 1.0); }
</script>

<script id="fragment" type="x-shader/x-fragment">
precision highp float;

uniform vec2 u_resolution;
uniform float u_time;
	
// Simplex 2D noise
// https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83
vec3 spermute(vec3 x){
    return mod(((x*34.)+1.)*x,289.);
}
	
float snoise(vec2 v){
    const vec4 C=vec4(.211324865405187,.366025403784439,
    -.577350269189626,.024390243902439);
    vec2 i=floor(v+dot(v,C.yy));
    vec2 x0=v-i+dot(i,C.xx);
    vec2 i1;
    i1=(x0.x>x0.y)?vec2(1.,0.):vec2(0.,1.);
    vec4 x12=x0.xyxy+C.xxzz;
    x12.xy-=i1;
    i=mod(i,289.);
    vec3 p=spermute(spermute(i.y+vec3(0.,i1.y,1.))
    +i.x+vec3(0.,i1.x,1.));
    vec3 m=max(.5-vec3(dot(x0,x0),dot(x12.xy,x12.xy),
    dot(x12.zw,x12.zw)),0.);
    m=m*m;
    m=m*m;
    vec3 x=2.*fract(p*C.www)-1.;
    vec3 h=abs(x)-.5;
    vec3 ox=floor(x+.5);
    vec3 a0=x-ox;
    m*=1.79284291400159-.85373472095314*(a0*a0+h*h);
    vec3 g;
    g.x=a0.x*x0.x+h.x*x0.y;
    g.yz=a0.yz*x12.xz+h.yz*x12.yw;
    return 130.*dot(m,g);
}

//
// GLSL textureless classic 2D & 3D noise "cnoise",
// Author:  Stefan Gustavson ([email protected])
// Version: 2011-08-22
//
// Many thanks to Ian McEwan of Ashima Arts for the
// ideas for permutation and gradient selection.
//
// Copyright (c) 2011 Stefan Gustavson. All rights reserved.
// Distributed under the MIT license. See LICENSE file.
// https://github.com/stegu/webgl-noise
//

vec3 mod289(vec3 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 mod289(vec4 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 permute(vec4 x) {
  return mod289(((x*34.0)+10.0)*x);
}

vec4 taylorInvSqrt(vec4 r) {
  return 1.79284291400159 - 0.85373472095314 * r;
}

vec3 fade(vec3 t) {
  return t*t*t*(t*(t*6.0-15.0)+10.0);
}

vec2 fade(vec2 t) {
  return t*t*t*(t*(t*6.0-15.0)+10.0);
}

// Classic Perlin noise
// https://github.com/ashima/webgl-noise
float cnoise(vec2 P) {
  vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);
  vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);
  Pi = mod289(Pi); // To avoid truncation effects in permutation
  vec4 ix = Pi.xzxz;
  vec4 iy = Pi.yyww;
  vec4 fx = Pf.xzxz;
  vec4 fy = Pf.yyww;

  vec4 i = permute(permute(ix) + iy);

  vec4 gx = fract(i * (1.0 / 41.0)) * 2.0 - 1.0 ;
  vec4 gy = abs(gx) - 0.5 ;
  vec4 tx = floor(gx + 0.5);
  gx = gx - tx;

  vec2 g00 = vec2(gx.x,gy.x);
  vec2 g10 = vec2(gx.y,gy.y);
  vec2 g01 = vec2(gx.z,gy.z);
  vec2 g11 = vec2(gx.w,gy.w);

  vec4 norm = taylorInvSqrt(vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11)));
  g00 *= norm.x;  
  g01 *= norm.y;  
  g10 *= norm.z;  
  g11 *= norm.w;  

  float n00 = dot(g00, vec2(fx.x, fy.x));
  float n10 = dot(g10, vec2(fx.y, fy.y));
  float n01 = dot(g01, vec2(fx.z, fy.z));
  float n11 = dot(g11, vec2(fx.w, fy.w));

  vec2 fade_xy = fade(Pf.xy);
  vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);
  float n_xy = mix(n_x.x, n_x.y, fade_xy.y);
  return 2.3 * n_xy;
}

// Classic Perlin noise
float cnoise(vec3 P) {
  vec3 Pi0 = floor(P); // Integer part for indexing
  vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
  Pi0 = mod289(Pi0);
  Pi1 = mod289(Pi1);
  vec3 Pf0 = fract(P); // Fractional part for interpolation
  vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
  vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
  vec4 iy = vec4(Pi0.yy, Pi1.yy);
  vec4 iz0 = Pi0.zzzz;
  vec4 iz1 = Pi1.zzzz;

  vec4 ixy = permute(permute(ix) + iy);
  vec4 ixy0 = permute(ixy + iz0);
  vec4 ixy1 = permute(ixy + iz1);

  vec4 gx0 = ixy0 * (1.0 / 7.0);
  vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
  gx0 = fract(gx0);
  vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
  vec4 sz0 = step(gz0, vec4(0.0));
  gx0 -= sz0 * (step(0.0, gx0) - 0.5);
  gy0 -= sz0 * (step(0.0, gy0) - 0.5);

  vec4 gx1 = ixy1 * (1.0 / 7.0);
  vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
  gx1 = fract(gx1);
  vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
  vec4 sz1 = step(gz1, vec4(0.0));
  gx1 -= sz1 * (step(0.0, gx1) - 0.5);
  gy1 -= sz1 * (step(0.0, gy1) - 0.5);

  vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
  vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
  vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
  vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
  vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
  vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
  vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
  vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);

  vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
  g000 *= norm0.x;
  g010 *= norm0.y;
  g100 *= norm0.z;
  g110 *= norm0.w;
  vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
  g001 *= norm1.x;
  g011 *= norm1.y;
  g101 *= norm1.z;
  g111 *= norm1.w;

  float n000 = dot(g000, Pf0);
  float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
  float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
  float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
  float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
  float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
  float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
  float n111 = dot(g111, Pf1);

  vec3 fade_xyz = fade(Pf0);
  vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
  vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
  float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); 
  return 2.2 * n_xyz;
}
	
// https://www.shadertoy.com/view/ll2GD3
vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ){
    return a + b*cos( 6.28318*(c*t+d) );
}
	
vec2 getRadialUv(vec2 uv) {
    float a = atan(uv.x, uv.y);
    float r = 1.0-length(uv);
    float n = cnoise(uv+u_time*.1);
    vec2 s = r * vec2(cos(a),sin(a));
    return s;
}
	
#define smoothStair(x, s, f) x * s - sin(x*f);
	
float drawCicle(vec2 st, vec2 pos, float size, float blur) {
	float c = distance(st,pos);
	c = step(size,c);
	return 1.-c;
}
	
float noiseLoop(vec2 st, float loopLength, float noiseSpeed, float noiseScale) {
    // create speed based on time
    noiseSpeed = u_time * noiseSpeed;

    // create loop segment and position
    // using fract gives us a continous count from 0 to 1
    float loopSegment = fract(noiseSpeed);
    // to get the position of the noise, we divide the looplength by the framecount
    // this gives us some vale between 0% (the beginning of the loop) and 100% (the end of the loop)
    float noisePos = loopLength*loopSegment;

    // create our noise fields
    float n1 = cnoise(noiseScale*vec3(st.x,st.y,noisePos));
    // offset the second noise field by the length of the loop
    float n2 = cnoise(noiseScale*vec3(st.x,st.y,noisePos-loopLength));
 
    // mix the noise together at the 
    float loop = mix(n1,n2,loopSegment)*.5+.5;
   // return loop;
    return (loop > 0.5 ? 1. : 0. );
}

void main() {
	vec2 st = gl_FragCoord.xy / u_resolution;
	
	float time = u_time;
	
	vec3 color = vec3(1.0);
	
	float animation1 = smoothStair(time*.5,1.0,.9);
	float animation2 = smoothStair(time*.5,2.0,1.9);
	float animation3 = smoothStair(time*.25,3.0,2.9);
	
	vec2 st2 = st;
	
	st -= 0.5;
	
//	st = getRadialUv(st);
	
//	st2 = getRadialUv(st2);
	
//	st.x = abs(1.0 -st.x * 2.);
//	st2.x = abs(1.0 -st2.x * 2.);
	
	float circle1 = drawCicle(
		vec2(
			cnoise(10.+9.*st+vec2(st.x,animation1)),
			cnoise(10.+10.*st)
		),
		vec2(.5),
			1.15,
			3.0
	);
	
	float circle2 = drawCicle(
		vec2(
			cnoise(30.+12.*st+vec2(st.x,animation2)),
			cnoise(30.+10.*st)
		),
		vec2(.5),
			.85,
			3.0
	);
	
float circle3 = drawCicle(
		vec2(
			cnoise(50.+3.*st+vec2(st.x,animation3)),
			cnoise(50.+10.*st)
		),
		vec2(.5),
			.85,
			3.0
	);
	
	float circle4 = drawCicle(
		vec2(
			cnoise(70.+1.*st+vec2(st.x,animation3)),
			cnoise(70.+10.*st)
		),
		vec2(.5),
			.85,
			3.0
	);
	
	float circle5 = drawCicle(
		vec2(
			cnoise(10.+9.*st+vec2(st2.x,animation1)),
			cnoise(10.+10.*st2)
		),
		vec2(.5),
			.35,
			3.0
	);
	
	vec3 red = vec3(1.0,0.,0.);
	vec3 gradient = vec3(0.5,st);
	vec3 pastel = vec3(vec2(pow(st,st)),1.0);
	vec3 gradient2 = pal(
		cnoise(10.+.5*vec3(st.x,st.y,time)), 
		vec3(1.458, 0.448, 0.500),
		vec3(-0.222, 0.178, 0.500),
		vec3(0.398, 0.398, 1.000),
		vec3(0.948, 0.333, 0.667)
	);
	vec3 gradient3 = vec3(st,1.0);

	color = mix(color,gradient2,circle1);
	
	color = pow(mix(color,gradient,circle2),color);
	
	color = mix(color,pastel,circle3);
	
	color *= mix(color,gradient3,circle4);
	
	color = mix(color,pastel,circle5);
	
	//float n = cnoise(5.*vec3(st,time*.1))*.5+.5;
	
	// float n = noiseLoop(vec2(st.y,noiseLoop(st,6.0,0.01,10.)), 3.0, .01, 10.0);
	
	// n = n < 0.5 ? 1.0 : 0.;
	
	gl_FragColor = vec4(color, 1.0);
    // gl_FragColor = vec4(vec3(n), 1.0);
}
</script>