fragment shaders rendered into a <canvas>
using patricio gonzalez's glslCanvas
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
// modified by Paloma Kop 2023
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
void main(){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(0.0);
vec2 pos = vec2(0.5)-st;
float r = length(pos)*2.496;
float a = atan(pos.y,pos.x);
float f = cos(a*10.0+smoothstep(sin(u_time)/2.0-1.0,0.984,r)*100.0+u_time);
// f = abs(cos(a*3.));
// f = abs(cos(a*2.5))*.5+.3;
// f = abs(cos(a*12.)*sin(a*3.))*.8+.1;
// f = smoothstep(-.5,1., cos(a*10.))*0.2+0.5;
color = vec3( 1.-smoothstep(f,f+0.02,r) );
gl_FragColor = vec4(color, 1.0);
}
this one has mouse interaction (mouseX controls frequency, mouseY controls phase and wiggliness)
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
vec3 colorA = vec3(0.912,0.078,0.026);
vec3 colorB = vec3(0.007,0.079,1.000);
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec2 sm = u_mouse.xy/u_resolution.xy;
vec3 color = vec3(0.0);
color = mix(colorA, colorB, sin(st.x*50.0*(sm.x+0.2)+u_time*3.0+sm.y*7.0+sin(st.y*30.0*sm.y+sm.y*30.0))+0.5)/1.5;
gl_FragColor = vec4(color,1.0);
}